@nvidia-elements/core 2.7.3 → 2.8.1

package/dist/button/button.examples.json

@@ -79,7 +79,7 @@
     {
       "id": "button-invoker-command",
       "name": "InvokerCommand",
-      "template": "<nve-icon\n  id=\"rotation-target\"\n  name=\"sparkles\"\n  aria-label=\"sparkles icon\"\n  style=\"inline-size: 100px; block-size: 100px\"\n></nve-icon>\n<section>\n  <nve-button commandfor=\"rotation-target\" command=\"--rotate-left\">Rotate left</nve-button>\n  <nve-button commandfor=\"rotation-target\" command=\"--rotate-right\">Rotate right</nve-button>\n  <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n</section>\n<nve-toggletip id=\"popover\">popover</nve-toggletip>\n<script type=\"module\">\n  const target = document.getElementById(\"rotation-target\");\n  target.addEventListener(\"command\", (event) => {\n    if (event.command === \"--rotate-left\") {\n      target.style.rotate = \"-90deg\";\n    } else if (event.command === \"--rotate-right\") {\n      target.style.rotate = \"90deg\";\n    }\n  });\n</script>\n",
+      "template": "<nve-icon id=\"rotation-target\" name=\"sparkles\" aria-label=\"sparkles icon\" style=\"inline-size: 100px; block-size: 100px\"></nve-icon>\n<section>\n  <nve-button commandfor=\"rotation-target\" command=\"--rotate-left\">Rotate left</nve-button>\n  <nve-button commandfor=\"rotation-target\" command=\"--rotate-right\">Rotate right</nve-button>\n  <nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n</section>\n<nve-toggletip id=\"popover\">popover</nve-toggletip>\n<script type=\"module\">\n  const target = document.getElementById(\"rotation-target\");\n  target.addEventListener(\"command\", (event) => {\n    if (event.command === \"--rotate-left\") {\n      target.style.rotate = \"-90deg\";\n    } else if (event.command === \"--rotate-right\") {\n      target.style.rotate = \"90deg\";\n    }\n  });\n</script>\n",
       "summary": "Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as rotating an image.",
       "description": "",
       "composition": true,
@@ -182,7 +182,7 @@
     {
       "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",
+      "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(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<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,
@@ -222,7 +222,7 @@
     {
       "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",
+      "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% / 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.",
       "description": "",
       "composition": true,

package/dist/button/button2.js

@@ -1,5 +1,5 @@
 import { useStyles as e } from "../internal/styles/index.js";
-import t from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import t from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import n from "./button.js";
 import { LitElement as r, html as i } from "lit";
 import { property as a } from "lit/decorators/property.js";
@@ -12,7 +12,7 @@ var s = class extends o(r) {
 	static {
 		this.metadata = {
 			tag: "nve-button",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	render() {

package/dist/button/button2.js.map

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

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

@@ -3,7 +3,7 @@ import { appendRootNodeStyle as t } from "../internal/utils/dom.js";
 import { keyNavigationList as n } from "../internal/controllers/keynav-list.controller.js";
 import { attachInternals as r } from "../internal/utils/a11y.js";
 import { useStyles as i } from "../internal/styles/index.js";
-import a from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import a from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import o from "./button-group.js";
 import s from "./button-group.global.js";
 import { LitElement as c, html as l } from "lit";
@@ -26,7 +26,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-button-group",
-			version: "2.7.3",
+			version: "2.8.1",
 			children: [
 				"nve-button",
 				"nve-icon-button",

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

@@ -1 +1 @@
-{"version":3,"file":"button-group2.js","names":["#selectButton","#buttons","#syncStyleStates","#onClick"],"sources":["../../src/button-group/button-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { KeynavListConfig, Interaction, Size } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  keyNavigationList,\n  useStyles,\n  audit,\n  appendRootNodeStyle\n} from '@nvidia-elements/core/internal';\nimport type { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { Button } from '@nvidia-elements/core/button';\nimport type { Divider } from '@nvidia-elements/core/divider';\nimport styles from './button-group.css?inline';\nimport globalStyles from './button-group.global.css?inline';\n\n/**\n * @element nve-button-group\n * @description A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.\n * @documentation https://nvidia.github.io/elements/docs/elements/button-group/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/button-group\n * @slot - default slot for `nve-button` 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":";;;;;;;;;;;;AAuCO,IAAA,IAAA,cAA0B,EAAW;;kCAgB2C,yBAkDzE,MAAa,KAAKA,GAAc,EAAE,MAA6C;;CAhE3F,IAAI,mBAAqC;EACvC,OAAO;GACL,OAAO,KAAKC;GACZ,QAAQ,KAAK;EACf;CACF;;gBAiBgB,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAc;IAAmB;GAAa;EAC3D;;CAWA,IAAIA,KAAW;EACb,OAAO,CAAC,GAAG,KAAK,aAAa,GAAG,KAAK,OAAO;CAC9C;CAEA,SAAS;EACP,OAAO,CAAI,yCAEa,KAAKC,GAAiB;CAGhD;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,EAAoB,MAAM,CAAY,GACtC,KAAK,WAAW,OAAO,SACvB,KAAK,iBAAiB,SAAS,KAAKC,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAKA,EAAQ;CACjD;CAEA;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAKD,GAAiB;CACxB;CAEA,KAAmB;EASjB,AARI,KAAK,cAAc,UACrB,KAAKD,GAAS,SAAQ,MAAQ,EAAI,YAAY,MAAO,GAGnD,KAAK,eACP,KAAKA,GAAS,SAAQ,MAAQ,EAAI,cAAc,KAAK,WAAY,GAGnE,KAAK,SAAS,SAAS,KAAK,WAAW,OAAO,IAAI,OAAO,IAAI,KAAK,WAAW,OAAO,OAAO,OAAO;CACpG;CAEA,GAAc,GAA6C;EACpD,EAAO,UAAU,6BAA6B,MAI/C,KAAK,mBAAmB,YAC1B,KAAKA,GAAS,SAAQ,MAAM,EAAE,UAAU,EAAM,GAC9C,EAAO,UAAU,MACR,KAAK,mBAAmB,YACjC,EAAO,UAAU,CAAC,EAAO;CAE7B;AACF;GAvFG,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,MAGvD,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAaxC,EAAsB,EAAE,UAAU,cAAc,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAEjD,EAAsB,EAAE,UAAU,kBAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,MAErD,EAAsB,EAAE,UAAU,aAAa,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,UAzClD,EAAM,GACN,EAA+B,CAAA,GAAA,CAAA"}
+{"version":3,"file":"button-group2.js","names":[],"sources":["../../src/button-group/button-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { KeynavListConfig, Interaction, Size } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  keyNavigationList,\n  useStyles,\n  audit,\n  appendRootNodeStyle\n} from '@nvidia-elements/core/internal';\nimport type { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { Button } from '@nvidia-elements/core/button';\nimport type { Divider } from '@nvidia-elements/core/divider';\nimport styles from './button-group.css?inline';\nimport globalStyles from './button-group.global.css?inline';\n\n/**\n * @element nve-button-group\n * @description A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.\n * @documentation https://nvidia.github.io/elements/docs/elements/button-group/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/button-group\n * @slot - default slot for `nve-button` 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":";;;;;;;;;;;;AAuCO,IAAM,IAAN,cAA0B,EAAW;;EAkE9B,aAlDyE,KAAA,cAAA,cAkDzE,KAAA,MAAA,MAAa,KAAK,GAAc,EAAE,MAA6C;;CAhE3F,IAAI,mBAAqC;EACvC,OAAO;GACL,OAAO,KAAK;GACZ,QAAQ,KAAK;EACf;CACF;;EAiBgB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAc;IAAmB;GAAa;EAC3D;;CAWA,IAAI,KAAW;EACb,OAAO,CAAC,GAAG,KAAK,aAAa,GAAG,KAAK,OAAO;CAC9C;CAEA,SAAS;EACP,OAAO,CAAI,yCAEa,KAAK,GAAiB;CAGhD;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,EAAoB,MAAM,CAAY,GACtC,KAAK,WAAW,OAAO,SACvB,KAAK,iBAAiB,SAAS,KAAK,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAK,EAAQ;CACjD;CAEA;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAK,GAAiB;CACxB;CAEA,KAAmB;EASjB,AARI,KAAK,cAAc,UACrB,KAAK,GAAS,SAAQ,MAAQ,EAAI,YAAY,MAAO,GAGnD,KAAK,eACP,KAAK,GAAS,SAAQ,MAAQ,EAAI,cAAc,KAAK,WAAY,GAGnE,KAAK,SAAS,SAAS,KAAK,WAAW,OAAO,IAAI,OAAO,IAAI,KAAK,WAAW,OAAO,OAAO,OAAO;CACpG;CAEA,GAAc,GAA6C;EACpD,EAAO,UAAU,6BAA6B,MAI/C,KAAK,mBAAmB,YAC1B,KAAK,GAAS,SAAQ,MAAM,EAAE,UAAU,EAAM,GAC9C,EAAO,UAAU,MACR,KAAK,mBAAmB,YACjC,EAAO,UAAU,CAAC,EAAO;CAE7B;AACF;AAvFG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAGvD,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAaxC,EAAA,CAAA,EAAsB,EAAE,UAAU,cAAc,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAEjD,EAAA,CAAA,EAAsB,EAAE,UAAU,kBAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAErD,EAAA,CAAA,EAAsB,EAAE,UAAU,aAAa,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAzClD,IAAA,EAAA,CAAA,EAAM,GACN,EAA+B,CAAA,GAAA,CAAA"}

package/dist/card/card.examples.json

@@ -23,7 +23,7 @@
     {
       "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",
+      "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 src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n    </nve-card-content>\n  </nve-card>\n  <nve-card style=\"height: 100%; width: 100%\">\n    <img src=\"/static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover\" />\n    <nve-card-content>\n      <p nve-text=\"body\" style=\"min-height: 24px\">card content</p>\n    </nve-card-content>\n  </nve-card>\n</div>\n",
       "summary": "Cards with media content (images) displayed in a grid layout, ideal for photo galleries, product catalogs, or visual content showcases.",
       "description": "",
       "composition": false,
@@ -41,7 +41,7 @@
     {
       "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",
+      "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\">Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n      <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Starboard</dt>\n      <dd nve-layout=\"span:8\" nve-text=\"body\">Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n    </dl>\n  </nve-card-content>\n</nve-card>\n",
       "summary": "Card containing a description list layout, perfect for displaying key-value pairs, definitions, or structured data in a readable format.",
       "description": "",
       "composition": false,

package/dist/card/card2.js

@@ -1,7 +1,7 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { hostAttr as t } from "../internal/decorators/host-attr.js";
 import { useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import i from "./card.js";
 import a from "./card-header.js";
 import o from "./card-content.js";
@@ -16,7 +16,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-header",
-			version: "2.7.3",
+			version: "2.8.1",
 			parents: ["nve-card"]
 		};
 	}
@@ -53,7 +53,7 @@ var p = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-content",
-			version: "2.7.3",
+			version: "2.8.1",
 			parents: ["nve-card"]
 		};
 	}
@@ -72,7 +72,7 @@ var m = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-footer",
-			version: "2.7.3",
+			version: "2.8.1",
 			parents: ["nve-card"]
 		};
 	}

package/dist/card/card2.js.map

@@ -1 +1 @@
-{"version":3,"file":"card2.js","names":[],"sources":["../../src/card/card.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport cardStyleSheet from './card.css?inline';\nimport cardHeaderStyleSheet from './card-header.css?inline';\nimport cardContentStyleSheet from './card-content.css?inline';\nimport cardFooterStyleSheet from './card-footer.css?inline';\n\n/**\n * @element nve-card\n * @description A container for content representing a single entity.\n * @documentation https://nvidia.github.io/elements/docs/elements/card/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - use `<nve-card-header>`,`<nve-card-content>`,`<nve-card-footer>` for card content layout\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --box-shadow\n * @cssprop --border\n * @aria https://github.com/w3c/aria-practices/issues\n */\n@audit()\nexport class Card extends LitElement implements ContainerElement {\n  /** flat (embed into parent container) or full (width of viewport) */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'full';\n\n  static styles = useStyles([cardStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-card',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"header\"></slot>\n\n        <slot></slot>\n\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n}\n\n/**\n * @element nve-card-header\n * @description Displays the title and optional actions at the top of a card, establishing the card's identity and purpose.\n * @documentation https://nvidia.github.io/elements/docs/elements/card/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - Card title, supporting text, and optional action controls.\n * @cssprop --padding\n * @cssprop --border-bottom\n * @cssprop --line-height\n * @cssprop --gap\n * @aria https://github.com/w3c/aria-practices/issues\n */\n@audit()\nexport class CardHeader extends LitElement {\n  static styles = useStyles([cardHeaderStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-card-header',\n    version: '0.0.0',\n    parents: ['nve-card']\n  };\n\n  /** @private */\n  @hostAttr() slot = 'header';\n\n  render() {\n    return html`\n      <header internal-host>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </header>\n    `;\n  }\n}\n\n/**\n * @element nve-card-content\n * @description Contains the primary body content of a card, providing a structured region for the main information or media.\n * @documentation https://nvidia.github.io/elements/docs/elements/card/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - This is a default/unnamed slot for card content\n * @cssprop --padding\n * @aria https://github.com/w3c/aria-practices/issues\n */\n@audit()\nexport class CardContent extends LitElement {\n  static styles = useStyles([cardContentStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-card-content',\n    version: '0.0.0',\n    parents: ['nve-card']\n  };\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\n/**\n * @element nve-card-footer\n * @description Provides a designated area at the bottom of a card for actions, metadata, or supplementary information.\n * @documentation https://nvidia.github.io/elements/docs/elements/card/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - This is a default/unnamed slot for card footer content\n * @cssprop --padding\n * @cssprop --border-top\n * @aria https://github.com/w3c/aria-practices/issues\n */\n@audit()\nexport class CardFooter extends LitElement {\n  static styles = useStyles([cardFooterStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-card-footer',\n    version: '0.0.0',\n    parents: ['nve-card']\n  };\n\n  /** @private */\n  @hostAttr() slot = 'footer';\n\n  render() {\n    return html`\n      <footer internal-host>\n        <slot></slot>\n      </footer>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;AA2BO,IAAA,IAAA,cAAmB,EAAuC;;gBAI/C,EAAU,CAAC,CAAc,CAAC;;;kBAEf;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CASb;AACF;GApBG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,UAH1C,EAAM,CAAA,GAAA,CAAA;AAuCA,IAAA,IAAA,cAAyB,EAAW;;2BAUtB;;;gBATH,EAAU,CAAC,CAAoB,CAAC;;;kBAErB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAKA,SAAS;EACP,OAAO,CAAI;CAOb;AACF;GAXG,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAXX,EAAM,CAAA,GAAA,CAAA;AAmCA,IAAA,IAAA,cAA0B,EAAW;;gBAC1B,EAAU,CAAC,CAAqB,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAEA,SAAS;EACP,OAAO,CAAI;CAGb;AACF;OAfC,EAAM,CAAA,GAAA,CAAA;AA6BA,IAAA,IAAA,cAAyB,EAAW;;2BAUtB;;;gBATH,EAAU,CAAC,CAAoB,CAAC;;;kBAErB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAKA,SAAS;EACP,OAAO,CAAI;CAKb;AACF;GATG,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAXX,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"card2.js","names":[],"sources":["../../src/card/card.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport cardStyleSheet from './card.css?inline';\nimport cardHeaderStyleSheet from './card-header.css?inline';\nimport cardContentStyleSheet from './card-content.css?inline';\nimport cardFooterStyleSheet from './card-footer.css?inline';\n\n/**\n * @element nve-card\n * @description A container for content representing a single entity.\n * @documentation https://nvidia.github.io/elements/docs/elements/card/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - use `<nve-card-header>`,`<nve-card-content>`,`<nve-card-footer>` for card content layout\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --box-shadow\n * @cssprop --border\n * @aria https://github.com/w3c/aria-practices/issues\n */\n@audit()\nexport class Card extends LitElement implements ContainerElement {\n  /** flat (embed into parent container) or full (width of viewport) */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'full';\n\n  static styles = useStyles([cardStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-card',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"header\"></slot>\n\n        <slot></slot>\n\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n}\n\n/**\n * @element nve-card-header\n * @description Displays the title and optional actions at the top of a card, establishing the card's identity and purpose.\n * @documentation https://nvidia.github.io/elements/docs/elements/card/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - Card title, supporting text, and optional action controls.\n * @cssprop --padding\n * @cssprop --border-bottom\n * @cssprop --line-height\n * @cssprop --gap\n * @aria https://github.com/w3c/aria-practices/issues\n */\n@audit()\nexport class CardHeader extends LitElement {\n  static styles = useStyles([cardHeaderStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-card-header',\n    version: '0.0.0',\n    parents: ['nve-card']\n  };\n\n  /** @private */\n  @hostAttr() slot = 'header';\n\n  render() {\n    return html`\n      <header internal-host>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </header>\n    `;\n  }\n}\n\n/**\n * @element nve-card-content\n * @description Contains the primary body content of a card, providing a structured region for the main information or media.\n * @documentation https://nvidia.github.io/elements/docs/elements/card/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - This is a default/unnamed slot for card content\n * @cssprop --padding\n * @aria https://github.com/w3c/aria-practices/issues\n */\n@audit()\nexport class CardContent extends LitElement {\n  static styles = useStyles([cardContentStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-card-content',\n    version: '0.0.0',\n    parents: ['nve-card']\n  };\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\n/**\n * @element nve-card-footer\n * @description Provides a designated area at the bottom of a card for actions, metadata, or supplementary information.\n * @documentation https://nvidia.github.io/elements/docs/elements/card/\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - This is a default/unnamed slot for card footer content\n * @cssprop --padding\n * @cssprop --border-top\n * @aria https://github.com/w3c/aria-practices/issues\n */\n@audit()\nexport class CardFooter extends LitElement {\n  static styles = useStyles([cardFooterStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-card-footer',\n    version: '0.0.0',\n    parents: ['nve-card']\n  };\n\n  /** @private */\n  @hostAttr() slot = 'footer';\n\n  render() {\n    return html`\n      <footer internal-host>\n        <slot></slot>\n      </footer>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;AA2BO,IAAM,IAAN,cAAmB,EAAuC;;EAI/C,KAAA,SAAA,EAAU,CAAC,CAAc,CAAC;;;EAEf,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CASb;AACF;AApBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAH1C,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA;AAuCA,IAAM,IAAN,cAAyB,EAAW;;EAUtB,aAAA,KAAA,OAAA;;;EATH,KAAA,SAAA,EAAU,CAAC,CAAoB,CAAC;;;EAErB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAKA,SAAS;EACP,OAAO,CAAI;CAOb;AACF;AAXG,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAXX,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA;AAmCA,IAAM,IAAN,cAA0B,EAAW;;EAC1B,KAAA,SAAA,EAAU,CAAC,CAAqB,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAEA,SAAS;EACP,OAAO,CAAI;CAGb;AACF;AAfC,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA;AA6BA,IAAM,IAAN,cAAyB,EAAW;;EAUtB,aAAA,KAAA,OAAA;;;EATH,KAAA,SAAA,EAAU,CAAC,CAAoB,CAAC;;;EAErB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAKA,SAAS;EACP,OAAO,CAAI;CAKb;AACF;AATG,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAXX,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}

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

@@ -14,7 +14,7 @@
     {
       "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",
+      "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\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"top-end\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"bottom-start\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message arrow-position=\"bottom-end\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n</section>\n",
       "summary": "Different arrow positions for chat messages. Useful for creating chat bubbles that point to specific elements or users.",
       "description": "",
       "composition": false,
@@ -25,7 +25,7 @@
     {
       "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",
+      "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 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.",
       "description": "",
       "composition": false,
@@ -43,7 +43,7 @@
     {
       "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",
+      "template": "<section nve-layout=\"column gap:lg full\">\n  <nve-chat-message container=\"flat\" style=\"margin-left: auto\"> How do I use the chat message component? </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.",
       "description": "",
       "composition": false,
@@ -63,7 +63,7 @@
     {
       "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",
+      "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\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"gray-slate\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"gray-denim\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"blue-indigo\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"blue-cobalt\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"blue-sky\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"teal-cyan\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"green-mint\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"teal-seafoam\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"green-grass\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"yellow-amber\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"orange-pumpkin\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"red-tomato\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"pink-magenta\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"purple-plum\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"purple-violet\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"purple-lavender\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"pink-rose\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"green-jade\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"lime-pear\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"yellow-nova\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\n  <nve-chat-message color=\"brand-green\">Your deployment completed successfully. All services are running as expected.</nve-chat-message>\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.",
       "description": "",
       "composition": false,

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

@@ -1,6 +1,6 @@
 import { appendRootNodeStyle as e } from "../internal/utils/dom.js";
 import { colorStateStyles as t, useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import i from "./chat-message.js";
 import a from "./chat-message.global.js";
 import { LitElement as o, html as s } from "lit";
@@ -13,7 +13,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-chat-message",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	render() {

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

@@ -1 +1 @@
-{"version":3,"file":"chat-message2.js","names":[],"sources":["../../src/chat-message/chat-message.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Color } from '@nvidia-elements/core/internal';\nimport { colorStateStyles, appendRootNodeStyle } from '@nvidia-elements/core/internal';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport styles from './chat-message.css?inline';\nimport globalStyles from './chat-message.global.css?inline';\n\n/**\n * @element nve-chat-message\n * @description A chat message component displays a text message within a conversation, sent between users or bots\n * @documentation https://nvidia.github.io/elements/docs/elements/chat-message/\n * @since 1.25.0\n * @entrypoint \\@nvidia-elements/core/chat-message\n * @slot - The message body displayed between the prefix and suffix content.\n * @slot prefix - for avatar/img content\n * @slot suffix - for avatar/img content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --border-radius\n * @cssprop --font-size\n * @cssprop --line-height\n * @cssprop --overflow\n * @cssprop --top-offset - Vertical offset for aligning message with avatar\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n */\nexport class ChatMessage extends LitElement {\n  static styles = useStyles([styles, colorStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-chat-message',\n    version: '0.0.0'\n  };\n\n  /** Applies a transparent background and reduced horizontal padding for embedding the message in another container. */\n  @property({ type: String, reflect: true }) container: 'flat';\n\n  @property({ type: String, reflect: true }) color: Color;\n\n  /** Removes the border radius from the selected message corner to indicate the speaker direction. */\n  @property({ type: String, reflect: true, attribute: 'arrow-position' }) arrowPosition:\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom-end';\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"prefix\"></slot>\n        <slot part=\"_message\"></slot>\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;;;AA+BA,IAAa,IAAb,cAAiC,EAAW;;gBAC1B,EAAU,CAAC,GAAQ,CAAgB,CAAC;;;kBAEzB;GACzB,KAAK;GACL,SAAS;EACX;;CAcA,SAAS;EACP,OAAO,CAAI;CAOb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY;CACxC;AACF;GAzBG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAExC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAiB,CAAC,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA"}
+{"version":3,"file":"chat-message2.js","names":[],"sources":["../../src/chat-message/chat-message.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Color } from '@nvidia-elements/core/internal';\nimport { colorStateStyles, appendRootNodeStyle } from '@nvidia-elements/core/internal';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport styles from './chat-message.css?inline';\nimport globalStyles from './chat-message.global.css?inline';\n\n/**\n * @element nve-chat-message\n * @description A chat message component displays a text message within a conversation, sent between users or bots\n * @documentation https://nvidia.github.io/elements/docs/elements/chat-message/\n * @since 1.25.0\n * @entrypoint \\@nvidia-elements/core/chat-message\n * @slot - The message body displayed between the prefix and suffix content.\n * @slot prefix - for avatar/img content\n * @slot suffix - for avatar/img content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --border-radius\n * @cssprop --font-size\n * @cssprop --line-height\n * @cssprop --overflow\n * @cssprop --top-offset - Vertical offset for aligning message with avatar\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n */\nexport class ChatMessage extends LitElement {\n  static styles = useStyles([styles, colorStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-chat-message',\n    version: '0.0.0'\n  };\n\n  /** Applies a transparent background and reduced horizontal padding for embedding the message in another container. */\n  @property({ type: String, reflect: true }) container: 'flat';\n\n  @property({ type: String, reflect: true }) color: Color;\n\n  /** Removes the border radius from the selected message corner to indicate the speaker direction. */\n  @property({ type: String, reflect: true, attribute: 'arrow-position' }) arrowPosition:\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom-end';\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"prefix\"></slot>\n        <slot part=\"_message\"></slot>\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;;;AA+BA,IAAa,IAAb,cAAiC,EAAW;;EAC1B,KAAA,SAAA,EAAU,CAAC,GAAQ,CAAgB,CAAC;;;EAEzB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAcA,SAAS;EACP,OAAO,CAAI;CAOb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY;CACxC;AACF;AAzBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAExC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAiB,CAAC,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA"}

package/dist/checkbox/checkbox-group2.js

@@ -1,7 +1,7 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { typeSSR as t } from "../internal/controllers/type-ssr.controller.js";
 import { useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { ControlGroup as i } from "../forms/control-group/control-group2.js";
 import a from "./checkbox-group.js";
 //#region src/checkbox/checkbox-group.ts
@@ -12,7 +12,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-checkbox-group",
-			version: "2.7.3",
+			version: "2.8.1",
 			children: [
 				"label",
 				"nve-control-message",

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group2.js","names":[],"sources":["../../src/checkbox/checkbox-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { typeSSR, useStyles, audit } from '@nvidia-elements/core/internal';\nimport { ControlGroup } from '@nvidia-elements/core/forms';\nimport styles from './checkbox-group.css?inline';\n\n/**\n * @element nve-checkbox-group\n * @description Groups related checkboxes together with a shared label and validation messaging for multi-select form inputs.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/checkbox\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/\n */\n@audit()\n@typeSSR()\nexport class CheckboxGroup extends ControlGroup {\n  static styles: CSSResult[] = useStyles([...ControlGroup.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-checkbox-group',\n    version: '0.0.0',\n    children: ['label', 'nve-control-message', 'nve-checkbox']\n  };\n}\n"],"mappings":";;;;;;;AAiBO,IAAA,IAAA,cAA4B,EAAa;;gBACjB,EAAU,CAAC,GAAG,EAAa,QAAQ,CAAM,CAAC;;;kBAE5C;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAuB;GAAc;EAC3D;;AACF;OAVC,EAAM,GACN,EAAQ,CAAA,GAAA,CAAA"}
+{"version":3,"file":"checkbox-group2.js","names":[],"sources":["../../src/checkbox/checkbox-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { typeSSR, useStyles, audit } from '@nvidia-elements/core/internal';\nimport { ControlGroup } from '@nvidia-elements/core/forms';\nimport styles from './checkbox-group.css?inline';\n\n/**\n * @element nve-checkbox-group\n * @description Groups related checkboxes together with a shared label and validation messaging for multi-select form inputs.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/checkbox\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/\n */\n@audit()\n@typeSSR()\nexport class CheckboxGroup extends ControlGroup {\n  static styles: CSSResult[] = useStyles([...ControlGroup.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-checkbox-group',\n    version: '0.0.0',\n    children: ['label', 'nve-control-message', 'nve-checkbox']\n  };\n}\n"],"mappings":";;;;;;;AAiBO,IAAM,IAAN,cAA4B,EAAa;;EACjB,KAAA,SAAA,EAAU,CAAC,GAAG,EAAa,QAAQ,CAAM,CAAC;;;EAE5C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAuB;GAAc;EAC3D;;AACF;AAVC,IAAA,EAAA,CAAA,EAAM,GACN,EAAQ,CAAA,GAAA,CAAA"}

package/dist/checkbox/checkbox2.js

@@ -1,7 +1,7 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { hostAttr as t } from "../internal/decorators/host-attr.js";
 import { useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Control as i } from "../forms/control/control2.js";
 import a from "./checkbox.js";
 //#region src/checkbox/checkbox.ts
@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-checkbox",
-			version: "2.7.3",
+			version: "2.8.1",
 			children: [
 				"label",
 				"input",

package/dist/checkbox/checkbox2.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox2.js","names":[],"sources":["../../src/checkbox/checkbox.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './checkbox.css?inline';\n\n/**\n * @element nve-checkbox\n * @description A checkbox is a control that enables users to choose between two distinct mutually exclusive options (checked or unchecked, on or off) through a single click or tap.\n * @documentation https://nvidia.github.io/elements/docs/elements/checkbox/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/checkbox\n * @cssprop --cursor\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-width\n * @cssprop --border-radius\n * @cssprop --border-color\n * @cssprop --background\n * @cssprop --check-color\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/\n */\n@audit()\nexport class Checkbox extends Control {\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  /** @private - disable for inline control */\n  declare fitText: boolean;\n\n  /** @private - disable for inline control */\n  declare fitContent: boolean;\n\n  static readonly metadata = {\n    tag: 'nve-checkbox',\n    version: '0.0.0',\n    children: ['label', 'input', 'nve-control-message']\n  };\n}\n"],"mappings":";;;;;;;AAyBO,IAAA,IAAA,cAAuB,EAAQ;;iCAC2B;;;gBAElC,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;kBAQvC;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAS;GAAqB;EACpD;;AACF;GAfG,EAAS,EAAE,WAAW,cAAc,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,UAFvC,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"checkbox2.js","names":[],"sources":["../../src/checkbox/checkbox.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './checkbox.css?inline';\n\n/**\n * @element nve-checkbox\n * @description A checkbox is a control that enables users to choose between two distinct mutually exclusive options (checked or unchecked, on or off) through a single click or tap.\n * @documentation https://nvidia.github.io/elements/docs/elements/checkbox/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/checkbox\n * @cssprop --cursor\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-width\n * @cssprop --border-radius\n * @cssprop --border-color\n * @cssprop --background\n * @cssprop --check-color\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/\n */\n@audit()\nexport class Checkbox extends Control {\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  /** @private - disable for inline control */\n  declare fitText: boolean;\n\n  /** @private - disable for inline control */\n  declare fitContent: boolean;\n\n  static readonly metadata = {\n    tag: 'nve-checkbox',\n    version: '0.0.0',\n    children: ['label', 'input', 'nve-control-message']\n  };\n}\n"],"mappings":";;;;;;;AAyBO,IAAM,IAAN,cAAuB,EAAQ;;EAC2B,aAAA,KAAA,aAAA;;;EAElC,KAAA,SAAA,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;;EAQvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAS;GAAqB;EACpD;;AACF;AAfG,EAAA,CAAA,EAAS,EAAE,WAAW,cAAc,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAFvC,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}

package/dist/color/color2.js

@@ -1,7 +1,7 @@
 import { appendRootNodeStyle as e, openEyeDropper as t } from "../internal/utils/dom.js";
 import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
 import { useStyles as r } from "../internal/styles/index.js";
-import i from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import i from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Control as a } from "../forms/control/control2.js";
 import { IconButton as o } from "../icon-button/icon-button2.js";
 import { inputStyles as s } from "../input/input2.js";
@@ -21,7 +21,7 @@ var f = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-color",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {

package/dist/color/color2.js.map

@@ -1 +1 @@
-{"version":3,"file":"color2.js","names":["#select"],"sources":["../../src/color/color.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 { appendRootNodeStyle, openEyeDropper, scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport globalStyles from './color.global.css?inline';\nimport styles from './color.css?inline';\n\n/**\n * @element nve-color\n * @description A color picker is a control that enables users to choose a color value.\n * @documentation https://nvidia.github.io/elements/docs/elements/color/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/color\n * @cssprop --cursor\n * @csspart icon-button - The eye dropper icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color\n */\n@scopedRegistry()\nexport class Color extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-color',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" .role=${'button'} .ariaLabel=${this.i18n.expand} icon-name=\"dropper\" container=\"inline\" @click=${() => this.#select()}></nve-icon-button>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    if (this.input.value === '#000000') {\n      const color = getComputedStyle(this).getPropertyValue('--background').trim();\n      if (color.includes('#')) {\n        this.input.value = color;\n      }\n    }\n  }\n\n  async #select() {\n    this.input.value = await openEyeDropper();\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAwBO,IAAA,IAAA,cAAoB,EAAoC;;gBAO7C,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,8CAA6C,SAAS,gBAAc,KAAK,KAAK,OAAO,yDAAuD,KAAKA,GAAQ,EAAE;CACxK;CAEA,oBAAoB;EAGlB,IAFA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY,GAClC,KAAK,MAAM,UAAU,WAAW;GAClC,IAAM,IAAQ,iBAAiB,IAAI,CAAC,CAAC,iBAAiB,cAAc,CAAC,CAAC,KAAK;GAC3E,AAAI,EAAM,SAAS,GAAG,MACpB,KAAK,MAAM,QAAQ;EAEvB;CACF;CAEA,MAAMA,KAAU;EAGd,AAFA,KAAK,MAAM,QAAQ,MAAM,EAAe,GACxC,KAAK,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GAC9D,KAAK,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACjE;AACF;GAjCG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,UAN1C,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"color2.js","names":[],"sources":["../../src/color/color.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 { appendRootNodeStyle, openEyeDropper, scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport globalStyles from './color.global.css?inline';\nimport styles from './color.css?inline';\n\n/**\n * @element nve-color\n * @description A color picker is a control that enables users to choose a color value.\n * @documentation https://nvidia.github.io/elements/docs/elements/color/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/color\n * @cssprop --cursor\n * @csspart icon-button - The eye dropper icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color\n */\n@scopedRegistry()\nexport class Color extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-color',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" .role=${'button'} .ariaLabel=${this.i18n.expand} icon-name=\"dropper\" container=\"inline\" @click=${() => this.#select()}></nve-icon-button>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    if (this.input.value === '#000000') {\n      const color = getComputedStyle(this).getPropertyValue('--background').trim();\n      if (color.includes('#')) {\n        this.input.value = color;\n      }\n    }\n  }\n\n  async #select() {\n    this.input.value = await openEyeDropper();\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAwBO,IAAM,IAAN,cAAoB,EAAoC;;EAO7C,KAAA,SAAA,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,8CAA6C,SAAS,gBAAc,KAAK,KAAK,OAAO,yDAAuD,KAAK,GAAQ,EAAE;CACxK;CAEA,oBAAoB;EAGlB,IAFA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY,GAClC,KAAK,MAAM,UAAU,WAAW;GAClC,IAAM,IAAQ,iBAAiB,IAAI,CAAC,CAAC,iBAAiB,cAAc,CAAC,CAAC,KAAK;GAC3E,AAAI,EAAM,SAAS,GAAG,MACpB,KAAK,MAAM,QAAQ;EAEvB;CACF;CAEA,MAAM,KAAU;EAGd,AAFA,KAAK,MAAM,QAAQ,MAAM,EAAe,GACxC,KAAK,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAK,CAAC,CAAC,GAC9D,KAAK,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CACjE;AACF;AAjCG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAN1C,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}