@nvidia-elements/core 0.0.2 → 0.0.4

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/sparkline.utils.js

@@ -54,10 +54,7 @@ function d(e, t, n) {
 		case "step": return _(e);
 		case "smooth": return g(e);
 		case "linear": return h(e);
-		default: {
-			let e = t;
-			throw Error(`Unhandled interpolation: ${e}`);
-		}
+		default: throw Error(`Unhandled interpolation: ${t}`);
 	}
 }
 function f(e, t, n = 100) {
@@ -73,10 +70,7 @@ function f(e, t, n = 100) {
 		case "linear":
 			r = h(e);
 			break;
-		default: {
-			let e = t;
-			throw Error(`Unhandled interpolation: ${e}`);
-		}
+		default: throw Error(`Unhandled interpolation: ${t}`);
 	}
 	let i = e[e.length - 1], a = e[0];
 	return r += ` L ${i.x.toFixed(2)} ${n.toFixed(2)}`, r += ` L ${a.x.toFixed(2)} ${n.toFixed(2)} Z`, r;

package/dist/sparkline/sparkline.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline.utils.js","names":[],"sources":["../../src/sparkline/sparkline.utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Dimensions, Interpolation, Point, Rect, Scale, SparklineMark } from '@nvidia-elements/core/internal';\n\nexport const PRECISION = 2;\nexport const VIEW_HEIGHT = 100;\nexport const DEFAULT_INTERVAL_LENGTH_EM = 0.6;\n\nconst HORIZONTAL_UNIT_WIDTH = VIEW_HEIGHT * DEFAULT_INTERVAL_LENGTH_EM;\nconst COLUMN_GAP_RATIO = 0.7;\nconst WINLOSS_GAP_RATIO = 0.85;\n\nexport function toValidData(data: unknown): number[] {\n  if (!Array.isArray(data)) return [];\n  return data.filter(Number.isFinite);\n}\n\nexport function calculateViewBox(\n  mark: SparklineMark,\n  pointCount: number,\n  intervalLength = DEFAULT_INTERVAL_LENGTH_EM\n): Dimensions {\n  const isIntervalBased = mark === 'line' || mark === 'area' || mark === 'gradient';\n  const widthUnitCount = isIntervalBased ? Math.max(pointCount - 1, 1) : pointCount;\n  const normalizedIntervalLength =\n    Number.isFinite(intervalLength) && intervalLength > 0 ? intervalLength : DEFAULT_INTERVAL_LENGTH_EM;\n  const width =\n    mark === 'line' ? widthUnitCount * VIEW_HEIGHT * normalizedIntervalLength : widthUnitCount * HORIZONTAL_UNIT_WIDTH;\n\n  return {\n    width,\n    height: VIEW_HEIGHT\n  };\n}\n\nexport function calculateDomain(\n  values: number[],\n  explicitMin?: number,\n  explicitMax?: number,\n  includeZero = false\n): Scale | undefined {\n  if (values.length === 0) return undefined;\n\n  const dataMinimum = Math.min(...values);\n  const dataMaximum = Math.max(...values);\n\n  return {\n    min: explicitMin ?? (includeZero ? Math.min(dataMinimum, 0) : dataMinimum),\n    max: explicitMax ?? (includeZero ? Math.max(dataMaximum, 0) : dataMaximum)\n  };\n}\n\nexport function valueToY(value: number, min: number, max: number, viewHeight = VIEW_HEIGHT): number {\n  const range = max - min;\n  if (range === 0) return viewHeight / 2;\n  return viewHeight - ((value - min) / range) * viewHeight;\n}\n\nexport function toPlotPoints(\n  values: number[],\n  min: number,\n  max: number,\n  viewWidth: number,\n  viewHeight = VIEW_HEIGHT\n): Point[] {\n  const stepX = values.length > 1 ? viewWidth / (values.length - 1) : 0;\n  return values.map((value, index) => ({\n    x: index * stepX,\n    y: valueToY(value, min, max, viewHeight)\n  }));\n}\n\nexport function calculateSymbolIndices(\n  values: number[],\n  denoteFirst: boolean,\n  denoteLast: boolean,\n  denoteMin: boolean,\n  denoteMax: boolean\n): Set<number> {\n  const indices = new Set<number>();\n  if (values.length === 0) return indices;\n\n  if (denoteFirst) indices.add(0);\n  if (denoteLast) indices.add(values.length - 1);\n\n  const needsExtrema = denoteMin || denoteMax;\n  if (!needsExtrema) return indices;\n\n  const min = Math.min(...values);\n  const max = Math.max(...values);\n\n  values.forEach((value, index) => {\n    if (denoteMin && value === min) indices.add(index);\n    if (denoteMax && value === max) indices.add(index);\n  });\n\n  return indices;\n}\n\nexport function toInterpolation(interpolation: unknown): Interpolation {\n  switch (interpolation) {\n    case 'linear':\n      return 'linear';\n    case 'smooth':\n      return 'smooth';\n    case 'step':\n      return 'step';\n    default: {\n      return 'linear';\n    }\n  }\n}\n\nexport function toLinePath(points: Point[], interpolation: Interpolation, viewWidth: number): string {\n  if (points.length === 0) return '';\n  if (points.length === 1) {\n    const y = points[0]!.y.toFixed(PRECISION);\n    return `M 0 ${y} L ${viewWidth.toFixed(PRECISION)} ${y}`;\n  }\n\n  switch (interpolation) {\n    case 'step':\n      return toStepOpenPath(points);\n    case 'smooth':\n      return toSmoothOpenPath(points);\n    case 'linear':\n      return toLinearOpenPath(points);\n    default: {\n      const exhaustiveCheck: never = interpolation;\n      throw new Error(`Unhandled interpolation: ${exhaustiveCheck}`);\n    }\n  }\n}\n\nexport function toAreaPath(points: Point[], interpolation: Interpolation, viewHeight = VIEW_HEIGHT): string {\n  if (points.length === 0) return '';\n\n  let openPath = '';\n  switch (interpolation) {\n    case 'step':\n      openPath = toStepOpenPath(points);\n      break;\n    case 'smooth':\n      openPath = toSmoothOpenPath(points);\n      break;\n    case 'linear':\n      openPath = toLinearOpenPath(points);\n      break;\n    default: {\n      const exhaustiveCheck: never = interpolation;\n      throw new Error(`Unhandled interpolation: ${exhaustiveCheck}`);\n    }\n  }\n\n  const last = points[points.length - 1]!;\n  const first = points[0]!;\n  openPath += ` L ${last.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)}`;\n  openPath += ` L ${first.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)} Z`;\n  return openPath;\n}\n\nexport function toColumnRects(points: Point[], baselineY: number, width: number): Rect[] {\n  const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(points.length, width, COLUMN_GAP_RATIO);\n\n  return points.map((point, index) => {\n    const x = index * stepX + (stepX - bandWidth) / 2;\n    const height = Math.abs(point.y - baselineY);\n    const y = Math.min(point.y, baselineY);\n    return { x, y, width: bandWidth, height };\n  });\n}\n\nexport function toWinLossRects(\n  values: number[],\n  baselineY: number,\n  width: number,\n  height: number\n): (Rect & { className: 'win' | 'loss' | 'draw' })[] {\n  const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(values.length, width, WINLOSS_GAP_RATIO);\n  const barHeight = height / 2;\n\n  return values.map((value, index) => {\n    const x = index * stepX + (stepX - bandWidth) / 2;\n\n    if (value > 0) {\n      return { className: 'win', x, y: baselineY - barHeight, width: bandWidth, height: barHeight };\n    }\n\n    if (value < 0) {\n      return { className: 'loss', x, y: baselineY, width: bandWidth, height: barHeight };\n    }\n\n    return {\n      className: 'draw',\n      x,\n      y: baselineY - barHeight / 4,\n      width: bandWidth,\n      height: barHeight / 2\n    };\n  });\n}\n\nfunction toLinearOpenPath(points: Point[]): string {\n  return points.reduce((path, point, index) => {\n    if (index === 0) {\n      return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n    }\n    return `${path} L ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n  }, '');\n}\n\nfunction toSmoothOpenPath(points: Point[]): string {\n  const segments = points.map((point, index) => {\n    if (index === 0) {\n      return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n    }\n    const previous = points[index - 1]!;\n    const deltaX = (point.x - previous.x) / 3;\n    const p = PRECISION;\n    return `C ${(previous.x + deltaX).toFixed(p)} ${previous.y.toFixed(p)} ${(point.x - deltaX).toFixed(p)} ${point.y.toFixed(p)} ${point.x.toFixed(p)} ${point.y.toFixed(p)}`;\n  });\n  return segments.join(' ');\n}\n\nfunction toStepOpenPath(points: Point[]): string {\n  let path = `M ${points[0]!.x.toFixed(PRECISION)} ${points[0]!.y.toFixed(PRECISION)}`;\n  for (let index = 1; index < points.length; index++) {\n    const point = points[index]!;\n    path += ` H ${point.x.toFixed(PRECISION)} V ${point.y.toFixed(PRECISION)}`;\n  }\n  return path;\n}\n\nfunction calculateBandSizing(count: number, viewDimension: number, gapRatio: number) {\n  if (count <= 0) return { bandSize: 0, stepSize: 0 };\n\n  const stepSize = viewDimension / count;\n  const bandSize = stepSize * gapRatio;\n  return { bandSize, stepSize };\n}\n"],"mappings":"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"}
+{"version":3,"file":"sparkline.utils.js","names":[],"sources":["../../src/sparkline/sparkline.utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Dimensions, Interpolation, Point, Rect, Scale, SparklineMark } from '@nvidia-elements/core/internal';\n\nexport const PRECISION = 2;\nexport const VIEW_HEIGHT = 100;\nexport const DEFAULT_INTERVAL_LENGTH_EM = 0.6;\n\nconst HORIZONTAL_UNIT_WIDTH = VIEW_HEIGHT * DEFAULT_INTERVAL_LENGTH_EM;\nconst COLUMN_GAP_RATIO = 0.7;\nconst WINLOSS_GAP_RATIO = 0.85;\n\nexport function toValidData(data: unknown): number[] {\n  if (!Array.isArray(data)) return [];\n  return data.filter(Number.isFinite);\n}\n\nexport function calculateViewBox(\n  mark: SparklineMark,\n  pointCount: number,\n  intervalLength = DEFAULT_INTERVAL_LENGTH_EM\n): Dimensions {\n  const isIntervalBased = mark === 'line' || mark === 'area' || mark === 'gradient';\n  const widthUnitCount = isIntervalBased ? Math.max(pointCount - 1, 1) : pointCount;\n  const normalizedIntervalLength =\n    Number.isFinite(intervalLength) && intervalLength > 0 ? intervalLength : DEFAULT_INTERVAL_LENGTH_EM;\n  const width =\n    mark === 'line' ? widthUnitCount * VIEW_HEIGHT * normalizedIntervalLength : widthUnitCount * HORIZONTAL_UNIT_WIDTH;\n\n  return {\n    width,\n    height: VIEW_HEIGHT\n  };\n}\n\nexport function calculateDomain(\n  values: number[],\n  explicitMin?: number,\n  explicitMax?: number,\n  includeZero = false\n): Scale | undefined {\n  if (values.length === 0) return undefined;\n\n  const dataMinimum = Math.min(...values);\n  const dataMaximum = Math.max(...values);\n\n  return {\n    min: explicitMin ?? (includeZero ? Math.min(dataMinimum, 0) : dataMinimum),\n    max: explicitMax ?? (includeZero ? Math.max(dataMaximum, 0) : dataMaximum)\n  };\n}\n\nexport function valueToY(value: number, min: number, max: number, viewHeight = VIEW_HEIGHT): number {\n  const range = max - min;\n  if (range === 0) return viewHeight / 2;\n  return viewHeight - ((value - min) / range) * viewHeight;\n}\n\nexport function toPlotPoints(\n  values: number[],\n  min: number,\n  max: number,\n  viewWidth: number,\n  viewHeight = VIEW_HEIGHT\n): Point[] {\n  const stepX = values.length > 1 ? viewWidth / (values.length - 1) : 0;\n  return values.map((value, index) => ({\n    x: index * stepX,\n    y: valueToY(value, min, max, viewHeight)\n  }));\n}\n\nexport function calculateSymbolIndices(\n  values: number[],\n  denoteFirst: boolean,\n  denoteLast: boolean,\n  denoteMin: boolean,\n  denoteMax: boolean\n): Set<number> {\n  const indices = new Set<number>();\n  if (values.length === 0) return indices;\n\n  if (denoteFirst) indices.add(0);\n  if (denoteLast) indices.add(values.length - 1);\n\n  const needsExtrema = denoteMin || denoteMax;\n  if (!needsExtrema) return indices;\n\n  const min = Math.min(...values);\n  const max = Math.max(...values);\n\n  values.forEach((value, index) => {\n    if (denoteMin && value === min) indices.add(index);\n    if (denoteMax && value === max) indices.add(index);\n  });\n\n  return indices;\n}\n\nexport function toInterpolation(interpolation: unknown): Interpolation {\n  switch (interpolation) {\n    case 'linear':\n      return 'linear';\n    case 'smooth':\n      return 'smooth';\n    case 'step':\n      return 'step';\n    default: {\n      return 'linear';\n    }\n  }\n}\n\nexport function toLinePath(points: Point[], interpolation: Interpolation, viewWidth: number): string {\n  if (points.length === 0) return '';\n  if (points.length === 1) {\n    const y = points[0]!.y.toFixed(PRECISION);\n    return `M 0 ${y} L ${viewWidth.toFixed(PRECISION)} ${y}`;\n  }\n\n  switch (interpolation) {\n    case 'step':\n      return toStepOpenPath(points);\n    case 'smooth':\n      return toSmoothOpenPath(points);\n    case 'linear':\n      return toLinearOpenPath(points);\n    default: {\n      const exhaustiveCheck: never = interpolation;\n      throw new Error(`Unhandled interpolation: ${exhaustiveCheck}`);\n    }\n  }\n}\n\nexport function toAreaPath(points: Point[], interpolation: Interpolation, viewHeight = VIEW_HEIGHT): string {\n  if (points.length === 0) return '';\n\n  let openPath = '';\n  switch (interpolation) {\n    case 'step':\n      openPath = toStepOpenPath(points);\n      break;\n    case 'smooth':\n      openPath = toSmoothOpenPath(points);\n      break;\n    case 'linear':\n      openPath = toLinearOpenPath(points);\n      break;\n    default: {\n      const exhaustiveCheck: never = interpolation;\n      throw new Error(`Unhandled interpolation: ${exhaustiveCheck}`);\n    }\n  }\n\n  const last = points[points.length - 1]!;\n  const first = points[0]!;\n  openPath += ` L ${last.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)}`;\n  openPath += ` L ${first.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)} Z`;\n  return openPath;\n}\n\nexport function toColumnRects(points: Point[], baselineY: number, width: number): Rect[] {\n  const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(points.length, width, COLUMN_GAP_RATIO);\n\n  return points.map((point, index) => {\n    const x = index * stepX + (stepX - bandWidth) / 2;\n    const height = Math.abs(point.y - baselineY);\n    const y = Math.min(point.y, baselineY);\n    return { x, y, width: bandWidth, height };\n  });\n}\n\nexport function toWinLossRects(\n  values: number[],\n  baselineY: number,\n  width: number,\n  height: number\n): (Rect & { className: 'win' | 'loss' | 'draw' })[] {\n  const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(values.length, width, WINLOSS_GAP_RATIO);\n  const barHeight = height / 2;\n\n  return values.map((value, index) => {\n    const x = index * stepX + (stepX - bandWidth) / 2;\n\n    if (value > 0) {\n      return { className: 'win', x, y: baselineY - barHeight, width: bandWidth, height: barHeight };\n    }\n\n    if (value < 0) {\n      return { className: 'loss', x, y: baselineY, width: bandWidth, height: barHeight };\n    }\n\n    return {\n      className: 'draw',\n      x,\n      y: baselineY - barHeight / 4,\n      width: bandWidth,\n      height: barHeight / 2\n    };\n  });\n}\n\nfunction toLinearOpenPath(points: Point[]): string {\n  return points.reduce((path, point, index) => {\n    if (index === 0) {\n      return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n    }\n    return `${path} L ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n  }, '');\n}\n\nfunction toSmoothOpenPath(points: Point[]): string {\n  const segments = points.map((point, index) => {\n    if (index === 0) {\n      return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n    }\n    const previous = points[index - 1]!;\n    const deltaX = (point.x - previous.x) / 3;\n    const p = PRECISION;\n    return `C ${(previous.x + deltaX).toFixed(p)} ${previous.y.toFixed(p)} ${(point.x - deltaX).toFixed(p)} ${point.y.toFixed(p)} ${point.x.toFixed(p)} ${point.y.toFixed(p)}`;\n  });\n  return segments.join(' ');\n}\n\nfunction toStepOpenPath(points: Point[]): string {\n  let path = `M ${points[0]!.x.toFixed(PRECISION)} ${points[0]!.y.toFixed(PRECISION)}`;\n  for (let index = 1; index < points.length; index++) {\n    const point = points[index]!;\n    path += ` H ${point.x.toFixed(PRECISION)} V ${point.y.toFixed(PRECISION)}`;\n  }\n  return path;\n}\n\nfunction calculateBandSizing(count: number, viewDimension: number, gapRatio: number) {\n  if (count <= 0) return { bandSize: 0, stepSize: 0 };\n\n  const stepSize = viewDimension / count;\n  const bandSize = stepSize * gapRatio;\n  return { bandSize, stepSize };\n}\n"],"mappings":"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"}

