@nvidia-elements/core 0.0.3 → 0.0.4

package/dist/progressive-filter-chip/progressive-filter-chip2.js

@@ -23,7 +23,7 @@ var b = class extends h {
 	static {
 		this.metadata = {
 			tag: "nve-progressive-filter-chip",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	static {

package/dist/pulse/pulse2.js

@@ -13,7 +13,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-pulse",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	static {

package/dist/radio/radio-group2.js

@@ -12,7 +12,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-radio-group",
-			version: "0.0.3",
+			version: "0.0.4",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/radio/radio2.js

@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-radio",
-			version: "0.0.3",
+			version: "0.0.4",
 			children: [
 				"label",
 				"input",

package/dist/range/range2.js

@@ -17,7 +17,7 @@ var d = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-range",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	connectedCallback() {

package/dist/resize-handle/resize-handle.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize-handle.examples.js","names":[],"sources":["../../src/resize-handle/resize-handle.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/resize-handle/define.js';\n\nexport default {\n  title: 'Elements/Resize Handle',\n  component: 'nve-resize-handle',\n};\n\n/**\n * @summary Basic horizontal resize handle for draggable panel dividers and split pane interfaces.\n */\nexport const Default = {\n  render: () => html`\n<nve-resize-handle></nve-resize-handle>`\n};\n\n/**\n * @summary Vertical resize handle for side-by-side panel layouts and horizontal split panes.\n */\nexport const Vertical = {\n  render: () => html`\n<div style=\"height: 200px;\">\n  <nve-resize-handle orientation=\"vertical\"></nve-resize-handle>\n</div>\n`\n};\n\n/**\n * @summary Horizontal split pane with draggable divider that adjusts top and bottom panel heights.\n */\nexport const SplitHorizontal = {\n  render: () => html`\n<section id=\"split-horizontal-demo\" style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector('#split-horizontal-demo nve-resize-handle');\n  const split = document.querySelector('#split-horizontal-demo');\n  handle.addEventListener('input', e => split.style.gridTemplateRows = '1fr auto ' + e.target.value + 'px');\n</script>\n`\n};\n\n/**\n * @summary Vertical split pane with draggable divider that adjusts left and right panel widths.\n */\nexport const SplitVertical = {\n  render: () => html`\n<section id=\"split-vertical-demo\" style=\"display: grid; width: 250px; height: 250px; grid-template-columns: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle orientation=\"vertical\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector('#split-vertical-demo nve-resize-handle');\n  const split = document.querySelector('#split-vertical-demo');\n  handle.addEventListener('input', e => split.style.gridTemplateColumns = e.target.value + 'px auto 1fr');\n</script>\n`\n};\n\n/**\n * @summary Resize handle as a form control with name attribute for submitting resize values.\n */\nexport const Form = {\n  render: () => html`\n<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n  <nve-button>submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#form-demo');\n  const split = document.querySelector('#form-demo section');\n  const handle = document.querySelector('#form-demo nve-resize-handle');\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form)));\n    console.log(handle.form)\n  });\n\n  handle.addEventListener('change', e => {\n    console.log('change', e.target.value);\n  });\n\n  handle.addEventListener('input', e => {\n    console.log('input', e.target.value);\n    split.style.gridTemplateRows = '1fr auto ' + e.target.value + 'px';\n  });\n</script>\n`\n};\n\n/**\n * @summary Resize handle with prevented default toggle to disable snap-to-boundary on double-click. Use when the default collapse/expand behavior conflicts with custom resize constraints or when you need full control over toggle logic.\n */\nexport const PreventDefault = {\n  render: () => html`\n<form id=\"prevent-default-demo\" nve-layout=\"column gap:lg\">\n  <section style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n</form>\n<script type=\"module\">\n  const split = document.querySelector('#prevent-default-demo section');\n  const handle = document.querySelector('#prevent-default-demo nve-resize-handle');\n\n  handle.addEventListener('toggle', e => {\n    e.preventDefault();\n    console.log('toggle defaultPrevented:', e.defaultPrevented);\n  });\n\n  handle.addEventListener('input', e => {\n    split.style.gridTemplateRows = '1fr auto ' + e.target.value + 'px';\n  });\n</script>\n`\n};\n\n/**\n * @summary Custom line width styling for resize handle visibility using CSS custom property.\n */\nexport const LineWidth = {\n  render: () => html`\n<div style=\"height: 200px;\">\n  <nve-resize-handle orientation=\"vertical\" style=\"--line-width: 6px\"></nve-resize-handle>\n</div>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"resize-handle.examples.js","names":[],"sources":["../../src/resize-handle/resize-handle.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* eslint-disable local-typescript/example-css-quality */\n/* eslint-disable local-typescript/example-metadata */\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/resize-handle/define.js';\n\nexport default {\n  title: 'Elements/Resize Handle',\n  component: 'nve-resize-handle',\n};\n\n/**\n * @summary Basic horizontal resize handle for draggable panel dividers and split pane interfaces.\n */\nexport const Default = {\n  render: () => html`\n<nve-resize-handle></nve-resize-handle>`\n};\n\n/**\n * @summary Vertical resize handle for side-by-side panel layouts and horizontal split panes.\n */\nexport const Vertical = {\n  render: () => html`\n<div style=\"height: 200px;\">\n  <nve-resize-handle orientation=\"vertical\"></nve-resize-handle>\n</div>\n`\n};\n\n/**\n * @summary Horizontal split pane with draggable divider that adjusts top and bottom panel heights.\n */\nexport const SplitHorizontal = {\n  render: () => html`\n<section id=\"split-horizontal-demo\" style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector('#split-horizontal-demo nve-resize-handle');\n  const split = document.querySelector('#split-horizontal-demo');\n  handle.addEventListener('input', e => split.style.gridTemplateRows = '1fr auto ' + e.target.value + 'px');\n</script>\n`\n};\n\n/**\n * @summary Vertical split pane with draggable divider that adjusts left and right panel widths.\n */\nexport const SplitVertical = {\n  render: () => html`\n<section id=\"split-vertical-demo\" style=\"display: grid; width: 250px; height: 250px; grid-template-columns: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n  <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  <nve-resize-handle orientation=\"vertical\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n  <div></div>\n</section>\n<script type=\"module\">\n  const handle = document.querySelector('#split-vertical-demo nve-resize-handle');\n  const split = document.querySelector('#split-vertical-demo');\n  handle.addEventListener('input', e => split.style.gridTemplateColumns = e.target.value + 'px auto 1fr');\n</script>\n`\n};\n\n/**\n * @summary Resize handle as a form control with name attribute for submitting resize values.\n */\nexport const Form = {\n  render: () => html`\n<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n  <nve-button>submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#form-demo');\n  const split = document.querySelector('#form-demo section');\n  const handle = document.querySelector('#form-demo nve-resize-handle');\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form)));\n    console.log(handle.form)\n  });\n\n  handle.addEventListener('change', e => {\n    console.log('change', e.target.value);\n  });\n\n  handle.addEventListener('input', e => {\n    console.log('input', e.target.value);\n    split.style.gridTemplateRows = '1fr auto ' + e.target.value + 'px';\n  });\n</script>\n`\n};\n\n/**\n * @summary Resize handle with prevented default toggle to disable snap-to-boundary on double-click. Use when the default collapse/expand behavior conflicts with custom resize constraints or when you need full control over toggle logic.\n */\nexport const PreventDefault = {\n  render: () => html`\n<form id=\"prevent-default-demo\" nve-layout=\"column gap:lg\">\n  <section style=\"display: grid; width: 250px; height: 250px; grid-template-rows: 1fr auto 1fr; border: 1px solid var(--nve-ref-border-color)\">\n    <div></div>\n    <nve-resize-handle name=\"resize\" min=\"20\" max=\"230\" value=\"125\" step=\"20\"></nve-resize-handle>\n    <div style=\"background: hsla(0, 0%, 65%, 0.1)\"></div>\n  </section>\n</form>\n<script type=\"module\">\n  const split = document.querySelector('#prevent-default-demo section');\n  const handle = document.querySelector('#prevent-default-demo nve-resize-handle');\n\n  handle.addEventListener('toggle', e => {\n    e.preventDefault();\n    console.log('toggle defaultPrevented:', e.defaultPrevented);\n  });\n\n  handle.addEventListener('input', e => {\n    split.style.gridTemplateRows = '1fr auto ' + e.target.value + 'px';\n  });\n</script>\n`\n};\n\n/**\n * @summary Custom line width styling for resize handle visibility using CSS custom property.\n * @tags theme\n */\nexport const LineWidth = {\n  render: () => html`\n<div style=\"height: 200px;\">\n  <nve-resize-handle orientation=\"vertical\" style=\"--line-width: 6px\"></nve-resize-handle>\n</div>\n`\n};\n"],"mappings":";AAKA,IAAA,IAAS"}

package/dist/resize-handle/resize-handle.examples.json

@@ -63,7 +63,9 @@
       "summary": "Custom line width styling for resize handle visibility using CSS custom property.",
       "description": "",
       "composition": false,
-      "tags": []
+      "tags": [
+        "theme"
+      ]
     }
   ]
 }

package/dist/resize-handle/resize-handle2.js

@@ -18,7 +18,7 @@ var u = class extends l(a) {
 	static {
 		this.metadata = {
 			tag: "nve-resize-handle",
-			version: "0.0.3",
+			version: "0.0.4",
 			valueSchema: { type: "number" }
 		};
 	}

package/dist/search/search2.js

@@ -22,7 +22,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-search",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	static {

package/dist/select/select2.js

@@ -26,7 +26,7 @@ var b = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-select",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	static {

package/dist/skeleton/skeleton.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.examples.js","names":[],"sources":["../../src/skeleton/skeleton.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/skeleton/define.js';\n\nexport default {\n  title: 'Elements/Skeleton',\n  component: 'nve-skeleton',\n};\n\n/**\n * @summary Basic skeleton component for text content. Placeholder lines appear while content loads.\n */\nexport const Default = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton style=\"width: 90%\"></nve-skeleton>\n  <nve-skeleton style=\"width: 80%\"></nve-skeleton>\n</div>`\n};\n\n/**\n * @summary Skeleton loading effects including pulse and shimmer animations. Use pulse for subtle breathing motion or shimmer for a scanning highlight that conveys active content loading.\n */\nexport const Effect = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton effect=\"pulse\"></nve-skeleton>\n  <nve-skeleton effect=\"shimmer\"></nve-skeleton>\n</div>`\n}\n\n/**\n * @summary Skeleton shape variants including default rectangle, pill, and round. Use pill for button or tag placeholders and round for avatar or icon placeholders to match the final content shape.\n */\nexport const Shape = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton shape=\"pill\"></nve-skeleton>\n  <nve-skeleton shape=\"round\" style=\"width: 40px; height: 40px;\"></nve-skeleton>\n</div>`\n}\n\n/**\n * @summary Skeleton with slotted content that automatically hides the placeholder when real content arrives. Use to wrap lazy-loaded content so the skeleton disappears once data loads without manual state management.\n */\nexport const Slotted = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton effect=\"shimmer\">slotting content will hide the skeleton</nve-skeleton>\n  <nve-skeleton effect=\"shimmer\">  </nve-skeleton>\n</div>`\n}\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"skeleton.examples.js","names":[],"sources":["../../src/skeleton/skeleton.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/skeleton/define.js';\n\nexport default {\n  title: 'Elements/Skeleton',\n  component: 'nve-skeleton',\n};\n\n/**\n * @summary Basic skeleton component for text content. Placeholder lines appear while content loads.\n */\nexport const Default = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton style=\"width: 90%\"></nve-skeleton>\n  <nve-skeleton style=\"width: 80%\"></nve-skeleton>\n</div>`\n};\n\n/**\n * @summary Skeleton loading effects including pulse and shimmer animations. Use pulse for subtle breathing motion or shimmer for a scanning highlight that conveys active content loading.\n */\nexport const Effect = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton effect=\"pulse\"></nve-skeleton>\n  <nve-skeleton effect=\"shimmer\"></nve-skeleton>\n</div>`\n}\n\n/**\n * @summary Skeleton shape variants including default rectangle, pill, and round. Use pill for button or tag placeholders and round for avatar or icon placeholders to match the final content shape.\n * @tags theme\n */\nexport const Shape = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton shape=\"pill\"></nve-skeleton>\n  <nve-skeleton shape=\"round\" style=\"width: 40px; height: 40px;\"></nve-skeleton>\n</div>`\n}\n\n/**\n * @summary Skeleton with slotted content that automatically hides the placeholder when real content arrives. Use to wrap lazy-loaded content so the skeleton disappears once data loads without manual state management.\n */\nexport const Slotted = {\n  render: () => html`\n<div nve-layout=\"column gap:xs align:stretch\">\n  <nve-skeleton></nve-skeleton>\n  <nve-skeleton effect=\"shimmer\">slotting content will hide the skeleton</nve-skeleton>\n  <nve-skeleton effect=\"shimmer\">  </nve-skeleton>\n</div>`\n}\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/skeleton/skeleton.examples.json

@@ -27,7 +27,9 @@
       "summary": "Skeleton shape variants including default rectangle, pill, and round. Use pill for button or tag placeholders and round for avatar or icon placeholders to match the final content shape.",
       "description": "",
       "composition": false,
-      "tags": []
+      "tags": [
+        "theme"
+      ]
     },
     {
       "id": "core-skeleton_slotted",

package/dist/skeleton/skeleton2.js

@@ -15,7 +15,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-skeleton",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	render() {

package/dist/sort-button/sort-button2.js

@@ -19,7 +19,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-sort-button",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	static {

package/dist/sparkline/sparkline.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline.examples.js","names":[],"sources":["../../src/sparkline/sparkline.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/sparkline/define.js';\nimport '@nvidia-elements/core/grid/define.js';\nimport '@nvidia-elements/core/range/define.js';\n\nexport default {\n  title: 'Elements/Sparkline',\n  component: 'nve-sparkline',\n};\n\n/**\n * @summary Basic sparkline from numeric array values. Use as a compact trend indicator.\n */\nexport const Default = {\n  render: () => html`\n    <nve-sparkline id=\"default\"></nve-sparkline>\n    <script type=\"module\">\n      const sparkline = document.querySelector('nve-sparkline#default');\n      sparkline.data = [18, 22, 20, 24, 19, 28, 25, 30];\n    </script>\n  `\n};\n\n/**\n * @summary Mark variants include line, area, gradient, column, and winloss to support trend and outcome signals.\n */\nexport const Marks = {\n  render: () => html`\n    <div nve-layout=\"row gap:md\">\n      <nve-sparkline data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n      <nve-sparkline mark=\"area\" data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n      <nve-sparkline mark=\"gradient\" data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n      <nve-sparkline mark=\"column\" data=\"[6, 10, 8, 16, 13, 18, 15]\"></nve-sparkline>\n      <nve-sparkline mark=\"winloss\" data=\"[5, -3, 2, -1, 4, 0, 3]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary Semantic statuses apply task, support, and trend color mappings.\n */\nexport const Status = {\n  render: () => html`\n    <div nve-layout=\"row gap:md\">\n      <nve-sparkline status=\"accent\" mark=\"area\" data=\"[3, 2, 10, 8, 4, 6, 9]\"></nve-sparkline>\n      <nve-sparkline status=\"danger\" mark=\"area\" data=\"[15, 14, 12, 9, 8, 7, 5]\"></nve-sparkline>\n      <nve-sparkline status=\"warning\" mark=\"area\" data=\"[8, 9, 7, 10, 9, 8, 9]\"></nve-sparkline>\n      <nve-sparkline status=\"success\" mark=\"area\" data=\"[5, 7, 8, 9, 12, 14, 15]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary Sparklines inherit font size and flow inline with surrounding text and metrics.\n */\nexport const InlineWithText = {\n  render: () => html`\n    <div nve-layout=\"column gap:lg\">\n      <p nve-text=\"body loose\">\n        This week's lane keeping safety score trend \n        <nve-sparkline\n          mark=\"area\"\n          status=\"success\"\n          data=\"[86, 87, 86, 88, 89, 90, 92, 93]\"\n          aria-label=\"lane keeping safety score trend\"></nve-sparkline>\n        shows a steady rise after an early dip, with decreasing interventions per shift: \n        <nve-sparkline\n          mark=\"column\"\n          status=\"accent\"\n          data=\"[16, 14, 15, 13, 12, 11, 10]\"\n          aria-label=\"lane keeping interventions per shift\"></nve-sparkline>, \n        and predominantly successful route outcomes: \n        <nve-sparkline\n          mark=\"winloss\"\n          status=\"success\"\n          data=\"[1, 1, -1, 1, 0, 1, 1]\"\n          aria-label=\"lane keeping route outcomes\"></nve-sparkline>.\n      </p>\n    </div>\n  `\n};\n\n/**\n * @summary Embed sparklines in grid cells to add compact trend context to tabular data.\n */\nexport const DataGrid = {\n  render: () => html`\n    <nve-grid>\n      <nve-grid-header>\n        <nve-grid-column>Autonomy Service</nve-grid-column>\n        <nve-grid-column>Safety Score</nve-grid-column>\n        <nve-grid-column>Interventions / Shift</nve-grid-column>\n        <nve-grid-column>Route Outcome</nve-grid-column>\n      </nve-grid-header>\n      <nve-grid-row>\n        <nve-grid-cell>Lane Keeping</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Lane Keeping 30 day safety score trend\"\n            mark=\"area\"\n            status=\"success\"\n            min=\"0\"\n            max=\"100\"\n            data=\"[86, 87, 86, 88, 89, 90, 92, 93]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Lane Keeping interventions per shift\"\n            mark=\"column\"\n            status=\"success\"\n            min=\"0\"\n            max=\"50\"\n            data=\"[12, 11, 12, 10, 9, 8, 7, 6]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Lane Keeping route outcomes\"\n            mark=\"winloss\"\n            data=\"[1, 1, 1, 0, 1, 0, 1, 1]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell>Object Detection</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Object Detection 30 day safety score trend\"\n            mark=\"area\"\n            status=\"warning\"\n            min=\"0\"\n            max=\"100\"\n            data=\"[76, 88, 72, 79, 85, 70, 83, 74]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Object Detection interventions per shift\"\n            mark=\"column\"\n            status=\"warning\"\n            min=\"0\"\n            max=\"50\"\n            data=\"[18, 20, 17, 19, 20, 21, 19, 22]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Object Detection route outcomes\"\n            mark=\"winloss\"\n            data=\"[1, 0, -1, 1, 0, -1, 0, 1]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell>Path Planning</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Path Planning 30 day safety score trend\"\n            mark=\"area\"\n            status=\"danger\"\n            min=\"0\"\n            max=\"100\"\n            data=\"[58, 54, 49, 45, 40, 36, 31, 27]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Path Planning interventions per shift\"\n            mark=\"column\"\n            status=\"danger\"\n            min=\"0\"\n            max=\"50\"\n            data=\"[24, 26, 29, 31, 34, 36, 39, 42]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Path Planning route outcomes\"\n            mark=\"winloss\"\n            data=\"[1, -1, 0, -1, -1, -1, 0, -1]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n      </nve-grid-row>\n    </nve-grid>\n  `\n};\n\n/**\n * @summary Explicit size tokens set fixed sparkline height independent of text context.\n */\nexport const ExplicitSize = {\n  render: () => html`\n    <div id=\"sparkline-sizes\" nve-layout=\"row gap:md\">\n      <nve-sparkline size=\"xs\"></nve-sparkline>\n      <nve-sparkline size=\"sm\"></nve-sparkline>\n      <nve-sparkline size=\"md\"></nve-sparkline>\n      <nve-sparkline size=\"lg\"></nve-sparkline>\n      <nve-sparkline size=\"xl\"></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-sizes > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [9, 12, 11, 13, 15, 14, 16];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Without a size attribute, height scales with the parent text size for typographic alignment.\n */\nexport const DefaultSize = {\n  render: () => html`\n    <div id=\"inline-sparkline-sizes\" nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:sm\" nve-text=\"heading\">\n        <span>heading</span>\n        <nve-sparkline></nve-sparkline>\n      </div>\n      <div nve-layout=\"row gap:sm\" nve-text=\"body\">\n        <span>body</span>\n        <nve-sparkline></nve-sparkline>\n      </div>\n      <div nve-layout=\"row gap:sm\" nve-text=\"label sm\">\n        <span>label sm</span>\n        <nve-sparkline></nve-sparkline>\n      </div>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#inline-sparkline-sizes > div[nve-text] > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [9, 12, 11, 13, 15, 14, 16];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Interpolation controls linear, smooth, or step transitions between points.\n */\nexport const Interpolation = {\n  render: () => html`\n    <div id=\"sparkline-interpolations\" nve-layout=\"row gap:md\">\n      <nve-sparkline mark=\"area\" interpolation=\"linear\"></nve-sparkline>\n      <nve-sparkline mark=\"area\" interpolation=\"smooth\"></nve-sparkline>\n      <nve-sparkline mark=\"area\" interpolation=\"step\"></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-interpolations > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [6, 10, 8, 16, 13, 18, 15];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Symbols denote specific data points in line, area, and gradient marks.\n */\nexport const Symbols = {\n  render: () => html`\n    <div id=\"sparkline-symbols\" nve-layout=\"row gap:md\">\n      <nve-sparkline denote-last></nve-sparkline>\n      <nve-sparkline denote-first denote-last></nve-sparkline>\n      <nve-sparkline denote-min denote-max></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-symbols > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [12, 8, 15, 10, 18, 14, 11];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Fixed min and max values define a shared vertical domain to ensure comparability across adjacent sparklines.\n */\nexport const FixedDataDomain = {\n  render: () => html`\n    <div nve-layout=\"column gap:md align:left\" nve-text=\"body lg\">\n      <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[80, 85, 90, 95, 100]\"></nve-sparkline>\n      <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[40, 45, 50, 55, 60]\"></nve-sparkline>\n      <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[0, 5, 10, 15, 20]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary The chart renders a zero baseline when the data includes both positive and negative values.\n */\nexport const ZeroLine = {\n  render: () => html`\n    <div nve-layout=\"row gap:md\">\n      <nve-sparkline aria-label=\"mixed values\" mark=\"area\" data=\"[-3, 2, 5, -1, 3, -2, 4]\"></nve-sparkline>\n      <nve-sparkline aria-label=\"mostly negative values\" mark=\"gradient\" data=\"[-8, -5, -2, 1, -3, -6, -4]\"></nve-sparkline>\n      <nve-sparkline aria-label=\"mixed values column\" mark=\"column\" data=\"[-3, 2, 5, -1, 3, -2, 4]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary Interval length adjusts spacing between points for line marks, from compact to spacious.\n */\nexport const IntervalLength = {\n  render: () => html`\n    <div id=\"sparkline-intervals\" nve-layout=\"row gap:md\">\n      <nve-sparkline interval-length=\"0.3\"></nve-sparkline>\n      <nve-sparkline interval-length=\"0.6\"></nve-sparkline>\n      <nve-sparkline interval-length=\"2.0\"></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-intervals > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [10, 20, 15, 25, 18];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary CSS custom properties are available to adjust dimensions and visual styling.\n */\nexport const CustomStyling = {\n  render: () => html`\n    <nve-sparkline\n      aria-label=\"custom sparkline\"\n      mark=\"gradient\"\n      interpolation=\"smooth\"\n      data=\"[8, 14, 9, 17, 13, 21, 16]\"\n      denote-last\n      style=\"\n        --height: 120px;\n        --accent-color: var(--nve-sys-layer-canvas-background);\n        --accent-radius: 5px;\n        --accent-border-width: 3px;\n        --line-width: 2.5px;\n        --line-color: var(--nve-ref-color-blue-cobalt-1100);\n        --gradient-max-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100) 45%, transparent);\n        --gradient-min-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100), transparent 90%);\n      \"\n    ></nve-sparkline>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"sparkline.examples.js","names":[],"sources":["../../src/sparkline/sparkline.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/sparkline/define.js';\nimport '@nvidia-elements/core/grid/define.js';\nimport '@nvidia-elements/core/range/define.js';\n\nexport default {\n  title: 'Elements/Sparkline',\n  component: 'nve-sparkline',\n};\n\n/**\n * @summary Basic sparkline from numeric array values. Use as a compact trend indicator.\n */\nexport const Default = {\n  render: () => html`\n    <nve-sparkline id=\"default\"></nve-sparkline>\n    <script type=\"module\">\n      const sparkline = document.querySelector('nve-sparkline#default');\n      sparkline.data = [18, 22, 20, 24, 19, 28, 25, 30];\n    </script>\n  `\n};\n\n/**\n * @summary Mark variants include line, area, gradient, column, and winloss to support trend and outcome signals.\n */\nexport const Marks = {\n  render: () => html`\n    <div nve-layout=\"row gap:md\">\n      <nve-sparkline data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n      <nve-sparkline mark=\"area\" data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n      <nve-sparkline mark=\"gradient\" data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n      <nve-sparkline mark=\"column\" data=\"[6, 10, 8, 16, 13, 18, 15]\"></nve-sparkline>\n      <nve-sparkline mark=\"winloss\" data=\"[5, -3, 2, -1, 4, 0, 3]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary Semantic statuses apply task, support, and trend color mappings.\n */\nexport const Status = {\n  render: () => html`\n    <div nve-layout=\"row gap:md\">\n      <nve-sparkline status=\"accent\" mark=\"area\" data=\"[3, 2, 10, 8, 4, 6, 9]\"></nve-sparkline>\n      <nve-sparkline status=\"danger\" mark=\"area\" data=\"[15, 14, 12, 9, 8, 7, 5]\"></nve-sparkline>\n      <nve-sparkline status=\"warning\" mark=\"area\" data=\"[8, 9, 7, 10, 9, 8, 9]\"></nve-sparkline>\n      <nve-sparkline status=\"success\" mark=\"area\" data=\"[5, 7, 8, 9, 12, 14, 15]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary Sparklines inherit font size and flow inline with surrounding text and metrics.\n */\nexport const InlineWithText = {\n  render: () => html`\n    <div nve-layout=\"column gap:lg\">\n      <p nve-text=\"body loose\">\n        This week's lane keeping safety score trend \n        <nve-sparkline\n          mark=\"area\"\n          status=\"success\"\n          data=\"[86, 87, 86, 88, 89, 90, 92, 93]\"\n          aria-label=\"lane keeping safety score trend\"></nve-sparkline>\n        shows a steady rise after an early dip, with decreasing interventions per shift: \n        <nve-sparkline\n          mark=\"column\"\n          status=\"accent\"\n          data=\"[16, 14, 15, 13, 12, 11, 10]\"\n          aria-label=\"lane keeping interventions per shift\"></nve-sparkline>, \n        and predominantly successful route outcomes: \n        <nve-sparkline\n          mark=\"winloss\"\n          status=\"success\"\n          data=\"[1, 1, -1, 1, 0, 1, 1]\"\n          aria-label=\"lane keeping route outcomes\"></nve-sparkline>.\n      </p>\n    </div>\n  `\n};\n\n/**\n * @summary Embed sparklines in grid cells to add compact trend context to tabular data.\n */\nexport const DataGrid = {\n  render: () => html`\n    <nve-grid>\n      <nve-grid-header>\n        <nve-grid-column>Autonomy Service</nve-grid-column>\n        <nve-grid-column>Safety Score</nve-grid-column>\n        <nve-grid-column>Interventions / Shift</nve-grid-column>\n        <nve-grid-column>Route Outcome</nve-grid-column>\n      </nve-grid-header>\n      <nve-grid-row>\n        <nve-grid-cell>Lane Keeping</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Lane Keeping 30 day safety score trend\"\n            mark=\"area\"\n            status=\"success\"\n            min=\"0\"\n            max=\"100\"\n            data=\"[86, 87, 86, 88, 89, 90, 92, 93]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Lane Keeping interventions per shift\"\n            mark=\"column\"\n            status=\"success\"\n            min=\"0\"\n            max=\"50\"\n            data=\"[12, 11, 12, 10, 9, 8, 7, 6]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Lane Keeping route outcomes\"\n            mark=\"winloss\"\n            data=\"[1, 1, 1, 0, 1, 0, 1, 1]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell>Object Detection</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Object Detection 30 day safety score trend\"\n            mark=\"area\"\n            status=\"warning\"\n            min=\"0\"\n            max=\"100\"\n            data=\"[76, 88, 72, 79, 85, 70, 83, 74]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Object Detection interventions per shift\"\n            mark=\"column\"\n            status=\"warning\"\n            min=\"0\"\n            max=\"50\"\n            data=\"[18, 20, 17, 19, 20, 21, 19, 22]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Object Detection route outcomes\"\n            mark=\"winloss\"\n            data=\"[1, 0, -1, 1, 0, -1, 0, 1]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n      </nve-grid-row>\n      <nve-grid-row>\n        <nve-grid-cell>Path Planning</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Path Planning 30 day safety score trend\"\n            mark=\"area\"\n            status=\"danger\"\n            min=\"0\"\n            max=\"100\"\n            data=\"[58, 54, 49, 45, 40, 36, 31, 27]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Path Planning interventions per shift\"\n            mark=\"column\"\n            status=\"danger\"\n            min=\"0\"\n            max=\"50\"\n            data=\"[24, 26, 29, 31, 34, 36, 39, 42]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n        <nve-grid-cell>\n          <nve-sparkline\n            aria-label=\"Path Planning route outcomes\"\n            mark=\"winloss\"\n            data=\"[1, -1, 0, -1, -1, -1, 0, -1]\"\n            size=\"md\"></nve-sparkline>\n        </nve-grid-cell>\n      </nve-grid-row>\n    </nve-grid>\n  `\n};\n\n/**\n * @summary Explicit size tokens set fixed sparkline height independent of text context.\n */\nexport const ExplicitSize = {\n  render: () => html`\n    <div id=\"sparkline-sizes\" nve-layout=\"row gap:md\">\n      <nve-sparkline size=\"xs\"></nve-sparkline>\n      <nve-sparkline size=\"sm\"></nve-sparkline>\n      <nve-sparkline size=\"md\"></nve-sparkline>\n      <nve-sparkline size=\"lg\"></nve-sparkline>\n      <nve-sparkline size=\"xl\"></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-sizes > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [9, 12, 11, 13, 15, 14, 16];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Without a size attribute, height scales with the parent text size for typographic alignment.\n */\nexport const DefaultSize = {\n  render: () => html`\n    <div id=\"inline-sparkline-sizes\" nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:sm\" nve-text=\"heading\">\n        <span>heading</span>\n        <nve-sparkline></nve-sparkline>\n      </div>\n      <div nve-layout=\"row gap:sm\" nve-text=\"body\">\n        <span>body</span>\n        <nve-sparkline></nve-sparkline>\n      </div>\n      <div nve-layout=\"row gap:sm\" nve-text=\"label sm\">\n        <span>label sm</span>\n        <nve-sparkline></nve-sparkline>\n      </div>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#inline-sparkline-sizes > div[nve-text] > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [9, 12, 11, 13, 15, 14, 16];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Interpolation controls linear, smooth, or step transitions between points.\n */\nexport const Interpolation = {\n  render: () => html`\n    <div id=\"sparkline-interpolations\" nve-layout=\"row gap:md\">\n      <nve-sparkline mark=\"area\" interpolation=\"linear\"></nve-sparkline>\n      <nve-sparkline mark=\"area\" interpolation=\"smooth\"></nve-sparkline>\n      <nve-sparkline mark=\"area\" interpolation=\"step\"></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-interpolations > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [6, 10, 8, 16, 13, 18, 15];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Symbols denote specific data points in line, area, and gradient marks.\n */\nexport const Symbols = {\n  render: () => html`\n    <div id=\"sparkline-symbols\" nve-layout=\"row gap:md\">\n      <nve-sparkline denote-last></nve-sparkline>\n      <nve-sparkline denote-first denote-last></nve-sparkline>\n      <nve-sparkline denote-min denote-max></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-symbols > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [12, 8, 15, 10, 18, 14, 11];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary Fixed min and max values define a shared vertical domain to ensure comparability across adjacent sparklines.\n */\nexport const FixedDataDomain = {\n  render: () => html`\n    <div nve-layout=\"column gap:md align:left\" nve-text=\"body lg\">\n      <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[80, 85, 90, 95, 100]\"></nve-sparkline>\n      <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[40, 45, 50, 55, 60]\"></nve-sparkline>\n      <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[0, 5, 10, 15, 20]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary The chart renders a zero baseline when the data includes both positive and negative values.\n */\nexport const ZeroLine = {\n  render: () => html`\n    <div nve-layout=\"row gap:md\">\n      <nve-sparkline aria-label=\"mixed values\" mark=\"area\" data=\"[-3, 2, 5, -1, 3, -2, 4]\"></nve-sparkline>\n      <nve-sparkline aria-label=\"mostly negative values\" mark=\"gradient\" data=\"[-8, -5, -2, 1, -3, -6, -4]\"></nve-sparkline>\n      <nve-sparkline aria-label=\"mixed values column\" mark=\"column\" data=\"[-3, 2, 5, -1, 3, -2, 4]\"></nve-sparkline>\n    </div>\n  `\n};\n\n/**\n * @summary Interval length adjusts spacing between points for line marks, from compact to spacious.\n */\nexport const IntervalLength = {\n  render: () => html`\n    <div id=\"sparkline-intervals\" nve-layout=\"row gap:md\">\n      <nve-sparkline interval-length=\"0.3\"></nve-sparkline>\n      <nve-sparkline interval-length=\"0.6\"></nve-sparkline>\n      <nve-sparkline interval-length=\"2.0\"></nve-sparkline>\n    </div>\n    <script type=\"module\">\n      const sparklines = document.querySelectorAll('#sparkline-intervals > nve-sparkline');\n      for (const sparkline of sparklines) {\n        sparkline.data = [10, 20, 15, 25, 18];\n      }\n    </script>\n  `\n};\n\n/**\n * @summary CSS custom properties are available to adjust dimensions and visual styling.\n * @tags theme\n */\nexport const CustomStyling = {\n  render: () => html`\n    <nve-sparkline\n      aria-label=\"custom sparkline\"\n      mark=\"gradient\"\n      interpolation=\"smooth\"\n      data=\"[8, 14, 9, 17, 13, 21, 16]\"\n      denote-last\n      style=\"\n        --height: 120px;\n        --accent-color: var(--nve-sys-layer-canvas-background);\n        --accent-radius: 5px;\n        --accent-border-width: 3px;\n        --line-width: 2.5px;\n        --line-color: var(--nve-ref-color-blue-cobalt-1100);\n        --gradient-max-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100) 45%, transparent);\n        --gradient-min-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100), transparent 90%);\n      \"\n    ></nve-sparkline>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/sparkline/sparkline.examples.json

@@ -117,7 +117,9 @@
       "summary": "CSS custom properties are available to adjust dimensions and visual styling.",
       "description": "",
       "composition": false,
-      "tags": []
+      "tags": [
+        "theme"
+      ]
     }
   ]
 }

