Accordion webcomponent - DÁP Szolgáltatások

Accordion

Overview

The accordion component is a vertically stacked set of interactive headings that contain collapsible content sections. Each heading functions as a control that enables users to reveal or hide their associated content. Accordions are essential for organizing information hierarchically and reducing cognitive load by allowing users to focus on relevant content sections.

Design system docs

When to Use

✅ Use accordions when:

Organizing content into logical, collapsible sections
Reducing page length and improving scanability
Providing progressive disclosure of detailed information
Creating FAQ sections or help documentation
Grouping related settings or form sections

❌ Don't use accordions for:

Primary navigation (use navigation components)
Critical information that must always be visible
Content with complex interactions or nested interfaces
Short content that doesn't benefit from hiding

Examples

Basic Usage

The most common accordion pattern with simple expand/collapse functionality.

<dap-ds-stack>
<dap-ds-accordion>
  <span slot="heading">Getting Started</span>
  <dap-ds-typography variant="body">
    This section contains the basic information you need to begin using our services. 
    Follow the steps outlined here to set up your account and configure your preferences.
  </dap-ds-typography>
</dap-ds-accordion>

<dap-ds-accordion opened>
  <span slot="heading">Account Settings</span>
  <dap-ds-typography variant="body">
    Manage your personal information, notification preferences, and privacy settings. 
    You can update these settings at any time from your dashboard.
  </dap-ds-typography>
</dap-ds-accordion>
</dap-ds-stack>

Sizes & Visual Hierarchy

Choose accordion sizes based on content importance and interface density.

<dap-ds-stack>
<div>
  <dap-ds-typography variant="h4">Small accordion (default)</dap-ds-typography>
  <dap-ds-accordion size="sm">
    <span slot="heading">Compact Information</span>
    <dap-ds-typography variant="body">
      Use small accordions for secondary information or in dense interfaces 
      where space is at a premium.
    </dap-ds-typography>
  </dap-ds-accordion>
</div>

<div>
  <dap-ds-typography variant="h4">Large accordion</dap-ds-typography>
  <dap-ds-accordion size="lg">
    <span slot="heading">Important Information</span>
    <dap-ds-typography variant="body">
      Use large accordions for primary content sections or when you need 
      more visual prominence for important information.
    </dap-ds-typography>
  </dap-ds-accordion>
</div>
</dap-ds-stack>

Heading Levels & Semantic Structure

Proper heading levels ensure good document structure and accessibility.

<dap-ds-stack>
<dap-ds-typography variant="h2">Document Sections</dap-ds-typography>

<dap-ds-accordion headingLevel="3">
  <span slot="heading">Section 1: Overview</span>
  <dap-ds-typography variant="body">
    This is a top-level section with heading level 3, appropriate for main content areas.
  </dap-ds-typography>
</dap-ds-accordion>

<dap-ds-accordion headingLevel="4">
  <span slot="heading">Subsection 1.1: Details</span>
  <dap-ds-typography variant="body">
    This is a subsection with heading level 4, showing hierarchical content organization.
  </dap-ds-typography>
</dap-ds-accordion>

<dap-ds-accordion headingLevel="4">
  <span slot="heading">Subsection 1.2: Examples</span>
  <dap-ds-typography variant="body">
    Another subsection at the same level, maintaining proper document structure.
  </dap-ds-typography>
</dap-ds-accordion>
</dap-ds-stack>

Icon Positioning & Customization

Control icon placement and customize expand/collapse indicators.

<dap-ds-stack>
<div>
  <dap-ds-typography variant="h4">Icon positioning</dap-ds-typography>
  <dap-ds-stack>
    <dap-ds-accordion iconLocation="right">
      <span slot="heading">Icon on the right (default)</span>
      <dap-ds-typography variant="body">
        The default icon placement follows common UI patterns.
      </dap-ds-typography>
    </dap-ds-accordion>
    
    <dap-ds-accordion iconLocation="left">
      <span slot="heading">Icon on the left</span>
      <dap-ds-typography variant="body">
        Left-aligned icons can work better in some layout contexts.
      </dap-ds-typography>
    </dap-ds-accordion>
  </dap-ds-stack>
</div>

