@nvidia-elements/core 0.0.1 → 0.0.3

package/dist/button/button.d.ts

@@ -0,0 +1,45 @@
+import { Interaction, Inverse, FlatInteraction, Size, BaseButton } from '../internal';
+/**
+ * @element nve-button
+ * @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.
+ * @since 0.1.3
+ * @entrypoint \@nvidia-elements/core/button
+ * @slot - slot for button text content or icon, icon placement depends on whether `icon` appears before or after text content.
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --padding
+ * @cssprop --border
+ * @cssprop --border-radius
+ * @cssprop --font-weight
+ * @cssprop --font-size
+ * @cssprop --text-decoration
+ * @cssprop --text-align
+ * @cssprop --cursor
+ * @cssprop --gap
+ * @cssprop --height
+ * @cssprop --text-transform
+ * @cssprop --line-height
+ * @cssprop --width
+ * @cssprop --min-width
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/
+ */
+export declare class Button extends BaseButton {
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    /**
+     * Determines the container of the button. Flat suits nesting within other containers or more muted style. Inline suits inline content such as text.
+     */
+    container?: 'flat' | 'inline';
+    /**
+     * Determines size of the button.
+     */
+    size?: Size;
+    /**
+     * 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.
+     */
+    interaction: Interaction | FlatInteraction | Inverse;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/button/button.examples.js

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

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

@@ -0,0 +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\ndeclare const __ELEMENTS_REPO_BASE_URL__: string;\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    <img id=\"logo\" src=\"${__ELEMENTS_REPO_BASE_URL__}/favicon.svg\" alt=\"logo\" style=\"width: 100px; height: 100px;\" />\n    <section>\n      <nve-button commandfor=\"logo\" command=\"--rotate-left\">Rotate left</nve-button>\n      <nve-button commandfor=\"logo\" 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 logo = document.getElementById('logo');\n      logo.addEventListener('command', (event) => {\n        if (event.command == '--rotate-left') {\n          logo.style.rotate = '-90deg';\n        } else if (event.command == '--rotate-right') {\n          logo.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 The form control option styles a button like a form field. Use this pattern when a button opens custom controls such as dropdowns, filter menus, or pickers so the UI stays cohesive and users recognize the trigger 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 maintain maximum button contrast on varied backgrounds. This pattern applies the correct static light or dark theme colors so actions stay visible in toolbars, alerts, and cards.\n * @tags test-case\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};"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/button/button.examples.json

@@ -0,0 +1,234 @@
+{
+  "element": "nve-button",
+  "entrypoint": "@nvidia-elements/core/button/button.examples.json",
+  "items": [
+    {
+      "id": "core-button_default",
+      "name": "Default",
+      "template": "<nve-button>standard</nve-button>\n",
+      "summary": "Basic button component with standard appearance and behavior for primary user actions.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_group-states",
+      "name": "GroupStates",
+      "template": "<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",
+      "summary": "Button interaction states including hover, focus, pressed, selected, and disabled.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-button_interaction",
+      "name": "Interaction",
+      "template": "<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",
+      "summary": "Interaction states that communicate button hierarchy, importance, and availability to users.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_container",
+      "name": "Container",
+      "template": "<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",
+      "summary": "Container style variants for buttons to accommodate different visual weight and context.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_size",
+      "name": "Size",
+      "template": "<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",
+      "summary": "Button size variants to accommodate layout densities and touch target requirements.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_pressed",
+      "name": "Pressed",
+      "template": "<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",
+      "summary": "Pressed state for toggle buttons marking active/selected state with clear visual feedback.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_selected",
+      "name": "Selected",
+      "template": "<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",
+      "summary": "Button selection states to accommodate different visual weight and context.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_disabled",
+      "name": "Disabled",
+      "template": "<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",
+      "summary": "Button disabled states to accommodate different visual weight and context.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_invoker-command",
+      "name": "InvokerCommand",
+      "template": "<img id=\"logo\" src=\"${__ELEMENTS_REPO_BASE_URL__}/favicon.svg\" alt=\"logo\" style=\"width: 100px; height: 100px\" />\n<section>\n  <nve-button commandfor=\"logo\" command=\"--rotate-left\">Rotate left</nve-button>\n  <nve-button commandfor=\"logo\" 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 logo = document.getElementById(\"logo\");\n  logo.addEventListener(\"command\", (event) => {\n    if (event.command == \"--rotate-left\") {\n      logo.style.rotate = \"-90deg\";\n    } else if (event.command == \"--rotate-right\") {\n      logo.style.rotate = \"90deg\";\n    }\n  });\n</script>\n",
+      "summary": "Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as rotating an image.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_with-icon",
+      "name": "WithIcon",
+      "template": "<nve-button><nve-icon name=\"person\"></nve-icon> button</nve-button>\n<nve-button>button <nve-icon name=\"person\"></nve-icon></nve-button>\n",
+      "summary": "Button with icons positioned before or after text to enhance visual clarity and user understanding.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_flat",
+      "name": "Flat",
+      "template": "<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",
+      "summary": "Flat button style for secondary actions with minimal visual weight, maintaining clear interaction states.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_inline",
+      "name": "Inline",
+      "template": "<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",
+      "summary": "Inline button style for text-like actions that blend with content while maintaining button functionality.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_link",
+      "name": "Link",
+      "template": "<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",
+      "summary": "Button styling applied to links for consistent visual treatment while maintaining semantic navigation behavior.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_selected-flat",
+      "name": "SelectedFlat",
+      "template": "<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",
+      "summary": "Flat button selection state for choice groups where one option is active, providing clear selection feedback.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_link-flat",
+      "name": "LinkFlat",
+      "template": "<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",
+      "summary": "Flat button styling for navigation links, providing subtle visual treatment for secondary navigation actions.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_no-wrap",
+      "name": "NoWrap",
+      "template": "<nve-button style=\"--width: 100px\">item item item</nve-button>\n<nve-button style=\"--width: 100px\"> <span>item</span><span>item</span><span>item</span> </nve-button>\n",
+      "summary": "Text wrapping behavior in constrained widths, where content adapts to available space.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-button_form-submit",
+      "name": "FormSubmit",
+      "template": "<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  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",
+      "summary": "Form submission button with proper form integration and data handling for user input processing.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_form-control",
+      "name": "FormControl",
+      "template": "<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",
+      "summary": "The form control option styles a button like a form field. Use this pattern when a button opens custom controls such as dropdowns, filter menus, or pickers so the UI stays cohesive and users recognize the trigger as part of the form.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-button_popover",
+      "name": "Popover",
+      "template": "<div popover id=\"popover-example\">popover</div>\n<nve-button popovertarget=\"popover-example\">toggle</nve-button>\n",
+      "summary": "Button integrated with popover API to trigger contextual overlays, providing extra information or controls.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-button_background-override",
+      "name": "BackgroundOverride",
+      "template": "<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    &:hover {\n      --background-image: linear-gradient(\n        340deg,\n        rgb(255 234 177) 0%,\n        color-mix(in oklab, var(--nve-ref-color-yellow-amber-900) 100%, #000 4%) 60%\n      );\n    }\n  }\n</style>\n<nve-button class=\"custom\">Create Account</nve-button>\n<nve-button>Create Account</nve-button>\n",
+      "summary": "Override button appearance with custom CSS properties for brand-specific designs while maintaining functionality.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-button_valid-link-button",
+      "name": "ValidLinkButton",
+      "template": "<nve-button><a href=\"#\">default</a></nve-button>\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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_invalid-link-button",
+      "name": "InvalidLinkButton",
+      "template": "<a href=\"#\"><nve-button>default</nve-button></a>\n",
+      "summary": "Do not wrap buttons in anchor tags.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "anti-pattern"
+      ]
+    },
+    {
+      "id": "core-button_progress-disclosure",
+      "name": "ProgressDisclosure",
+      "template": "<nve-button>\n  <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n  Submitting\n</nve-button>\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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-button_contrast-colored-backgrounds",
+      "name": "ContrastColoredBackgrounds",
+      "template": "<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  <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  <nve-card style=\"width: 280px\">\n    <nve-card-content\n      style=\"\n        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% /\n          40px 40px;\n        background-position: center;\n        border-style: hidden;\n      \"\n    >\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</div>\n",
+      "summary": "Use standard interaction styling to maintain maximum button contrast on varied backgrounds. This pattern applies the correct static light or dark theme colors so actions stay visible in toolbars, alerts, and cards.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/button/button.js

@@ -0,0 +1,6 @@
+//#region 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=\"emphasize\"]),: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([interaction=\"inverse\"]){--color: var(--nve-sys-interaction-background);--background: var(--nve-sys-interaction-color)}: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])){--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([interaction*=\"flat\"]),: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([interaction*=\"flat\"]:hover),:host([container*=\"inline\"]:hover){--background: transparent;--text-decoration: underline}:host([interaction*=\"flat\"]:hover) [interaction-state],:host([container*=\"inline\"]:hover) [interaction-state]{--nve-sys-interaction-state-ratio: 0}:host([interaction*=\"flat\"]:state(active)),:host([container*=\"inline\"]:state(active)){--background: transparent;--text-decoration: underline}:host([interaction*=\"flat\"]:state(disabled)),:host([container*=\"flat\"]:state(disabled)),:host([container*=\"inline\"]:state(disabled)){--color: var(--nve-sys-interaction-disabled-color);--background: transparent;--text-decoration: none !important}:host([interaction*=\"flat\"]:state(disabled)) [interaction-state],:host([container*=\"flat\"]:state(disabled)) [interaction-state],:host([container*=\"inline\"]:state(disabled)) [interaction-state]{--nve-sys-interaction-state-ratio: 0}:host([interaction*=\"flat\"]:state(selected)),: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)}:host([interaction*=\"flat\"]:state(selected)) [interaction-state]{--nve-sys-interaction-state-ratio: 0}:host([interaction*=\"flat\"][readonly]:not(:state(anchor))){--text-decoration: none;--cursor: cursor}:host([interaction*=\"flat-destructive\"]){--color: var(--nve-sys-interaction-destructive-background)}:host([interaction*=\"flat-emphasize\"]){--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

@@ -0,0 +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: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:host([nve-control]) [internal-host] {\n  justify-content: start;\n}\n\n:host([nve-control]) ::slotted([name='chevron-down']),\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: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='emphasize']), /* deprecated */\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([interaction='inverse']) {\n  /* deprecated */\n  --color: var(--nve-sys-interaction-background);\n  --background: var(--nve-sys-interaction-color);\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])) {\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([interaction*='flat']), /* deprecated */\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([interaction*='flat']:hover), /* deprecated */\n:host([container*='inline']:hover) {\n  --background: transparent;\n  --text-decoration: underline;\n}\n\n:host([interaction*='flat']:hover) [interaction-state], /* deprecated */\n:host([container*='inline']:hover) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n:host([interaction*='flat']:state(active)), /* deprecated */\n:host([container*='inline']:state(active)) {\n  --background: transparent;\n  --text-decoration: underline;\n}\n\n:host([interaction*='flat']:state(disabled)), /* deprecated */\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([interaction*='flat']:state(disabled)) [interaction-state], /* deprecated */\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([interaction*='flat']:state(selected)), /* deprecated */\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/* deprecated */\n:host([interaction*='flat']:state(selected)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n/* deprecated */\n:host([interaction*='flat'][readonly]:not(:state(anchor))) {\n  --text-decoration: none;\n  --cursor: cursor;\n}\n\n/* deprecated */\n:host([interaction*='flat-destructive']) {\n  --color: var(--nve-sys-interaction-destructive-background);\n}\n\n/* deprecated */\n:host([interaction*='flat-emphasize']) {\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

@@ -0,0 +1,35 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { BaseButton as t } from "../internal/base/button.js";
+import { useStyles as n } from "../internal/styles/index.js";
+import r from "./button.js";
+import { html as i } from "lit";
+import { property as a } from "lit/decorators/property.js";
+//#region src/button/button.ts
+var o = class extends t {
+	static {
+		this.styles = n([r]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-button",
+			version: "0.0.3"
+		};
+	}
+	render() {
+		return i`<div internal-host interaction-state focus-within><slot></slot></div>`;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "container", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "size", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "interaction", void 0);
+//#endregion
+export { o as Button };
+
+//# sourceMappingURL=button2.js.map

package/dist/button/button2.js.map

@@ -0,0 +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 } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Interaction, Inverse, FlatInteraction, Size } from '@nvidia-elements/core/internal';\nimport { BaseButton, 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 * @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 BaseButton {\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 | FlatInteraction | Inverse;\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;AAiCA,IAAa,IAAb,cAA4B,EAAW;;gBACrB,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;CAiBD,SAAS;AACP,SAAO,CAAI;;;GAbZ,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA"}

package/dist/button/define.d.ts

@@ -0,0 +1,6 @@
+import { Button } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-button': Button;
+    }
+}

package/dist/button/define.js

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

package/dist/button/define.js.map

@@ -0,0 +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/core/internal';\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,EAAO"}

package/dist/button/index.d.ts

@@ -0,0 +1 @@
+export * from './button.js';

package/dist/button/index.js

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

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

@@ -0,0 +1,46 @@
+import { PropertyValues, LitElement } from 'lit';
+import { KeynavListConfig, Interaction, Size } from '../internal';
+/**
+ * @element nve-button-group
+ * @description A button group is a control that enables users to choose between two or more distinct mutually exclusive options.
+ * @since 0.16.0
+ * @entrypoint \@nvidia-elements/core/button-group
+ * @slot - default slot for `nve-button` or `nve-icon-button`
+ * @cssprop --background
+ * @cssprop --border-radius
+ * @cssprop --padding
+ * @cssprop --gap
+ * @cssprop --width
+ * @cssprop --height
+ * @cssprop --color
+ * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role
+ */
+export declare class ButtonGroup extends LitElement {
+    #private;
+    /** @private */
+    get keynavListConfig(): KeynavListConfig;
+    /** By default the button group is stateless. Add the `behavior-select` attribute and set to `single` or `multi` to enable stateful selction handling. */
+    behaviorSelect: 'single' | 'multi';
+    /** Set the style of the button group using the `container` property. Options are the default display when omitting the attribute, `flat` or `rounded`. */
+    container?: 'flat' | 'rounded';
+    /** Determines the orientation direction of the group. Vertical groups support icon buttons only. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Use the `interaction` property on `button-group` in combination with `divider` for color-coded split buttons */
+    interaction: Interaction;
+    /** Determines size of button */
+    size?: Size;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        children: string[];
+    };
+    /** @private */
+    _internals: ElementInternals;
+    private dividers;
+    private iconButtons;
+    private buttons;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+    updated(props: PropertyValues<this>): void;
+}

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

@@ -0,0 +1,6 @@
+//#region 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

@@ -0,0 +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"}