package/dist/sparkline/sparkline2.js

@@ -21,7 +21,7 @@ var C = class extends _ {
 	static {
 		this.metadata = {
 			tag: "nve-sparkline",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	render() {

package/dist/star-rating/star-rating2.js

@@ -18,7 +18,7 @@ var l = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-star-rating",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	static {

package/dist/steps/steps2.js

@@ -23,7 +23,7 @@ var v = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-steps-item",
-			version: "0.0.3",
+			version: "0.0.4",
 			parents: ["nve-steps"]
 		};
 	}
@@ -67,7 +67,7 @@ var y = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-steps",
-			version: "0.0.3",
+			version: "0.0.4",
 			children: ["nve-steps-item"]
 		};
 	}

package/dist/switch/switch-group2.js

@@ -11,7 +11,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-switch-group",
-			version: "0.0.3",
+			version: "0.0.4",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/switch/switch2.js

@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-switch",
-			version: "0.0.3",
+			version: "0.0.4",
 			children: [
 				"label",
 				"input",

package/dist/tabs/define.d.ts

@@ -1,7 +1,8 @@
-import { TabsItem, Tabs } from '.';
+import { TabsGroup, TabsItem, Tabs } from '.';
 declare global {
     interface HTMLElementTagNameMap {
         'nve-tabs-item': TabsItem;
         'nve-tabs': Tabs;
+        'nve-tabs-group': TabsGroup;
     }
 }

package/dist/tabs/define.js

@@ -1,6 +1,7 @@
 import { define as e } from "../internal/utils/dom.js";
 import { Tabs as t, TabsItem as n } from "./tabs2.js";
-e(n), e(t);
+import { TabsGroup as r } from "./tabs-group2.js";
+e(n), e(t), e(r);
 //#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/tabs/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/tabs/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { TabsItem, Tabs } from '@nvidia-elements/core/tabs';\n\ndefine(TabsItem);\ndefine(Tabs);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-tabs-item': TabsItem;\n    'nve-tabs': Tabs;\n  }\n}\n"],"mappings":";;AAMA,EAAO,EAAS,EAChB,EAAO,EAAK"}
+{"version":3,"file":"define.js","names":[],"sources":["../../src/tabs/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { TabsGroup, TabsItem, Tabs } from '@nvidia-elements/core/tabs';\n\ndefine(TabsItem);\ndefine(Tabs);\ndefine(TabsGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-tabs-item': TabsItem;\n    'nve-tabs': Tabs;\n    'nve-tabs-group': TabsGroup;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,EAAS,EAChB,EAAO,EAAK,EACZ,EAAO,EAAU"}

package/dist/tabs/index.d.ts

@@ -1 +1,2 @@
 export * from './tabs.js';
+export * from './tabs-group.js';

package/dist/tabs/index.js

@@ -1,2 +1,3 @@
 import { Tabs as e, TabsItem as t } from "./tabs2.js";
-export { e as Tabs, t as TabsItem };
+import { TabsGroup as n } from "./tabs-group2.js";
+export { e as Tabs, n as TabsGroup, t as TabsItem };

package/dist/tabs/tabs-group.d.ts

@@ -0,0 +1,51 @@
+import { PropertyValues, LitElement } from 'lit';
+/** Arranges the tab strip and slot-matched panels: stacked column (`top`), or sidebar row with tabs at inline-start (`start`) or inline-end (`end`). */
+export type TabsGroupAlignment = 'top' | 'start' | 'end';
+/**
+ * @element nve-tabs-group
+ * @description Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.
+ * @since 1.67.0
+ * @entrypoint \@nvidia-elements/core/tabs
+ * @command --toggle - Select the matching tab and reveal the panel whose slot matches the invoker value.
+ * @event select - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection
+ * @slot - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group.
+ * @slot {value} - Named panel content where the slot name matches a nve-tabs-item value.
+ * @cssprop --padding
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ * @responsive false
+ */
+export declare class TabsGroup extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        children: string[];
+    };
+    /** Options for observing the slotted `nve-tabs` subtree (tab list / item attribute changes). */
+    protected static readonly subtreeObserverInit: {
+        readonly childList: true;
+        readonly subtree: true;
+        readonly attributes: true;
+        readonly attributeFilter: ["disabled", "id", "selected", "value"];
+    };
+    private defaultSlotElements;
+    /**
+     * Arranges the tab strip relative to slot-matched panels: stacked column (`top`), or sidebar row with tabs at
+     * inline-start (`start`) or inline-end (`end`) beside the panel region.
+     */
+    alignment: TabsGroupAlignment;
+    private panelValues;
+    private selectedValue;
+    /** @private */
+    _internals: ElementInternals;
+    /**
+     * Renders the default slot (single `nve-tabs`) plus one named `<slot name={value}>` per distinct selectable
+     * `nve-tabs-item` value. `#syncPanelSlot` applies panel visibility and ARIA from `selectedValue`.
+     */
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues<this>): void;
+}

