@nvidia-elements/core 0.0.0 → 0.0.1

package/dist/steps/steps.d.ts

@@ -1,91 +0,0 @@
-import { PropertyValues, LitElement } from 'lit';
-import { KeynavListConfig, Container, BaseButton } from '../internal';
-import { IconButton } from '../icon-button';
-import { ProgressRing } from '../progress-ring';
-/**
- * @element nve-steps-item
- * @description Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.
- * @since 0.30.0
- * @entrypoint \@nvidia-elements/core/steps
- * @slot - default slot for step text
- * @slot status-icon - custom slotted step icon
- * @cssprop --font-size
- * @cssprop --border-top
- * @cssprop --width
- * @cssprop --font-size
- * @cssprop --font-weight
- * @cssprop --border-radius
- * @cssprop --color
- * @cssprop --text-transform
- * @csspart icon-button - The icon button element
- * @csspart progress-ring - The progress ring element
- * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
- */
-export declare class StepsItem extends BaseButton {
-    /**
-     * Determines which item the user selects, defaults to false.
-     */
-    selected: boolean;
-    /**
-     * Four visual treatments represent the `status` of tasks. When `status` has a value of `warning`, `success`, or `danger`, the component embeds appropriate icons.
-     */
-    status?: 'accent' | 'danger' | 'success' | 'pending';
-    /**
-     * Determines whether the steps should display in condensed format with no text labels.
-     */
-    container?: Extract<Container, 'condensed'>;
-    /** @private */
-    index: number;
-    static styles: import('lit').CSSResult[];
-    static readonly metadata: {
-        tag: string;
-        version: string;
-        parents: string[];
-    };
-    static elementDefinitions: {
-        [IconButton.metadata.tag]: typeof IconButton;
-        [ProgressRing.metadata.tag]: typeof ProgressRing;
-    };
-    render(): import('lit-html').TemplateResult<1>;
-    constructor();
-    connectedCallback(): void;
-}
-/**
- * @element nve-steps
- * @description Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.
- * @since 0.30.0
- * @entrypoint \@nvidia-elements/core/steps
- * @slot - default slot for steps-item
- * @cssprop --gap
- * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
- */
-export declare class Steps extends LitElement {
-    #private;
-    /**
-     * Determines whether the steps should display in a vertical layout vs. defaulting to horizontal.
-     */
-    vertical: boolean;
-    /**
-     * Determines whether the steps should display in condensed format with no text labels.
-     */
-    container?: Extract<Container, 'condensed'>;
-    /**
-     * Determines whether the steps should handle selection behavior vs. defaults to off.
-     */
-    behaviorSelect: boolean;
-    static styles: import('lit').CSSResult[];
-    static readonly metadata: {
-        tag: string;
-        version: string;
-        children: string[];
-    };
-    /** @private */
-    get keynavListConfig(): KeynavListConfig;
-    private steps;
-    /** @private */
-    _internals: ElementInternals;
-    render(): import('lit-html').TemplateResult<1>;
-    connectedCallback(): void;
-    firstUpdated(props: PropertyValues<this>): void;
-    updated(props: PropertyValues<this>): void;
-}

package/dist/steps/steps.examples.js

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

