@nvidia-elements/core 2.20.1 → 2.20.3

package/dist/button/button.examples.js

@@ -1,6 +1,5 @@
-//#region src/button/button.examples.ts
+// src/button/button.examples.ts
 var e = "";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=button.examples.js.map

package/dist/button/button.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.examples.js","names":[],"sources":["../../src/button/button.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/button/define.js';\nimport '@nvidia-elements/core/toggletip/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n  title: 'Elements/Button',\n  component: 'nve-button'\n};\n\n/**\n * @summary Basic button component with standard appearance and behavior for primary user actions.\n */\nexport const Default = {\n  render: () => html`<nve-button>standard</nve-button>`\n};\n\n/**\n * @summary Button interaction states including hover, focus, pressed, selected, and disabled.\n * @tags test-case\n */\nexport const GroupStates = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button>standard</nve-button>\n      <nve-button selected>selected</nve-button>\n      <nve-button pressed>pressed</nve-button>\n      <nve-button disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Interaction states that communicate button hierarchy, importance, and availability to users.\n */\nexport const Interaction = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button>standard</nve-button>\n      <nve-button interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button interaction=\"destructive\">destructive</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Container style variants for buttons to accommodate different visual weight and context.\n */\nexport const Container = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button container=\"inline\">inline</nve-button>\n      <nve-button container=\"flat\">flat</nve-button>\n      <nve-button>default</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button size variants to accommodate layout densities and touch target requirements.\n */\nexport const Size = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button size=\"sm\">small button</nve-button>\n      <nve-button>standard button</nve-button>\n      <nve-button size=\"lg\">large button</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Pressed state for toggle buttons marking active/selected state with clear visual feedback.\n */\nexport const Pressed = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button pressed container=\"inline\">pressed inline</nve-button>\n      <nve-button pressed container=\"flat\">pressed flat</nve-button>\n      <nve-button pressed>pressed</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button selection states to accommodate different visual weight and context.\n */\nexport const Selected = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button selected container=\"inline\">selected inline</nve-button>\n      <nve-button selected container=\"flat\">selected flat</nve-button>\n      <nve-button selected>selected</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button disabled states to accommodate different visual weight and context.\n */\nexport const Disabled = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button disabled container=\"inline\">disabled inline</nve-button>\n      <nve-button disabled container=\"flat\">disabled flat</nve-button>\n      <nve-button disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as rotating an image.\n */\nexport const InvokerCommand = {\n  render: () => html`\n    <nve-icon\n      id=\"rotation-target\"\n      name=\"sparkles\"\n      aria-label=\"sparkles icon\"\n      style=\"inline-size: 100px; block-size: 100px;\"\n    ></nve-icon>\n    <section>\n      <nve-button commandfor=\"rotation-target\" command=\"--rotate-left\">Rotate left</nve-button>\n      <nve-button commandfor=\"rotation-target\" command=\"--rotate-right\">Rotate right</nve-button>\n      <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n    </section>\n    <nve-toggletip id=\"popover\">popover</nve-toggletip>\n    <script type=\"module\">\n      const target = document.getElementById('rotation-target');\n      target.addEventListener('command', (event) => {\n        if (event.command === '--rotate-left') {\n          target.style.rotate = '-90deg';\n        } else if (event.command === '--rotate-right') {\n          target.style.rotate = '90deg';\n        }\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Button with icons positioned before or after text to enhance visual clarity and user understanding.\n */\nexport const WithIcon = {\n  render: () => html`\n    <nve-button><nve-icon name=\"person\"></nve-icon> button</nve-button>\n    <nve-button>button <nve-icon name=\"person\"></nve-icon></nve-button>\n  `\n};\n\n/**\n * @summary Flat button style for secondary actions with minimal visual weight, maintaining clear interaction states.\n */\nexport const Flat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"flat\">standard</nve-button>\n      <nve-button container=\"flat\" interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button container=\"flat\" interaction=\"destructive\">destructive</nve-button>\n      <nve-button container=\"flat\" disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Inline button style for text-like actions that blend with content while maintaining button functionality.\n */\nexport const Inline = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"inline\">standard</nve-button>\n      <nve-button container=\"inline\" interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button container=\"inline\" interaction=\"destructive\">destructive</nve-button>\n      <nve-button container=\"inline\" disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button styling applied to links for consistent visual treatment while maintaining semantic navigation behavior.\n */\nexport const Link = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\"> \n      <nve-button><a href=\"#\">standard</a></nve-button>\n      <nve-button interaction=\"emphasis\"><a href=\"#\">emphasis</a></nve-button>\n      <nve-button interaction=\"destructive\"><a href=\"#\">destructive</a></nve-button>\n      <nve-button disabled><a href=\"#\">disabled</a></nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Flat button selection state for choice groups where one option is active, providing clear selection feedback.\n */\nexport const SelectedFlat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button selected container=\"flat\">selected</nve-button>\n      <nve-button container=\"flat\">unselected</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Flat button styling for navigation links, providing subtle visual treatment for secondary navigation actions.\n */\nexport const LinkFlat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"flat\"><a href=\"#\">flat</a></nve-button>\n      <nve-button container=\"flat\" interaction=\"emphasis\"><a href=\"#\">flat emphasis</a></nve-button>\n      <nve-button container=\"flat\" interaction=\"destructive\"><a href=\"#\">flat destructive</a></nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Text wrapping behavior in constrained widths, where content adapts to available space.\n * @tags test-case\n */\nexport const NoWrap = {\n  render: () => html`\n    <nve-button style=\"--width: 100px\">item item item</nve-button>\n    <nve-button style=\"--width: 100px\">\n      <span>item</span><span>item</span><span>item</span>\n    </nve-button>\n  `\n}\n\n/**\n * @summary Form submission button with proper form integration and data handling for user input processing.\n */\nexport const FormSubmit = {\n  render: () => html`\n<form id=\"test-form\">\n  <nve-button name=\"test-button\" value=\"test-value\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#test-form');\n  const button = document.querySelector('[name=\"test-button\"]');\n\n  button.addEventListener('click', e => console.log(e));\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form, e.submitter)));\n  });\n</script>\n`\n}\n\n/**\n * @summary Use the form control option for buttons that open custom controls such as dropdowns, filter menus, or pickers within a form layout. This pattern keeps the UI cohesive and helps users recognize the button as part of the form.\n */\nexport const FormControl = {\n  render: () => html`\n<div nve-layout=\"row gap:xs\" style=\"max-width: 400px\">\n  <nve-search>\n    <input type=\"search\" placeholder=\"search\" aria-label=\"search\" />\n  </nve-search>\n  <nve-button nve-control>filter option <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n</div>\n  `\n}\n\n/**\n * @summary Button integrated with popover API to trigger contextual overlays, providing extra information or controls.\n * @tags test-case\n */\nexport const Popover = {\n  render: () => html`\n  <div popover id=\"popover-example\">popover</div>\n  <nve-button popovertarget=\"popover-example\">toggle</nve-button>\n  `\n}\n\n/**\n * @summary Override button appearance with custom CSS properties for brand-specific designs while maintaining functionality.\n * @tags test-case\n */\nexport const BackgroundOverride = {\n  render: () => html`\n    <style>\n      nve-button.custom {\n        --color: var(--nve-sys-text-black-color);\n        --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, var(--nve-ref-color-yellow-amber-900) 60%);\n\n        &:hover {\n          --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, color-mix(in oklab, var(--nve-ref-color-yellow-amber-900) 100%, #000 4%) 60%);\n        }\n      }\n    </style>\n\n    <nve-button class=\"custom\">Create Account</nve-button>\n    <nve-button>Create Account</nve-button>\n  `\n};\n\n/**\n * @summary Button styled as a link by slotting an anchor tag inside. Use when an action needs button visual treatment while maintaining semantic link navigation and accessibility.\n */\nexport const ValidLinkButton = {\n  render: () => html`\n    <nve-button><a href=\"#\">default</a></nve-button>\n  `\n}\n\n/**\n * @summary Do not wrap buttons in anchor tags.\n * @tags anti-pattern\n */\nexport const InvalidLinkButton = {\n  render: () => html`\n    <a href=\"#\"><nve-button>default</nve-button></a>\n  `\n}\n\n/**\n * @summary Use a progress ring within a button to communicate that an action is processing and prevent repeated submissions. Limit this pattern to short, indeterminate actions (about five seconds or less); for longer or determinate tasks, use a progress bar or ring outside the button.\n */\nexport const ProgressDisclosure = {\n  render: () => html`\n    <nve-button>\n      <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n      Submitting\n    </nve-button>\n  `\n};\n\n/**\n * @summary Use standard interaction styling to keep buttons readable on contrasting backgrounds in light and dark themes. This pattern verifies the static button colors that deliver the intended contrast for each theme.\n * @tags pattern\n */\nexport const ContrastColoredBackgrounds = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\" style=\"width: 280px\">\n  <nve-toolbar status=\"accent\">\n    <div nve-text=\"label medium sm\">10 Selected</div>\n    <nve-button slot=\"suffix\">Edit</nve-button>\n  </nve-toolbar>\n\n  <nve-alert-group status=\"danger\">\n    <nve-alert> Error Detected <nve-button slot=\"actions\" container=\"flat\">Review</nve-button> </nve-alert>\n  </nve-alert-group>\n\n  <nve-card style=\"width: 280px\">\n    <nve-card-content \n      style=\"width: 100%;\n      height: 100%;\n      aspect-ratio: 16/9;\n      object-fit: cover;\n      background: repeating-conic-gradient(var(--nve-sys-layer-overlay-background) 0% 25%, transparent 0% 50%) 50% / 40px 40px;\n      background-position: center;\n      border-style: hidden;\"> </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">Cancel</nve-button>\n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</div>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"button.examples.js","names":["button_examples_default"],"sources":["../../src/button/button.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/button/define.js';\nimport '@nvidia-elements/core/toggletip/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n  title: 'Elements/Button',\n  component: 'nve-button'\n};\n\n/**\n * @summary Basic button component with standard appearance and behavior for primary user actions.\n */\nexport const Default = {\n  render: () => html`<nve-button>standard</nve-button>`\n};\n\n/**\n * @summary Button interaction states including hover, focus, pressed, selected, and disabled.\n * @tags test-case\n */\nexport const GroupStates = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button>standard</nve-button>\n      <nve-button selected>selected</nve-button>\n      <nve-button pressed>pressed</nve-button>\n      <nve-button disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Interaction states that communicate button hierarchy, importance, and availability to users.\n */\nexport const Interaction = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button>standard</nve-button>\n      <nve-button interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button interaction=\"destructive\">destructive</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Container style variants for buttons to accommodate different visual weight and context.\n */\nexport const Container = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button container=\"inline\">inline</nve-button>\n      <nve-button container=\"flat\">flat</nve-button>\n      <nve-button>default</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button size variants to accommodate layout densities and touch target requirements.\n */\nexport const Size = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button size=\"sm\">small button</nve-button>\n      <nve-button>standard button</nve-button>\n      <nve-button size=\"lg\">large button</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Pressed state for toggle buttons marking active/selected state with clear visual feedback.\n */\nexport const Pressed = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button pressed container=\"inline\">pressed inline</nve-button>\n      <nve-button pressed container=\"flat\">pressed flat</nve-button>\n      <nve-button pressed>pressed</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button selection states to accommodate different visual weight and context.\n */\nexport const Selected = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button selected container=\"inline\">selected inline</nve-button>\n      <nve-button selected container=\"flat\">selected flat</nve-button>\n      <nve-button selected>selected</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button disabled states to accommodate different visual weight and context.\n */\nexport const Disabled = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\">\n      <nve-button disabled container=\"inline\">disabled inline</nve-button>\n      <nve-button disabled container=\"flat\">disabled flat</nve-button>\n      <nve-button disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as rotating an image.\n */\nexport const InvokerCommand = {\n  render: () => html`\n    <nve-icon\n      id=\"rotation-target\"\n      name=\"sparkles\"\n      aria-label=\"sparkles icon\"\n      style=\"inline-size: 100px; block-size: 100px;\"\n    ></nve-icon>\n    <section>\n      <nve-button commandfor=\"rotation-target\" command=\"--rotate-left\">Rotate left</nve-button>\n      <nve-button commandfor=\"rotation-target\" command=\"--rotate-right\">Rotate right</nve-button>\n      <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n    </section>\n    <nve-toggletip id=\"popover\">popover</nve-toggletip>\n    <script type=\"module\">\n      const target = document.getElementById('rotation-target');\n      target.addEventListener('command', (event) => {\n        if (event.command === '--rotate-left') {\n          target.style.rotate = '-90deg';\n        } else if (event.command === '--rotate-right') {\n          target.style.rotate = '90deg';\n        }\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Button with icons positioned before or after text to enhance visual clarity and user understanding.\n */\nexport const WithIcon = {\n  render: () => html`\n    <nve-button><nve-icon name=\"person\"></nve-icon> button</nve-button>\n    <nve-button>button <nve-icon name=\"person\"></nve-icon></nve-button>\n  `\n};\n\n/**\n * @summary Flat button style for secondary actions with minimal visual weight, maintaining clear interaction states.\n */\nexport const Flat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"flat\">standard</nve-button>\n      <nve-button container=\"flat\" interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button container=\"flat\" interaction=\"destructive\">destructive</nve-button>\n      <nve-button container=\"flat\" disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Inline button style for text-like actions that blend with content while maintaining button functionality.\n */\nexport const Inline = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"inline\">standard</nve-button>\n      <nve-button container=\"inline\" interaction=\"emphasis\">emphasis</nve-button>\n      <nve-button container=\"inline\" interaction=\"destructive\">destructive</nve-button>\n      <nve-button container=\"inline\" disabled>disabled</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Button styling applied to links for consistent visual treatment while maintaining semantic navigation behavior.\n */\nexport const Link = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\"> \n      <nve-button><a href=\"#\">standard</a></nve-button>\n      <nve-button interaction=\"emphasis\"><a href=\"#\">emphasis</a></nve-button>\n      <nve-button interaction=\"destructive\"><a href=\"#\">destructive</a></nve-button>\n      <nve-button disabled><a href=\"#\">disabled</a></nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Flat button selection state for choice groups where one option is active, providing clear selection feedback.\n */\nexport const SelectedFlat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button selected container=\"flat\">selected</nve-button>\n      <nve-button container=\"flat\">unselected</nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Flat button styling for navigation links, providing subtle visual treatment for secondary navigation actions.\n */\nexport const LinkFlat = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs\">\n      <nve-button container=\"flat\"><a href=\"#\">flat</a></nve-button>\n      <nve-button container=\"flat\" interaction=\"emphasis\"><a href=\"#\">flat emphasis</a></nve-button>\n      <nve-button container=\"flat\" interaction=\"destructive\"><a href=\"#\">flat destructive</a></nve-button>\n    </div>\n  `\n}\n\n/**\n * @summary Text wrapping behavior in constrained widths, where content adapts to available space.\n * @tags test-case\n */\nexport const NoWrap = {\n  render: () => html`\n    <nve-button style=\"--width: 100px\">item item item</nve-button>\n    <nve-button style=\"--width: 100px\">\n      <span>item</span><span>item</span><span>item</span>\n    </nve-button>\n  `\n}\n\n/**\n * @summary Form submission button with proper form integration and data handling for user input processing.\n */\nexport const FormSubmit = {\n  render: () => html`\n<form id=\"test-form\">\n  <nve-button name=\"test-button\" value=\"test-value\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#test-form');\n  const button = document.querySelector('[name=\"test-button\"]');\n\n  button.addEventListener('click', e => console.log(e));\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    console.log(Object.fromEntries(new FormData(form, e.submitter)));\n  });\n</script>\n`\n}\n\n/**\n * @summary Use the form control option for buttons that open custom controls such as dropdowns, filter menus, or pickers within a form layout. This pattern keeps the UI cohesive and helps users recognize the button as part of the form.\n */\nexport const FormControl = {\n  render: () => html`\n<div nve-layout=\"row gap:xs\" style=\"max-width: 400px\">\n  <nve-search>\n    <input type=\"search\" placeholder=\"search\" aria-label=\"search\" />\n  </nve-search>\n  <nve-button nve-control>filter option <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n</div>\n  `\n}\n\n/**\n * @summary Button integrated with popover API to trigger contextual overlays, providing extra information or controls.\n * @tags test-case\n */\nexport const Popover = {\n  render: () => html`\n  <div popover id=\"popover-example\">popover</div>\n  <nve-button popovertarget=\"popover-example\">toggle</nve-button>\n  `\n}\n\n/**\n * @summary Override button appearance with custom CSS properties for brand-specific designs while maintaining functionality.\n * @tags test-case\n */\nexport const BackgroundOverride = {\n  render: () => html`\n    <style>\n      nve-button.custom {\n        --color: var(--nve-sys-text-black-color);\n        --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, var(--nve-ref-color-yellow-amber-900) 60%);\n\n        &:hover {\n          --background-image: linear-gradient(340deg, rgb(255 234 177) 0%, color-mix(in oklab, var(--nve-ref-color-yellow-amber-900) 100%, #000 4%) 60%);\n        }\n      }\n    </style>\n\n    <nve-button class=\"custom\">Create Account</nve-button>\n    <nve-button>Create Account</nve-button>\n  `\n};\n\n/**\n * @summary Button styled as a link by slotting an anchor tag inside. Use when an action needs button visual treatment while maintaining semantic link navigation and accessibility.\n */\nexport const ValidLinkButton = {\n  render: () => html`\n    <nve-button><a href=\"#\">default</a></nve-button>\n  `\n}\n\n/**\n * @summary Do not wrap buttons in anchor tags.\n * @tags anti-pattern\n */\nexport const InvalidLinkButton = {\n  render: () => html`\n    <a href=\"#\"><nve-button>default</nve-button></a>\n  `\n}\n\n/**\n * @summary Use a progress ring within a button to communicate that an action is processing and prevent repeated submissions. Limit this pattern to short, indeterminate actions (about five seconds or less); for longer or determinate tasks, use a progress bar or ring outside the button.\n */\nexport const ProgressDisclosure = {\n  render: () => html`\n    <nve-button>\n      <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n      Submitting\n    </nve-button>\n  `\n};\n\n/**\n * @summary Use standard interaction styling to keep buttons readable on contrasting backgrounds in light and dark themes. This pattern verifies the static button colors that deliver the intended contrast for each theme.\n * @tags pattern\n */\nexport const ContrastColoredBackgrounds = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\" style=\"width: 280px\">\n  <nve-toolbar status=\"accent\">\n    <div nve-text=\"label medium sm\">10 Selected</div>\n    <nve-button slot=\"suffix\">Edit</nve-button>\n  </nve-toolbar>\n\n  <nve-alert-group status=\"danger\">\n    <nve-alert> Error Detected <nve-button slot=\"actions\" container=\"flat\">Review</nve-button> </nve-alert>\n  </nve-alert-group>\n\n  <nve-card style=\"width: 280px\">\n    <nve-card-content \n      style=\"width: 100%;\n      height: 100%;\n      aspect-ratio: 16/9;\n      object-fit: cover;\n      background: repeating-conic-gradient(var(--nve-sys-layer-overlay-background) 0% 25%, transparent 0% 50%) 50% / 40px 40px;\n      background-position: center;\n      border-style: hidden;\"> </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">Cancel</nve-button>\n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</div>\n  `\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/button/button.js

@@ -1,6 +1,5 @@
-//#region src/button/button.css?inline
+// src/button/button.css?inline
 var e = ":host{--nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));--background: var(--nve-sys-interaction-background);--color: var(--nve-sys-interaction-color);--padding: 0 var(--nve-ref-size-300);--border: 0;--border-radius: var(--nve-ref-border-radius-full);--font-weight: var(--nve-ref-font-weight-semibold);--font-size: var(--nve-ref-font-size-100);--text-decoration: none;--text-align: center;--cursor: pointer;--gap: var(--nve-ref-space-xs);--height: var(--nve-sys-interaction-field-height);--text-transform: capitalize;--line-height: 1.1em;--_icon-color: var(--color);--width: initial;--min-width: var(--width);display:inline-flex;position:relative;user-select:none;white-space:nowrap;width:var(--width);min-width:var(--min-width)}[internal-host]{color:var(--color);background:var(--background);padding:var(--padding);height:var(--height);width:100%;border:var(--border);border-radius:var(--border-radius);text-decoration:var(--text-decoration);text-align:var(--text-align);font-weight:var(--font-weight);font-size:var(--font-size);cursor:var(--cursor);gap:var(--gap);text-transform:var(--text-transform);display:inline-flex;place-items:center;justify-content:center;white-space:nowrap;line-height:var(--line-height);overflow:hidden}::slotted(nve-icon:not([status])){--color: var(--_icon-color);pointer-events:none}::slotted(a){text-decoration:var(--text-decoration)!important;color:var(--color)!important;gap:var(--gap)!important;display:flex!important;align-items:center!important;outline:0}::slotted(a):after{display:block;content:\" \";inset:0;position:absolute}:host([nve-control]){--text-align: start;--border-radius: var(--nve-ref-border-radius-sm);--font-weight: var(--nve-ref-font-weight-regular);--padding: 0 var(--nve-ref-size-200)}:host([nve-control]) [internal-host]{justify-content:start}:host([nve-control]) ::slotted([name=\"chevron-down\"]){--color: var(--nve-sys-text-muted-color);margin-inline:auto 0}:host([nve-control]:hover) [interaction-state]{--nve-sys-interaction-state-ratio: 0}:host([size=\"sm\"]){--height: var(--nve-ref-size-700)}:host([size=\"lg\"]){--height: var(--nve-ref-size-900);--padding: 0 var(--nve-ref-size-400);--font-size: var(--nve-ref-font-size-200);--line-height: 1em}:host([readonly]){--text-decoration: none;--cursor: cursor}:host([interaction=\"emphasis\"]){--color: var(--nve-sys-interaction-emphasis-color);--background: var(--nve-sys-interaction-emphasis-background)}:host([interaction=\"destructive\"]){--color: var(--nve-sys-interaction-destructive-color);--background: var(--nve-sys-interaction-destructive-background)}:host(:state(disabled)){--color: var(--nve-sys-interaction-disabled-color);--background: var(--nve-sys-interaction-disabled-background);--cursor: not-allowed}:host(:state(disabled)) ::slotted(a){cursor:not-allowed}:host(:state(pressed):not([interaction])){--color: var(--nve-sys-interaction-selected-color)}:host(:state(pressed):not([interaction],[container])){--background: var(--nve-sys-support-accent-color);--color: var(--nve-sys-text-white-color)}:host(:hover:not([interaction],[disabled],[readonly],[pressed])){--color: var(--nve-sys-interaction-hover-color)}:host([container=\"flat\"][selected]) [interaction-state],:host([container=\"flat\"]:state(selected)) [interaction-state],:host([container=\"flat\"][pressed]) [interaction-state],:host([container=\"flat\"]:state(pressed)) [interaction-state]{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected)}:host([container*=\"flat\"]),:host([container*=\"inline\"]){--background: transparent;--text-transform: initial;--border-radius: var(--nve-ref-border-radius-xs);--_icon-color: var(--color)}:host([container*=\"flat\"][interaction]:hover){--background: color-mix( in oklab, var(--color) var(--nve-sys-contrast-mute-ratio), var(--nve-sys-contrast-mute-color) )}@container style(--nve-sys-color-scheme: dark){:host([container*=\"flat\"]){--nve-sys-interaction-state-ratio-selected: 16% !important;--nve-sys-interaction-state-ratio-hover: 12% !important}}:host([container*=\"flat\"][interaction=\"emphasis\"]){--color: var(--nve-sys-interaction-emphasis-background)}:host([container*=\"flat\"][interaction=\"destructive\"]){--color: color-mix(in oklab, var(--nve-sys-interaction-destructive-background) 100%, currentColor 20%)}:host([container*=\"inline\"]){--padding: 0;--height: fit-content;--line-height: .8;[internal-host]{overflow:initial}}:host([container*=\"inline\"]:hover){--background: transparent;--text-decoration: underline}:host([container*=\"inline\"]:hover) [interaction-state]{--nve-sys-interaction-state-ratio: 0}:host([container*=\"inline\"]:state(active)){--background: transparent;--text-decoration: underline}:host([container*=\"flat\"]:state(disabled)),:host([container*=\"inline\"]:state(disabled)){--color: var(--nve-sys-interaction-disabled-color);--background: transparent;--text-decoration: none !important}:host([container*=\"flat\"]:state(disabled)) [interaction-state],:host([container*=\"inline\"]:state(disabled)) [interaction-state]{--nve-sys-interaction-state-ratio: 0}:host([container*=\"inline\"]:state(selected)){--color: var(--nve-sys-interaction-selected-color);--background: transparent}:host([container*=\"flat\"]:state(selected)){--color: var(--nve-sys-interaction-selected-color)}:host([container*=\"flat\"][interaction=\"emphasis\"]:state(selected)){--color: var(--nve-sys-interaction-emphasis-background);--background: color-mix( in oklab, var(--color) var(--nve-sys-contrast-mute-ratio), var(--nve-sys-contrast-mute-color) )}:host([container*=\"flat\"][interaction=\"destructive\"]:state(selected)){--color: var(--nve-sys-interaction-destructive-background);--background: color-mix( in oklab, var(--color) var(--nve-sys-contrast-mute-ratio), var(--nve-sys-contrast-mute-color) )}:host(:state(selected)){--color: var(--nve-sys-text-emphasis-color)}:host([container*=\"inline\"]:state(selected)) [interaction-state]{--nve-sys-interaction-state-ratio: 0}:host([container*=\"inline\"][readonly]:not(:state(anchor))){--text-decoration: none;--cursor: cursor}:host([container=\"inline\"][interaction=\"destructive\"]){--color: color-mix(in oklab, var(--nve-sys-interaction-destructive-background) 100%, currentColor 20%)}:host([container=\"inline\"][interaction=\"emphasis\"]){--color: var(--nve-sys-interaction-emphasis-background)}@keyframes inline-underline{0%{transform:translate(-50%) scaleX(0)}to{transform:translate(-50%) scaleX(1)}}:host([container*=\"inline\"]) [internal-host]:after{content:\"\";position:absolute;left:50%;bottom:calc(var(--_border-bottom-offset, -2) * var(--nve-ref-border-width-md));width:var(--_border-bottom-width, 100%);height:var(--nve-ref-border-width-md);background-color:currentColor;transform:translate(-50%) scaleX(0);transform-origin:center;transition:transform .3s ease;will-change:transform;border-radius:var(--nve-ref-border-radius-full)}:host([container*=\"inline\"]:hover) [internal-host]:after,:host([container*=\"inline\"]:focus) [internal-host]:after{transform:translate(-50%) scaleX(1)}:host([container*=\"inline\"]:state(disabled)) [internal-host]:after{display:none}:host([container*=\"inline\"]){--text-decoration: none}:host([container*=\"inline\"]:hover){--text-decoration: none}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=button.js.map

package/dist/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../src/button/button.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  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --background: var(--nve-sys-interaction-background);\n  --color: var(--nve-sys-interaction-color);\n  --padding: 0 var(--nve-ref-size-300);\n  --border: 0;\n  --border-radius: var(--nve-ref-border-radius-full);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --font-size: var(--nve-ref-font-size-100);\n  --text-decoration: none;\n  --text-align: center;\n  --cursor: pointer;\n  --gap: var(--nve-ref-space-xs);\n  --height: var(--nve-sys-interaction-field-height);\n  --text-transform: capitalize;\n  --line-height: 1.1em;\n  --_icon-color: var(--color);\n  --width: initial;\n  --min-width: var(--width);\n  display: inline-flex;\n  position: relative;\n  user-select: none;\n  white-space: nowrap;\n  width: var(--width);\n  min-width: var(--min-width);\n}\n\n[internal-host] {\n  color: var(--color);\n  background: var(--background);\n  padding: var(--padding);\n  height: var(--height);\n  width: 100%;\n  border: var(--border);\n  border-radius: var(--border-radius);\n  text-decoration: var(--text-decoration);\n  text-align: var(--text-align);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  cursor: var(--cursor);\n  gap: var(--gap);\n  text-transform: var(--text-transform);\n  display: inline-flex;\n  place-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  line-height: var(--line-height);\n  overflow: hidden;\n}\n\n::slotted(nve-icon:not([status])) {\n  --color: var(--_icon-color);\n  pointer-events: none;\n}\n\n::slotted(a) {\n  text-decoration: var(--text-decoration) !important;\n  color: var(--color) !important;\n  gap: var(--gap) !important;\n  display: flex !important;\n  align-items: center !important;\n  outline: 0;\n}\n\n::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n}\n\n:host([nve-control]) {\n  --text-align: start;\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --padding: 0 var(--nve-ref-size-200);\n}\n\n:host([nve-control]) [internal-host] {\n  justify-content: start;\n}\n\n:host([nve-control]) ::slotted([name='chevron-down']) {\n  --color: var(--nve-sys-text-muted-color);\n  margin-inline: auto 0;\n}\n\n:host([nve-control]:hover) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n:host([size='sm']) {\n  --height: var(--nve-ref-size-700);\n}\n\n:host([size='lg']) {\n  --height: var(--nve-ref-size-900);\n  --padding: 0 var(--nve-ref-size-400);\n  --font-size: var(--nve-ref-font-size-200);\n  --line-height: 1em;\n}\n\n:host([readonly]) {\n  --text-decoration: none;\n  --cursor: cursor;\n}\n\n:host([interaction='emphasis']) {\n  --color: var(--nve-sys-interaction-emphasis-color);\n  --background: var(--nve-sys-interaction-emphasis-background);\n}\n\n:host([interaction='destructive']) {\n  --color: var(--nve-sys-interaction-destructive-color);\n  --background: var(--nve-sys-interaction-destructive-background);\n}\n\n:host(:state(disabled)) {\n  --color: var(--nve-sys-interaction-disabled-color);\n  --background: var(--nve-sys-interaction-disabled-background);\n  --cursor: not-allowed;\n}\n\n:host(:state(disabled)) ::slotted(a) {\n  cursor: not-allowed;\n}\n\n:host(:state(pressed):not([interaction])) {\n  --color: var(--nve-sys-interaction-selected-color);\n}\n\n:host(:state(pressed):not([interaction], [container])) {\n  --background: var(--nve-sys-support-accent-color);\n  --color: var(--nve-sys-text-white-color);\n}\n\n:host(:hover:not([interaction], [disabled], [readonly], [pressed])) {\n  --color: var(--nve-sys-interaction-hover-color);\n}\n\n:host([container='flat'][selected]) [interaction-state],\n:host([container='flat']:state(selected)) [interaction-state],\n:host([container='flat'][pressed]) [interaction-state],\n:host([container='flat']:state(pressed)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n\n:host([container*='flat']),\n:host([container*='inline']) {\n  --background: transparent;\n  --text-transform: initial;\n  --border-radius: var(--nve-ref-border-radius-xs);\n  --_icon-color: var(--color);\n}\n\n:host([container*='flat'][interaction]:hover) {\n  --background: color-mix(\n    in oklab,\n    var(--color) var(--nve-sys-contrast-mute-ratio),\n    var(--nve-sys-contrast-mute-color)\n  );\n}\n\n@container style(--nve-sys-color-scheme: dark) {\n  :host([container*='flat']) {\n    --nve-sys-interaction-state-ratio-selected: 16% !important;\n    --nve-sys-interaction-state-ratio-hover: 12% !important;\n  }\n}\n\n:host([container*='flat'][interaction='emphasis']) {\n  --color: var(--nve-sys-interaction-emphasis-background);\n}\n\n:host([container*='flat'][interaction='destructive']) {\n  --color: color-mix(in oklab, var(--nve-sys-interaction-destructive-background) 100%, currentColor 20%);\n}\n\n:host([container*='inline']) {\n  --padding: 0;\n  --height: fit-content;\n  --line-height: 0.8;\n\n  [internal-host] {\n    overflow: initial;\n  }\n}\n\n:host([container*='inline']:hover) {\n  --background: transparent;\n  --text-decoration: underline;\n}\n\n:host([container*='inline']:hover) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n:host([container*='inline']:state(active)) {\n  --background: transparent;\n  --text-decoration: underline;\n}\n\n:host([container*='flat']:state(disabled)),\n:host([container*='inline']:state(disabled)) {\n  --color: var(--nve-sys-interaction-disabled-color);\n  --background: transparent;\n  --text-decoration: none !important;\n}\n\n:host([container*='flat']:state(disabled)) [interaction-state],\n:host([container*='inline']:state(disabled)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n:host([container*='inline']:state(selected)) {\n  --color: var(--nve-sys-interaction-selected-color);\n  --background: transparent;\n}\n\n:host([container*='flat']:state(selected)) {\n  --color: var(--nve-sys-interaction-selected-color);\n}\n\n:host([container*='flat'][interaction='emphasis']:state(selected)) {\n  --color: var(--nve-sys-interaction-emphasis-background);\n  --background: color-mix(\n    in oklab,\n    var(--color) var(--nve-sys-contrast-mute-ratio),\n    var(--nve-sys-contrast-mute-color)\n  );\n}\n\n:host([container*='flat'][interaction='destructive']:state(selected)) {\n  --color: var(--nve-sys-interaction-destructive-background);\n  --background: color-mix(\n    in oklab,\n    var(--color) var(--nve-sys-contrast-mute-ratio),\n    var(--nve-sys-contrast-mute-color)\n  );\n}\n\n:host(:state(selected)) {\n  --color: var(--nve-sys-text-emphasis-color);\n}\n\n:host([container*='inline']:state(selected)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n:host([container*='inline'][readonly]:not(:state(anchor))) {\n  --text-decoration: none;\n  --cursor: cursor;\n}\n\n:host([container='inline'][interaction='destructive']) {\n  --color: color-mix(in oklab, var(--nve-sys-interaction-destructive-background) 100%, currentColor 20%);\n}\n\n:host([container='inline'][interaction='emphasis']) {\n  --color: var(--nve-sys-interaction-emphasis-background);\n}\n\n@keyframes inline-underline {\n  from {\n    transform: translateX(-50%) scaleX(0);\n  }\n\n  to {\n    transform: translateX(-50%) scaleX(1);\n  }\n}\n\n:host([container*='inline']) [internal-host]::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n\n  /* private API for inline underline border-bottom to customize underline downstream */\n  bottom: calc(var(--_border-bottom-offset, -2) * var(--nve-ref-border-width-md));\n  width: var(--_border-bottom-width, 100%);\n  height: var(--nve-ref-border-width-md);\n  background-color: currentColor;\n  transform: translateX(-50%) scaleX(0);\n  transform-origin: center;\n  transition: transform 0.3s ease;\n  will-change: transform;\n  border-radius: var(--nve-ref-border-radius-full);\n}\n\n:host([container*='inline']:hover) [internal-host]::after,\n:host([container*='inline']:focus) [internal-host]::after {\n  transform: translateX(-50%) scaleX(1);\n}\n\n:host([container*='inline']:state(disabled)) [internal-host]::after {\n  display: none;\n}\n\n:host([container*='inline']) {\n  --text-decoration: none;\n}\n\n:host([container*='inline']:hover) {\n  --text-decoration: none;\n}\n"],"mappings":""}
+{"version":3,"file":"button.js","names":["button_default"],"sources":["../../src/button/button.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  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --background: var(--nve-sys-interaction-background);\n  --color: var(--nve-sys-interaction-color);\n  --padding: 0 var(--nve-ref-size-300);\n  --border: 0;\n  --border-radius: var(--nve-ref-border-radius-full);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --font-size: var(--nve-ref-font-size-100);\n  --text-decoration: none;\n  --text-align: center;\n  --cursor: pointer;\n  --gap: var(--nve-ref-space-xs);\n  --height: var(--nve-sys-interaction-field-height);\n  --text-transform: capitalize;\n  --line-height: 1.1em;\n  --_icon-color: var(--color);\n  --width: initial;\n  --min-width: var(--width);\n  display: inline-flex;\n  position: relative;\n  user-select: none;\n  white-space: nowrap;\n  width: var(--width);\n  min-width: var(--min-width);\n}\n\n[internal-host] {\n  color: var(--color);\n  background: var(--background);\n  padding: var(--padding);\n  height: var(--height);\n  width: 100%;\n  border: var(--border);\n  border-radius: var(--border-radius);\n  text-decoration: var(--text-decoration);\n  text-align: var(--text-align);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  cursor: var(--cursor);\n  gap: var(--gap);\n  text-transform: var(--text-transform);\n  display: inline-flex;\n  place-items: center;\n  justify-content: center;\n  white-space: nowrap;\n  line-height: var(--line-height);\n  overflow: hidden;\n}\n\n::slotted(nve-icon:not([status])) {\n  --color: var(--_icon-color);\n  pointer-events: none;\n}\n\n::slotted(a) {\n  text-decoration: var(--text-decoration) !important;\n  color: var(--color) !important;\n  gap: var(--gap) !important;\n  display: flex !important;\n  align-items: center !important;\n  outline: 0;\n}\n\n::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n}\n\n:host([nve-control]) {\n  --text-align: start;\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --padding: 0 var(--nve-ref-size-200);\n}\n\n:host([nve-control]) [internal-host] {\n  justify-content: start;\n}\n\n:host([nve-control]) ::slotted([name='chevron-down']) {\n  --color: var(--nve-sys-text-muted-color);\n  margin-inline: auto 0;\n}\n\n:host([nve-control]:hover) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n:host([size='sm']) {\n  --height: var(--nve-ref-size-700);\n}\n\n:host([size='lg']) {\n  --height: var(--nve-ref-size-900);\n  --padding: 0 var(--nve-ref-size-400);\n  --font-size: var(--nve-ref-font-size-200);\n  --line-height: 1em;\n}\n\n:host([readonly]) {\n  --text-decoration: none;\n  --cursor: cursor;\n}\n\n:host([interaction='emphasis']) {\n  --color: var(--nve-sys-interaction-emphasis-color);\n  --background: var(--nve-sys-interaction-emphasis-background);\n}\n\n:host([interaction='destructive']) {\n  --color: var(--nve-sys-interaction-destructive-color);\n  --background: var(--nve-sys-interaction-destructive-background);\n}\n\n:host(:state(disabled)) {\n  --color: var(--nve-sys-interaction-disabled-color);\n  --background: var(--nve-sys-interaction-disabled-background);\n  --cursor: not-allowed;\n}\n\n:host(:state(disabled)) ::slotted(a) {\n  cursor: not-allowed;\n}\n\n:host(:state(pressed):not([interaction])) {\n  --color: var(--nve-sys-interaction-selected-color);\n}\n\n:host(:state(pressed):not([interaction], [container])) {\n  --background: var(--nve-sys-support-accent-color);\n  --color: var(--nve-sys-text-white-color);\n}\n\n:host(:hover:not([interaction], [disabled], [readonly], [pressed])) {\n  --color: var(--nve-sys-interaction-hover-color);\n}\n\n:host([container='flat'][selected]) [interaction-state],\n:host([container='flat']:state(selected)) [interaction-state],\n:host([container='flat'][pressed]) [interaction-state],\n:host([container='flat']:state(pressed)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n\n:host([container*='flat']),\n:host([container*='inline']) {\n  --background: transparent;\n  --text-transform: initial;\n  --border-radius: var(--nve-ref-border-radius-xs);\n  --_icon-color: var(--color);\n}\n\n:host([container*='flat'][interaction]:hover) {\n  --background: color-mix(\n    in oklab,\n    var(--color) var(--nve-sys-contrast-mute-ratio),\n    var(--nve-sys-contrast-mute-color)\n  );\n}\n\n@container style(--nve-sys-color-scheme: dark) {\n  :host([container*='flat']) {\n    --nve-sys-interaction-state-ratio-selected: 16% !important;\n    --nve-sys-interaction-state-ratio-hover: 12% !important;\n  }\n}\n\n:host([container*='flat'][interaction='emphasis']) {\n  --color: var(--nve-sys-interaction-emphasis-background);\n}\n\n:host([container*='flat'][interaction='destructive']) {\n  --color: color-mix(in oklab, var(--nve-sys-interaction-destructive-background) 100%, currentColor 20%);\n}\n\n:host([container*='inline']) {\n  --padding: 0;\n  --height: fit-content;\n  --line-height: 0.8;\n\n  [internal-host] {\n    overflow: initial;\n  }\n}\n\n:host([container*='inline']:hover) {\n  --background: transparent;\n  --text-decoration: underline;\n}\n\n:host([container*='inline']:hover) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n:host([container*='inline']:state(active)) {\n  --background: transparent;\n  --text-decoration: underline;\n}\n\n:host([container*='flat']:state(disabled)),\n:host([container*='inline']:state(disabled)) {\n  --color: var(--nve-sys-interaction-disabled-color);\n  --background: transparent;\n  --text-decoration: none !important;\n}\n\n:host([container*='flat']:state(disabled)) [interaction-state],\n:host([container*='inline']:state(disabled)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n:host([container*='inline']:state(selected)) {\n  --color: var(--nve-sys-interaction-selected-color);\n  --background: transparent;\n}\n\n:host([container*='flat']:state(selected)) {\n  --color: var(--nve-sys-interaction-selected-color);\n}\n\n:host([container*='flat'][interaction='emphasis']:state(selected)) {\n  --color: var(--nve-sys-interaction-emphasis-background);\n  --background: color-mix(\n    in oklab,\n    var(--color) var(--nve-sys-contrast-mute-ratio),\n    var(--nve-sys-contrast-mute-color)\n  );\n}\n\n:host([container*='flat'][interaction='destructive']:state(selected)) {\n  --color: var(--nve-sys-interaction-destructive-background);\n  --background: color-mix(\n    in oklab,\n    var(--color) var(--nve-sys-contrast-mute-ratio),\n    var(--nve-sys-contrast-mute-color)\n  );\n}\n\n:host(:state(selected)) {\n  --color: var(--nve-sys-text-emphasis-color);\n}\n\n:host([container*='inline']:state(selected)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n:host([container*='inline'][readonly]:not(:state(anchor))) {\n  --text-decoration: none;\n  --cursor: cursor;\n}\n\n:host([container='inline'][interaction='destructive']) {\n  --color: color-mix(in oklab, var(--nve-sys-interaction-destructive-background) 100%, currentColor 20%);\n}\n\n:host([container='inline'][interaction='emphasis']) {\n  --color: var(--nve-sys-interaction-emphasis-background);\n}\n\n@keyframes inline-underline {\n  from {\n    transform: translateX(-50%) scaleX(0);\n  }\n\n  to {\n    transform: translateX(-50%) scaleX(1);\n  }\n}\n\n:host([container*='inline']) [internal-host]::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n\n  /* private API for inline underline border-bottom to customize underline downstream */\n  bottom: calc(var(--_border-bottom-offset, -2) * var(--nve-ref-border-width-md));\n  width: var(--_border-bottom-width, 100%);\n  height: var(--nve-ref-border-width-md);\n  background-color: currentColor;\n  transform: translateX(-50%) scaleX(0);\n  transform-origin: center;\n  transition: transform 0.3s ease;\n  will-change: transform;\n  border-radius: var(--nve-ref-border-radius-full);\n}\n\n:host([container*='inline']:hover) [internal-host]::after,\n:host([container*='inline']:focus) [internal-host]::after {\n  transform: translateX(-50%) scaleX(1);\n}\n\n:host([container*='inline']:state(disabled)) [internal-host]::after {\n  display: none;\n}\n\n:host([container*='inline']) {\n  --text-decoration: none;\n}\n\n:host([container*='inline']:hover) {\n  --text-decoration: none;\n}\n"],"mappings":""}

package/dist/button/button2.js

@@ -1,10 +1,10 @@
 import { useStyles as e } from "../internal/styles/index.js";
-import t from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import t from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import n from "./button.js";
 import { LitElement as r, html as i } from "lit";
 import { property as a } from "lit/decorators/property.js";
 import { ButtonFormControlMixin as o } from "@nvidia-elements/forms/mixins";
-//#region src/button/button.ts
+// src/button/button.ts
 var s = class extends o(r) {
 	static {
 		this.styles = e([n]);
@@ -12,7 +12,7 @@ var s = class extends o(r) {
 	static {
 		this.metadata = {
 			tag: "nve-button",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	render() {
@@ -29,7 +29,6 @@ t([a({
 	type: String,
 	reflect: !0
 })], s.prototype, "interaction", void 0);
-//#endregion
 export { s as Button };
 
 //# sourceMappingURL=button2.js.map

package/dist/button/button2.js.map

@@ -1 +1 @@
-{"version":3,"file":"button2.js","names":[],"sources":["../../src/button/button.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { Interaction, Size } from '@nvidia-elements/core/internal';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport styles from './button.css?inline';\n\n/**\n * @element nve-button\n * @description A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.\n * @documentation https://nvidia.github.io/elements/docs/elements/button/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/button\n * @slot - slot for button text content or icon, icon placement depends on whether `icon` appears before or after text content.\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --text-decoration\n * @cssprop --text-align\n * @cssprop --cursor\n * @cssprop --gap\n * @cssprop --height\n * @cssprop --text-transform\n * @cssprop --line-height\n * @cssprop --width\n * @cssprop --min-width\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\nexport class Button extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-button',\n    version: '0.0.0'\n  };\n\n  /**\n   * Determines the container of the button. Flat suits nesting within other containers or more muted style. Inline suits inline content such as text.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'inline';\n\n  /**\n   * Determines size of the button.\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  /**\n   * The Interaction type provides a way to show the intended use case for a button or other interactive element. This can help users quickly understand what each interaction will do and reduce the potential for confusion or errors.\n   */\n  @property({ type: String, reflect: true }) interaction: Interaction;\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;AAmCA,IAAa,IAAb,cAA4B,EAAuB,CAAU,CAAC,CAAC;;EAC7C,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAiBA,SAAS;EACP,OAAO,CAAI;CAKb;AACF;AAnBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA"}
+{"version":3,"file":"button2.js","names":["styles","_decorate","__decorate","button_default","Button","ButtonFormControlMixin","LitElement","useStyles","property"],"sources":["../../src/button/button.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { Interaction, Size } from '@nvidia-elements/core/internal';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport styles from './button.css?inline';\n\n/**\n * @element nve-button\n * @description A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.\n * @documentation https://nvidia.github.io/elements/docs/elements/button/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/button\n * @slot - slot for button text content or icon, icon placement depends on whether `icon` appears before or after text content.\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --text-decoration\n * @cssprop --text-align\n * @cssprop --cursor\n * @cssprop --gap\n * @cssprop --height\n * @cssprop --text-transform\n * @cssprop --line-height\n * @cssprop --width\n * @cssprop --min-width\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\nexport class Button extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-button',\n    version: '0.0.0'\n  };\n\n  /**\n   * Determines the container of the button. Flat suits nesting within other containers or more muted style. Inline suits inline content such as text.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'inline';\n\n  /**\n   * Determines size of the button.\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  /**\n   * The Interaction type provides a way to show the intended use case for a button or other interactive element. This can help users quickly understand what each interaction will do and reduce the potential for confusion or errors.\n   */\n  @property({ type: String, reflect: true }) interaction: Interaction;\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;AAmCA,IAAaI,IAAb,cAA4BC,EAAuBC,CAAU,CAAC,CAAC;;EAC7C,KAAA,SAAAC,EAAU,CAACP,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAiBA,SAAS;EACP,OAAO,CAAI;CAKb;AACF;AAnBGC,EAAA,CAAAO,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAJ,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxCH,EAAA,CAAAO,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAJ,EAAA,WAAA,QAAA,KAAA,CAAA,GAKxCH,EAAA,CAAAO,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAJ,EAAA,WAAA,eAAA,KAAA,CAAA"}

package/dist/button/define.js

@@ -1,7 +1,6 @@
 import { Button as e } from "./button2.js";
 import { define as t } from "@nvidia-elements/foundations/internal/define";
-//#region src/button/define.ts
+// src/button/define.ts
 t(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/button/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/button/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/foundations/internal/define';\nimport { Button } from '@nvidia-elements/core/button';\n\ndefine(Button);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-button': Button;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAM"}
+{"version":3,"file":"define.js","names":["define","Button"],"sources":["../../src/button/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/foundations/internal/define';\nimport { Button } from '@nvidia-elements/core/button';\n\ndefine(Button);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-button': Button;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAM"}

package/dist/button/index.js

@@ -1,2 +1 @@
-import { Button as e } from "./button2.js";
-export { e as Button };
+export { Button } from "./button2.js";

package/dist/button-group/button-group.examples.js

@@ -1,6 +1,5 @@
-//#region src/button-group/button-group.examples.ts
+// src/button-group/button-group.examples.ts
 var e = "";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=button-group.examples.js.map

package/dist/button-group/button-group.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.examples.js","names":[],"sources":["../../src/button-group/button-group.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/button-group/define.js';\nimport '@nvidia-elements/core/divider/define.js';\n\nexport default {\n  title: 'Elements/Button Group',\n  component: 'nve-button-group',\n};\n\n/**\n * @summary Basic button group for organizing related actions into a unified control with connected visual appearance.\n */\nexport const Default = {\n  render: () => html`\n    <nve-button-group>\n      <nve-icon-button selected icon-name=\"copy\"></nve-icon-button>\n      <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n      <nve-icon-button icon-name=\"download\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group with single selection behavior for mutually exclusive options like view modes or formatting.\n */\nexport const SingleSelect = {\n  render: () => html`\n  <nve-button-group behavior-select=\"single\">\n    <nve-icon-button pressed container=\"flat\" icon-name=\"bars-3-bottom-left\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"bars-3-bottom-right\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"bars-4\"></nve-icon-button>\n  </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group with multi-selection behavior for toggling many options simultaneously like text formatting.\n */\nexport const MultiSelect = {\n  render: () => html`\n    <nve-button-group behavior-select=\"multi\">\n      <nve-icon-button pressed container=\"flat\" icon-name=\"bold\" size=\"sm\"></nve-icon-button>\n      <nve-icon-button container=\"flat\" icon-name=\"italic\" size=\"sm\"></nve-icon-button>\n      <nve-icon-button pressed container=\"flat\" icon-name=\"strikethrough\" size=\"sm\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group in disabled state for indicating unavailable actions or read-only contexts.\n */\nexport const Disabled = {\n  render: () => html`\n    <nve-button-group container=\"rounded\">\n      <nve-button disabled>button</nve-button>\n      <nve-divider orientation=\"vertical\"></nve-divider>\n      <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\" disabled></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group with flat container styling for minimal visual appearance and reduced emphasis.\n */\nexport const Flat = {\n  render: () => html`\n    <nve-button-group container=\"flat\">\n      <nve-icon-button pressed icon-name=\"split-vertical\"></nve-icon-button>\n      <nve-icon-button icon-name=\"split-horizontal\"></nve-icon-button>\n      <nve-icon-button icon-name=\"split-none\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group for clustering related action buttons with cohesive visual treatment.\n */\nexport const Action = {\n  render: () => html`\n    <nve-button-group>\n      <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n      <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n      <nve-icon-button icon-name=\"download\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Split button groups with different interaction styles for primary actions with dropdown alternatives.\n */\nexport const ActionSplit = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-button-group>\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n      \n      <nve-button-group interaction=\"emphasis\">\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n      \n      <nve-button-group interaction=\"destructive\">\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n    </div>\n  `\n};\n\n/**\n * @summary Split button groups with rounded container styling for softer visual appearance and modern aesthetics.\n */\nexport const ActionSplitRounded = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-button-group container=\"rounded\">\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n      \n      <nve-button-group container=\"rounded\" interaction=\"emphasis\">\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n      \n      <nve-button-group container=\"rounded\"  interaction=\"destructive\">\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n    </div>\n  `\n};\n\n/**\n * @summary Rounded button group with single selection for segmented controls and filter options with pill-style buttons.\n */\nexport const Rounded = {\n  render: () => html`\n    <nve-button-group container=\"rounded\" behavior-select=\"single\">\n      <nve-button pressed>All Time</nve-button>\n      <nve-button>30 Days</nve-button>\n      <nve-button>90 Days</nve-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Rounded button group with icon buttons for compact view switchers and mode toggles.\n */\nexport const RoundedIcon = {\n  render: () => html`\n    <nve-button-group container=\"rounded\" behavior-select=\"single\">\n      <nve-icon-button icon-name=\"table\"></nve-icon-button>\n      <nve-icon-button icon-name=\"image\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group with vertical orientation for sidebars, toolbars, or vertical navigation contexts.\n */\nexport const OrientationVertical = {\n  render: () => html`\n    <nve-button-group orientation=\"vertical\">\n      <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n      <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n      <nve-icon-button icon-name=\"download\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"button-group.examples.js","names":["button_group_examples_default"],"sources":["../../src/button-group/button-group.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/button-group/define.js';\nimport '@nvidia-elements/core/divider/define.js';\n\nexport default {\n  title: 'Elements/Button Group',\n  component: 'nve-button-group',\n};\n\n/**\n * @summary Basic button group for organizing related actions into a unified control with connected visual appearance.\n */\nexport const Default = {\n  render: () => html`\n    <nve-button-group>\n      <nve-icon-button selected icon-name=\"copy\"></nve-icon-button>\n      <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n      <nve-icon-button icon-name=\"download\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group with single selection behavior for mutually exclusive options like view modes or formatting.\n */\nexport const SingleSelect = {\n  render: () => html`\n  <nve-button-group behavior-select=\"single\">\n    <nve-icon-button pressed container=\"flat\" icon-name=\"bars-3-bottom-left\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"bars-3-bottom-right\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"bars-4\"></nve-icon-button>\n  </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group with multi-selection behavior for toggling many options simultaneously like text formatting.\n */\nexport const MultiSelect = {\n  render: () => html`\n    <nve-button-group behavior-select=\"multi\">\n      <nve-icon-button pressed container=\"flat\" icon-name=\"bold\" size=\"sm\"></nve-icon-button>\n      <nve-icon-button container=\"flat\" icon-name=\"italic\" size=\"sm\"></nve-icon-button>\n      <nve-icon-button pressed container=\"flat\" icon-name=\"strikethrough\" size=\"sm\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group in disabled state for indicating unavailable actions or read-only contexts.\n */\nexport const Disabled = {\n  render: () => html`\n    <nve-button-group container=\"rounded\">\n      <nve-button disabled>button</nve-button>\n      <nve-divider orientation=\"vertical\"></nve-divider>\n      <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\" disabled></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group with flat container styling for minimal visual appearance and reduced emphasis.\n */\nexport const Flat = {\n  render: () => html`\n    <nve-button-group container=\"flat\">\n      <nve-icon-button pressed icon-name=\"split-vertical\"></nve-icon-button>\n      <nve-icon-button icon-name=\"split-horizontal\"></nve-icon-button>\n      <nve-icon-button icon-name=\"split-none\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group for clustering related action buttons with cohesive visual treatment.\n */\nexport const Action = {\n  render: () => html`\n    <nve-button-group>\n      <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n      <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n      <nve-icon-button icon-name=\"download\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Split button groups with different interaction styles for primary actions with dropdown alternatives.\n */\nexport const ActionSplit = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-button-group>\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n      \n      <nve-button-group interaction=\"emphasis\">\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n      \n      <nve-button-group interaction=\"destructive\">\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n    </div>\n  `\n};\n\n/**\n * @summary Split button groups with rounded container styling for softer visual appearance and modern aesthetics.\n */\nexport const ActionSplitRounded = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-button-group container=\"rounded\">\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n      \n      <nve-button-group container=\"rounded\" interaction=\"emphasis\">\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n      \n      <nve-button-group container=\"rounded\"  interaction=\"destructive\">\n        <nve-button>button</nve-button>\n        <nve-divider orientation=\"vertical\"></nve-divider>\n        <nve-icon-button icon-name=\"caret\" size=\"sm\" direction=\"down\"></nve-icon-button>\n      </nve-button-group>\n    </div>\n  `\n};\n\n/**\n * @summary Rounded button group with single selection for segmented controls and filter options with pill-style buttons.\n */\nexport const Rounded = {\n  render: () => html`\n    <nve-button-group container=\"rounded\" behavior-select=\"single\">\n      <nve-button pressed>All Time</nve-button>\n      <nve-button>30 Days</nve-button>\n      <nve-button>90 Days</nve-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Rounded button group with icon buttons for compact view switchers and mode toggles.\n */\nexport const RoundedIcon = {\n  render: () => html`\n    <nve-button-group container=\"rounded\" behavior-select=\"single\">\n      <nve-icon-button icon-name=\"table\"></nve-icon-button>\n      <nve-icon-button icon-name=\"image\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n\n/**\n * @summary Button group with vertical orientation for sidebars, toolbars, or vertical navigation contexts.\n */\nexport const OrientationVertical = {\n  render: () => html`\n    <nve-button-group orientation=\"vertical\">\n      <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n      <nve-icon-button icon-name=\"add-comment\"></nve-icon-button>\n      <nve-icon-button icon-name=\"download\"></nve-icon-button>\n    </nve-button-group>\n  `\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/button-group/button-group.global.js

@@ -1,6 +1,5 @@
-//#region src/button-group/button-group.global.css?inline
+// src/button-group/button-group.global.css?inline
 var e = "@supports (position-anchor: --selected){nve-button-group{&:has(>:state(pressed)):not(:has(>:state(pressed)~:state(pressed)),:has(>[container]),:has(>[interaction])){--indicator-background: var(--nve-sys-support-accent-color);--indicator-border-radius: var(--nve-ref-border-radius-sm);&:after{background:var(--indicator-background);border-radius:var(--indicator-border-radius);position:fixed;display:block;content:\"\";width:anchor-size(width);height:anchor-size(height);transition:left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100),top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);position-anchor:--selected;top:anchor(top);left:anchor(left);z-index:0}&[orientation=vertical]:after{transition:top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100),left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100)}&[container=rounded]:after{--indicator-border-radius: var(--nve-ref-border-radius-full)}>nve-button,>nve-icon-button{&:state(pressed){--background: transparent;anchor-name:--selected;z-index:1}}}}}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=button-group.global.js.map

package/dist/button-group/button-group.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.global.js","names":[],"sources":["../../src/button-group/button-group.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n@supports (position-anchor: --selected) {\n  nve-button-group {\n    /* prettier-ignore */\n    &:has(> :state(pressed)):not(:has(> :state(pressed) ~ :state(pressed)), :has(> [container]), :has(> [interaction])) {\n      --indicator-background: var(--nve-sys-support-accent-color);\n      --indicator-border-radius: var(--nve-ref-border-radius-sm);\n\n      &::after {\n        background: var(--indicator-background);\n        border-radius: var(--indicator-border-radius);\n        position: fixed;\n        display: block;\n        content: '';\n        width: anchor-size(width);\n        height: anchor-size(height);\n        transition:\n          left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100),\n          top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);\n        position-anchor: --selected;\n        top: anchor(top);\n        left: anchor(left);\n        z-index: 0;\n      }\n\n      &[orientation='vertical']::after {\n        transition:\n          top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100),\n          left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);\n      }\n\n      &[container='rounded']::after {\n        --indicator-border-radius: var(--nve-ref-border-radius-full);\n      }\n\n      > nve-button,\n      > nve-icon-button {\n        &:state(pressed) {\n          --background: transparent;\n          anchor-name: --selected;\n          z-index: 1;\n        }\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"button-group.global.js","names":["button_group_global_default"],"sources":["../../src/button-group/button-group.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n@supports (position-anchor: --selected) {\n  nve-button-group {\n    /* prettier-ignore */\n    &:has(> :state(pressed)):not(:has(> :state(pressed) ~ :state(pressed)), :has(> [container]), :has(> [interaction])) {\n      --indicator-background: var(--nve-sys-support-accent-color);\n      --indicator-border-radius: var(--nve-ref-border-radius-sm);\n\n      &::after {\n        background: var(--indicator-background);\n        border-radius: var(--indicator-border-radius);\n        position: fixed;\n        display: block;\n        content: '';\n        width: anchor-size(width);\n        height: anchor-size(height);\n        transition:\n          left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100),\n          top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);\n        position-anchor: --selected;\n        top: anchor(top);\n        left: anchor(left);\n        z-index: 0;\n      }\n\n      &[orientation='vertical']::after {\n        transition:\n          top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100),\n          left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);\n      }\n\n      &[container='rounded']::after {\n        --indicator-border-radius: var(--nve-ref-border-radius-full);\n      }\n\n      > nve-button,\n      > nve-icon-button {\n        &:state(pressed) {\n          --background: transparent;\n          anchor-name: --selected;\n          z-index: 1;\n        }\n      }\n    }\n  }\n}\n"],"mappings":""}