<div>
  <dap-ds-typography variant="h4">Custom icons</dap-ds-typography>
  <dap-ds-accordion>
    <span slot="icon-closed">
      <dap-ds-icon name="document-folder-line" size="16"></dap-ds-icon>
    </span>
    <span slot="icon-opened">
      <dap-ds-icon name="document-folder-open-line" size="16"></dap-ds-icon>
    </span>
    <span slot="heading">Custom Folder Icons</span>
    <dap-ds-typography variant="body">
      You can customize both the closed and opened state icons to match your content theme.
    </dap-ds-typography>
  </dap-ds-accordion>
</div>
</dap-ds-stack>

States & Feedback

Accordion states provide important feedback about interaction and content status.

<dap-ds-stack>
<div>
  <dap-ds-typography variant="h4">Interactive states</dap-ds-typography>
  <dap-ds-stack>
    <dap-ds-accordion>
      <span slot="heading">Normal State</span>
      <dap-ds-typography variant="body">
        Standard accordion behavior with normal interaction.
      </dap-ds-typography>
    </dap-ds-accordion>
    
    <dap-ds-accordion loading>
      <span slot="heading">Loading Content</span>
      <dap-ds-typography variant="body">
        Shows loading state when content is being fetched asynchronously.
      </dap-ds-typography>
    </dap-ds-accordion>
    
    <dap-ds-accordion disabled>
      <span slot="heading">Disabled Section</span>
      <dap-ds-typography variant="body">
        Content that is temporarily unavailable or restricted.
      </dap-ds-typography>
    </dap-ds-accordion>
  </dap-ds-stack>
</div>
</dap-ds-stack>

Variants & Styling

Different accordion variants for various interface contexts.

<dap-ds-stack>
<div>
  <dap-ds-typography variant="h4">Default variant</dap-ds-typography>
  <dap-ds-accordion variant="default">
    <span slot="heading">Standard Accordion</span>
    <dap-ds-typography variant="body">
      The default accordion style with standard borders and spacing.
    </dap-ds-typography>
  </dap-ds-accordion>
</div>

<div>
  <dap-ds-typography variant="h4">Clean variant</dap-ds-typography>
  <dap-ds-accordion variant="clean">
    <span slot="heading">Clean Accordion</span>
    <dap-ds-typography variant="body">
      A minimal style without borders, suitable for content-focused layouts.
    </dap-ds-typography>
  </dap-ds-accordion>
</div>

<div>
  <dap-ds-typography variant="h4">Collapsed variant</dap-ds-typography>
  <dap-ds-accordion-group variant="collapsed">
  <dap-ds-accordion>
    <span slot="heading">Collapsed Style</span>
    <dap-ds-typography variant="body">
      Optimized for grouped accordions with connected visual appearance.
    </dap-ds-typography>
  </dap-ds-accordion>
  <dap-ds-accordion variant="collapsed">
    <span slot="heading">Collapsed Style</span>
    <dap-ds-typography variant="body">
      Optimized for grouped accordions with connected visual appearance.
      </dap-ds-typography>
    </dap-ds-accordion>
  </dap-ds-accordion-group>
</div>
</dap-ds-stack>

Real-World Patterns

FAQ Section

<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}>
<dap-ds-stack>
  <dap-ds-typography variant="h3">Frequently Asked Questions</dap-ds-typography>
  
  <dap-ds-accordion headingLevel="4">
    <span slot="heading">How do I reset my password?</span>
    <dap-ds-stack>
      <dap-ds-typography variant="body">
        To reset your password, follow these steps:
      </dap-ds-typography>
      <ol style={{paddingLeft: 'var(--dds-spacing-400)'}}>
        <li>Go to the login page and click "Forgot Password"</li>
        <li>Enter your email address</li>
        <li>Check your email for the reset link</li>
        <li>Follow the instructions in the email</li>
      </ol>
    </dap-ds-stack>
  </dap-ds-accordion>
  
  <dap-ds-accordion headingLevel="4">
    <span slot="heading">How long does document processing take?</span>
    <dap-ds-typography variant="body">
      Document processing typically takes 2-5 business days. You'll receive 
      an email notification when your document is ready for review. For urgent 
      requests, please contact our support team.
    </dap-ds-typography>
  </dap-ds-accordion>
  
  <dap-ds-accordion headingLevel="4">
    <span slot="heading">Can I update my application after submission?</span>
    <dap-ds-typography variant="body">
      Yes, you can update your application within 24 hours of submission. 
      After this period, you'll need to contact our office directly to make changes.
    </dap-ds-typography>
  </dap-ds-accordion>
