diff --git a/app/layouts/showcase.wrn b/app/layouts/showcase.wrn index 67a8a87..ff353cf 100644 --- a/app/layouts/showcase.wrn +++ b/app/layouts/showcase.wrn @@ -30,35 +30,35 @@ layout Showcase {
Advanced Forms -
Advanced SelectCombo BoxCopy MarkupInput NumberPin InputSearch BoxStrong PasswordToggle CountToggle Password
+
Advanced SelectCompleteCombo BoxCompleteCopy MarkupPendingInput NumberCompletePin InputCompleteSearch BoxPendingStrong PasswordCompleteToggle CountCompleteToggle PasswordComplete
Base -
AccordionAlertAvatarAvatar GroupBadgeBlockquoteButtonButton GroupCardCarouselChat BubbleCollapseDate PickerDevice FrameFile Upload ProgressLegend IndicatorListList GroupMarqueeProgressRatingSkeletonSpinnerStyled IconTimelineToastTree View
+
AccordionCompleteAlertCompleteAvatarCompleteAvatar GroupCompleteBadgeCompleteBlockquoteCompleteButtonCompleteButton GroupCompleteCardCompleteCarouselCompleteChat BubbleCompleteCollapseCompleteDate PickerCompleteDevice FrameCompleteFile Upload ProgressCompleteLegend IndicatorPendingListPendingList GroupPendingMarqueePendingProgressPendingRatingPendingSkeletonPendingSpinnerPendingStyled IconPendingTimelinePendingToastPendingTree ViewPending
Forms -
CheckboxColor PickerFile InputInputInput GroupRadioRange SliderSelectSwitchTextareaTime Picker
+
CheckboxCompleteColor PickerCompleteFile InputCompleteInputCompleteInput GroupCompleteRadioCompleteRange SliderCompleteSelectCompleteSwitchCompleteTextareaCompleteTime PickerComplete
Integrations -
Advanced Date PickerAdvanced Range SliderChartClipboardConfettiData MapData TableDrag And DropFile UploadMapToast NotificationsWysiwyg Editor
+
Advanced Date PickerPendingAdvanced Range SliderPendingChartPendingClipboardPendingConfettiPendingData MapPendingData TablePendingDrag And DropPendingFile UploadPendingMapPendingToast NotificationsPendingWysiwyg EditorPending
Layout -
ColumnsContainerCustom ScrollbarDividerGridImageKbdLayout SplitterLinkTypography
+
ColumnsPendingContainerPendingCustom ScrollbarPendingDividerPendingGridPendingImagePendingKbdPendingLayout SplitterPendingLinkPendingTypographyPending
Navigation -
BreadcrumbMega MenuNavNavbarPaginationScrollspySidebarStepperTabs
+
BreadcrumbPendingMega MenuPendingNavPendingNavbarPendingPaginationPendingScrollspyPendingSidebarPendingStepperPendingTabsPending
Overlays -
Context MenuDrawerDropdownModalPopoverTooltip
+
Context MenuPendingDrawerPendingDropdownPendingModalPendingPopoverPendingTooltipPending
Tables -
Table
+
TablePending

No components found.

diff --git a/app/pages/advanced-forms.wrn b/app/pages/advanced-forms.wrn index ae2d190..6fc8eae 100644 --- a/app/pages/advanced-forms.wrn +++ b/app/pages/advanced-forms.wrn @@ -10,7 +10,7 @@ page AdvancedFormsShowcase { Component category

Advanced Forms

9 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

-
9 componentsMultiple use cases106 live configurations
+
9 componentsMultiple use cases116 live configurations
@@ -46,11 +46,11 @@ page AdvancedFormsShowcase {
@@ -86,11 +86,11 @@ page AdvancedFormsShowcase {
diff --git a/app/pages/base.wrn b/app/pages/base.wrn index eba4c5d..741a3d6 100644 --- a/app/pages/base.wrn +++ b/app/pages/base.wrn @@ -10,67 +10,67 @@ page BaseShowcase { Component category

Base

27 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

-
27 componentsMultiple use cases86 live configurations
+
27 componentsMultiple use cases169 live configurations
@@ -86,81 +86,81 @@ page BaseShowcase {
diff --git a/app/pages/components/accordion.wrn b/app/pages/components/accordion.wrn index 60cc7ac..2922b61 100644 --- a/app/pages/components/accordion.wrn +++ b/app/pages/components/accordion.wrn @@ -3,9 +3,21 @@ page AccordionDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" - state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"accordion-0-1\",\n \"key\": \"accordion-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#accordion-demo\",\n \"actionHref\": \"#accordion-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"accordion-0-2\",\n \"key\": \"accordion-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#accordion-demo\",\n \"actionHref\": \"#accordion-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "" + state playground_id = ctx.url.searchParams.get("pg_id") ?? "accordion-example-1" + state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"value\": \"first\",\n \"label\": \"Accordion #1\",\n \"content\": \"This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.\"\n },\n {\n \"value\": \"second\",\n \"label\": \"Accordion #2\",\n \"content\": \"This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.\"\n },\n {\n \"value\": \"third\",\n \"label\": \"Accordion #3\",\n \"content\": \"This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.\"\n }\n]" + state playground_defaultOpen = ctx.url.searchParams.get("pg_defaultOpen") ?? "[\n \"first\"\n]" state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false" - state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + state playground_alwaysOpen = ctx.url.searchParams.get("pg_alwaysOpen") ?? "false" + state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" + state playground_indicator = ctx.url.searchParams.get("pg_indicator") ?? "plus" + state playground_indicatorPosition = ctx.url.searchParams.get("pg_indicatorPosition") ?? "start" + state playground_showIndicator = ctx.url.searchParams.get("pg_showIndicator") ?? "true" + state playground_bordered = ctx.url.searchParams.get("pg_bordered") ?? "false" + state playground_separated = ctx.url.searchParams.get("pg_separated") ?? "false" + state playground_flush = ctx.url.searchParams.get("pg_flush") ?? "false" + state playground_contentItalic = ctx.url.searchParams.get("pg_contentItalic") ?? "true" seo { title = "Accordion" description = "Theme-aware, responsive accordion component." @@ -19,242 +31,66 @@ page AccordionDetail { Base component

Accordion

Theme-aware, responsive accordion component.

-
5 props1 slots0 eventsTheme readyResponsive
+
17 props0 slots3 eventsTheme readyResponsive
-
+
Interactive playground

Configure Accordion

Change any prop and inspect the server-rendered component immediately.

Live preview
-
Composable content area.
+
Component code
<Accordion
+  id="accordion-example-1"
   items='[
     {
-      "id": "accordion-0-1",
-      "key": "accordion-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#accordion-demo",
-      "actionHref": "#accordion-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "value": "first",
+      "label": "Accordion #1",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
     },
     {
-      "id": "accordion-0-2",
-      "key": "accordion-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#accordion-demo",
-      "actionHref": "#accordion-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "value": "second",
+      "label": "Accordion #2",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    },
+    {
+      "value": "third",
+      "label": "Accordion #3",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
     }
-  ]'>
-  <!-- Add default slot content here -->
-</Accordion>
+ ]' + defaultOpen='[ + "first" + ]' + contentItalic="true" +/>
-
Component props5 controls
-
+]
@@ -263,389 +99,395 @@ page AccordionDetail {
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

-
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+
Basic usage

Default accordion

Open one section at a time with a clear plus and minus indicator.

01
Live preview
-
Composable content area.
+
-
+
Component usage.wrn
<Accordion
+  id="accordion-example-1"
   items='[
     {
-      "id": "accordion-0-1",
-      "key": "accordion-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#accordion-demo",
-      "actionHref": "#accordion-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "value": "first",
+      "label": "Accordion #1",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
     },
     {
-      "id": "accordion-0-2",
-      "key": "accordion-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#accordion-demo",
-      "actionHref": "#accordion-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "value": "second",
+      "label": "Accordion #2",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    },
+    {
+      "value": "third",
+      "label": "Accordion #3",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
     }
-  ]'>
-  <!-- Add default slot content here -->
-</Accordion>
+ ]' + defaultOpen='[ + "first" + ]' + contentItalic="true" +/>
-
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+
Behavior

Always open

Allow several content sections to remain expanded at the same time.

02
Live preview
-
Composable content area.
+
-
+
Component usage.wrn
<Accordion
-  size="sm"
+  id="accordion-example-2"
   items='[
     {
-      "id": "accordion-1-1",
-      "key": "accordion-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#accordion-demo",
-      "actionHref": "#accordion-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "value": "first",
+      "label": "Accordion #1",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
     },
     {
-      "id": "accordion-1-2",
-      "key": "accordion-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#accordion-demo",
-      "actionHref": "#accordion-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "value": "second",
+      "label": "Accordion #2",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    },
+    {
+      "value": "third",
+      "label": "Accordion #3",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
     }
-  ]'>
-  <!-- Add default slot content here -->
-</Accordion>
+ ]' + defaultOpen='[ + "first", + "second" + ]' + alwaysOpen="true" + contentItalic="true" +/>
-
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+
Composition

Nested accordion

Place a coordinated secondary accordion inside an expanded parent section.

03
Live preview
-
Rich supporting content with additional context.
+
-
+
Component usage.wrn
<Accordion
-  size="lg"
+  id="accordion-example-3"
   items='[
     {
-      "id": "accordion-2-1",
-      "key": "accordion-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#accordion-demo",
-      "actionHref": "#accordion-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
+      "value": "first",
+      "label": "Accordion #1",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.",
+      "children": [
         {
-          "label": "Nested option A",
-          "value": "nested-a"
+          "value": "sub-first",
+          "label": "Sub accordion #1",
+          "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
         },
         {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
+          "value": "sub-second",
+          "label": "Sub accordion #2",
+          "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
         },
         {
-          "label": "API reference",
-          "href": "#api-reference"
+          "value": "sub-third",
+          "label": "Sub accordion #3",
+          "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
         }
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
       ]
     },
     {
-      "id": "accordion-2-2",
-      "key": "accordion-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#accordion-demo",
-      "actionHref": "#accordion-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "value": "second",
+      "label": "Accordion #2",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    },
+    {
+      "value": "third",
+      "label": "Accordion #3",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
     }
-  ]'>
-  <!-- Add default slot content here -->
-</Accordion>
+ ]' + defaultOpen='[ + "first", + "first.sub-first" + ]' + alwaysOpen="true" + contentItalic="true" +/> +
+
+
+
+
+
Indicators