package/dist/button-group/button-group.js

@@ -1,6 +1,5 @@
-//#region src/button-group/button-group.css?inline
+// src/button-group/button-group.css?inline
 var e = ":host{--nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));--background: var(--nve-sys-interaction-background);--border-radius: var(--nve-ref-border-radius-sm);--padding: var(--nve-ref-space-xxs);--gap: var(--nve-ref-space-xxxs);--width: fit-content;--height: fit-content;width:var(--width);height:var(--height)}[internal-host]{background:var(--background);border-radius:var(--border-radius);padding:var(--padding);gap:var(--gap);overflow:hidden;display:flex;height:100%;align-items:center}::slotted(nve-button),::slotted(nve-icon-button){--height: var(--nve-sys-interaction-field-height);--border-radius: var(--nve-ref-border-radius-sm)}::slotted(nve-icon-button){--width: var(--nve-sys-interaction-field-height)}::slotted(nve-divider){margin-block-start:calc(-1 * var(--padding));height:calc(100% + var(--padding));--color: color-mix(in oklab, var(--nve-sys-interaction-background) 100%, var(--nve-sys-interaction-color) 50%)}:host([container=\"flat\"]){--background: transparent}:host([container=\"rounded\"]){--border-radius: var(--nve-ref-border-radius-full)}:host([container=\"rounded\"]:not(:state(split))) ::slotted(nve-button),:host([container=\"rounded\"]:not(:state(split))) ::slotted(nve-icon-button){--border-radius: var(--nve-ref-border-radius-full)}:host([orientation=\"vertical\"]){--gap: var(--nve-ref-space-xs)}:host([orientation=\"vertical\"]) [internal-host]{flex-direction:column}:host([interaction=\"emphasis\"]) ::slotted(nve-divider){--color: color-mix( in oklab, var(--nve-sys-interaction-emphasis-background) 100%, var(--nve-sys-interaction-emphasis-color) 50% )}:host([interaction=\"destructive\"]) ::slotted(nve-divider){--color: color-mix( in oklab, var(--nve-sys-interaction-destructive-background) 100%, var(--nve-sys-interaction-destructive-color) 50% )}:host(:state(split)){--padding: 0;--gap: 0}:host(:state(split)) ::slotted(nve-button){--border-radius: var(--nve-ref-border-radius-none)}:host(:state(split)) ::slotted(nve-icon-button){--border-radius: var(--nve-ref-border-radius-none)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=button-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","names":[],"sources":["../../src/button-group/button-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  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --background: var(--nve-sys-interaction-background);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --padding: var(--nve-ref-space-xxs);\n  --gap: var(--nve-ref-space-xxxs);\n  --width: fit-content;\n  --height: fit-content;\n  width: var(--width);\n  height: var(--height);\n}\n\n[internal-host] {\n  background: var(--background);\n  border-radius: var(--border-radius);\n  padding: var(--padding);\n  gap: var(--gap);\n  overflow: hidden;\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n\n::slotted(nve-button),\n::slotted(nve-icon-button) {\n  --height: var(--nve-sys-interaction-field-height);\n  --border-radius: var(--nve-ref-border-radius-sm);\n}\n\n::slotted(nve-icon-button) {\n  --width: var(--nve-sys-interaction-field-height);\n}\n\n::slotted(nve-divider) {\n  margin-block-start: calc(-1 * var(--padding));\n  height: calc(100% + var(--padding));\n  --color: color-mix(in oklab, var(--nve-sys-interaction-background) 100%, var(--nve-sys-interaction-color) 50%);\n}\n\n:host([container='flat']) {\n  --background: transparent;\n}\n\n:host([container='rounded']) {\n  --border-radius: var(--nve-ref-border-radius-full);\n}\n\n:host([container='rounded']:not(:state(split))) ::slotted(nve-button),\n:host([container='rounded']:not(:state(split))) ::slotted(nve-icon-button) {\n  --border-radius: var(--nve-ref-border-radius-full);\n}\n\n:host([orientation='vertical']) {\n  --gap: var(--nve-ref-space-xs);\n}\n\n:host([orientation='vertical']) [internal-host] {\n  flex-direction: column;\n}\n\n:host([interaction='emphasis']) ::slotted(nve-divider) {\n  --color: color-mix(\n    in oklab,\n    var(--nve-sys-interaction-emphasis-background) 100%,\n    var(--nve-sys-interaction-emphasis-color) 50%\n  );\n}\n\n:host([interaction='destructive']) ::slotted(nve-divider) {\n  --color: color-mix(\n    in oklab,\n    var(--nve-sys-interaction-destructive-background) 100%,\n    var(--nve-sys-interaction-destructive-color) 50%\n  );\n}\n\n:host(:state(split)) {\n  --padding: 0;\n  --gap: 0;\n}\n\n:host(:state(split)) ::slotted(nve-button) {\n  --border-radius: var(--nve-ref-border-radius-none);\n}\n\n:host(:state(split)) ::slotted(nve-icon-button) {\n  --border-radius: var(--nve-ref-border-radius-none);\n}\n"],"mappings":""}