</dap-ds-stack>
</div>

Settings Panel

<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}>
<dap-ds-stack>
  <dap-ds-typography variant="h3">Account Settings</dap-ds-typography>
  
  <dap-ds-accordion headingLevel="4" opened>
    <span slot="heading">Personal Information</span>
    <dap-ds-stack>
      <dap-ds-input label="Full Name" value="John Doe"></dap-ds-input>
      <dap-ds-input label="Email Address" type="email" value="john@example.com"></dap-ds-input>
      <dap-ds-input label="Phone Number" type="tel" value="+36 30 123 4567"></dap-ds-input>
    </dap-ds-stack>
  </dap-ds-accordion>
  
  <dap-ds-accordion headingLevel="4">
    <span slot="heading">Notification Preferences</span>
    <dap-ds-stack>
      <dap-ds-checkbox checked label="Email notifications"></dap-ds-checkbox>
      <dap-ds-checkbox label="SMS notifications"></dap-ds-checkbox>
      <dap-ds-checkbox checked label="Document status updates"></dap-ds-checkbox>
    </dap-ds-stack>
  </dap-ds-accordion>
  
  <dap-ds-accordion headingLevel="4">
    <span slot="heading">Privacy Settings</span>
    <dap-ds-stack>
      <dap-ds-checkbox checked label="Make profile public"></dap-ds-checkbox>
      <dap-ds-checkbox label="Allow data analytics"></dap-ds-checkbox>
      <dap-ds-checkbox checked label="Share anonymous usage data"></dap-ds-checkbox>
    </dap-ds-stack>
  </dap-ds-accordion>
</dap-ds-stack>
</div>

Accordion Group

Use accordion groups for related content sections with coordinated behavior.

<div style={{border: 'var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)', padding: 'var(--dds-spacing-600)', borderRadius: 'var(--dds-radius-base)'}}>
<dap-ds-stack>
  <dap-ds-typography variant="h3">Service Information</dap-ds-typography>
  
  <dap-ds-accordion-group>
    <dap-ds-accordion headingLevel="4">
      <span slot="heading">Eligibility Requirements</span>
      <dap-ds-typography variant="body">
        To be eligible for this service, you must be a Hungarian citizen or 
        permanent resident, over 18 years of age, and have a valid identification document.
      </dap-ds-typography>
    </dap-ds-accordion>
    
    <dap-ds-accordion headingLevel="4">
      <span slot="heading">Required Documents</span>
      <dap-ds-stack>
        <dap-ds-typography variant="body">Please prepare the following documents:</dap-ds-typography>
        <ul style={{paddingLeft: 'var(--dds-spacing-400)'}}>
          <li>Valid government-issued ID</li>
          <li>Proof of address (utility bill or bank statement)</li>
          <li>Completed application form</li>
          <li>Supporting documentation (if applicable)</li>
        </ul>
      </dap-ds-stack>
    </dap-ds-accordion>
    
    <dap-ds-accordion headingLevel="4">
      <span slot="heading">Processing Time</span>
      <dap-ds-typography variant="body">
        Standard processing time is 5-10 business days. Express processing 
        is available for an additional fee and reduces processing time to 1-2 business days.
      </dap-ds-typography>
    </dap-ds-accordion>
  </dap-ds-accordion-group>
</dap-ds-stack>
</div>

Custom Styling

The accordion component supports extensive customization beyond the default variants. This section demonstrates practical styling techniques and advanced customization patterns.

Quick Customization with Inline Styles

For simple customizations, use CSS custom properties directly on the component:

<dap-ds-stack direction="column">
<dap-ds-accordion 
  style={{
    '--dds-accordion-border-color': 'var(--dds-violet-600)',
    '--dds-accordion-border-width': '2px',
    '--dds-accordion-border-radius': 'var(--dds-radius-large)',
    '--dds-accordion-background-color': 'var(--dds-violet-100)',
  }}>
  <span slot="heading">Custom Purple Accent</span>
  <dap-ds-typography variant="body">
    This accordion uses custom purple styling with enhanced borders and background.
  </dap-ds-typography>
</dap-ds-accordion>