package/dist/tabs/tabs-group.js

@@ -0,0 +1,6 @@
+//#region src/tabs/tabs-group.css?inline
+var e = ":host{--padding: var(--nve-ref-space-sm) 0 0 0;display:block}:host(:is([alignment=\"start\"],[alignment=\"end\"])){--padding: 0}[internal-host]{display:flex;flex-direction:column}:host(:is([alignment=\"start\"],[alignment=\"end\"])) [internal-host]{flex-direction:row;align-items:flex-start;gap:var(--nve-ref-space-lg)}:host([alignment=\"end\"]) [internal-host]{flex-direction:row-reverse}:host(:is([alignment=\"start\"],[alignment=\"end\"])) [internal-host]>slot:not([name]){flex-shrink:0}:host(:is([alignment=\"start\"],[alignment=\"end\"])) [internal-host]>slot[name]{flex:1;min-width:0}::slotted([slot]){display:block;padding:var(--padding)}::slotted([slot][hidden]){display:none!important}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=tabs-group.js.map

package/dist/tabs/tabs-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-group.js","names":[],"sources":["../../src/tabs/tabs-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-space-sm) 0 0 0;\n  display: block;\n}\n\n:host(:is([alignment='start'], [alignment='end'])) {\n  --padding: 0;\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: column;\n}\n\n:host(:is([alignment='start'], [alignment='end'])) [internal-host] {\n  flex-direction: row;\n  align-items: flex-start;\n  gap: var(--nve-ref-space-lg);\n}\n\n:host([alignment='end']) [internal-host] {\n  flex-direction: row-reverse;\n}\n\n:host(:is([alignment='start'], [alignment='end'])) [internal-host] > slot:not([name]) {\n  flex-shrink: 0;\n}\n\n:host(:is([alignment='start'], [alignment='end'])) [internal-host] > slot[name] {\n  flex: 1;\n  min-width: 0;\n}\n\n::slotted([slot]) {\n  display: block;\n  padding: var(--padding);\n}\n\n::slotted([slot][hidden]) {\n  display: none !important;\n}\n"],"mappings":""}

