const component = document.querySelector('[data-wrn-events]')
+ Component events Events Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.
@toggleFires when the component toggles between states.
@openFires when the component opens.
@closeFires when the component closes.
@selectFires when an item or option is selected.
const component = document.querySelector('[data-wrn-events]')
component.addEventListener('toggle', (event) => {
console.log(event.detail)
})Component API Props and configuration All content and behavior shown above is supplied through these props and slots.
Prop Type Default Required sizestring "default"No colorstring "primary"No labelstring "Sidebar"No itemsstring []No activestring ""No orientationstring "horizontal"No classstring ""No
Component API Props and configuration All content and behavior shown above is supplied through these props and slots.
Prop Type Default Required sizestring "default"No colorstring "primary"No labelstring "Sidebar"No itemsstring []No activestring ""No orientationstring "horizontal"No mobileLabelstring "Open navigation"No classstring ""No
diff --git a/examples/component-showcase/app/pages/components/split-hero.wrn b/examples/component-showcase/app/pages/components/split-hero.wrn
new file mode 100644
index 00000000..b09d8cc7
--- /dev/null
+++ b/examples/component-showcase/app/pages/components/split-hero.wrn
@@ -0,0 +1,695 @@
+// Generated by scripts/generate-showcase.mjs. Do not edit directly.
+page SplitHeroDetail {
+ layout = "showcase"
+ state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? ""
+ state playground_title = ctx.url.searchParams.get("pg_title") ?? "Split Hero example"
+ state playground_highlight = ctx.url.searchParams.get("pg_highlight") ?? ""
+ state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default split hero for a modern application."
+ state playground_primaryLabel = ctx.url.searchParams.get("pg_primaryLabel") ?? "Split Hero"
+ state playground_primaryHref = ctx.url.searchParams.get("pg_primaryHref") ?? "#split-hero-demo"
+ state playground_primaryIcon = ctx.url.searchParams.get("pg_primaryIcon") ?? ""
+ state playground_secondaryLabel = ctx.url.searchParams.get("pg_secondaryLabel") ?? "Split Hero"
+ state playground_secondaryHref = ctx.url.searchParams.get("pg_secondaryHref") ?? "#split-hero-demo"
+ state playground_secondaryIcon = ctx.url.searchParams.get("pg_secondaryIcon") ?? ""
+ state playground_visualPosition = ctx.url.searchParams.get("pg_visualPosition") ?? "right"
+ state playground_reverse = ctx.url.searchParams.get("pg_reverse") ?? "false"
+ state playground_ratio = ctx.url.searchParams.get("pg_ratio") ?? "balanced"
+ state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
+ state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
+ state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
+ state playground_trustItems = ctx.url.searchParams.get("pg_trustItems") ?? "[\n {\n \"id\": \"split-hero-0-1\",\n \"key\": \"split-hero-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\": \"#split-hero-demo\",\n \"actionHref\": \"#split-hero-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\": \"split-hero-0-2\",\n \"key\": \"split-hero-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\": \"#split-hero-demo\",\n \"actionHref\": \"#split-hero-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_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+ seo {
+ title = "Split Hero"
+ description = "Two-column hero with configurable content and visual placement."
+ }
+ view {
+
+ Components / Blocks / Split Hero
+
+
+
+ Interactive playground Configure Split Hero Change any prop and inspect the server-rendered component immediately.
+
+
Live preview
+
actions slot
trust slot
visual slot
+
+
+ <SplitHero
+ title="Split Hero example"
+ description="A polished default split hero for a modern application."
+ primaryLabel="Split Hero"
+ primaryHref="#split-hero-demo"
+ secondaryLabel="Split Hero"
+ secondaryHref="#split-hero-demo"
+ trustItems='[
+ {
+ "id": "split-hero-0-1",
+ "key": "split-hero-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": "#split-hero-demo",
+ "actionHref": "#split-hero-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"
+ ]
+ },
+ {
+ "id": "split-hero-0-2",
+ "key": "split-hero-0-2",
+ "value": "secondary",
+ "label": "Additional option",
+ "title": "Supporting example",
+ "description": "A clean default configuration for everyday product interfaces.",
+ "text": "Another configurable message.",
+ "href": "#split-hero-demo",
+ "actionHref": "#split-hero-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"
+ ]
+ }
+ ]'>
+ <!-- Add actions, trust, default, visual slot content here -->
+</SplitHero>
+
+
+
+
+
+
+ Live examples Designed for real product surfaces Compare configurations and resize the browser to check responsive behavior.
+
+
+
+
+
Live preview
+
actions slot
trust slot
visual slot
+
+
+
+ <SplitHero
+ title="Split Hero example"
+ description="A polished default split hero for a modern application."
+ primaryLabel="Split Hero"
+ primaryHref="#split-hero-demo"
+ secondaryLabel="Split Hero"
+ secondaryHref="#split-hero-demo"
+ trustItems='[
+ {
+ "id": "split-hero-0-1",
+ "key": "split-hero-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": "#split-hero-demo",
+ "actionHref": "#split-hero-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"
+ ]
+ },
+ {
+ "id": "split-hero-0-2",
+ "key": "split-hero-0-2",
+ "value": "secondary",
+ "label": "Additional option",
+ "title": "Supporting example",
+ "description": "A clean default configuration for everyday product interfaces.",
+ "text": "Another configurable message.",
+ "href": "#split-hero-demo",
+ "actionHref": "#split-hero-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"
+ ]
+ }
+ ]'>
+ <!-- Add actions, trust, default, visual slot content here -->
+</SplitHero>
+
+
+
+
+
+
Live preview
+
actions slot
trust slot
visual slot
+
+
+
+ <SplitHero
+ title="Compact Split Hero"
+ description="A compact configuration for dashboards and dense product surfaces."
+ primaryLabel="Compact example"
+ primaryHref="#split-hero-demo"
+ secondaryLabel="Compact example"
+ secondaryHref="#split-hero-demo"
+ size="sm"
+ variant="secondary"
+ trustItems='[
+ {
+ "id": "split-hero-1-1",
+ "key": "split-hero-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": "#split-hero-demo",
+ "actionHref": "#split-hero-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"
+ ]
+ },
+ {
+ "id": "split-hero-1-2",
+ "key": "split-hero-1-2",
+ "value": "secondary",
+ "label": "Additional option",
+ "title": "Supporting example",
+ "description": "A compact configuration designed for dense application layouts.",
+ "text": "Another configurable message.",
+ "href": "#split-hero-demo",
+ "actionHref": "#split-hero-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"
+ ]
+ }
+ ]'>
+ <!-- Add actions, trust, default, visual slot content here -->
+</SplitHero>
+
+
+
+
+
+
Live preview
+
actions slot
trust slot
visual slot
+
+
+
+ <SplitHero
+ title="Advanced Split Hero"
+ description="A richer configuration demonstrating additional content and hierarchy."
+ primaryLabel="Advanced example"
+ primaryHref="#split-hero-demo"
+ secondaryLabel="Advanced example"
+ secondaryHref="#split-hero-demo"
+ size="lg"
+ variant="success"
+ trustItems='[
+ {
+ "id": "split-hero-2-1",
+ "key": "split-hero-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": "#split-hero-demo",
+ "actionHref": "#split-hero-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": [
+ {
+ "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"
+ ]
+ },
+ {
+ "id": "split-hero-2-2",
+ "key": "split-hero-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": "#split-hero-demo",
+ "actionHref": "#split-hero-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"
+ ]
+ }
+ ]'>
+ <!-- Add actions, trust, default, visual slot content here -->
+</SplitHero>
+
Component events Events Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.
Component API Props and configuration All content and behavior shown above is supplied through these props and slots.
Prop Type Default Required eyebrowstring ""No titlestring "A better digital experience"No highlightstring ""No descriptionstring ""No primaryLabelstring ""No primaryHrefstring ""No primaryIconstring ""No secondaryLabelstring ""No secondaryHrefstring ""No secondaryIconstring ""No visualPositionstring "right"No reverseboolean falseNo ratiostring "balanced"No sizestring "default"No colorstring "primary"No variantstring "default"No trustItemsstring []No classstring ""No
+
+
+ Components / Blocks / Stats Bar
+
+
+
+ Interactive playground Configure Stats Bar Change any prop and inspect the server-rendered component immediately.
+
+
Live preview
+
+
+
+ <StatsBar
+ items='[
+ {
+ "id": "stats-bar-0-1",
+ "key": "stats-bar-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": "#stats-bar-demo",
+ "actionHref": "#stats-bar-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"
+ ]
+ },
+ {
+ "id": "stats-bar-0-2",
+ "key": "stats-bar-0-2",
+ "value": "secondary",
+ "label": "Additional option",
+ "title": "Supporting example",
+ "description": "A clean default configuration for everyday product interfaces.",
+ "text": "Another configurable message.",
+ "href": "#stats-bar-demo",
+ "actionHref": "#stats-bar-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"
+ ]
+ }
+ ]'
+ compact="false"
+/>
+
+
+
+
+
+
+ Live examples Designed for real product surfaces Compare configurations and resize the browser to check responsive behavior.
+
+
+
+
+
+
+ <StatsBar
+ items='[
+ {
+ "id": "stats-bar-0-1",
+ "key": "stats-bar-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": "#stats-bar-demo",
+ "actionHref": "#stats-bar-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"
+ ]
+ },
+ {
+ "id": "stats-bar-0-2",
+ "key": "stats-bar-0-2",
+ "value": "secondary",
+ "label": "Additional option",
+ "title": "Supporting example",
+ "description": "A clean default configuration for everyday product interfaces.",
+ "text": "Another configurable message.",
+ "href": "#stats-bar-demo",
+ "actionHref": "#stats-bar-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"
+ ]
+ }
+ ]'
+ compact="false"
+/>
+
+
+
+
+
+
+
+ <StatsBar
+ items='[
+ {
+ "id": "stats-bar-1-1",
+ "key": "stats-bar-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": "#stats-bar-demo",
+ "actionHref": "#stats-bar-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"
+ ]
+ },
+ {
+ "id": "stats-bar-1-2",
+ "key": "stats-bar-1-2",
+ "value": "secondary",
+ "label": "Additional option",
+ "title": "Supporting example",
+ "description": "A compact configuration designed for dense application layouts.",
+ "text": "Another configurable message.",
+ "href": "#stats-bar-demo",
+ "actionHref": "#stats-bar-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"
+ ]
+ }
+ ]'
+ size="sm"
+ variant="secondary"
+/>
+
+
+
+
+
+
+
+ <StatsBar
+ items='[
+ {
+ "id": "stats-bar-2-1",
+ "key": "stats-bar-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": "#stats-bar-demo",
+ "actionHref": "#stats-bar-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": [
+ {
+ "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"
+ ]
+ },
+ {
+ "id": "stats-bar-2-2",
+ "key": "stats-bar-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": "#stats-bar-demo",
+ "actionHref": "#stats-bar-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"
+ ]
+ }
+ ]'
+ compact="false"
+ size="lg"
+ variant="success"
+/>
+
Component events Events Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.
Component API Props and configuration All content and behavior shown above is supplied through these props and slots.
Prop Type Default Required itemsstring []No columnsnumber 4No compactboolean trueNo dividersboolean trueNo iconsboolean trueNo sizestring "default"No colorstring "primary"No variantstring "raised"No maxWidthstring "xl"No classstring ""No
+
+
Navigation component
Tabs
Theme-aware, responsive tabs component.
- 7 props 1 slots 2 events Theme ready Responsive
+ 7 props 1 slots 0 events Theme ready Responsive