<dap-ds-accordion 
  style={{
    '--dds-accordion-icon-color': 'var(--dds-teal-700)',
    '--dds-accordion-icon-background': 'var(--dds-teal-100)',
    '--dds-accordion-hover-background': 'var(--dds-teal-50)',
  }}>
  <span slot="heading">Custom Teal Icons</span>
  <dap-ds-typography variant="body">
    This accordion features custom teal icons and hover effects with rounded corners.
  </dap-ds-typography>
</dap-ds-accordion>
</dap-ds-stack>

Theme-Aware Styling

Create accordions that automatically adapt to different themes:

<dap-ds-stack direction="column">
<dap-ds-accordion 
  style={{
    '--dds-accordion-background-color': 'var(--dds-brand-100)',
    '--dds-accordion-border-color': 'var(--dds-brand-600)',
    '--dds-accordion-text-color': 'var(--dds-brand-1000)',
    '--dds-accordion-icon-color': 'var(--dds-brand-800)',
  }}>
  <span slot="heading">Brand Themed</span>
  <dap-ds-typography variant="body">
    This accordion uses brand colors that adapt automatically to theme changes.
  </dap-ds-typography>
</dap-ds-accordion>

<dap-ds-accordion 
  style={{
    '--dds-accordion-background-color': 'var(--dds-informative-100)',
    '--dds-accordion-border-color': 'var(--dds-informative-500)',
    '--dds-accordion-hover-background': 'var(--dds-informative-200)',
    '--dds-accordion-icon-background': 'var(--dds-informative-300)',
  }}>
  <span slot="heading">Informative Style</span>
  <dap-ds-typography variant="body">
    This accordion uses informative semantic colors for status indication.
  </dap-ds-typography>
</dap-ds-accordion>

<dap-ds-accordion 
  style={{
    '--dds-accordion-background-color': 'var(--dds-positive-100)',
    '--dds-accordion-border-color': 'var(--dds-positive-600)',
    '--dds-accordion-text-color': 'var(--dds-positive-900)',
    '--dds-accordion-divider-color': 'var(--dds-positive-300)',
  }}>
  <span slot="heading">Success Styling</span>
  <dap-ds-typography variant="body">
    This accordion uses positive colors to indicate successful completion or confirmation.
  </dap-ds-typography>
</dap-ds-accordion>
</dap-ds-stack>

Advanced CSS Classes

For reusable styling patterns, define CSS classes in your stylesheet:

<dap-ds-stack>
<dap-ds-accordion class="card-accordion">
  <span slot="heading">Card-style Accordion</span>
  <dap-ds-typography variant="body">
    This accordion uses a card-style design with a shadow and rounded corners.
  </dap-ds-typography>
</dap-ds-accordion>
<dap-ds-accordion class="minimal-accordion">
  <span slot="heading">Minimal Accordion</span>
  <dap-ds-typography variant="body">
    This accordion has no borders and uses a subtle hover effect.
  </dap-ds-typography>
</dap-ds-accordion>
<dap-ds-accordion class="warning-accordion">
  <span slot="heading">Warning Accordion</span>
  <dap-ds-typography variant="body">
    This accordion uses a warning color for status indication.
  </dap-ds-typography>
</dap-ds-accordion>
<dap-ds-accordion class="error-accordion">
  <span slot="heading">Error Accordion</span>
  <dap-ds-typography variant="body">
    This accordion uses an error color for status indication.
  </dap-ds-typography>
</dap-ds-accordion>
<dap-ds-accordion class="compact-accordion">
  <span slot="heading">Compact Accordion</span>
  <dap-ds-typography variant="body">
    This accordion uses a compact design for dense layouts.
  </dap-ds-typography>
</dap-ds-accordion>
<dap-ds-accordion class="gradient-accordion">
  <span slot="heading">Gradient Accordion</span>
  <dap-ds-typography variant="body">
    This accordion uses a gradient background for a modern look.
  </dap-ds-typography>
</dap-ds-accordion>
<dap-ds-accordion class="enhanced-accordion">
  <span slot="heading">Enhanced Accordion</span>
  <dap-ds-typography variant="body">
    This accordion uses enhanced focus and interaction states.
  </dap-ds-typography>
</dap-ds-accordion>
</dap-ds-stack>

/* Card-style accordion with shadow */
.card-accordion {
  --dds-accordion-background-color: var(--dds-white-100);
  --dds-accordion-border-color: var(--dds-neutral-300);
  --dds-accordion-border-radius: var(--dds-radius-large);
  --dds-accordion-border-width: 1px;
  margin-bottom: var(--dds-spacing-400);
}

