@nvidia-elements/core 0.0.10 → 0.0.12

package/dist/button/button.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/button/button.examples.json",
   "items": [
     {
-      "id": "core-button_default",
+      "id": "button",
       "name": "Default",
       "template": "<nve-button>standard</nve-button>\n",
       "summary": "Basic button component with standard appearance and behavior for primary user actions.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-button_group-states",
+      "id": "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.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-button_interaction",
+      "id": "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.",
@@ -32,7 +32,7 @@
       "tags": []
     },
     {
-      "id": "core-button_container",
+      "id": "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.",
@@ -41,7 +41,7 @@
       "tags": []
     },
     {
-      "id": "core-button_size",
+      "id": "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.",
@@ -50,7 +50,7 @@
       "tags": []
     },
     {
-      "id": "core-button_pressed",
+      "id": "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.",
@@ -59,7 +59,7 @@
       "tags": []
     },
     {
-      "id": "core-button_selected",
+      "id": "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.",
@@ -68,7 +68,7 @@
       "tags": []
     },
     {
-      "id": "core-button_disabled",
+      "id": "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.",
@@ -77,7 +77,7 @@
       "tags": []
     },
     {
-      "id": "core-button_invoker-command",
+      "id": "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.",
@@ -86,7 +86,7 @@
       "tags": []
     },
     {
-      "id": "core-button_with-icon",
+      "id": "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.",
@@ -95,7 +95,7 @@
       "tags": []
     },
     {
-      "id": "core-button_flat",
+      "id": "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.",
@@ -104,7 +104,7 @@
       "tags": []
     },
     {
-      "id": "core-button_inline",
+      "id": "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.",
@@ -113,7 +113,7 @@
       "tags": []
     },
     {
-      "id": "core-button_link",
+      "id": "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.",
@@ -122,7 +122,7 @@
       "tags": []
     },
     {
-      "id": "core-button_selected-flat",
+      "id": "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.",
@@ -131,7 +131,7 @@
       "tags": []
     },
     {
-      "id": "core-button_link-flat",
+      "id": "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.",
@@ -140,7 +140,7 @@
       "tags": []
     },
     {
-      "id": "core-button_no-wrap",
+      "id": "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.",
@@ -151,7 +151,7 @@
       ]
     },
     {
-      "id": "core-button_form-submit",
+      "id": "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.",
@@ -160,7 +160,7 @@
       "tags": []
     },
     {
-      "id": "core-button_form-control",
+      "id": "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": "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.",
@@ -169,7 +169,7 @@
       "tags": []
     },
     {
-      "id": "core-button_popover",
+      "id": "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.",
@@ -180,7 +180,7 @@
       ]
     },
     {
-      "id": "core-button_background-override",
+      "id": "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.",
@@ -191,7 +191,7 @@
       ]
     },
     {
-      "id": "core-button_valid-link-button",
+      "id": "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.",
@@ -200,7 +200,7 @@
       "tags": []
     },
     {
-      "id": "core-button_invalid-link-button",
+      "id": "button-invalid-link-button",
       "name": "InvalidLinkButton",
       "template": "<a href=\"#\"><nve-button>default</nve-button></a>\n",
       "summary": "Do not wrap buttons in anchor tags.",
@@ -211,7 +211,7 @@
       ]
     },
     {
-      "id": "core-button_progress-disclosure",
+      "id": "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.",
@@ -220,7 +220,7 @@
       "tags": []
     },
     {
-      "id": "core-button_contrast-colored-backgrounds",
+      "id": "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 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.",

package/dist/button/button2.js

@@ -12,7 +12,7 @@ var o = class extends t {
 	static {
 		this.metadata = {
 			tag: "nve-button",
-			version: "0.0.10"
+			version: "0.0.12"
 		};
 	}
 	render() {

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

@@ -2,7 +2,7 @@ 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.
+ * @description A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.
  * @since 0.16.0
  * @entrypoint \@nvidia-elements/core/button-group
  * @slot - default slot for `nve-button` or `nve-icon-button`

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

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/button-group/button-group.examples.json",
   "items": [
     {
-      "id": "core-button-group_default",
+      "id": "button-group",
       "name": "Default",
       "template": "<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",
       "summary": "Basic button group for organizing related actions into a unified control with connected visual appearance.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-button-group_single-select",
+      "id": "button-group-single-select",
       "name": "SingleSelect",
       "template": "<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",
       "summary": "Button group with single selection behavior for mutually exclusive options like view modes or formatting.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-button-group_multi-select",
+      "id": "button-group-multi-select",
       "name": "MultiSelect",
       "template": "<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",
       "summary": "Button group with multi-selection behavior for toggling many options simultaneously like text formatting.",
@@ -30,7 +30,7 @@
       "tags": []
     },
     {
-      "id": "core-button-group_disabled",
+      "id": "button-group-disabled",
       "name": "Disabled",
       "template": "<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",
       "summary": "Button group in disabled state for indicating unavailable actions or read-only contexts.",
@@ -39,7 +39,7 @@
       "tags": []
     },
     {
-      "id": "core-button-group_flat",
+      "id": "button-group-flat",
       "name": "Flat",
       "template": "<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",
       "summary": "Button group with flat container styling for minimal visual appearance and reduced emphasis.",
@@ -48,7 +48,7 @@
       "tags": []
     },
     {
-      "id": "core-button-group_action",
+      "id": "button-group-action",
       "name": "Action",
       "template": "<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",
       "summary": "Button group for clustering related action buttons with cohesive visual treatment.",
@@ -57,7 +57,7 @@
       "tags": []
     },
     {
-      "id": "core-button-group_action-split",
+      "id": "button-group-action-split",
       "name": "ActionSplit",
       "template": "<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",
       "summary": "Split button groups with different interaction styles for primary actions with dropdown alternatives.",
@@ -66,7 +66,7 @@
       "tags": []
     },
     {
-      "id": "core-button-group_action-split-rounded",
+      "id": "button-group-action-split-rounded",
       "name": "ActionSplitRounded",
       "template": "<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",
       "summary": "Split button groups with rounded container styling for softer visual appearance and modern aesthetics.",
@@ -75,7 +75,7 @@
       "tags": []
     },
     {
-      "id": "core-button-group_rounded",
+      "id": "button-group-rounded",
       "name": "Rounded",
       "template": "<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",
       "summary": "Rounded button group with single selection for segmented controls and filter options with pill-style buttons.",
@@ -84,7 +84,7 @@
       "tags": []
     },
     {
-      "id": "core-button-group_rounded-icon",
+      "id": "button-group-rounded-icon",
       "name": "RoundedIcon",
       "template": "<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",
       "summary": "Rounded button group with icon buttons for compact view switchers and mode toggles.",
@@ -93,7 +93,7 @@
       "tags": []
     },
     {
-      "id": "core-button-group_orientation-vertical",
+      "id": "button-group-orientation-vertical",
       "name": "OrientationVertical",
       "template": "<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",
       "summary": "Button group with vertical orientation for sidebars, toolbars, or vertical navigation contexts.",

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

@@ -26,7 +26,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-button-group",
-			version: "0.0.10",
+			version: "0.0.12",
 			children: [
 				"nve-button",
 				"nve-icon-button",

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

@@ -1 +1 @@
-{"version":3,"file":"button-group2.js","names":["#buttons","#syncStyleStates","#onClick","#selectButton"],"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 is a control that enables users to choose between two or more distinct mutually exclusive options.\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/button-group\n * @slot - default slot for `nve-button` or `nve-icon-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']\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":";;;;;;;;;;;;AAsCO,IAAA,IAAA,cAA0B,EAAW;;kCAgB2C;;CAdrF,IAAI,mBAAqC;AACvC,SAAO;GACL,OAAO,MAAA;GACP,QAAQ,KAAK;GACd;;;gBAkBa,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAc;IAAmB;;GAC7C;;CAWD,KAAA,IAAe;AACb,SAAO,CAAC,GAAG,KAAK,aAAa,GAAG,KAAK,QAAQ;;CAG/C,SAAS;AACP,SAAO,CAAI,yCAEa,MAAA,EAAsB;;CAKhD,oBAAoB;AAKlB,EAJA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,EAAoB,MAAM,EAAa,EACvC,KAAK,WAAW,OAAO,SACvB,KAAK,iBAAiB,SAAS,MAAA,EAAc;;CAG/C,uBAAuB;AAErB,EADA,MAAM,sBAAsB,EAC5B,KAAK,oBAAoB,SAAS,MAAA,EAAc;;CAGlD,MAAY,MAAa,MAAA,EAAmB,EAAE,OAA8C;CAE5F,QAAQ,GAA6B;AAEnC,EADA,MAAM,QAAQ,EAAM,EACpB,MAAA,GAAuB;;CAGzB,KAAmB;AASjB,EARI,KAAK,cAAc,UACrB,MAAA,EAAc,SAAQ,MAAQ,EAAI,YAAY,OAAQ,EAGpD,KAAK,eACP,MAAA,EAAc,SAAQ,MAAQ,EAAI,cAAc,KAAK,YAAa,EAGpE,KAAK,SAAS,SAAS,KAAK,WAAW,OAAO,IAAI,QAAQ,GAAG,KAAK,WAAW,OAAO,OAAO,QAAQ;;CAGrG,GAAc,GAA6C;AACpD,IAAO,UAAU,8BAA8B,KAIhD,KAAK,mBAAmB,YAC1B,MAAA,EAAc,SAAQ,MAAM,EAAE,UAAU,GAAO,EAC/C,EAAO,UAAU,MACR,KAAK,mBAAmB,YACjC,EAAO,UAAU,CAAC,EAAO;;;GApF5B,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAmB,CAAC,CAAA,EAAA,EAAA,WAAA,kBAAA,KAAA,EAAA,KAGxD,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAazC,EAAsB,EAAE,UAAU,eAAe,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAElD,EAAsB,EAAE,UAAU,mBAAmB,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAEtD,EAAsB,EAAE,UAAU,cAAc,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,SAzCnD,GAAO,EACP,GAAgC,CAAA,EAAA,EAAA"}
+{"version":3,"file":"button-group2.js","names":["#buttons","#syncStyleStates","#onClick","#selectButton"],"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 * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/button-group\n * @slot - default slot for `nve-button` or `nve-icon-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']\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":";;;;;;;;;;;;AAsCO,IAAA,IAAA,cAA0B,EAAW;;kCAgB2C;;CAdrF,IAAI,mBAAqC;AACvC,SAAO;GACL,OAAO,MAAA;GACP,QAAQ,KAAK;GACd;;;gBAkBa,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAc;IAAmB;;GAC7C;;CAWD,KAAA,IAAe;AACb,SAAO,CAAC,GAAG,KAAK,aAAa,GAAG,KAAK,QAAQ;;CAG/C,SAAS;AACP,SAAO,CAAI,yCAEa,MAAA,EAAsB;;CAKhD,oBAAoB;AAKlB,EAJA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,EAAoB,MAAM,EAAa,EACvC,KAAK,WAAW,OAAO,SACvB,KAAK,iBAAiB,SAAS,MAAA,EAAc;;CAG/C,uBAAuB;AAErB,EADA,MAAM,sBAAsB,EAC5B,KAAK,oBAAoB,SAAS,MAAA,EAAc;;CAGlD,MAAY,MAAa,MAAA,EAAmB,EAAE,OAA8C;CAE5F,QAAQ,GAA6B;AAEnC,EADA,MAAM,QAAQ,EAAM,EACpB,MAAA,GAAuB;;CAGzB,KAAmB;AASjB,EARI,KAAK,cAAc,UACrB,MAAA,EAAc,SAAQ,MAAQ,EAAI,YAAY,OAAQ,EAGpD,KAAK,eACP,MAAA,EAAc,SAAQ,MAAQ,EAAI,cAAc,KAAK,YAAa,EAGpE,KAAK,SAAS,SAAS,KAAK,WAAW,OAAO,IAAI,QAAQ,GAAG,KAAK,WAAW,OAAO,OAAO,QAAQ;;CAGrG,GAAc,GAA6C;AACpD,IAAO,UAAU,8BAA8B,KAIhD,KAAK,mBAAmB,YAC1B,MAAA,EAAc,SAAQ,MAAM,EAAE,UAAU,GAAO,EAC/C,EAAO,UAAU,MACR,KAAK,mBAAmB,YACjC,EAAO,UAAU,CAAC,EAAO;;;GApF5B,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAmB,CAAC,CAAA,EAAA,EAAA,WAAA,kBAAA,KAAA,EAAA,KAGxD,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAGzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAazC,EAAsB,EAAE,UAAU,eAAe,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAElD,EAAsB,EAAE,UAAU,mBAAmB,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAEtD,EAAsB,EAAE,UAAU,cAAc,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,SAzCnD,GAAO,EACP,GAAgC,CAAA,EAAA,EAAA"}

package/dist/card/card.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/card/card.examples.json",
   "items": [
     {
-      "id": "core-card_default",
+      "id": "card",
       "name": "Default",
       "template": "<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",
       "summary": "Basic card component with header, content, and footer sections. Use this as a starting point for simple content containers.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-card_actions",
+      "id": "card-actions",
       "name": "Actions",
       "template": "<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",
       "summary": "Card with action buttons in the footer, including primary and secondary actions for interactive card layouts.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-card_media-card",
+      "id": "card-media-card",
       "name": "MediaCard",
       "template": "<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\n      src=\"static/images/test-image-1.svg\"\n      alt=\"example visualization for media card demo\"\n      loading=\"lazy\"\n      style=\"width: 100%; object-fit: cover\"\n    />\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\n      src=\"static/images/test-image-1.svg\"\n      alt=\"example visualization for media card demo\"\n      loading=\"lazy\"\n      style=\"width: 100%; object-fit: cover\"\n    />\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",
       "summary": "Cards with media content (images) displayed in a grid layout, ideal for photo galleries, product catalogs, or visual content showcases.",
@@ -30,7 +30,7 @@
       "tags": []
     },
     {
-      "id": "core-card_with-divider",
+      "id": "card-with-divider",
       "name": "WithDivider",
       "template": "<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",
       "summary": "Card with a divider separating different content sections, useful for organizing related but distinct information within a single card.",
@@ -39,7 +39,7 @@
       "tags": []
     },
     {
-      "id": "core-card_description-list",
+      "id": "card-description-list",
       "name": "DescriptionList",
       "template": "<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      <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Port</dt>\n      <dd nve-layout=\"span:8\" nve-text=\"body\">\n        Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the\n        bow (the front of the vessel).\n      </dd>\n      <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Starboard</dt>\n      <dd nve-layout=\"span:8\" nve-text=\"body\">\n        Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing\n        towards the bow (the front of the vessel).\n      </dd>\n    </dl>\n  </nve-card-content>\n</nve-card>\n",
       "summary": "Card containing a description list layout, perfect for displaying key-value pairs, definitions, or structured data in a readable format.",
@@ -48,7 +48,7 @@
       "tags": []
     },
     {
-      "id": "core-card_with-tabs",
+      "id": "card-with-tabs",
       "name": "WithTabs",
       "template": "<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",
       "summary": "Card with integrated tabs in the header for multi-panel content within a single card interface.",
@@ -57,7 +57,7 @@
       "tags": []
     },
     {
-      "id": "core-card_container-full",
+      "id": "card-container-full",
       "name": "ContainerFull",
       "template": "<nve-card container=\"full\">\n  <nve-card-content>\n    <p nve-text=\"body\">container full</p>\n  </nve-card-content>\n</nve-card>\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.",
@@ -66,7 +66,7 @@
       "tags": []
     },
     {
-      "id": "core-card_container-flat",
+      "id": "card-container-flat",
       "name": "ContainerFlat",
       "template": "<nve-card container=\"flat\">\n  <nve-card-content>\n    <p nve-text=\"body\">container flat</p>\n  </nve-card-content>\n</nve-card>\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.",
@@ -75,7 +75,7 @@
       "tags": []
     },
     {
-      "id": "core-card_audit",
+      "id": "card-audit",
       "name": "Audit",
       "template": "<!-- invalid padding usage -->\n<nve-card nve-layout=\"pad:md\"></nve-card>\n<!-- invalid parent element -->\n<nve-card-header> card header </nve-card-header>\n<nve-card-content> card content </nve-card-content>\n<nve-card-footer> card footer </nve-card-footer>\n",
       "summary": "Examples of invalid card usage patterns for testing and documentation purposes, showing what not to do when implementing cards.",
@@ -86,7 +86,7 @@
       ]
     },
     {
-      "id": "core-card_overflow-content",
+      "id": "card-overflow-content",
       "name": "OverflowContent",
       "template": "<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",
       "summary": "Card with overflow content, where the card body scrolls when content exceeds the card height.",

package/dist/card/card2.js

@@ -16,7 +16,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card",
-			version: "0.0.10"
+			version: "0.0.12"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-header",
-			version: "0.0.10",
+			version: "0.0.12",
 			parents: ["nve-card"]
 		};
 	}
@@ -53,7 +53,7 @@ var p = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-content",
-			version: "0.0.10",
+			version: "0.0.12",
 			parents: ["nve-card"]
 		};
 	}
@@ -72,7 +72,7 @@ var m = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-footer",
-			version: "0.0.10",
+			version: "0.0.12",
 			parents: ["nve-card"]
 		};
 	}

package/dist/chat-message/chat-message.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/chat-message/chat-message.examples.json",
   "items": [
     {
-      "id": "core-chat-message_default",
+      "id": "chat-message",
       "name": "Default",
       "template": "<nve-chat-message> Your deployment completed successfully. All services are running as expected. </nve-chat-message>\n",
       "summary": "Basic chat message with default styling and behavior. Use this for simple text-based chat interactions.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-chat-message_arrow-position",
+      "id": "chat-message-arrow-position",
       "name": "ArrowPosition",
       "template": "<section nve-layout=\"column gap:lg\">\n  <nve-chat-message>Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"top-start\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message arrow-position=\"top-end\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message arrow-position=\"bottom-start\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message arrow-position=\"bottom-end\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n</section>\n",
       "summary": "Different arrow positions for chat messages. Useful for creating chat bubbles that point to specific elements or users.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-chat-message_flat",
+      "id": "chat-message-flat",
       "name": "Flat",
       "template": "<section nve-layout=\"column gap:lg full\">\n  <nve-chat-message container=\"flat\">\n    <nve-avatar slot=\"prefix\" color=\"green-grass\">AI</nve-avatar>\n    Your deployment completed successfully. All services are running as expected.\n  </nve-chat-message>\n  <nve-chat-message container=\"flat\" style=\"width: 300px\">\n    <nve-avatar slot=\"prefix\" color=\"green-grass\">AI</nve-avatar>\n    The build pipeline finished processing all stages. Tests passed with 98% coverage, and the deployment to staging was\n    successful. Review the detailed logs in the CI dashboard for more information.\n  </nve-chat-message>\n</section>\n",
       "summary": "Flat container style with avatar integration. Perfect for modern chat interfaces where messages have a cleaner, flatter appearance.",
@@ -32,7 +32,7 @@
       "tags": []
     },
     {
-      "id": "core-chat-message_prefix-suffix",
+      "id": "chat-message-prefix-suffix",
       "name": "PrefixSuffix",
       "template": "<section nve-layout=\"column gap:lg full\" style=\"max-width: 600px\">\n  <nve-chat-message style=\"max-width: 70%\">\n    <nve-avatar slot=\"prefix\" color=\"gray-denim\">AI</nve-avatar>\n    Hello, how may I assist you today?\n  </nve-chat-message>\n  <nve-chat-message style=\"max-width: 70%; margin-left: auto\">\n    How do I use the chat message component?\n    <nve-avatar slot=\"suffix\" color=\"green-grass\">NV</nve-avatar>\n  </nve-chat-message>\n  <nve-chat-message style=\"max-width: 70%\">\n    <nve-avatar slot=\"prefix\" color=\"gray-denim\">AI</nve-avatar>\n    <p nve-text=\"body\">To use the <code nve-text=\"code\">nve-chat-message</code> first import the element.</p>\n    <nve-codeblock language=\"typescript\"> import '@nvidia-elements/code/codeblock/define.js'; </nve-codeblock>\n  </nve-chat-message>\n</section>\n",
       "summary": "Chat conversation with prefix and suffix avatars. Ideal for multi-user chat applications where you need to distinguish between different participants.",
@@ -41,7 +41,7 @@
       "tags": []
     },
     {
-      "id": "core-chat-message_codeblock",
+      "id": "chat-message-codeblock",
       "name": "Codeblock",
       "template": "<section nve-layout=\"column gap:lg full\">\n  <nve-chat-message container=\"flat\" style=\"margin-left: auto\">\n    How do I use the chat message component?\n  </nve-chat-message>\n  <nve-chat-message container=\"flat\">\n    Here's the steps you need to do follow to use the chat message component\n    <nve-codeblock language=\"typescript\">\n      import '@nvidia-elements/core/chat-message/define.js';\n      <code nve-text=\"code\"><nve-chat-message></nve-chat-message></code>\n    </nve-codeblock>\n  </nve-chat-message>\n</section>\n",
       "summary": "Chat messages with code blocks for technical discussions. Perfect for developer chat interfaces or documentation systems.",
@@ -50,7 +50,7 @@
       "tags": []
     },
     {
-      "id": "core-chat-message_top-offset",
+      "id": "chat-message-top-offset",
       "name": "TopOffset",
       "template": "<nve-chat-message arrow-position=\"top-start\" style=\"--top-offset: var(--nve-ref-space-sm)\">\n  <nve-avatar slot=\"prefix\" color=\"gray-denim\">AI</nve-avatar>\n  Hello, how may I assist you today?\n</nve-chat-message>\n",
       "summary": "Custom top offset positioning for precise arrow placement. Useful when you need fine-tuned control over the chat bubble positioning.",
@@ -61,7 +61,7 @@
       ]
     },
     {
-      "id": "core-chat-message_color",
+      "id": "chat-message-color",
       "name": "Color",
       "template": "<section nve-layout=\"column gap:md\">\n  <nve-chat-message>Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"red-cardinal\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"gray-slate\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"gray-denim\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"blue-indigo\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"blue-cobalt\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"blue-sky\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"teal-cyan\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"green-mint\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"teal-seafoam\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"green-grass\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"yellow-amber\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"orange-pumpkin\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"red-tomato\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"pink-magenta\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"purple-plum\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"purple-violet\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"purple-lavender\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"pink-rose\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"green-jade\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"lime-pear\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"yellow-nova\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n  <nve-chat-message color=\"brand-green\"\n    >Your deployment completed successfully. All services are running as expected.</nve-chat-message\n  >\n</section>\n",
       "summary": "All available color variants for chat messages. Use these to create themed chat interfaces or to differentiate message types and priorities.",

package/dist/chat-message/chat-message2.js

@@ -13,7 +13,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-chat-message",
-			version: "0.0.10"
+			version: "0.0.12"
 		};
 	}
 	render() {

package/dist/checkbox/checkbox-group2.js

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