Without an indicator

Use a minimal text-only accordion when visual indicators are unnecessary.

+ 04 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Accordion
+  id="accordion-example-4"
+  items='[
+    {
+      "value": "first",
+      "label": "Accordion #1",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    },
+    {
+      "value": "second",
+      "label": "Accordion #2",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    },
+    {
+      "value": "third",
+      "label": "Accordion #3",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    }
+  ]'
+  defaultOpen='[
+    "first"
+  ]'
+  showIndicator="false"
+  contentItalic="true"
+/>
+
+
+
+
+
+
Indicators

Chevron indicator

Communicate expanded state with a rotating chevron.

+ 05 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Accordion
+  variant="chevron"
+  id="accordion-example-5"
+  items='[
+    {
+      "value": "first",
+      "label": "Accordion #1",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    },
+    {
+      "value": "second",
+      "label": "Accordion #2",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    },
+    {
+      "value": "third",
+      "label": "Accordion #3",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    }
+  ]'
+  defaultOpen='[
+    "first"
+  ]'
+  indicator="chevron"
+  contentItalic="true"
+/>
+
+
+
+
+
+
Layout

Separated title and indicator

Place the title and state indicator at opposite ends of each trigger.

+ 06 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Accordion
+  variant="chevron"
+  id="accordion-example-6"
+  items='[
+    {
+      "value": "first",
+      "label": "Accordion #1",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    },
+    {
+      "value": "second",
+      "label": "Accordion #2",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    },
+    {
+      "value": "third",
+      "label": "Accordion #3",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    }
+  ]'
+  defaultOpen='[
+    "first"
+  ]'
+  indicator="chevron"
+  indicatorPosition="end"
+  contentItalic="true"
+/>
+
+
+
+
+
+
Surface