package/dist/sparkline/sparkline2.js

@@ -1,5 +1,5 @@
 import { attachInternals as e } from "../internal/utils/a11y.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { statusStateStyles as n, supportStateStyles as r, useStyles as i } from "../internal/styles/index.js";
 import { calculateDomain as a, calculateSymbolIndices as o, calculateViewBox as s, toAreaPath as c, toColumnRects as l, toInterpolation as u, toLinePath as d, toPlotPoints as f, toValidData as p, toWinLossRects as m, valueToY as h } from "./sparkline.utils.js";
 import g from "./sparkline.js";
@@ -21,7 +21,7 @@ var C = class extends _ {
 	static {
 		this.metadata = {
 			tag: "nve-sparkline",
-			version: "0.0.2"
+			version: "0.0.4"
 		};
 	}
 	render() {

package/dist/star-rating/define.js

@@ -1,7 +1,9 @@
 import { define as e } from "../internal/utils/dom.js";
-import { StarRating as t } from "./star-rating2.js";
-//#region src/star-rating/define.ts
-e(t);
+import { ControlMessage as t } from "../forms/control-message/control-message2.js";
+import { Control as n } from "../forms/control/control2.js";
+import { ControlGroup as r } from "../forms/control-group/control-group2.js";
+import { StarRating as i } from "./star-rating2.js";
+e(i), e(n), e(r), e(t);
 //#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/star-rating/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/star-rating/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 { StarRating } from '@nvidia-elements/core/star-rating';\nimport '@nvidia-elements/core/forms/define.js';\n\ndefine(StarRating);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-star-rating': StarRating;\n  }\n}\n"],"mappings":";;;AAOA,EAAO,EAAW"}
+{"version":3,"file":"define.js","names":[],"sources":["../../src/star-rating/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 { StarRating } from '@nvidia-elements/core/star-rating';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(StarRating);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-star-rating': StarRating;\n  }\n}\n"],"mappings":";;;;;AAOA,EAAO,EAAW,EAClB,EAAO,EAAQ,EACf,EAAO,EAAa,EACpB,EAAO,EAAe"}

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

@@ -1,5 +1,5 @@
 import { getElementUpdate as e } from "../internal/utils/dom.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
 import { useStyles as r } from "../internal/styles/index.js";
 import { Icon as i } from "../icon/icon2.js";
@@ -18,7 +18,7 @@ var l = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-star-rating",
-			version: "0.0.2"
+			version: "0.0.4"
 		};
 	}
 	static {

package/dist/steps/steps2.js

@@ -1,6 +1,6 @@
 import { attachInternals as e } from "../internal/utils/a11y.js";
 import { stateSelected as t } from "../internal/controllers/state-selected.controller.js";
-import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { BaseButton as r } from "../internal/base/button.js";
 import { audit as i } from "../internal/controllers/audit.controller.js";
 import { keyNavigationList as a } from "../internal/controllers/keynav-list.controller.js";
@@ -23,7 +23,7 @@ var v = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-steps-item",
-			version: "0.0.2",
+			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.2",
+			version: "0.0.4",
 			children: ["nve-steps-item"]
 		};
 	}