/* Minimal accordion without borders */
.minimal-accordion {
  --dds-accordion-border-color: transparent;
  --dds-accordion-background-color: transparent;
  --dds-accordion-hover-background: var(--dds-neutral-100);
  --dds-accordion-divider-color: var(--dds-neutral-200);
}

/* Status-specific accordion styling */
.warning-accordion {
  --dds-accordion-background-color: var(--dds-warning-100);
  --dds-accordion-border-color: var(--dds-warning-500);
  --dds-accordion-text-color: var(--dds-warning-900);
  --dds-accordion-icon-color: var(--dds-warning-700);
  --dds-accordion-hover-background: var(--dds-warning-200);
}

.error-accordion {
  --dds-accordion-background-color: var(--dds-negative-100);
  --dds-accordion-border-color: var(--dds-negative-500);
  --dds-accordion-text-color: var(--dds-negative-900);
  --dds-accordion-icon-color: var(--dds-negative-700);
}

/* Compact accordion for dense layouts */
.compact-accordion {
  --dds-accordion-padding: var(--dds-spacing-300);
  --dds-accordion-border-radius: var(--dds-radius-small);
  --dds-accordion-transition-duration: 0.15s;
}

/* Gradient background effect */
.gradient-accordion::part(header) {
  background: linear-gradient(
    135deg, 
    var(--dds-brand-100), 
    var(--dds-violet-100)
  );
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Enhanced focus and interaction states */
.enhanced-accordion::part(button):focus {
  box-shadow: 
    0 0 0 2px var(--dds-focus-outer-ring),
    0 0 0 4px var(--dds-focus-inner-ring);
  outline: none;
}

.enhanced-accordion::part(button):hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

/* Custom icon styling */
.custom-icon-accordion::part(icon) {
  border-radius: 50%;
  padding: var(--dds-spacing-100);
  transition: all 0.3s ease;
}

.custom-icon-accordion::part(icon):hover {
  transform: scale(1.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Content area styling */
.styled-content-accordion::part(content) {
  border-left: 3px solid var(--dds-brand-500);
  padding-left: var(--dds-spacing-600);
  margin-left: var(--dds-spacing-400);
  background: var(--dds-brand-50);
}

Accessibility

Requirements

Keyboard Navigation: Space/Enter keys expand/collapse, Tab navigates between accordions
Screen Reader Support: Proper ARIA attributes announce state changes and content relationships
Heading Structure: Use appropriate heading levels to maintain document hierarchy
Focus Management: Clear focus indicators and logical tab order
State Announcements: Loading and disabled states are properly communicated

Keyboard Navigation

Space/Enter: Toggles the accordion open/closed state
Tab: Moves focus between accordion buttons
Disabled accordions: Are skipped in tab order and don't respond to interaction

Screen Reader Support

Accordion buttons announce their expanded/collapsed state
Content regions are properly labeled and associated with their headings
Loading states announce status to assistive technology
Heading levels create logical document structure

<dap-ds-stack>
<dap-ds-typography variant="h4">Good accessibility examples:</dap-ds-typography>

<dap-ds-accordion 
  headingLevel="3" 
  aria-label="Customer support information"
  aria-describedby="support-description">
  <span slot="heading">Customer Support</span>
  <div id="support-description">
    <dap-ds-typography variant="body">
      Contact information and hours for customer support services.
      Available 24/7 for urgent matters, regular hours Monday-Friday 9AM-5PM.
    </dap-ds-typography>
  </div>
</dap-ds-accordion>

<dap-ds-accordion headingLevel="3" loading>
  <span slot="heading">Loading Content Section</span>
  <dap-ds-typography variant="body">
    This section demonstrates proper loading state announcements.
  </dap-ds-typography>
</dap-ds-accordion>

<dap-ds-accordion headingLevel="3" disabled>
  <span slot="heading">Restricted Access</span>
  <dap-ds-typography variant="body">
    This content is currently unavailable due to access restrictions.
  </dap-ds-typography>
</dap-ds-accordion>
</dap-ds-stack>

Importing

import { DapDSAccordion } from 'dap-design-system/dist/dds'

Importing React

import { DapDSAccordionReact } from 'dap-design-system/dist/react'

Attributes

Property	Type	Description
`size`	`'sm'`, `'lg'`	The size of the accordion. Default is `sm`.
`headingLevel`	`1`, `2` , `3` , `4` , `5` , `6`	The heading level of the accordion. Default is `4`.
`opened`	`boolean`	Whether the accordion is opened. Default is `false`.
`iconLocation`	`'left'`, `'right'`	The location of the icon. Default is `right`.
`variant`	`'default'`, `'collapsed'` , `'clean'` , `'clean-collapsed'`	The variant of the accordion.
`lastItem`	`boolean`	Whether the accordion is the last item.
`disabled`	`boolean`	Whether the accordion is disabled.
`loading`	`boolean`	Whether the accordion is in loading state.

Slots

Name	Description
`default`	The content of the accordion.
`heading`	The heading of the accordion.
`icon-opened`	The icon when the accordion is opened.
`icon-closed`	The icon when the accordion is closed.

Events

Event Name	Description	Type
`dds-opened`	Event fired when the accordion is opened.	`{open: boolean, item: AccordionBaseElement }`
`dds-closed`	Event fired when the accordion is closed.	`{open: boolean, item: AccordionBaseElement }`

CSS Parts

Part Name	Description
`base`	The main accordion container.
`heading`	The heading of the accordion.
`button`	The button of the accordion.
`content`	The content of the accordion.
`content-container`	The container of the accordion content.
`icon-wrapper`	The icon wrapper of the accordion.
`open-icon`	The icon when the accordion is opened.
`open-icon-base`	The base of the icon when the accordion is opened.
`close-icon`	The icon when the accordion is closed.
`close-icon-base`	The base of the icon when the accordion is closed.

CSS Custom Properties

Property Name	Description
`--dds-accordion-border-width`	The width of the accordion border (default: var(--dds-border-width-base))
`--dds-accordion-border-style`	The style of the accordion border (default: solid)
`--dds-accordion-border-radius`	The border radius of the accordion (default: var(--dds-radius-base))
`--dds-accordion-border-color`	The color of the accordion border (default: var(--dds-border-neutral-divider))
`--dds-accordion-background-color`	The background color of the accordion (default: var(--dds-background-neutral-subtle))
`--dds-accordion-text-color`	The text color of the accordion (default: var(--dds-text-neutral-strong))
`--dds-accordion-hover-background`	The background color when hovering over the accordion (default: var(--dds-background-neutral-base))
`--dds-accordion-active-background`	The background color when the accordion is active (default: var(--dds-background-neutral-medium))
`--dds-accordion-icon-background`	The background color of the accordion icon (default: var(--dds-transparent-black-subtle))
`--dds-accordion-icon-color`	The color of the accordion icon (default: var(--dds-icon-neutral-base))
`--dds-accordion-icon-hover-background`	The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base))
`--dds-accordion-icon-active-background`	The background color of the accordion icon when active (default: var(--dds-transparent-black-strong))
`--dds-accordion-icon-hover-color`	The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong))
`--dds-accordion-icon-active-color`	The color of the accordion icon when active (default: var(--dds-icon-neutral-strong))
`--dds-accordion-content-color`	The color of the accordion content (default: var(--dds-text-text-neutral))
`--dds-accordion-transition-duration`	The duration of the accordion transitions (default: var(--dds-transition-fast))
`--dds-accordion-transition-timing`	The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out))
`--dds-accordion-divider-color`	The color of the divider between accordion items (default: var(--dds-border-neutral-divider))

Components

Accordion group

<dap-ds-accordion-group/>

Attributes

Property	Type	Default	Description
`autoClose`	`string`	`'true'`	Whether to close other accordions when one is opened.
`variant`	`'default'`, `'collapsed'` , `'clean'` , `'clean-collapsed'`	`'default'`	The variant of the accordion

Slots

Name	Description
`(default)`	The content of the accordion group.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main accordion group container.

CSS Custom Properties

Property Name	Description
`--dds-accordion-group-spacing`	Controls the gap between accordion items (default: var(--dds-spacing-300))
`--dds-accordion-group-border-color`	Controls the border color (default: var(--dds-border-neutral-subtle))
`--dds-accordion-group-border-width`	Controls the border width (default: var(--dds-border-width-base))
`--dds-accordion-group-border-radius`	Controls the border radius (default: var(--dds-radius-base))
`--dds-accordion-group-background`	Controls the background color (default: transparent)