package/dist/tabs/tabs-group2.js

@@ -0,0 +1,144 @@
+import { generateId as e, sameOrderedStringArray as t, uniqueNonEmptyStrings as n } from "../internal/utils/dom.js";
+import { attachInternals as r } from "../internal/utils/a11y.js";
+import { __decorate as i } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { audit as a } from "../internal/controllers/audit.controller.js";
+import { useStyles as o } from "../internal/styles/index.js";
+import { Tabs as s } from "./tabs2.js";
+import c from "./tabs-group.js";
+import { LitElement as l, html as u } from "lit";
+import { property as d } from "lit/decorators/property.js";
+import { state as f } from "lit/decorators/state.js";
+import { queryAssignedElements as p } from "lit/decorators/query-assigned-elements.js";
+//#region src/tabs/tabs-group.ts
+var m, h = class extends l {
+	static {
+		m = this;
+	}
+	constructor(...e) {
+		super(...e), this.alignment = "top", this.panelValues = [], this.selectedValue = "";
+	}
+	static {
+		this.styles = o([c]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-tabs-group",
+			version: "0.0.4",
+			children: ["nve-tabs"]
+		};
+	}
+	static {
+		this.subtreeObserverInit = {
+			childList: !0,
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: [
+				"disabled",
+				"id",
+				"selected",
+				"value"
+			]
+		};
+	}
+	#e;
+	render() {
+		return u`<div internal-host><slot @slotchange="${this.#t}"></slot>${this.panelValues.map((e) => u`<slot name="${e}" @slotchange="${this.#n}"></slot>`)}</div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), r(this), this._internals.role = "group", this.addEventListener("command", this.#r);
+	}
+	firstUpdated() {
+		this.updateComplete.then(() => {
+			this.isConnected && this.#a();
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("command", this.#r), this.#e?.disconnect();
+	}
+	updated(e) {
+		super.updated(e), this.#e || this.#i();
+		let t = e;
+		(t.has("panelValues") || t.has("selectedValue")) && this.#c();
+	}
+	#t = () => {
+		this.#i(), this.#a();
+	};
+	#n = () => {
+		this.#c();
+	};
+	#r = (e) => {
+		if (e.command !== "--toggle") return;
+		let t = e.source?.value;
+		if (typeof t != "string" || !t.length) return;
+		let n = this.#d(), r = n.find((e) => this.#p(e) && e.value === t);
+		r && this.#o(n, r, !0);
+	};
+	#i() {
+		this.#e?.disconnect();
+		let e = this.#u();
+		e && (this.#e = new MutationObserver(() => this.#a()), this.#e.observe(e, m.subtreeObserverInit));
+	}
+	#a() {
+		let e = this.#d(), t = n(e.map((e) => e.value)), r = this.#m(e);
+		if (!r) {
+			e.forEach((e) => e.selected = !1), this.#s(t, "");
+			return;
+		}
+		this.#o(e, r, !1, t);
+	}
+	#o(e, t, r, i = n(e.map((e) => e.value))) {
+		let a = this.selectedValue !== t.value || !t.selected || e.some((e) => e !== t && e.selected);
+		e.forEach((e) => {
+			e.selected = e === t;
+		}), this.#s(i, t.value), r && a && this.dispatchEvent(new CustomEvent("select", {
+			bubbles: !0,
+			composed: !0,
+			detail: { value: t.value }
+		}));
+	}
+	#s(e, n) {
+		t(this.panelValues, e) || (this.panelValues = e), this.selectedValue !== n && (this.selectedValue = n);
+	}
+	#c() {
+		let e = this.#d(), t = new Map(e.filter((e) => this.#p(e)).map((e) => [e.value, e]));
+		this.#f().forEach((e) => {
+			this.#l(e, t);
+		});
+	}
+	#l(t, n) {
+		let r = n.get(t.name), i = t.assignedElements({ flatten: !0 });
+		if (!r) {
+			i.forEach((e) => {
+				e.hidden = !0;
+			});
+			return;
+		}
+		r.id ||= e(), i.forEach((n, i) => {
+			n.id ||= e(), !r.hasAttribute("aria-controls") && i === 0 && r.setAttribute("aria-controls", n.id), n.hasAttribute("aria-labelledby") || n.setAttribute("aria-labelledby", r.id), n.hasAttribute("role") || n.setAttribute("role", "tabpanel"), n.hidden = t.name !== this.selectedValue;
+		});
+	}
+	#u() {
+		let e = this.defaultSlotElements.find((e) => e.localName === s.metadata.tag) ?? this.querySelector(s.metadata.tag);
+		return e instanceof s ? e : void 0;
+	}
+	#d() {
+		return Array.from(this.#u()?.querySelectorAll("nve-tabs-item") ?? []);
+	}
+	#f() {
+		return Array.from(this.renderRoot.querySelectorAll("slot[name]"));
+	}
+	#p(e) {
+		return typeof e.value == "string" && e.value.length > 0 && !e.disabled;
+	}
+	#m(e) {
+		return e.find((e) => this.#p(e) && e.selected) ?? e.find((e) => this.#p(e));
+	}
+};
+i([p({ flatten: !0 })], h.prototype, "defaultSlotElements", void 0), i([d({
+	type: String,
+	reflect: !0
+})], h.prototype, "alignment", void 0), i([f()], h.prototype, "panelValues", void 0), i([f()], h.prototype, "selectedValue", void 0), h = m = i([a()], h);
+//#endregion
+export { h as TabsGroup };
+
+//# sourceMappingURL=tabs-group2.js.map

package/dist/tabs/tabs-group2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-group2.js","names":["#handleDefaultSlotChange","#handlePanelSlotChange","#handleCommand","#syncFromTabs","#tabsObserver","#observeTabs","#syncPanels","#getTabItems","#isSelectableTab","#setActiveTab","#getTabsElement","#resolveSelectedTab","#commitState","#getPanelSlots","#syncPanelSlot"],"sources":["../../src/tabs/tabs-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { state } from 'lit/decorators/state.js';\nimport {\n  attachInternals,\n  audit,\n  generateId,\n  sameOrderedStringArray,\n  uniqueNonEmptyStrings,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Tabs, type TabsItem } from './tabs.js';\nimport styles from './tabs-group.css?inline';\n\n/** Invoker command source for `--toggle` (e.g. `nve-tabs-item` with `value`). */\ntype TabsGroupCommandSource = HTMLElement & {\n  disabled?: boolean;\n  value?: string | null;\n};\n\n/** `command` event from Invoker Commands; `source` is the control that fired. */\ntype TabsGroupCommandEvent = Event & {\n  command?: string;\n  source?: TabsGroupCommandSource | null;\n};\n\n/** Payload for the composed `select` event when the active tab value changes via command. */\ntype TabsGroupSelectDetail = { value: string };\n\n/** Arranges the tab strip and slot-matched panels: stacked column (`top`), or sidebar row with tabs at inline-start (`start`) or inline-end (`end`). */\nexport type TabsGroupAlignment = 'top' | 'start' | 'end';\n\n/**\n * @element nve-tabs-group\n * @description Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.\n * @since 1.67.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @command --toggle - Select the matching tab and reveal the panel whose slot matches the invoker value.\n * @event select - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection\n * @slot - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group.\n * @slot {value} - Named panel content where the slot name matches a nve-tabs-item value.\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\nexport class TabsGroup extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs-group',\n    version: '0.0.0',\n    children: ['nve-tabs']\n  };\n\n  /** Options for observing the slotted `nve-tabs` subtree (tab list / item attribute changes). */\n  protected static readonly subtreeObserverInit = {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['disabled', 'id', 'selected', 'value']\n  } as const satisfies MutationObserverInit;\n\n  @queryAssignedElements({ flatten: true }) private defaultSlotElements!: HTMLElement[];\n\n  /**\n   * Arranges the tab strip relative to slot-matched panels: stacked column (`top`), or sidebar row with tabs at\n   * inline-start (`start`) or inline-end (`end`) beside the panel region.\n   */\n  @property({ type: String, reflect: true }) alignment: TabsGroupAlignment = 'top';\n\n  @state() private panelValues: string[] = [];\n\n  @state() private selectedValue = '';\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #tabsObserver?: MutationObserver;\n\n  /**\n   * Renders the default slot (single `nve-tabs`) plus one named `<slot name={value}>` per distinct selectable\n   * `nve-tabs-item` value. `#syncPanelSlot` applies panel visibility and ARIA from `selectedValue`.\n   */\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#handleDefaultSlotChange}></slot>\n        ${this.panelValues.map(value => html`<slot name=${value} @slotchange=${this.#handlePanelSlotChange}></slot>`)}\n      </div>\n    `;\n  }\n\n  // --- Lifecycle & command ---\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n    this.addEventListener('command', this.#handleCommand as EventListener);\n  }\n\n  firstUpdated() {\n    void this.updateComplete.then(() => {\n      if (!this.isConnected) {\n        return;\n      }\n\n      this.#syncFromTabs();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('command', this.#handleCommand as EventListener);\n    this.#tabsObserver?.disconnect();\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (!this.#tabsObserver) {\n      this.#observeTabs();\n    }\n\n    // `@state()` fields are not in `PropertyValues<this>` keys; cast for membership checks.\n    const props = changedProperties as ReadonlyMap<PropertyKey, unknown>;\n    if (props.has('panelValues') || props.has('selectedValue')) {\n      this.#syncPanels();\n    }\n  }\n\n  #handleDefaultSlotChange = (): void => {\n    this.#observeTabs();\n    this.#syncFromTabs();\n  };\n\n  #handlePanelSlotChange = (): void => {\n    this.#syncPanels();\n  };\n\n  /**\n   * Handles Invoker `--toggle` on a tab item: selects the matching `nve-tabs-item` and syncs panels.\n   * Ignores non-toggle commands and invokers without a non-empty string `value`.\n   */\n  #handleCommand = (event: TabsGroupCommandEvent): void => {\n    if (event.command !== '--toggle') {\n      return;\n    }\n\n    const value = event.source?.value;\n    if (typeof value !== 'string' || !value.length) {\n      return;\n    }\n\n    const tabItems = this.#getTabItems();\n    const tabItem = tabItems.find(item => this.#isSelectableTab(item) && item.value === value);\n    if (!tabItem) {\n      return;\n    }\n\n    this.#setActiveTab(tabItems, tabItem, true);\n  };\n\n  // --- Tab strip sync (tabs → state) ---\n\n  /** Attaches a single `MutationObserver` on the slotted `nve-tabs` element to mirror tab list changes into state. */\n  #observeTabs(): void {\n    this.#tabsObserver?.disconnect();\n\n    const tabs = this.#getTabsElement();\n    if (!tabs) {\n      return;\n    }\n\n    this.#tabsObserver = new MutationObserver(() => this.#syncFromTabs());\n    this.#tabsObserver.observe(tabs, TabsGroup.subtreeObserverInit);\n  }\n\n  /**\n   * Reads the current tab items: derives ordered `panelValues` for render, resolves which tab should be active,\n   * and commits selection. Called on slot change, subtree mutations, and after mount.\n   */\n  #syncFromTabs(): void {\n    const tabItems = this.#getTabItems();\n    const nextPanelValues = uniqueNonEmptyStrings(tabItems.map(item => item.value));\n\n    const selectedTab = this.#resolveSelectedTab(tabItems);\n\n    if (!selectedTab) {\n      tabItems.forEach(item => (item.selected = false));\n      this.#commitState(nextPanelValues, '');\n      return;\n    }\n\n    this.#setActiveTab(tabItems, selectedTab, false, nextPanelValues);\n  }\n\n  /**\n   * Sets exactly one selected tab, updates `panelValues` / `selectedValue`, and optionally dispatches `select`.\n   *\n   * @param emitEvent - When true (command path), dispatches `select` if selection actually changed.\n   */\n  #setActiveTab(\n    tabItems: TabsItem[],\n    nextTab: TabsItem,\n    emitEvent: boolean,\n    nextPanelValues: string[] = uniqueNonEmptyStrings(tabItems.map(item => item.value))\n  ): void {\n    // True when the effective selection differs from the prior committed state (value, flags, or multi-select).\n    // `select` is only dispatched when both `emitEvent` (invoker/command path) and `changed` are true.\n    const changed =\n      this.selectedValue !== nextTab.value ||\n      !nextTab.selected ||\n      tabItems.some(item => item !== nextTab && item.selected);\n\n    tabItems.forEach(item => {\n      item.selected = item === nextTab;\n    });\n\n    this.#commitState(nextPanelValues, nextTab.value);\n\n    if (emitEvent && changed) {\n      this.dispatchEvent(\n        new CustomEvent<TabsGroupSelectDetail>('select', {\n          bubbles: true,\n          composed: true,\n          detail: { value: nextTab.value }\n        })\n      );\n    }\n  }\n\n  /** Updates reactive state for panel slot names and the active tab value without touching the tab items. */\n  #commitState(nextPanelValues: string[], nextSelectedValue: string): void {\n    if (!sameOrderedStringArray(this.panelValues, nextPanelValues)) {\n      this.panelValues = nextPanelValues;\n    }\n\n    if (this.selectedValue !== nextSelectedValue) {\n      this.selectedValue = nextSelectedValue;\n    }\n  }\n\n  // --- Panel sync (state → panels & ARIA) ---\n\n  /** For each named panel slot, wires `hidden` and tab↔panel ARIA ids to match `selectedValue`. */\n  #syncPanels(): void {\n    const tabItems = this.#getTabItems();\n    const tabMap = new Map(\n      tabItems.filter(item => this.#isSelectableTab(item)).map(item => [item.value, item] satisfies [string, TabsItem])\n    );\n\n    this.#getPanelSlots().forEach(slot => {\n      this.#syncPanelSlot(slot, tabMap);\n    });\n  }\n\n  /**\n   * If no selectable tab exists for `slot.name`, hides all assigned nodes. Otherwise shows only the panel(s)\n   * for the active value and assigns `role=\"tabpanel\"` / `aria-labelledby` when missing.\n   */\n  #syncPanelSlot(slot: HTMLSlotElement, tabMap: ReadonlyMap<string, TabsItem>): void {\n    const tabItem = tabMap.get(slot.name);\n    const panels = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n    if (!tabItem) {\n      panels.forEach(panel => {\n        panel.hidden = true;\n      });\n      return;\n    }\n\n    tabItem.id ||= generateId();\n\n    panels.forEach((panel, index) => {\n      panel.id ||= generateId();\n\n      if (!tabItem.hasAttribute('aria-controls') && index === 0) {\n        tabItem.setAttribute('aria-controls', panel.id);\n      }\n\n      if (!panel.hasAttribute('aria-labelledby')) {\n        panel.setAttribute('aria-labelledby', tabItem.id);\n      }\n\n      if (!panel.hasAttribute('role')) {\n        panel.setAttribute('role', 'tabpanel');\n      }\n\n      const isActive = slot.name === this.selectedValue;\n      panel.hidden = !isActive;\n    });\n  }\n\n  // --- DOM queries ---\n\n  /** Resolves the single slotted `nve-tabs` (default slot), with a light-DOM fallback for edge timing. */\n  #getTabsElement(): Tabs | undefined {\n    const el =\n      this.defaultSlotElements.find(element => element.localName === Tabs.metadata.tag) ??\n      this.querySelector(Tabs.metadata.tag);\n    return el instanceof Tabs ? el : undefined;\n  }\n\n  #getTabItems(): TabsItem[] {\n    return Array.from(this.#getTabsElement()?.querySelectorAll<TabsItem>('nve-tabs-item') ?? []);\n  }\n\n  #getPanelSlots(): HTMLSlotElement[] {\n    return Array.from(this.renderRoot.querySelectorAll<HTMLSlotElement>('slot[name]'));\n  }\n\n  /** Selectable tabs have a non-empty `value` and are not `disabled`. */\n  #isSelectableTab(tabItem: TabsItem): tabItem is TabsItem & { value: string } {\n    return typeof tabItem.value === 'string' && tabItem.value.length > 0 && !tabItem.disabled;\n  }\n\n  /** Prefer the selectable tab that is already selected; otherwise the first selectable tab. */\n  #resolveSelectedTab(tabItems: readonly TabsItem[]): TabsItem | undefined {\n    return (\n      tabItems.find(item => this.#isSelectableTab(item) && item.selected) ??\n      tabItems.find(item => this.#isSelectableTab(item))\n    );\n  }\n}\n"],"mappings":"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"}