package/dist/switch/define.js

@@ -1,7 +1,10 @@
 import { define as e } from "../internal/utils/dom.js";
-import { Switch as t } from "./switch2.js";
-import { SwitchGroup as n } from "./switch-group2.js";
-e(t), e(n);
+import { ControlMessage as t } from "../forms/control-message/control-message2.js";
+import { Control as n } from "../forms/control/control2.js";
+import { ControlGroup as r } from "../forms/control-group/control-group2.js";
+import { Switch as i } from "./switch2.js";
+import { SwitchGroup as a } from "./switch-group2.js";
+e(i), e(a), e(n), e(r), e(t);
 //#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/switch/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/switch/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 { Switch, SwitchGroup } from '@nvidia-elements/core/switch';\nimport '@nvidia-elements/core/forms/define.js';\n\ndefine(Switch);\ndefine(SwitchGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-switch': Switch;\n    'nve-switch-group': SwitchGroup;\n  }\n}\n"],"mappings":";;;AAOA,EAAO,EAAO,EACd,EAAO,EAAY"}
+{"version":3,"file":"define.js","names":[],"sources":["../../src/switch/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 { Switch, SwitchGroup } from '@nvidia-elements/core/switch';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Switch);\ndefine(SwitchGroup);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-switch': Switch;\n    'nve-switch-group': SwitchGroup;\n  }\n}\n"],"mappings":";;;;;;AAOA,EAAO,EAAO,EACd,EAAO,EAAY,EACnB,EAAO,EAAQ,EACf,EAAO,EAAa,EACpB,EAAO,EAAe"}

package/dist/switch/switch-group2.js

@@ -1,4 +1,4 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { audit as t } from "../internal/controllers/audit.controller.js";
 import { useStyles as n } from "../internal/styles/index.js";
 import { ControlGroup as r } from "../forms/control-group/control-group2.js";
@@ -11,7 +11,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-switch-group",
-			version: "0.0.2",
+			version: "0.0.4",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/switch/switch2.js

@@ -1,4 +1,4 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { audit as t } from "../internal/controllers/audit.controller.js";
 import { hostAttr as n } from "../internal/decorators/host-attr.js";
 import { useStyles as r } from "../internal/styles/index.js";
@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-switch",
-			version: "0.0.2",
+			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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"}