Bordered accordion

Group sections inside one bordered surface with dividing lines.

+ 07 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Accordion
+  id="accordion-example-7"
+  items='[
+    {
+      "value": "first",
+      "label": "Accordion #1",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    },
+    {
+      "value": "second",
+      "label": "Accordion #2",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    },
+    {
+      "value": "third",
+      "label": "Accordion #3",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    }
+  ]'
+  defaultOpen='[
+    "first"
+  ]'
+  bordered="true"
+  contentItalic="true"
+/>
+
+
+
+
+
+
Surface

Bordered open content

Render each section as an independent rounded card.

+ 08 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Accordion
+  id="accordion-example-8"
+  items='[
+    {
+      "value": "first",
+      "label": "Accordion #1",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    },
+    {
+      "value": "second",
+      "label": "Accordion #2",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    },
+    {
+      "value": "third",
+      "label": "Accordion #3",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    }
+  ]'
+  defaultOpen='[
+    "second"
+  ]'
+  indicatorPosition="end"
+  separated="true"
+  contentItalic="true"
+/>
+
+
+
+
+
+
States

Disabled section

Disable an individual section while keeping the rest of the accordion interactive.

+ 09 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<Accordion
+  id="accordion-example-9"
+  items='[
+    {
+      "value": "first",
+      "label": "Accordion #1",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    },
+    {
+      "value": "second",
+      "label": "Accordion #2",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.",
+      "disabled": true
+    },
+    {
+      "value": "third",
+      "label": "Accordion #3",
+      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    }
+  ]'
+  defaultOpen='[
+    "first"
+  ]'
+  contentItalic="true"
+/>
- -
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
itemsstring[]No
multiplebooleanfalseNo
classstring""No
+
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@changeFires when the component value or selection changes.
@openFires when the component opens.
@closeFires when the component closes.
Event listener.js
const component = document.querySelector('[data-wrn-events]')
+
+component.addEventListener('change', (event) => {
+  console.log(event.detail)
+})
+
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
variantstring"default"No
classstring""No
idstring"accordion"No
itemsstring[]No
defaultOpenstring[]No
multiplebooleanfalseNo
alwaysOpenbooleanfalseNo
disabledbooleanfalseNo
indicatorstring"plus"No
indicatorPositionstring"start"No
showIndicatorbooleantrueNo
borderedbooleanfalseNo
separatedbooleanfalseNo
flushbooleanfalseNo
contentItalicbooleanfalseNo