+{"version":3,"file":"button-group.js","names":["button_group_default"],"sources":["../../src/button-group/button-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  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --background: var(--nve-sys-interaction-background);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --padding: var(--nve-ref-space-xxs);\n  --gap: var(--nve-ref-space-xxxs);\n  --width: fit-content;\n  --height: fit-content;\n  width: var(--width);\n  height: var(--height);\n}\n\n[internal-host] {\n  background: var(--background);\n  border-radius: var(--border-radius);\n  padding: var(--padding);\n  gap: var(--gap);\n  overflow: hidden;\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n\n::slotted(nve-button),\n::slotted(nve-icon-button) {\n  --height: var(--nve-sys-interaction-field-height);\n  --border-radius: var(--nve-ref-border-radius-sm);\n}\n\n::slotted(nve-icon-button) {\n  --width: var(--nve-sys-interaction-field-height);\n}\n\n::slotted(nve-divider) {\n  margin-block-start: calc(-1 * var(--padding));\n  height: calc(100% + var(--padding));\n  --color: color-mix(in oklab, var(--nve-sys-interaction-background) 100%, var(--nve-sys-interaction-color) 50%);\n}\n\n:host([container='flat']) {\n  --background: transparent;\n}\n\n:host([container='rounded']) {\n  --border-radius: var(--nve-ref-border-radius-full);\n}\n\n:host([container='rounded']:not(:state(split))) ::slotted(nve-button),\n:host([container='rounded']:not(:state(split))) ::slotted(nve-icon-button) {\n  --border-radius: var(--nve-ref-border-radius-full);\n}\n\n:host([orientation='vertical']) {\n  --gap: var(--nve-ref-space-xs);\n}\n\n:host([orientation='vertical']) [internal-host] {\n  flex-direction: column;\n}\n\n:host([interaction='emphasis']) ::slotted(nve-divider) {\n  --color: color-mix(\n    in oklab,\n    var(--nve-sys-interaction-emphasis-background) 100%,\n    var(--nve-sys-interaction-emphasis-color) 50%\n  );\n}\n\n:host([interaction='destructive']) ::slotted(nve-divider) {\n  --color: color-mix(\n    in oklab,\n    var(--nve-sys-interaction-destructive-background) 100%,\n    var(--nve-sys-interaction-destructive-color) 50%\n  );\n}\n\n:host(:state(split)) {\n  --padding: 0;\n  --gap: 0;\n}\n\n:host(:state(split)) ::slotted(nve-button) {\n  --border-radius: var(--nve-ref-border-radius-none);\n}\n\n:host(:state(split)) ::slotted(nve-icon-button) {\n  --border-radius: var(--nve-ref-border-radius-none);\n}\n"],"mappings":""}