package/dist/steps/steps.examples.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"steps.examples.js","names":[],"sources":["../../src/steps/steps.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/steps/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/dot/define.js';\nimport '@nvidia-elements/core/icon/define.js';\n\nexport default {\n  title: 'Elements/Steps',\n  component: 'nve-steps',\n};\n\n/**\n * @summary Interactive step indicator with status colors for multi-step workflows. Use for wizards, onboarding flows, or process tracking where users can navigate between steps.\n */\nexport const Default = {\n  render: () => html`\n  <nve-steps behavior-select>\n    <nve-steps-item status=\"success\">Step 1</nve-steps-item>\n    <nve-steps-item status=\"danger\">Step 2</nve-steps-item>\n    <nve-steps-item selected>Step 3</nve-steps-item>\n    <nve-steps-item status=\"pending\">Step 4</nve-steps-item>\n    <nve-steps-item disabled>Disabled</nve-steps-item>\n  </nve-steps>\n  `\n};\n\n/**\n * @summary Condensed step indicator with reduced visual weight. Ideal for space-constrained layouts or secondary navigation where steps need less prominence.\n */\nexport const Condensed = {\n  render: () => html`\n  <nve-steps behavior-select container=\"condensed\">\n    <nve-steps-item status=\"success\">Step 1</nve-steps-item>\n    <nve-steps-item status=\"danger\">Step 2</nve-steps-item>\n    <nve-steps-item selected>Step 3</nve-steps-item>\n    <nve-steps-item status=\"pending\">Step 4</nve-steps-item>\n    <nve-steps-item disabled>Disabled</nve-steps-item>\n  </nve-steps>\n  `\n};\n\n/**\n * @summary Vertical step layout for sidebar navigation or tall containers. Use when horizontal space constrains layout or steps require longer labels.\n */\nexport const VerticalSteps = {\n  render: () => html`\n  <nve-steps vertical behavior-select style=\"width: 150px\">\n    <nve-steps-item selected>Step 1</nve-steps-item>\n    <nve-steps-item>Step 2</nve-steps-item>\n    <nve-steps-item>Step 3</nve-steps-item>\n    <nve-steps-item disabled>Disabled</nve-steps-item>\n    <nve-steps-item>Step 5</nve-steps-item>\n  </nve-steps>\n  `\n};\n\n/**\n * @summary Vertical condensed steps combining both layout options. Ideal for dense sidebar navigation with minimal visual footprint.\n */\nexport const VerticalCondensedSteps = {\n  render: () => html`\n  <nve-steps vertical container=\"condensed\" behavior-select>\n    <nve-steps-item selected>Step 1</nve-steps-item>\n    <nve-steps-item>Step 2</nve-steps-item>\n    <nve-steps-item>Step 3</nve-steps-item>\n    <nve-steps-item disabled>Disabled</nve-steps-item>\n    <nve-steps-item>Step 5</nve-steps-item>\n  </nve-steps>\n  `\n};\n\n/**\n * @summary Display-only steps without interactive selection behavior. Use for showing progress indicators where external logic controls step navigation.\n */\nexport const StatelessSteps = {\n  render: () => html`\n  <nve-steps>\n    <nve-steps-item selected>Step 1</nve-steps-item>\n    <nve-steps-item>Step 2</nve-steps-item>\n    <nve-steps-item>Step 3</nve-steps-item>\n    <nve-steps-item>Step 4</nve-steps-item>\n    <nve-steps-item disabled>Disabled</nve-steps-item>\n  </nve-steps>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/steps/steps.examples.json

@@ -1,51 +0,0 @@
-{
-  "element": "nve-steps",
-  "entrypoint": "@nvidia-elements/core/steps/steps.examples.json",
-  "items": [
-    {
-      "id": "core-steps_default",
-      "name": "Default",
-      "template": "<nve-steps behavior-select>\n  <nve-steps-item status=\"success\">Step 1</nve-steps-item>\n  <nve-steps-item status=\"danger\">Step 2</nve-steps-item>\n  <nve-steps-item selected>Step 3</nve-steps-item>\n  <nve-steps-item status=\"pending\">Step 4</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n",
-      "summary": "Interactive step indicator with status colors for multi-step workflows. Use for wizards, onboarding flows, or process tracking where users can navigate between steps.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
-    {
-      "id": "core-steps_condensed",
-      "name": "Condensed",
-      "template": "<nve-steps behavior-select container=\"condensed\">\n  <nve-steps-item status=\"success\">Step 1</nve-steps-item>\n  <nve-steps-item status=\"danger\">Step 2</nve-steps-item>\n  <nve-steps-item selected>Step 3</nve-steps-item>\n  <nve-steps-item status=\"pending\">Step 4</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n",
-      "summary": "Condensed step indicator with reduced visual weight. Ideal for space-constrained layouts or secondary navigation where steps need less prominence.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
-    {
-      "id": "core-steps_vertical-steps",
-      "name": "VerticalSteps",
-      "template": "<nve-steps vertical behavior-select style=\"width: 150px\">\n  <nve-steps-item selected>Step 1</nve-steps-item>\n  <nve-steps-item>Step 2</nve-steps-item>\n  <nve-steps-item>Step 3</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n  <nve-steps-item>Step 5</nve-steps-item>\n</nve-steps>\n",
-      "summary": "Vertical step layout for sidebar navigation or tall containers. Use when horizontal space constrains layout or steps require longer labels.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
-    {
-      "id": "core-steps_vertical-condensed-steps",
-      "name": "VerticalCondensedSteps",
-      "template": "<nve-steps vertical container=\"condensed\" behavior-select>\n  <nve-steps-item selected>Step 1</nve-steps-item>\n  <nve-steps-item>Step 2</nve-steps-item>\n  <nve-steps-item>Step 3</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n  <nve-steps-item>Step 5</nve-steps-item>\n</nve-steps>\n",
-      "summary": "Vertical condensed steps combining both layout options. Ideal for dense sidebar navigation with minimal visual footprint.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
-    {
-      "id": "core-steps_stateless-steps",
-      "name": "StatelessSteps",
-      "template": "<nve-steps>\n  <nve-steps-item selected>Step 1</nve-steps-item>\n  <nve-steps-item>Step 2</nve-steps-item>\n  <nve-steps-item>Step 3</nve-steps-item>\n  <nve-steps-item>Step 4</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n",
-      "summary": "Display-only steps without interactive selection behavior. Use for showing progress indicators where external logic controls step navigation.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    }
-  ]
-}

package/dist/steps/steps.js

@@ -1,6 +0,0 @@
-//#region src/steps/steps.css?inline
-var e = ":host{--gap: var(--nve-ref-space-lg)}[internal-host]{position:relative;display:flex;flex-direction:row;gap:var(--gap)}:host([vertical]) [internal-host]{flex-direction:column}:host(:not([vertical])) ::slotted(nve-steps-item:not(:last-child)):after{content:\"\";position:absolute;width:var(--gap);top:50%;border:var(--nve-ref-border-width-sm) dashed var(--nve-ref-border-color)}:host([vertical]) ::slotted(nve-steps-item:not(:last-child)):after{content:\"\";position:absolute;height:var(--gap);left:var(--nve-ref-size-500);top:100%;border:var(--nve-ref-border-width-sm) dashed var(--nve-ref-border-color)}:host([vertical]:not([container=\"condensed\"])) ::slotted(nve-steps-item){--width: 100%}";
-//#endregion
-export { e as default };
-
-//# sourceMappingURL=steps.js.map

package/dist/steps/steps.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"steps.js","names":[],"sources":["../../src/steps/steps.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  --gap: var(--nve-ref-space-lg);\n}\n\n[internal-host] {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  gap: var(--gap);\n}\n\n:host([vertical]) [internal-host] {\n  flex-direction: column;\n}\n\n:host(:not([vertical])) ::slotted(nve-steps-item:not(:last-child))::after,\n:host(:not([vertical])) ::slotted(nve-steps-item:not(:last-child))::after {\n  content: '';\n  position: absolute;\n  width: var(--gap);\n  top: 50%;\n  border: var(--nve-ref-border-width-sm) dashed var(--nve-ref-border-color);\n}\n\n:host([vertical]) ::slotted(nve-steps-item:not(:last-child))::after,\n:host([vertical]) ::slotted(nve-steps-item:not(:last-child))::after {\n  content: '';\n  position: absolute;\n  height: var(--gap);\n  left: var(--nve-ref-size-500);\n  top: 100%;\n  border: var(--nve-ref-border-width-sm) dashed var(--nve-ref-border-color);\n}\n\n:host([vertical]:not([container='condensed'])) ::slotted(nve-steps-item),\n:host([vertical]:not([container='condensed'])) ::slotted(nve-steps-item) {\n  --width: 100%;\n}\n"],"mappings":""}

package/dist/steps/steps2.js

@@ -1,114 +0,0 @@
-import { attachInternals as e } from "../internal/utils/a11y.js";
-import { stateSelected as t } from "../internal/controllers/state-selected.controller.js";
-import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
-import { BaseButton as r } from "../internal/base/button.js";
-import { audit as i } from "../internal/controllers/audit.controller.js";
-import { keyNavigationList as a } from "../internal/controllers/keynav-list.controller.js";
-import { scopedRegistry as o } from "../internal/decorators/scoped-registry.js";
-import { useStyles as s } from "../internal/styles/index.js";
-import { IconButton as c } from "../icon-button/icon-button2.js";
-import l from "./steps-item.js";
-import u from "./steps.js";
-import { ProgressRing as d } from "../progress-ring/progress-ring2.js";
-import { LitElement as f, html as p } from "lit";
-import { property as m } from "lit/decorators/property.js";
-import { state as h } from "lit/decorators/state.js";
-import { queryAssignedElements as g } from "lit/decorators/query-assigned-elements.js";
-import { when as _ } from "lit/directives/when.js";
-//#region src/steps/steps.ts
-var v = class extends r {
-	static {
-		this.styles = s([l]);
-	}
-	static {
-		this.metadata = {
-			tag: "nve-steps-item",
-			version: "0.0.0",
-			parents: ["nve-steps"]
-		};
-	}
-	static {
-		this.elementDefinitions = {
-			[c.metadata.tag]: c,
-			[d.metadata.tag]: d
-		};
-	}
-	render() {
-		return p`<div internal-host focus-within><slot name="status-icon">${this.status === void 0 ? p`<nve-icon-button part="icon-button" readonly="readonly" id="number-icon" .disabled="${this.disabled}">${this.index}</nve-icon-button>` : ""} ${this.status === "success" ? p`<nve-icon-button part="icon-button" readonly="readonly" size="sm" interaction="emphasis" icon-name="check"></nve-icon-button>` : ""} ${this.status === "danger" ? p`<nve-icon-button part="icon-button" readonly="readonly" size="sm" interaction="destructive" icon-name="exclamation-circle"></nve-icon-button>` : ""} ${this.status === "pending" ? p`<nve-progress-ring part="progress-ring" status="accent" size="sm"></nve-progress-ring>` : ""}</slot>${_(this.container !== "condensed", () => p`<slot></slot>`)}</div>`;
-	}
-	constructor() {
-		super(), this.selected = !1, this.type = "button";
-	}
-	connectedCallback() {
-		super.connectedCallback(), this._internals.role = "tab";
-	}
-};
-n([m({
-	type: Boolean,
-	reflect: !0
-})], v.prototype, "selected", void 0), n([m({
-	type: String,
-	reflect: !0
-})], v.prototype, "status", void 0), n([m({
-	type: String,
-	reflect: !0
-})], v.prototype, "container", void 0), n([h()], v.prototype, "index", void 0), v = n([
-	i(),
-	o(),
-	t()
-], v);
-var y = class extends f {
-	constructor(...e) {
-		super(...e), this.vertical = !1, this.behaviorSelect = !1;
-	}
-	static {
-		this.styles = s([u]);
-	}
-	static {
-		this.metadata = {
-			tag: "nve-steps",
-			version: "0.0.0",
-			children: ["nve-steps-item"]
-		};
-	}
-	get keynavListConfig() {
-		return {
-			items: this.steps,
-			layout: this.vertical ? "vertical" : "horizontal"
-		};
-	}
-	#e(e) {
-		!this.behaviorSelect || !e.matches("nve-steps-item, nve-steps-item") || e.disabled || (this.keynavListConfig.items.forEach((e) => e.selected = !1), e.selected = !0);
-	}
-	render() {
-		return p`<div internal-host><slot></slot></div>`;
-	}
-	connectedCallback() {
-		super.connectedCallback(), e(this), this._internals.role = "tablist", this.addEventListener("click", (e) => this.#e(e.target));
-	}
-	firstUpdated(e) {
-		super.firstUpdated(e), this.steps.forEach((e, t) => {
-			e.index = t + 1;
-		});
-	}
-	updated(e) {
-		super.updated(e), this.#t(), this._internals.ariaOrientation = this.vertical ? "vertical" : "horizontal";
-	}
-	#t() {
-		this.steps.forEach((e) => e.container = this.container);
-	}
-};
-n([m({
-	type: Boolean,
-	reflect: !0
-})], y.prototype, "vertical", void 0), n([m({
-	type: String,
-	reflect: !0
-})], y.prototype, "container", void 0), n([m({
-	type: Boolean,
-	attribute: "behavior-select"
-})], y.prototype, "behaviorSelect", void 0), n([g({ selector: "nve-steps-item, nve-steps-item" })], y.prototype, "steps", void 0), y = n([i(), a()], y);
-//#endregion
-export { y as Steps, v as StepsItem };
-
-//# sourceMappingURL=steps2.js.map

package/dist/steps/steps2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"steps2.js","names":["#selectTab","#updateChildAttributes"],"sources":["../../src/steps/steps.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 { state } from 'lit/decorators/state.js';\nimport { when } from 'lit/directives/when.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { KeynavListConfig, Container } from '@nvidia-elements/core/internal';\nimport {\n  BaseButton,\n  stateSelected,\n  useStyles,\n  keyNavigationList,\n  attachInternals,\n  audit,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport stepsItemStyleSheet from './steps-item.css?inline';\nimport stepsStyleSheet from './steps.css?inline';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { ProgressRing } from '@nvidia-elements/core/progress-ring';\n\n/**\n * @element nve-steps-item\n * @description Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.\n * @since 0.30.0\n * @entrypoint \\@nvidia-elements/core/steps\n * @slot - default slot for step text\n * @slot status-icon - custom slotted step icon\n * @cssprop --font-size\n * @cssprop --border-top\n * @cssprop --width\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --text-transform\n * @csspart icon-button - The icon button element\n * @csspart progress-ring - The progress ring element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n */\n@audit()\n@scopedRegistry()\n@stateSelected<StepsItem>()\nexport class StepsItem extends BaseButton {\n  /**\n   * Determines which item the user selects, defaults to false.\n   */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /**\n   * Four visual treatments represent the `status` of tasks. When `status` has a value of `warning`, `success`, or `danger`, the component embeds appropriate icons.\n   */\n  @property({ type: String, reflect: true }) status?: 'accent' | 'danger' | 'success' | 'pending';\n\n  /**\n   * Determines whether the steps should display in condensed format with no text labels.\n   */\n  @property({ type: String, reflect: true }) container?: Extract<Container, 'condensed'>;\n\n  /** @private */\n  @state() index: number;\n\n  static styles = useStyles([stepsItemStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-steps-item',\n    version: '0.0.0',\n    parents: ['nve-steps']\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton,\n    [ProgressRing.metadata.tag]: ProgressRing\n  };\n\n  render() {\n    return html`\n      <div internal-host focus-within>  \n        <slot name=\"status-icon\">\n          ${this.status === undefined ? html`<nve-icon-button part=\"icon-button\" readonly id=\"number-icon\" .disabled=${this.disabled}>${this.index}</nve-icon-button>` : ''}\n          ${this.status === 'success' ? html`<nve-icon-button part=\"icon-button\" readonly size=\"sm\" interaction=\"emphasis\" icon-name=\"check\"></nve-icon-button>` : ''}\n          ${this.status === 'danger' ? html`<nve-icon-button part=\"icon-button\" readonly size=\"sm\" interaction=\"destructive\" icon-name=\"exclamation-circle\"></nve-icon-button>` : ''}\n          ${this.status === 'pending' ? html`<nve-progress-ring part=\"progress-ring\" status=\"accent\" size=\"sm\"></nve-progress-ring>` : ''}\n        </slot>\n        ${when(this.container !== 'condensed', () => html`<slot></slot>`)}\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'tab';\n  }\n}\n\n/**\n * @element nve-steps\n * @description Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.\n * @since 0.30.0\n * @entrypoint \\@nvidia-elements/core/steps\n * @slot - default slot for steps-item\n * @cssprop --gap\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n */\n@audit()\n@keyNavigationList<Steps>()\nexport class Steps extends LitElement {\n  /**\n   * Determines whether the steps should display in a vertical layout vs. defaulting to horizontal.\n   */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /**\n   * Determines whether the steps should display in condensed format with no text labels.\n   */\n  @property({ type: String, reflect: true }) container?: Extract<Container, 'condensed'>;\n\n  /**\n   * Determines whether the steps should handle selection behavior vs. defaults to off.\n   */\n  @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n  static styles = useStyles([stepsStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-steps',\n    version: '0.0.0',\n    children: ['nve-steps-item']\n  };\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.steps,\n      layout: this.vertical ? 'vertical' : 'horizontal'\n    };\n  }\n\n  @queryAssignedElements({ selector: 'nve-steps-item, nve-steps-item' }) private steps!: StepsItem[];\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #selectTab(stepsItem: HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean }) {\n    if (!this.behaviorSelect || !stepsItem.matches('nve-steps-item, nve-steps-item') || stepsItem.disabled) {\n      return;\n    }\n\n    this.keynavListConfig.items.forEach((i: HTMLElement) => ((i as StepsItem).selected = false));\n    stepsItem.selected = true;\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'tablist';\n    this.addEventListener('click', (e: Event) =>\n      this.#selectTab(e.target as HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean })\n    );\n  }\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n\n    this.steps.forEach((item, i) => {\n      item.index = i + 1;\n    });\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this.#updateChildAttributes();\n    this._internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal';\n  }\n\n  #updateChildAttributes() {\n    this.steps.forEach(stepItem => (stepItem.container = this.container));\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA8CO,IAAA,IAAA,cAAwB,EAAW;;gBAmBxB,EAAU,CAAC,EAAoB,CAAC;;;kBAErB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,YAAA;GACX;;;4BAE2B;IACzB,EAAW,SAAS,MAAM;IAC1B,EAAa,SAAS,MAAM;GAC9B;;CAED,SAAS;AACP,SAAO,CAAI,4DAGH,KAAK,WAAW,KAAA,IAAY,CAAI,uFAA2E,KAAK,SAAS,IAAG,KAAK,MAAM,sBAAsB,GAAG,GAChK,KAAK,WAAW,YAAY,CAAI,kIAAuH,GAAG,GAC1J,KAAK,WAAW,WAAW,CAAI,kJAAuI,GAAG,GACzK,KAAK,WAAW,YAAY,CAAI,2FAA2F,GAAG,SAEhI,EAAK,KAAK,cAAc,mBAAmB,CAAI,gBAAgB,CAAC;;CAKxE,cAAc;AAEZ,EADA,OAAO,kBA3C8C,IA4CrD,KAAK,OAAO;;CAGd,oBAAoB;AAElB,EADA,MAAM,mBAAmB,EACzB,KAAK,WAAW,OAAO;;;GAjDxB,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAK1C,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAGzC,GAAO,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA;CApBT,GAAO;CACP,GAAgB;CAChB,GAAA;;AAqEM,IAAA,IAAA,cAAoB,EAAW;;+BAImB,0BAUqB;;;gBAE5D,EAAU,CAAC,EAAgB,CAAC;;;kBAEjB;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,iBAAA;GACZ;;CAGD,IAAI,mBAAqC;AACvC,SAAO;GACL,OAAO,KAAK;GACZ,QAAQ,KAAK,WAAW,aAAa;GACtC;;CAQH,GAAW,GAAkG;AACvG,GAAC,KAAK,kBAAkB,CAAC,EAAU,QAAQ,iCAAiC,IAAI,EAAU,aAI9F,KAAK,iBAAiB,MAAM,SAAS,MAAoB,EAAiB,WAAW,GAAO,EAC5F,EAAU,WAAW;;CAGvB,SAAS;AACP,SAAO,CAAI;;CAOb,oBAAoB;AAIlB,EAHA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO,WACvB,KAAK,iBAAiB,UAAU,MAC9B,MAAA,EAAgB,EAAE,OAAgG,CACnH;;CAGH,aAAa,GAA6B;AAGxC,EAFA,MAAM,aAAa,EAAM,EAEzB,KAAK,MAAM,SAAS,GAAM,MAAM;AAC9B,KAAK,QAAQ,IAAI;IACjB;;CAGJ,QAAQ,GAA6B;AAGnC,EAFA,MAAM,QAAQ,EAAM,EACpB,MAAA,GAA6B,EAC7B,KAAK,WAAW,kBAAkB,KAAK,WAAW,aAAa;;CAGjE,KAAyB;AACvB,OAAK,MAAM,SAAQ,MAAa,EAAS,YAAY,KAAK,UAAW;;;GA1EtE,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAK1C,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAS,WAAW;CAAmB,CAAC,CAAA,EAAA,EAAA,WAAA,kBAAA,KAAA,EAAA,KAkBzD,EAAsB,EAAE,UAAU,kCAAkC,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA,SAlCvE,GAAO,EACP,GAA0B,CAAA,EAAA,EAAA"}

package/dist/switch/define.d.ts

@@ -1,7 +0,0 @@
-import { Switch, SwitchGroup } from '.';
-declare global {
-    interface HTMLElementTagNameMap {
-        'nve-switch': Switch;
-        'nve-switch-group': SwitchGroup;
-    }
-}

package/dist/switch/define.js

@@ -1,7 +0,0 @@
-import { define as e } from "../internal/utils/dom.js";
-import { Switch as t } from "./switch2.js";
-import { SwitchGroup as n } from "./switch-group2.js";
-e(t), e(n);
-//#endregion
-
-//# sourceMappingURL=define.js.map

package/dist/switch/define.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/switch/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Switch, SwitchGroup } from '@nvidia-elements/core/switch';\nimport '@nvidia-elements/core/forms/define.js';\n\ndefine(Switch);\ndefine(SwitchGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-switch': Switch;\n    'nve-switch-group': SwitchGroup;\n  }\n}\n"],"mappings":";;;AAOA,EAAO,EAAO,EACd,EAAO,EAAY"}

package/dist/switch/index.d.ts

@@ -1,2 +0,0 @@
-export * from './switch.js';
-export * from './switch-group.js';

package/dist/switch/index.js

@@ -1,3 +0,0 @@
-import { Switch as e } from "./switch2.js";
-import { SwitchGroup as t } from "./switch-group2.js";
-export { e as Switch, t as SwitchGroup };

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

@@ -1,17 +0,0 @@
-import { CSSResult } from 'lit';
-import { ControlGroup } from '../forms';
-/**
- * @element nve-switch-group
- * @description A switch group is a container for a group of switches.
- * @since 0.3.0
- * @entrypoint \@nvidia-elements/core/switch
- * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/
- */
-export declare class SwitchGroup extends ControlGroup {
-    static styles: CSSResult[];
-    static readonly metadata: {
-        tag: string;
-        version: string;
-        children: string[];
-    };
-}

package/dist/switch/switch-group.js

@@ -1,6 +0,0 @@
-//#region src/switch/switch-group.css?inline
-var e = ":host{width:100%}";
-//#endregion
-export { e as default };
-
-//# sourceMappingURL=switch-group.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"switch-group.js","names":[],"sources":["../../src/switch/switch-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  width: 100%;\n}\n"],"mappings":""}

package/dist/switch/switch-group2.js

@@ -1,27 +0,0 @@
-import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
-import { audit as t } from "../internal/controllers/audit.controller.js";
-import { useStyles as n } from "../internal/styles/index.js";
-import { ControlGroup as r } from "../forms/control-group/control-group2.js";
-import i from "./switch-group.js";
-//#region src/switch/switch-group.ts
-var a = class extends r {
-	static {
-		this.styles = n([...r.styles, i]);
-	}
-	static {
-		this.metadata = {
-			tag: "nve-switch-group",
-			version: "0.0.0",
-			children: [
-				"label",
-				"nve-control-message",
-				"nve-switch"
-			]
-		};
-	}
-};
-a = e([t()], a);
-//#endregion
-export { a as SwitchGroup };
-
-//# sourceMappingURL=switch-group2.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"switch-group2.js","names":[],"sources":["../../src/switch/switch-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 { audit, useStyles } from '@nvidia-elements/core/internal';\nimport { ControlGroup } from '@nvidia-elements/core/forms';\nimport styles from './switch-group.css?inline';\n\n/**\n * @element nve-switch-group\n * @description A switch group is a container for a group of switches.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/switch\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n */\n@audit()\nexport class SwitchGroup extends ControlGroup {\n  static styles: CSSResult[] = useStyles([...ControlGroup.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-switch-group',\n    version: '0.0.0',\n    children: ['label', 'nve-control-message', 'nve-switch']\n  };\n}\n"],"mappings":";;;;;;AAgBO,IAAA,IAAA,cAA0B,EAAa;;gBACf,EAAU,CAAC,GAAG,EAAa,QAAQ,EAAO,CAAC;;;kBAE7C;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAuB;IAAa;GACzD;;;OARF,GAAO,CAAA,EAAA,EAAA"}

package/dist/switch/switch.d.ts

@@ -1,30 +0,0 @@
-import { CSSResult } from 'lit';
-import { Control } from '../forms';
-/**
- * @element nve-switch
- * @description A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap.
- * @since 0.3.0
- * @entrypoint \@nvidia-elements/core/switch
- * @cssprop --cursor
- * @cssprop --border-radius
- * @cssprop --border-width
- * @cssprop --border
- * @cssprop --background
- * @cssprop --width
- * @cssprop --height
- * @cssprop --anchor-width
- * @cssprop --anchor-height
- * @cssprop --anchor-border-radius
- * @cssprop --anchor-background
- * @cssprop --padding
- * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/
- */
-export declare class Switch extends Control {
-    protected nveControl: string;
-    static styles: CSSResult[];
-    static readonly metadata: {
-        tag: string;
-        version: string;
-        children: string[];
-    };
-}

package/dist/switch/switch.examples.js

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

package/dist/switch/switch.examples.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"switch.examples.js","names":[],"sources":["../../src/switch/switch.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/switch/define.js';\n\nexport default {\n  title: 'Elements/Switch',\n  component: 'nve-switch',\n};\n\n/**\n * @summary Basic toggle switch for binary on/off controls and feature activation.\n */\nexport const Default = {\n  render: () => html`\n<nve-switch>\n  <label>label</label>\n  <input type=\"checkbox\" />\n</nve-switch>`\n};\n\n\n/**\n * @summary Size variants of toggle switches use custom CSS properties.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n<nve-switch style=\"\n      --width: var(--nve-ref-size-800);\n      --height: var(--nve-ref-size-400);\n      --anchor-width: calc(var(--nve-ref-size-200) + var(--nve-ref-size-50));\n      --anchor-height: calc(var(--nve-ref-size-200) + var(--nve-ref-size-50));\">\n  <label>label</label>\n  <input type=\"checkbox\" />\n</nve-switch>`\n};\n\n/**\n * @summary Toggle switches with different states including default, disabled, success, and error with control messages.\n */\nexport const States = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch>\n    <label>label</label>\n    <input type=\"checkbox\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-switch>\n\n  <nve-switch>\n    <label>disabled</label>\n    <input type=\"checkbox\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-switch>\n\n  <nve-switch>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-switch>\n\n  <nve-switch>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-switch>\n</div>`\n};\n\n/**\n * @summary Switch groups with vertical layout for many related toggles stacked in a column with validation states.\n */\nexport const VerticalGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group>\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group>\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group>\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group>\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n`\n};\n\n/**\n * @summary Switch groups with vertical inline layout for compact vertical stacking with inline label positioning.\n * @tags test-case\n */\nexport const VerticalInlineGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n`\n};\n\n/**\n * @summary Switch groups with horizontal layout for many toggles arranged in a row, ideal for limited options.\n * @tags test-case\n */\nexport const HorizontalGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n`\n};\n\n/**\n * @summary Switch groups with horizontal inline layout for space-efficient horizontal arrangement with inline labels.\n * @tags test-case\n */\nexport const HorizontalInlineGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/switch/switch.examples.json

@@ -1,77 +0,0 @@
-{
-  "element": "nve-switch",
-  "entrypoint": "@nvidia-elements/core/switch/switch.examples.json",
-  "items": [
-    {
-      "id": "core-switch_default",
-      "name": "Default",
-      "template": "<nve-switch>\n  <label>label</label>\n  <input type=\"checkbox\" />\n</nve-switch>\n",
-      "summary": "Basic toggle switch for binary on/off controls and feature activation.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
-    {
-      "id": "core-switch_size",
-      "name": "Size",
-      "template": "<nve-switch\n  style=\"\n    --width: var(--nve-ref-size-800);\n    --height: var(--nve-ref-size-400);\n    --anchor-width: calc(var(--nve-ref-size-200) + var(--nve-ref-size-50));\n    --anchor-height: calc(var(--nve-ref-size-200) + var(--nve-ref-size-50));\n  \"\n>\n  <label>label</label>\n  <input type=\"checkbox\" />\n</nve-switch>\n",
-      "summary": "Size variants of toggle switches use custom CSS properties.",
-      "description": "",
-      "composition": false,
-      "tags": [
-        "test-case"
-      ]
-    },
-    {
-      "id": "core-switch_states",
-      "name": "States",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch>\n    <label>label</label>\n    <input type=\"checkbox\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>disabled</label>\n    <input type=\"checkbox\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-switch>\n</div>\n",
-      "summary": "Toggle switches with different states including default, disabled, success, and error with control messages.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
-    {
-      "id": "core-switch_vertical-group",
-      "name": "VerticalGroup",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group>\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group>\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group>\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group>\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
-      "summary": "Switch groups with vertical layout for many related toggles stacked in a column with validation states.",
-      "description": "",
-      "composition": false,
-      "tags": []
-    },
-    {
-      "id": "core-switch_vertical-inline-group",
-      "name": "VerticalInlineGroup",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
-      "summary": "Switch groups with vertical inline layout for compact vertical stacking with inline label positioning.",
-      "description": "",
-      "composition": false,
-      "tags": [
-        "test-case"
-      ]
-    },
-    {
-      "id": "core-switch_horizontal-group",
-      "name": "HorizontalGroup",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
-      "summary": "Switch groups with horizontal layout for many toggles arranged in a row, ideal for limited options.",
-      "description": "",
-      "composition": false,
-      "tags": [
-        "test-case"
-      ]
-    },
-    {
-      "id": "core-switch_horizontal-inline-group",
-      "name": "HorizontalInlineGroup",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
-      "summary": "Switch groups with horizontal inline layout for space-efficient horizontal arrangement with inline labels.",
-      "description": "",
-      "composition": false,
-      "tags": [
-        "test-case"
-      ]
-    }
-  ]
-}

package/dist/switch/switch.js

@@ -1,6 +0,0 @@
-//#region src/switch/switch.css?inline
-var e = ":host{--cursor: pointer;--border-radius: var(--nve-ref-border-radius-xxl);--border-width: var(--nve-ref-border-width-sm);--border: var(--border-width) solid transparent;--background: var(--nve-sys-interaction-field-background);--width: var(--nve-ref-size-1000);--height: var(--nve-ref-size-500);--padding: 0 var(--nve-ref-size-50);--anchor-width: calc(var(--nve-ref-size-300) + var(--nve-ref-size-50));--anchor-height: calc(var(--nve-ref-size-300) + var(--nve-ref-size-50));--anchor-border-radius: var(--nve-ref-border-radius-xxl);--anchor-background: var(--nve-sys-interaction-disabled-color);display:inline-block;contain:layout}::slotted(input){cursor:var(--cursor)!important;appearance:none!important;position:absolute!important;inset:0!important;width:var(--width)!important;height:var(--height)!important;border-radius:var(--border-radius)!important;margin:0!important;padding:0!important}[input]{align-items:center;outline-offset:2px}[input] slot{cursor:var(--cursor);border-radius:var(--border-radius);border:var(--border);background:var(--background);height:var(--height);width:var(--width);padding:var(--padding);min-height:auto;display:flex!important;align-items:center;transition:background-color var(--nve-ref-animation-duration-150) ease;position:relative}[input] slot:after{border-radius:var(--anchor-border-radius);background:var(--anchor-background);height:var(--anchor-height);width:var(--anchor-width);display:inline-block;content:\"\";transition:transform var(--nve-ref-animation-duration-250) cubic-bezier(.12,.32,.54,2);pointer-events:none;will-change:transform}:host(:state(checked)){--background: var(--accent-color);--anchor-background: var(--nve-sys-text-white-color)}:host(:state(checked)) [input] slot:after{transform:translate(calc(calc(var(--width) / 2) - var(--border-width)))}:host(:state(checked):state(dirty)) [input] slot:after{animation:thumb-bounce var(--nve-ref-animation-duration-250) cubic-bezier(.12,.32,.54,2)}@keyframes thumb-bounce{0%{transform:translate(0) scale(1)}20%{transform:translate(calc(var(--width) / 4)) scale(1.15)}60%{transform:translate(calc(var(--width) / 1.8)) scale(.95)}to{transform:translate(calc(var(--width) / 2)) scale(1)}}";
-//#endregion
-export { e as default };
-
-//# sourceMappingURL=switch.js.map

package/dist/switch/switch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../../src/switch/switch.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  --cursor: pointer;\n  --border-radius: var(--nve-ref-border-radius-xxl);\n  --border-width: var(--nve-ref-border-width-sm);\n  --border: var(--border-width) solid transparent;\n  --background: var(--nve-sys-interaction-field-background);\n  --width: var(--nve-ref-size-1000);\n  --height: var(--nve-ref-size-500);\n  --padding: 0 var(--nve-ref-size-50);\n  --anchor-width: calc(var(--nve-ref-size-300) + var(--nve-ref-size-50));\n  --anchor-height: calc(var(--nve-ref-size-300) + var(--nve-ref-size-50));\n  --anchor-border-radius: var(--nve-ref-border-radius-xxl);\n  --anchor-background: var(--nve-sys-interaction-disabled-color);\n  display: inline-block;\n  contain: layout;\n}\n\n::slotted(input) {\n  cursor: var(--cursor) !important;\n  appearance: none !important;\n  position: absolute !important;\n  inset: 0 !important;\n  width: var(--width) !important;\n  height: var(--height) !important;\n  border-radius: var(--border-radius) !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n[input] {\n  align-items: center;\n  outline-offset: 2px;\n}\n\n[input] slot {\n  cursor: var(--cursor);\n  border-radius: var(--border-radius);\n  border: var(--border);\n  background: var(--background);\n  height: var(--height);\n  width: var(--width);\n  padding: var(--padding);\n  min-height: auto;\n  display: flex !important;\n  align-items: center;\n  transition: background-color var(--nve-ref-animation-duration-150) ease;\n  position: relative;\n}\n\n[input] slot::after {\n  border-radius: var(--anchor-border-radius);\n  background: var(--anchor-background);\n  height: var(--anchor-height);\n  width: var(--anchor-width);\n  display: inline-block;\n  content: '';\n  transition: transform var(--nve-ref-animation-duration-250) cubic-bezier(0.12, 0.32, 0.54, 2);\n  pointer-events: none;\n  will-change: transform;\n}\n\n:host(:state(checked)) {\n  --background: var(--accent-color);\n  --anchor-background: var(--nve-sys-text-white-color);\n}\n\n:host(:state(checked)) [input] slot::after {\n  transform: translate(calc(calc(var(--width) / 2) - var(--border-width)), 0);\n}\n\n:host(:state(checked):state(dirty)) [input] slot::after {\n  animation: thumb-bounce var(--nve-ref-animation-duration-250) cubic-bezier(0.12, 0.32, 0.54, 2);\n}\n\n@keyframes thumb-bounce {\n  0% {\n    transform: translate(0, 0) scale(1);\n  }\n\n  20% {\n    transform: translate(calc(var(--width) / 4), 0) scale(1.15);\n  }\n\n  60% {\n    transform: translate(calc(var(--width) / 1.8), 0) scale(0.95);\n  }\n\n  100% {\n    transform: translate(calc(var(--width) / 2), 0) scale(1);\n  }\n}\n"],"mappings":""}