@nvidia-elements/core 0.2.2 → 0.2.4

package/dist/button/button.d.ts

@@ -1,4 +1,6 @@
-import { Interaction, Inverse, FlatInteraction, Size, BaseButton } from '../internal';
+import { LitElement } from 'lit';
+import { Interaction, Size } from '../internal';
+declare const Button_base: import('@nvidia-elements/forms/mixins').ButtonFormControlMixinReturn<typeof LitElement>;
 /**
  * @element nve-button
  * @description A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
@@ -23,7 +25,7 @@ import { Interaction, Inverse, FlatInteraction, Size, BaseButton } from '../inte
  * @cssprop --min-width
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/
  */
-export declare class Button extends BaseButton {
+export declare class Button extends Button_base {
     static styles: import('lit').CSSResult[];
     static readonly metadata: {
         tag: string;
@@ -40,6 +42,7 @@ export declare class Button extends BaseButton {
     /**
      * The Interaction type provides a way to show the intended use case for a button or other interactive element. This can help users quickly understand what each interaction will do and reduce the potential for confusion or errors.
      */
-    interaction: Interaction | FlatInteraction | Inverse;
-    render(): import('lit-html').TemplateResult<1>;
+    interaction: Interaction;
+    render(): import('lit').TemplateResult<1>;
 }
+export {};

package/dist/button/button.js

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

package/dist/button/button.js.map

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

package/dist/button/button2.js

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

package/dist/button/button2.js.map

@@ -1 +1 @@
-{"version":3,"file":"button2.js","names":[],"sources":["../../src/button/button.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Interaction, Inverse, FlatInteraction, Size } from '@nvidia-elements/core/internal';\nimport { BaseButton, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './button.css?inline';\n\n/**\n * @element nve-button\n * @description A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.\n * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/button\n * @slot - slot for button text content or icon, icon placement depends on whether `icon` appears before or after text content.\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --text-decoration\n * @cssprop --text-align\n * @cssprop --cursor\n * @cssprop --gap\n * @cssprop --height\n * @cssprop --text-transform\n * @cssprop --line-height\n * @cssprop --width\n * @cssprop --min-width\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\nexport class Button extends BaseButton {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-button',\n    version: '0.0.0'\n  };\n\n  /**\n   * Determines the container of the button. Flat suits nesting within other containers or more muted style. Inline suits inline content such as text.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'inline';\n\n  /**\n   * Determines size of the button.\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  /**\n   * The Interaction type provides a way to show the intended use case for a button or other interactive element. This can help users quickly understand what each interaction will do and reduce the potential for confusion or errors.\n   */\n  @property({ type: String, reflect: true }) interaction: Interaction | FlatInteraction | Inverse;\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;AAiCA,IAAa,IAAb,cAA4B,EAAW;;gBACrB,EAAU,CAAC,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 * @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":";;;;;;;AAkCA,IAAa,IAAb,cAA4B,EAAuB,CAAU,EAAE;;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"}

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

@@ -40,7 +40,7 @@ export declare class ButtonGroup extends LitElement {
     private dividers;
     private iconButtons;
     private buttons;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(props: PropertyValues<this>): void;

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

@@ -1,9 +1,9 @@
-import { appendRootNodeStyle as e } from "../internal/utils/dom.js";
-import { attachInternals as t } from "../internal/utils/a11y.js";
-import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { audit as r } from "../internal/controllers/audit.controller.js";
-import { keyNavigationList as i } from "../internal/controllers/keynav-list.controller.js";
-import { useStyles as a } from "../internal/styles/index.js";
+import { audit as e } from "../internal/controllers/audit.controller.js";
+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 { __decorate as a } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
 import o from "./button-group.js";
 import s from "./button-group.global.js";
 import { LitElement as c, html as l } from "lit";
@@ -21,12 +21,12 @@ var f = class extends c {
 		};
 	}
 	static {
-		this.styles = a([o]);
+		this.styles = i([o]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-button-group",
-			version: "0.2.2",
+			version: "0.2.4",
 			children: [
 				"nve-button",
 				"nve-icon-button",
@@ -41,7 +41,7 @@ var f = class extends c {
 		return l`<div internal-host><slot @slotchange="${this.#n}"></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), t(this), e(this, s), this._internals.role = "group", this.addEventListener("click", this.#t);
+		super.connectedCallback(), r(this), t(this, s), this._internals.role = "group", this.addEventListener("click", this.#t);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.removeEventListener("click", this.#t);
@@ -57,22 +57,22 @@ var f = class extends c {
 		e.matches?.("nve-button, nve-icon-button") && (this.behaviorSelect === "single" ? (this.#e.forEach((e) => e.pressed = !1), e.pressed = !0) : this.behaviorSelect === "multi" && (e.pressed = !e.pressed));
 	}
 };
-n([u({
+a([u({
 	type: String,
 	attribute: "behavior-select"
-})], f.prototype, "behaviorSelect", void 0), n([u({
+})], f.prototype, "behaviorSelect", void 0), a([u({
 	type: String,
 	reflect: !0
-})], f.prototype, "container", void 0), n([u({
+})], f.prototype, "container", void 0), a([u({
 	type: String,
 	reflect: !0
-})], f.prototype, "orientation", void 0), n([u({
+})], f.prototype, "orientation", void 0), a([u({
 	type: String,
 	reflect: !0
-})], f.prototype, "interaction", void 0), n([u({
+})], f.prototype, "interaction", void 0), a([u({
 	type: String,
 	reflect: !0
-})], f.prototype, "size", void 0), n([d({ selector: "nve-divider" })], f.prototype, "dividers", void 0), n([d({ selector: "nve-icon-button" })], f.prototype, "iconButtons", void 0), n([d({ selector: "nve-button" })], f.prototype, "buttons", void 0), f = n([r(), i()], f);
+})], f.prototype, "size", void 0), a([d({ selector: "nve-divider" })], f.prototype, "dividers", void 0), a([d({ selector: "nve-icon-button" })], f.prototype, "iconButtons", void 0), a([d({ selector: "nve-button" })], f.prototype, "buttons", void 0), f = a([e(), n()], f);
 //#endregion
 export { f as ButtonGroup };
 

package/dist/card/card-header.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"card-header.js","names":[],"sources":["../../src/card/card-header.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-size-400);\n  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --line-height: 1em;\n  --gap: var(--nve-ref-space-xs);\n  contain: none;\n}\n\n[internal-host] {\n  padding: var(--padding);\n  border-bottom: var(--border-bottom);\n  color: var(--color);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap);\n  width: 100%;\n}\n\n::slotted([slot='title']) {\n  font-size: var(--nve-ref-font-size-200);\n  font-weight: var(--nve-ref-font-weight-bold);\n}\n\n::slotted([slot='subtitle']) {\n  margin: 0;\n  font-size: var(--nve-ref-font-size-100);\n  font-weight: var(--nve-ref-font-weight-regular);\n}\n\n::slotted(nve-tabs) {\n  margin-block-end: calc(-1 * var(--padding));\n}\n"],"mappings":""}
+{"version":3,"file":"card-header.js","names":[],"sources":["../../src/card/card-header.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-size-400);\n  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --line-height: 1em;\n  --gap: var(--nve-ref-space-xs);\n  contain: none;\n}\n\n[internal-host] {\n  padding: var(--padding);\n  border-bottom: var(--border-bottom);\n  color: var(--color);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gap);\n  width: 100%;\n}\n\n::slotted(nve-tabs) {\n  margin-block-end: calc(-1 * var(--padding));\n}\n"],"mappings":""}

package/dist/card/card.d.ts

@@ -21,7 +21,7 @@ export declare class Card extends LitElement implements ContainerElement {
         tag: string;
         version: string;
     };
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 /**
  * @element nve-card-header
@@ -29,9 +29,6 @@ export declare class Card extends LitElement implements ContainerElement {
  * @since 0.1.3
  * @entrypoint \@nvidia-elements/core/card
  * @slot - default slot
- * @slot title - (deprecated) Title Text
- * @slot subtitle - (deprecated) Subtitle Text
- * @slot header-action - (deprecated) Header Action Button
  * @cssprop --padding
  * @cssprop --border-bottom
  * @cssprop --line-height
@@ -46,7 +43,7 @@ export declare class CardHeader extends LitElement {
         parents: string[];
     };
     slot: string;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 /**
  * @element nve-card-content
@@ -64,7 +61,7 @@ export declare class CardContent extends LitElement {
         version: string;
         parents: string[];
     };
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }
 /**
  * @element nve-card-footer
@@ -84,5 +81,5 @@ export declare class CardFooter extends LitElement {
         parents: string[];
     };
     slot: string;
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
 }

package/dist/card/card2.js

@@ -1,7 +1,7 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { audit as t } from "../internal/controllers/audit.controller.js";
-import { hostAttr as n } from "../internal/decorators/host-attr.js";
-import { useStyles as r } from "../internal/styles/index.js";
+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 { __decorate as r } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
 import i from "./card.js";
 import a from "./card-header.js";
 import o from "./card-content.js";
@@ -11,49 +11,49 @@ import { property as u } from "lit/decorators/property.js";
 //#region src/card/card.ts
 var d = class extends c {
 	static {
-		this.styles = r([i]);
+		this.styles = n([i]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-card",
-			version: "0.2.2"
+			version: "0.2.4"
 		};
 	}
 	render() {
 		return l`<div internal-host><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>`;
 	}
 };
-e([u({
+r([u({
 	type: String,
 	reflect: !0
-})], d.prototype, "container", void 0), d = e([t()], d);
+})], d.prototype, "container", void 0), d = r([e()], d);
 var f = class extends c {
 	constructor(...e) {
 		super(...e), this.slot = "header";
 	}
 	static {
-		this.styles = r([a]);
+		this.styles = n([a]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-card-header",
-			version: "0.2.2",
+			version: "0.2.4",
 			parents: ["nve-card"]
 		};
 	}
 	render() {
-		return l`<header internal-host><div class="content"><slot name="title"></slot><slot name="subtitle"></slot><slot></slot></div><slot name="header-action"></slot></header>`;
+		return l`<header internal-host><div class="content"><slot></slot></div></header>`;
 	}
 };
-e([n()], f.prototype, "slot", void 0), f = e([t()], f);
+r([t()], f.prototype, "slot", void 0), f = r([e()], f);
 var p = class extends c {
 	static {
-		this.styles = r([o]);
+		this.styles = n([o]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-card-content",
-			version: "0.2.2",
+			version: "0.2.4",
 			parents: ["nve-card"]
 		};
 	}
@@ -61,18 +61,18 @@ var p = class extends c {
 		return l`<slot></slot>`;
 	}
 };
-p = e([t()], p);
+p = r([e()], p);
 var m = class extends c {
 	constructor(...e) {
 		super(...e), this.slot = "footer";
 	}
 	static {
-		this.styles = r([s]);
+		this.styles = n([s]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-card-footer",
-			version: "0.2.2",
+			version: "0.2.4",
 			parents: ["nve-card"]
 		};
 	}
@@ -80,7 +80,7 @@ var m = class extends c {
 		return l`<footer internal-host><slot></slot></footer>`;
 	}
 };
-e([n()], m.prototype, "slot", void 0), m = e([t()], m);
+r([t()], m.prototype, "slot", void 0), m = r([e()], m);
 //#endregion
 export { d as Card, p as CardContent, m as CardFooter, f as CardHeader };
 

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 * @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 * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - default slot\n * @slot title - (deprecated) Title Text\n * @slot subtitle - (deprecated) Subtitle Text\n * @slot header-action - (deprecated) Header Action Button\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  @hostAttr() slot = 'header';\n\n  render() {\n    return html`\n      <header internal-host>\n        <div class=\"content\">\n          <slot name=\"title\"></slot>\n          <slot name=\"subtitle\"></slot>\n          <slot></slot>\n        </div>\n\n        <slot name=\"header-action\"></slot>\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 * @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 * @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  @hostAttr() slot = 'footer';\n\n  render() {\n    return html`\n      <footer internal-host>\n        <slot></slot>\n      </footer>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;AA0BO,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;AAyCA,IAAA,IAAA,cAAyB,EAAW;;2BAStB;;;gBARH,EAAU,CAAC,CAAoB,CAAC;;;kBAErB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAIA,SAAS;EACP,OAAO,CAAI;CAWb;AACF;GAfG,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAVX,EAAM,CAAA,GAAA,CAAA;AAqCA,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;AA4BA,IAAA,IAAA,cAAyB,EAAW;;2BAStB;;;gBARH,EAAU,CAAC,CAAoB,CAAC;;;kBAErB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAIA,SAAS;EACP,OAAO,CAAI;CAKb;AACF;GATG,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAVX,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 * @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 * @since 0.1.3\n * @entrypoint \\@nvidia-elements/core/card\n * @slot - default slot\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  @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 * @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 * @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  @hostAttr() slot = 'footer';\n\n  render() {\n    return html`\n      <footer internal-host>\n        <slot></slot>\n      </footer>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;AA0BO,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;AAsCA,IAAA,IAAA,cAAyB,EAAW;;2BAStB;;;gBARH,EAAU,CAAC,CAAoB,CAAC;;;kBAErB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAIA,SAAS;EACP,OAAO,CAAI;CAOb;AACF;GAXG,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAVX,EAAM,CAAA,GAAA,CAAA;AAiCA,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;AA4BA,IAAA,IAAA,cAAyB,EAAW;;2BAStB;;;gBARH,EAAU,CAAC,CAAoB,CAAC;;;kBAErB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAIA,SAAS;EACP,OAAO,CAAI;CAKb;AACF;GATG,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAVX,EAAM,CAAA,GAAA,CAAA"}

package/dist/chat-message/chat-message.d.ts

@@ -30,6 +30,6 @@ export declare class ChatMessage extends LitElement {
     container: 'flat';
     color: Color;
     arrowPosition: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
-    render(): import('lit-html').TemplateResult<1>;
+    render(): import('lit').TemplateResult<1>;
     connectedCallback(): void;
 }

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

@@ -1,6 +1,6 @@
 import { appendRootNodeStyle as e } from "../internal/utils/dom.js";
-import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { colorStateStyles as n, useStyles as r } from "../internal/styles/index.js";
+import { colorStateStyles as t, useStyles as n } from "../internal/styles/index.js";
+import { __decorate as r } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
 import i from "./chat-message.js";
 import a from "./chat-message.global.js";
 import { LitElement as o, html as s } from "lit";
@@ -8,12 +8,12 @@ import { property as c } from "lit/decorators/property.js";
 //#region src/chat-message/chat-message.ts
 var l = class extends o {
 	static {
-		this.styles = r([i, n]);
+		this.styles = n([i, t]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-chat-message",
-			version: "0.2.2"
+			version: "0.2.4"
 		};
 	}
 	render() {
@@ -23,13 +23,13 @@ var l = class extends o {
 		super.connectedCallback(), e(this, a);
 	}
 };
-t([c({
+r([c({
 	type: String,
 	reflect: !0
-})], l.prototype, "container", void 0), t([c({
+})], l.prototype, "container", void 0), r([c({
 	type: String,
 	reflect: !0
-})], l.prototype, "color", void 0), t([c({
+})], l.prototype, "color", void 0), r([c({
 	type: String,
 	reflect: !0,
 	attribute: "arrow-position"

package/dist/checkbox/checkbox-group2.js

@@ -1,18 +1,18 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { audit as t } from "../internal/controllers/audit.controller.js";
-import { typeSSR as n } from "../internal/controllers/type-ssr.controller.js";
-import { useStyles as r } from "../internal/styles/index.js";
+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 { __decorate as r } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/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
 var o = class extends i {
 	static {
-		this.styles = r([...i.styles, a]);
+		this.styles = n([...i.styles, a]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-checkbox-group",
-			version: "0.2.2",
+			version: "0.2.4",
 			children: [
 				"label",
 				"nve-control-message",
@@ -21,7 +21,7 @@ var o = class extends i {
 		};
 	}
 };
-o = e([t(), n()], o);
+o = r([e(), t()], o);
 //#endregion
 export { o as CheckboxGroup };
 

package/dist/checkbox/checkbox2.js

@@ -1,7 +1,7 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
-import { audit as t } from "../internal/controllers/audit.controller.js";
-import { hostAttr as n } from "../internal/decorators/host-attr.js";
-import { useStyles as r } from "../internal/styles/index.js";
+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 { __decorate as r } from "../_virtual/_@oxc-project_runtime@0.132.0/helpers/decorate.js";
 import { Control as i } from "../forms/control/control2.js";
 import a from "./checkbox.js";
 //#region src/checkbox/checkbox.ts
@@ -10,12 +10,12 @@ var o = class extends i {
 		super(...e), this.nveControl = "inline";
 	}
 	static {
-		this.styles = r([...i.styles, a]);
+		this.styles = n([...i.styles, a]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-checkbox",
-			version: "0.2.2",
+			version: "0.2.4",
 			children: [
 				"label",
 				"input",
@@ -24,7 +24,7 @@ var o = class extends i {
 		};
 	}
 };
-e([n({ attribute: "nve-control" })], o.prototype, "nveControl", void 0), o = e([t()], o);
+r([t({ attribute: "nve-control" })], o.prototype, "nveControl", void 0), o = r([e()], o);
 //#endregion
 export { o as Checkbox };
 

package/dist/color/color.d.ts

@@ -25,6 +25,6 @@ export declare class Color extends Control implements ContainerElement {
     static elementDefinitions: {
         [IconButton.metadata.tag]: typeof IconButton;
     };
-    protected get suffixContent(): import('lit-html').TemplateResult<1>;
+    protected get suffixContent(): import('lit').TemplateResult<1>;
     connectedCallback(): void;
 }