package/dist/button-group/button-group2.js

@@ -3,13 +3,13 @@ import { appendRootNodeStyle as t } from "../internal/utils/dom.js";
 import { keyNavigationList as n } from "../internal/controllers/keynav-list.controller.js";
 import { attachInternals as r } from "../internal/utils/a11y.js";
 import { useStyles as i } from "../internal/styles/index.js";
-import a from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import a from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import o from "./button-group.js";
 import s from "./button-group.global.js";
 import { LitElement as c, html as l } from "lit";
 import { property as u } from "lit/decorators/property.js";
 import { queryAssignedElements as d } from "lit/decorators/query-assigned-elements.js";
-//#region src/button-group/button-group.ts
+// src/button-group/button-group.ts
 var f = class extends c {
 	constructor(...e) {
 		super(...e), this.orientation = "horizontal", this.#t = (e) => this.#r(e.target);
@@ -26,7 +26,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-button-group",
-			version: "2.20.1",
+			version: "2.20.3",
 			children: [
 				"nve-button",
 				"nve-icon-button",
@@ -75,7 +75,6 @@ a([u({
 	type: String,
 	reflect: !0
 })], f.prototype, "size", void 0), a([d({ selector: "nve-divider" })], f.prototype, "dividers", void 0), a([d({ selector: "nve-icon-button" })], f.prototype, "iconButtons", void 0), a([d({ selector: "nve-button" })], f.prototype, "buttons", void 0), f = a([e(), n()], f);
-//#endregion
 export { f as ButtonGroup };
 
 //# sourceMappingURL=button-group2.js.map

package/dist/button-group/button-group2.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group2.js","names":[],"sources":["../../src/button-group/button-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 type { KeynavListConfig, Interaction, Size } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  keyNavigationList,\n  useStyles,\n  audit,\n  appendRootNodeStyle\n} from '@nvidia-elements/core/internal';\nimport type { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { Button } from '@nvidia-elements/core/button';\nimport type { Divider } from '@nvidia-elements/core/divider';\nimport styles from './button-group.css?inline';\nimport globalStyles from './button-group.global.css?inline';\n\n/**\n * @element nve-button-group\n * @description A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.\n * @documentation https://nvidia.github.io/elements/docs/elements/button-group/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/button-group\n * @slot - default slot for `nve-button`, `nve-icon-button`, `nve-divider`, `nve-media-seek-button`, or `nve-media-pause-button`\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @cssprop --height\n * @cssprop --color\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role\n */\n@audit()\n@keyNavigationList<ButtonGroup>()\nexport class ButtonGroup extends LitElement {\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.#buttons,\n      layout: this.orientation\n    };\n  }\n\n  /** By default the button group is stateless. Add the `behavior-select` attribute and set to `single` or `multi` to enable stateful selction handling. */\n  @property({ type: String, attribute: 'behavior-select' }) behaviorSelect: 'single' | 'multi';\n\n  /** Set the style of the button group using the `container` property. Options are the default display when omitting the attribute, `flat` or `rounded`. */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'rounded';\n\n  /** Determines the orientation direction of the group. Vertical groups support icon buttons only. */\n  @property({ type: String, reflect: true }) orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Use the `interaction` property on `button-group` in combination with `divider` for color-coded split buttons */\n  @property({ type: String, reflect: true }) interaction: Interaction;\n\n  /** Determines size of button */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-button-group',\n    version: '0.0.0',\n    children: ['nve-button', 'nve-icon-button', 'nve-divider', 'nve-media-seek-button', 'nve-media-pause-button']\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  @queryAssignedElements({ selector: 'nve-divider' }) private dividers!: Divider[];\n\n  @queryAssignedElements({ selector: 'nve-icon-button' }) private iconButtons!: IconButton[];\n\n  @queryAssignedElements({ selector: 'nve-button' }) private buttons!: Button[];\n\n  get #buttons() {\n    return [...this.iconButtons, ...this.buttons];\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#syncStyleStates}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n    this._internals.role = 'group';\n    this.addEventListener('click', this.#onClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#onClick);\n  }\n\n  #onClick = (e: Event) => this.#selectButton(e.target as HTMLElement & { pressed?: boolean });\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this.#syncStyleStates();\n  }\n\n  #syncStyleStates() {\n    if (this.container === 'flat') {\n      this.#buttons.forEach(btn => (btn.container = 'flat'));\n    }\n\n    if (this.interaction) {\n      this.#buttons.forEach(btn => (btn.interaction = this.interaction));\n    }\n\n    this.dividers.length ? this._internals.states.add('split') : this._internals.states.delete('split');\n  }\n\n  #selectButton(button: HTMLElement & { pressed?: boolean }) {\n    if (!button.matches?.('nve-button, nve-icon-button')) {\n      return;\n    }\n\n    if (this.behaviorSelect === 'single') {\n      this.#buttons.forEach(i => (i.pressed = false));\n      button.pressed = true;\n    } else if (this.behaviorSelect === 'multi') {\n      button.pressed = !button.pressed;\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAuCO,IAAM,IAAN,cAA0B,EAAW;;EAkE9B,aAlDyE,KAAA,cAAA,cAkDzE,KAAA,MAAA,MAAa,KAAK,GAAc,EAAE,MAA6C;;CAhE3F,IAAI,mBAAqC;EACvC,OAAO;GACL,OAAO,KAAK;GACZ,QAAQ,KAAK;EACf;CACF;;EAiBgB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAc;IAAmB;IAAe;IAAyB;GAAwB;EAC9G;;CAWA,IAAI,KAAW;EACb,OAAO,CAAC,GAAG,KAAK,aAAa,GAAG,KAAK,OAAO;CAC9C;CAEA,SAAS;EACP,OAAO,CAAI,yCAEa,KAAK,GAAiB;CAGhD;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,EAAoB,MAAM,CAAY,GACtC,KAAK,WAAW,OAAO,SACvB,KAAK,iBAAiB,SAAS,KAAK,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAK,EAAQ;CACjD;CAEA;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAK,GAAiB;CACxB;CAEA,KAAmB;EASjB,AARI,KAAK,cAAc,UACrB,KAAK,GAAS,SAAQ,MAAQ,EAAI,YAAY,MAAO,GAGnD,KAAK,eACP,KAAK,GAAS,SAAQ,MAAQ,EAAI,cAAc,KAAK,WAAY,GAGnE,KAAK,SAAS,SAAS,KAAK,WAAW,OAAO,IAAI,OAAO,IAAI,KAAK,WAAW,OAAO,OAAO,OAAO;CACpG;CAEA,GAAc,GAA6C;EACpD,EAAO,UAAU,6BAA6B,MAI/C,KAAK,mBAAmB,YAC1B,KAAK,GAAS,SAAQ,MAAM,EAAE,UAAU,EAAM,GAC9C,EAAO,UAAU,MACR,KAAK,mBAAmB,YACjC,EAAO,UAAU,CAAC,EAAO;CAE7B;AACF;AAvFG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAGvD,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAaxC,EAAA,CAAA,EAAsB,EAAE,UAAU,cAAc,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAEjD,EAAA,CAAA,EAAsB,EAAE,UAAU,kBAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAErD,EAAA,CAAA,EAAsB,EAAE,UAAU,aAAa,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAzClD,IAAA,EAAA,CAAA,EAAM,GACN,EAA+B,CAAA,GAAA,CAAA"}
+{"version":3,"file":"button-group2.js","names":["styles","globalStyles","_decorate","__decorate","button_group_default","button_group_global_default","ButtonGroup","LitElement","_args","#onClick","#selectButton","#buttons","useStyles","#syncStyleStates","attachInternals","appendRootNodeStyle","props","button","property","queryAssignedElements","audit","keyNavigationList"],"sources":["../../src/button-group/button-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 type { KeynavListConfig, Interaction, Size } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  keyNavigationList,\n  useStyles,\n  audit,\n  appendRootNodeStyle\n} from '@nvidia-elements/core/internal';\nimport type { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { Button } from '@nvidia-elements/core/button';\nimport type { Divider } from '@nvidia-elements/core/divider';\nimport styles from './button-group.css?inline';\nimport globalStyles from './button-group.global.css?inline';\n\n/**\n * @element nve-button-group\n * @description A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.\n * @documentation https://nvidia.github.io/elements/docs/elements/button-group/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/button-group\n * @slot - default slot for `nve-button`, `nve-icon-button`, `nve-divider`, `nve-media-seek-button`, or `nve-media-pause-button`\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @cssprop --height\n * @cssprop --color\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role\n */\n@audit()\n@keyNavigationList<ButtonGroup>()\nexport class ButtonGroup extends LitElement {\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.#buttons,\n      layout: this.orientation\n    };\n  }\n\n  /** By default the button group is stateless. Add the `behavior-select` attribute and set to `single` or `multi` to enable stateful selction handling. */\n  @property({ type: String, attribute: 'behavior-select' }) behaviorSelect: 'single' | 'multi';\n\n  /** Set the style of the button group using the `container` property. Options are the default display when omitting the attribute, `flat` or `rounded`. */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'rounded';\n\n  /** Determines the orientation direction of the group. Vertical groups support icon buttons only. */\n  @property({ type: String, reflect: true }) orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Use the `interaction` property on `button-group` in combination with `divider` for color-coded split buttons */\n  @property({ type: String, reflect: true }) interaction: Interaction;\n\n  /** Determines size of button */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-button-group',\n    version: '0.0.0',\n    children: ['nve-button', 'nve-icon-button', 'nve-divider', 'nve-media-seek-button', 'nve-media-pause-button']\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  @queryAssignedElements({ selector: 'nve-divider' }) private dividers!: Divider[];\n\n  @queryAssignedElements({ selector: 'nve-icon-button' }) private iconButtons!: IconButton[];\n\n  @queryAssignedElements({ selector: 'nve-button' }) private buttons!: Button[];\n\n  get #buttons() {\n    return [...this.iconButtons, ...this.buttons];\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#syncStyleStates}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n    this._internals.role = 'group';\n    this.addEventListener('click', this.#onClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#onClick);\n  }\n\n  #onClick = (e: Event) => this.#selectButton(e.target as HTMLElement & { pressed?: boolean });\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this.#syncStyleStates();\n  }\n\n  #syncStyleStates() {\n    if (this.container === 'flat') {\n      this.#buttons.forEach(btn => (btn.container = 'flat'));\n    }\n\n    if (this.interaction) {\n      this.#buttons.forEach(btn => (btn.interaction = this.interaction));\n    }\n\n    this.dividers.length ? this._internals.states.add('split') : this._internals.states.delete('split');\n  }\n\n  #selectButton(button: HTMLElement & { pressed?: boolean }) {\n    if (!button.matches?.('nve-button, nve-icon-button')) {\n      return;\n    }\n\n    if (this.behaviorSelect === 'single') {\n      this.#buttons.forEach(i => (i.pressed = false));\n      button.pressed = true;\n    } else if (this.behaviorSelect === 'multi') {\n      button.pressed = !button.pressed;\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAuCO,IAAMM,IAAN,cAA0BC,EAAW;;EAkE9B,A,aAlDyE,KAAA,cAAA,cAkDzE,KAAAE,MAAA,MAAa,KAAKC,GAAc,EAAE,MAA6C;;CAhE3F,IAAI,mBAAqC;EACvC,OAAO;GACL,OAAO,KAAKC;GACZ,QAAQ,KAAK;EACf;CACF;;EAiBgB,KAAA,SAAAC,EAAU,CAACZ,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAc;IAAmB;IAAe;IAAyB;GAAwB;EAC9G;;CAWA,IAAIW,KAAW;EACb,OAAO,CAAC,GAAG,KAAK,aAAa,GAAG,KAAK,OAAO;CAC9C;CAEA,SAAS;EACP,OAAO,CAAI,yCAEa,KAAKE,GAAiB;CAGhD;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxBC,EAAgB,IAAI,GACpBC,EAAoB,MAAMd,CAAY,GACtC,KAAK,WAAW,OAAO,SACvB,KAAK,iBAAiB,SAAS,KAAKQ,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAKA,EAAQ;CACjD;CAEA;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQO,CAAK,GACnB,KAAKH,GAAiB;CACxB;CAEA,KAAmB;EASjB,AARI,KAAK,cAAc,UACrB,KAAKF,GAAS,SAAQ,MAAQ,EAAI,YAAY,MAAO,GAGnD,KAAK,eACP,KAAKA,GAAS,SAAQ,MAAQ,EAAI,cAAc,KAAK,WAAY,GAGnE,KAAK,SAAS,SAAS,KAAK,WAAW,OAAO,IAAI,OAAO,IAAI,KAAK,WAAW,OAAO,OAAO,OAAO;CACpG;CAEA,GAAc,GAA6C;EACzD,AAAKM,EAAO,UAAU,6BAA6B,MAI/C,KAAK,mBAAmB,YAC1B,KAAKN,GAAS,SAAQ,MAAM,EAAE,UAAU,EAAM,GAC9C,EAAO,UAAU,MACR,KAAK,mBAAmB,YACjC,EAAO,UAAU,CAACM,EAAO;CAE7B;AACF;AAvFGf,EAAA,CAAAgB,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAkB,CAAC,CAAA,GAAAZ,EAAA,WAAA,kBAAA,KAAA,CAAA,GAGvDJ,EAAA,CAAAgB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAZ,EAAA,WAAA,aAAA,KAAA,CAAA,GAGxCJ,EAAA,CAAAgB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAZ,EAAA,WAAA,eAAA,KAAA,CAAA,GAGxCJ,EAAA,CAAAgB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAZ,EAAA,WAAA,eAAA,KAAA,CAAA,GAGxCJ,EAAA,CAAAgB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAZ,EAAA,WAAA,QAAA,KAAA,CAAA,GAaxCJ,EAAA,CAAAiB,EAAsB,EAAE,UAAU,cAAc,CAAC,CAAA,GAAAb,EAAA,WAAA,YAAA,KAAA,CAAA,GAEjDJ,EAAA,CAAAiB,EAAsB,EAAE,UAAU,kBAAkB,CAAC,CAAA,GAAAb,EAAA,WAAA,eAAA,KAAA,CAAA,GAErDJ,EAAA,CAAAiB,EAAsB,EAAE,UAAU,aAAa,CAAC,CAAA,GAAAb,EAAA,WAAA,WAAA,KAAA,CAAA,GAzClD,IAAAJ,EAAA,CAAAkB,EAAM,GACNC,EAA+B,CAAA,GAAAf,CAAA"}

package/dist/button-group/define.js

@@ -1,7 +1,6 @@
 import { ButtonGroup as e } from "./button-group2.js";
 import { define as t } from "@nvidia-elements/foundations/internal/define";
-//#region src/button-group/define.ts
+// src/button-group/define.ts
 t(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/button-group/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/button-group/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/foundations/internal/define';\nimport { ButtonGroup } from '@nvidia-elements/core/button-group';\n\ndefine(ButtonGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-button-group': ButtonGroup;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAW"}
+{"version":3,"file":"define.js","names":["define","ButtonGroup"],"sources":["../../src/button-group/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/foundations/internal/define';\nimport { ButtonGroup } from '@nvidia-elements/core/button-group';\n\ndefine(ButtonGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-button-group': ButtonGroup;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAW"}

package/dist/button-group/index.js

@@ -1,2 +1 @@
-import { ButtonGroup as e } from "./button-group2.js";
-export { e as ButtonGroup };
+export { ButtonGroup } from "./button-group2.js";

package/dist/card/card-content.js

@@ -1,6 +1,5 @@
-//#region src/card/card-content.css?inline
+// src/card/card-content.css?inline
 var e = ":host{--padding: var(--nve-ref-size-400);padding:var(--padding);color:var(--color);flex-grow:1;contain:initial}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=card-content.js.map

package/dist/card/card-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-content.js","names":[],"sources":["../../src/card/card-content.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-size-400);\n  padding: var(--padding);\n  color: var(--color);\n  flex-grow: 1;\n  contain: initial;\n}\n"],"mappings":""}
+{"version":3,"file":"card-content.js","names":["card_content_default"],"sources":["../../src/card/card-content.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-size-400);\n  padding: var(--padding);\n  color: var(--color);\n  flex-grow: 1;\n  contain: initial;\n}\n"],"mappings":""}

package/dist/card/card-footer.js

@@ -1,6 +1,5 @@
-//#region src/card/card-footer.css?inline
+// src/card/card-footer.css?inline
 var e = ":host{--padding: var(--nve-ref-size-400);--border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);contain:none}footer[internal-host]{padding:var(--padding);border-top:var(--border-top);color:var(--color);display:flex;justify-content:space-between;align-items:center}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=card-footer.js.map

package/dist/card/card-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-footer.js","names":[],"sources":["../../src/card/card-footer.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-size-400);\n  --border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  contain: none;\n}\n\nfooter[internal-host] {\n  padding: var(--padding);\n  border-top: var(--border-top);\n  color: var(--color);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n"],"mappings":""}
+{"version":3,"file":"card-footer.js","names":["card_footer_default"],"sources":["../../src/card/card-footer.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-size-400);\n  --border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  contain: none;\n}\n\nfooter[internal-host] {\n  padding: var(--padding);\n  border-top: var(--border-top);\n  color: var(--color);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n"],"mappings":""}

package/dist/card/card-header.js

@@ -1,6 +1,5 @@
-//#region src/card/card-header.css?inline
+// src/card/card-header.css?inline
 var e = ":host{--padding: var(--nve-ref-size-400);--border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--line-height: 1em;--gap: var(--nve-ref-space-xs);contain:none}[internal-host]{padding:var(--padding);border-bottom:var(--border-bottom);color:var(--color);display:flex;flex-direction:row;justify-content:space-between;align-items:center}.content{display:flex;flex-direction:column;gap:var(--gap);width:100%}::slotted(nve-tabs){margin-block-end:calc(-1 * var(--padding))}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=card-header.js.map

package/dist/card/card-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-header.js","names":[],"sources":["../../src/card/card-header.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-size-400);\n  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --line-height: 1em;\n  --gap: var(--nve-ref-space-xs);\n  contain: none;\n}\n\n[internal-host] {\n  padding: var(--padding);\n  border-bottom: var(--border-bottom);\n  color: var(--color);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap);\n  width: 100%;\n}\n\n::slotted(nve-tabs) {\n  margin-block-end: calc(-1 * var(--padding));\n}\n"],"mappings":""}
+{"version":3,"file":"card-header.js","names":["card_header_default"],"sources":["../../src/card/card-header.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-size-400);\n  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --line-height: 1em;\n  --gap: var(--nve-ref-space-xs);\n  contain: none;\n}\n\n[internal-host] {\n  padding: var(--padding);\n  border-bottom: var(--border-bottom);\n  color: var(--color);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap);\n  width: 100%;\n}\n\n::slotted(nve-tabs) {\n  margin-block-end: calc(-1 * var(--padding));\n}\n"],"mappings":""}

package/dist/card/card.examples.js

@@ -1,6 +1,5 @@
-//#region src/card/card.examples.ts
+// src/card/card.examples.ts
 var e = "";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=card.examples.js.map

package/dist/card/card.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.examples.js","names":[],"sources":["../../src/card/card.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/card/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/tabs/define.js';\nimport '@nvidia-elements/core/divider/define.js';\nimport '@nvidia-elements/core/page/define.js';\n\nexport default {\n  title: 'Elements/Card',\n  component: 'nve-card'\n};\n\n/**\n * @summary Basic card component with header, content, and footer sections. Use this as a starting point for simple content containers.\n */\nexport const Default = {\n  render: () => html`\n  <nve-card>\n    <nve-card-header>\n      <h2 nve-text=\"heading sm medium\">Heading</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <p nve-text=\"body\">card footer</p>\n    </nve-card-footer>\n  </nve-card>\n  `\n};\n\n/**\n * @summary Card with action buttons in the footer, including primary and secondary actions for interactive card layouts.\n */\nexport const Actions = {\n  render: () => html`\n  <nve-card>\n    <nve-card-header>\n      <div nve-layout=\"column gap:xs\">\n        <h2 nve-text=\"heading sm bold\">Heading</h2>\n        <h3 nve-text=\"body sm muted\">Sub Heading</h3>\n      </div>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">cancel</nve-button>  \n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Cards with media content (images) displayed in a grid layout, ideal for photo galleries, product catalogs, or visual content showcases.\n */\nexport const MediaCard = {\n  render: () => html`\n  <div nve-layout=\"grid gap:md span-items:6 align:stretch\" style=\"max-width: 900px\">\n    <nve-card style=\"height: 100%; width: 100%;\">\n      <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover;\" />\n      <nve-card-content>\n        <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 100%; width: 100%;\">\n      <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover;\" />\n      <nve-card-content>\n        <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  `\n}\n\n/**\n * @summary Card with a divider separating different content sections, useful for organizing related but distinct information within a single card.\n */\nexport const WithDivider = {\n  render: () => html`\n    <nve-card style=\"width: 400px; height: 300px;\">\n      <nve-card-header>\n        <h2 nve-text=\"heading sm bold\">Heading</h2>\n      </nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\">card content</p>\n      </nve-card-content>\n      <nve-divider></nve-divider>\n      <nve-card-content>\n        <p nve-text=\"body\">card content</p>\n      </nve-card-content>\n    </nve-card>\n  `\n}\n\n/**\n * @summary Card containing a description list layout, perfect for displaying key-value pairs, definitions, or structured data in a readable format.\n */\nexport const DescriptionList = {\n  render: () => html`\n  <nve-card style=\"width: 650px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Nautical Terms</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <dl nve-layout=\"grid gap:lg\">\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Knot</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Knot is a unit of speed equaling 1 nautical mile per hour.</dd>\n\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Port</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Starboard</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n      </dl>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with integrated tabs in the header for multi-panel content within a single card interface.\n */\nexport const WithTabs = {\n  render: () => html`\n  <nve-card style=\"width:400px; height:200px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Heading</h2>\n      <nve-tabs>\n        <nve-tabs-item selected>tab 1</nve-tabs-item>\n        <nve-tabs-item>tab 2</nve-tabs-item>\n        <nve-tabs-item>tab 3</nve-tabs-item>\n      </nve-tabs>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\">card content</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with full container styling that extends to the edges, suitable for full-width layouts or when you want the card to blend with its container.\n * @tags test-case\n */\nexport const ContainerFull = {\n  render: () => html`\n  <nve-page document-scroll>\n    <nve-card container=\"full\">\n      <nve-card-content>\n        <p nve-text=\"body\">container full</p>\n      </nve-card-content>\n    </nve-card>\n  </nve-page>\n  `\n}\n\n/**\n * @summary Card with flat container styling that removes the default card elevation, ideal for subtle content containers or when you want a more minimal appearance.\n * @tags test-case\n */\nexport const ContainerFlat = {\n  render: () => html`\n  <nve-card container=\"flat\">\n    <nve-card-content>\n      <p nve-text=\"body\">container flat</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Examples of invalid card usage patterns for testing and documentation purposes, showing what not to do when implementing cards.\n * @tags test-case\n */\nexport const Audit = {\n  /* eslint-disable @nvidia-elements/lint/no-restricted-attributes */\n  render: () => html`\n  <!-- invalid padding usage -->\n  <nve-card nve-layout=\"pad:md\"></nve-card>\n\n  <!-- invalid parent element -->\n  <nve-card-header>\n    card header\n  </nve-card-header>\n  <nve-card-content>\n    card content\n  </nve-card-content>\n  <nve-card-footer>\n    card footer\n  </nve-card-footer>\n  `\n  /* eslint-enable */\n};\n\n/**\n * @summary Card with overflow content, where the card body scrolls when content exceeds the card height.\n * @tags test-case\n */\nexport const OverflowContent = {\n  render: () => html`\n  <nve-card style=\"height: 250px; width: 400px;\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm medium\">Heading</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"margin-bottom: 300px\">card content</p>\n      <p nve-text=\"body\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <p nve-text=\"body\">card footer</p>\n    </nve-card-footer>\n  </nve-card>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"card.examples.js","names":["card_examples_default"],"sources":["../../src/card/card.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/card/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/tabs/define.js';\nimport '@nvidia-elements/core/divider/define.js';\nimport '@nvidia-elements/core/page/define.js';\n\nexport default {\n  title: 'Elements/Card',\n  component: 'nve-card'\n};\n\n/**\n * @summary Basic card component with header, content, and footer sections. Use this as a starting point for simple content containers.\n */\nexport const Default = {\n  render: () => html`\n  <nve-card>\n    <nve-card-header>\n      <h2 nve-text=\"heading sm medium\">Heading</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <p nve-text=\"body\">card footer</p>\n    </nve-card-footer>\n  </nve-card>\n  `\n};\n\n/**\n * @summary Card with action buttons in the footer, including primary and secondary actions for interactive card layouts.\n */\nexport const Actions = {\n  render: () => html`\n  <nve-card>\n    <nve-card-header>\n      <div nve-layout=\"column gap:xs\">\n        <h2 nve-text=\"heading sm bold\">Heading</h2>\n        <h3 nve-text=\"body sm muted\">Sub Heading</h3>\n      </div>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 64px\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"row gap:xs\">\n        <nve-button container=\"flat\" style=\"margin-left: auto\">cancel</nve-button>  \n        <nve-button>action</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Cards with media content (images) displayed in a grid layout, ideal for photo galleries, product catalogs, or visual content showcases.\n */\nexport const MediaCard = {\n  render: () => html`\n  <div nve-layout=\"grid gap:md span-items:6 align:stretch\" style=\"max-width: 900px\">\n    <nve-card style=\"height: 100%; width: 100%;\">\n      <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover;\" />\n      <nve-card-content>\n        <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 100%; width: 100%;\">\n      <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover;\" />\n      <nve-card-content>\n        <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  `\n}\n\n/**\n * @summary Card with a divider separating different content sections, useful for organizing related but distinct information within a single card.\n */\nexport const WithDivider = {\n  render: () => html`\n    <nve-card style=\"width: 400px; height: 300px;\">\n      <nve-card-header>\n        <h2 nve-text=\"heading sm bold\">Heading</h2>\n      </nve-card-header>\n      <nve-card-content>\n        <p nve-text=\"body\">card content</p>\n      </nve-card-content>\n      <nve-divider></nve-divider>\n      <nve-card-content>\n        <p nve-text=\"body\">card content</p>\n      </nve-card-content>\n    </nve-card>\n  `\n}\n\n/**\n * @summary Card containing a description list layout, perfect for displaying key-value pairs, definitions, or structured data in a readable format.\n */\nexport const DescriptionList = {\n  render: () => html`\n  <nve-card style=\"width: 650px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Nautical Terms</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <dl nve-layout=\"grid gap:lg\">\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Knot</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Knot is a unit of speed equaling 1 nautical mile per hour.</dd>\n\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Port</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n\n        <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Starboard</dt>\n        <dd nve-layout=\"span:8\" nve-text=\"body\">Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n      </dl>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with integrated tabs in the header for multi-panel content within a single card interface.\n */\nexport const WithTabs = {\n  render: () => html`\n  <nve-card style=\"width:400px; height:200px\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm bold\">Heading</h2>\n      <nve-tabs>\n        <nve-tabs-item selected>tab 1</nve-tabs-item>\n        <nve-tabs-item>tab 2</nve-tabs-item>\n        <nve-tabs-item>tab 3</nve-tabs-item>\n      </nve-tabs>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\">card content</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Card with full container styling that extends to the edges, suitable for full-width layouts or when you want the card to blend with its container.\n * @tags test-case\n */\nexport const ContainerFull = {\n  render: () => html`\n  <nve-page document-scroll>\n    <nve-card container=\"full\">\n      <nve-card-content>\n        <p nve-text=\"body\">container full</p>\n      </nve-card-content>\n    </nve-card>\n  </nve-page>\n  `\n}\n\n/**\n * @summary Card with flat container styling that removes the default card elevation, ideal for subtle content containers or when you want a more minimal appearance.\n * @tags test-case\n */\nexport const ContainerFlat = {\n  render: () => html`\n  <nve-card container=\"flat\">\n    <nve-card-content>\n      <p nve-text=\"body\">container flat</p>\n    </nve-card-content>\n  </nve-card>\n  `\n}\n\n/**\n * @summary Examples of invalid card usage patterns for testing and documentation purposes, showing what not to do when implementing cards.\n * @tags test-case\n */\nexport const Audit = {\n  /* eslint-disable @nvidia-elements/lint/no-restricted-attributes */\n  render: () => html`\n  <!-- invalid padding usage -->\n  <nve-card nve-layout=\"pad:md\"></nve-card>\n\n  <!-- invalid parent element -->\n  <nve-card-header>\n    card header\n  </nve-card-header>\n  <nve-card-content>\n    card content\n  </nve-card-content>\n  <nve-card-footer>\n    card footer\n  </nve-card-footer>\n  `\n  /* eslint-enable */\n};\n\n/**\n * @summary Card with overflow content, where the card body scrolls when content exceeds the card height.\n * @tags test-case\n */\nexport const OverflowContent = {\n  render: () => html`\n  <nve-card style=\"height: 250px; width: 400px;\">\n    <nve-card-header>\n      <h2 nve-text=\"heading sm medium\">Heading</h2>\n    </nve-card-header>\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"margin-bottom: 300px\">card content</p>\n      <p nve-text=\"body\">card content</p>\n    </nve-card-content>\n    <nve-card-footer>\n      <p nve-text=\"body\">card footer</p>\n    </nve-card-footer>\n  </nve-card>\n  `\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/card/card.js

@@ -1,6 +1,5 @@
-//#region src/card/card.css?inline
+// src/card/card.css?inline
 var e = ":host{--nve-sys-interaction-background: var(--nve-sys-interaction-background-200);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);--background: var(--nve-sys-layer-container-background);--color: var(--nve-sys-layer-canvas-color);--border-radius: var(--nve-ref-border-radius-lg);--box-shadow: var(--nve-ref-shadow-100);--border-bottom: none;--border: 0;border-radius:var(--border-radius);box-shadow:var(--box-shadow);border-bottom:var(--border-bottom);background:var(--background);border:var(--border);color:var(--color);display:flex;flex-direction:column;align-items:stretch;justify-content:start;overflow:hidden;contain:none;width:stretch}[internal-host]{display:flex;flex-direction:column;align-items:stretch;justify-content:start;height:100%}:host([container=\"full\"]){--border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--border-radius: 0}:host([container=\"flat\"]){--nve-sys-interaction-background: unset;--nve-sys-interaction-field-background: unset;--background: transparent;--border-bottom: none;--border-radius: 0;--box-shadow: none}slot:not([name]){scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width);display:block;width:100%;height:100%;overflow:auto}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=card.js.map

package/dist/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../src/card/card.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  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --background: var(--nve-sys-layer-container-background);\n  --color: var(--nve-sys-layer-canvas-color);\n  --border-radius: var(--nve-ref-border-radius-lg);\n  --box-shadow: var(--nve-ref-shadow-100);\n  --border-bottom: none;\n  --border: 0;\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\n  border-bottom: var(--border-bottom);\n  background: var(--background);\n  border: var(--border);\n  color: var(--color);\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: start;\n  overflow: hidden;\n  contain: none;\n  width: stretch;\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: start;\n  height: 100%;\n}\n\n:host([container='full']) {\n  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --border-radius: 0;\n}\n\n:host([container='flat']) {\n  --nve-sys-interaction-background: unset;\n  --nve-sys-interaction-field-background: unset;\n  --background: transparent;\n  --border-bottom: none;\n  --border-radius: 0;\n  --box-shadow: none;\n}\n\nslot:not([name]) {\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n}\n"],"mappings":""}
+{"version":3,"file":"card.js","names":["card_default"],"sources":["../../src/card/card.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  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --background: var(--nve-sys-layer-container-background);\n  --color: var(--nve-sys-layer-canvas-color);\n  --border-radius: var(--nve-ref-border-radius-lg);\n  --box-shadow: var(--nve-ref-shadow-100);\n  --border-bottom: none;\n  --border: 0;\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\n  border-bottom: var(--border-bottom);\n  background: var(--background);\n  border: var(--border);\n  color: var(--color);\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: start;\n  overflow: hidden;\n  contain: none;\n  width: stretch;\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: start;\n  height: 100%;\n}\n\n:host([container='full']) {\n  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --border-radius: 0;\n}\n\n:host([container='flat']) {\n  --nve-sys-interaction-background: unset;\n  --nve-sys-interaction-field-background: unset;\n  --background: transparent;\n  --border-bottom: none;\n  --border-radius: 0;\n  --box-shadow: none;\n}\n\nslot:not([name]) {\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n}\n"],"mappings":""}