@nvidia-elements/core 0.0.1 → 0.0.2

package/dist/switch/switch2.js

@@ -0,0 +1,31 @@
+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 { hostAttr as n } from "../internal/decorators/host-attr.js";
+import { useStyles as r } from "../internal/styles/index.js";
+import { Control as i } from "../forms/control/control2.js";
+import a from "./switch.js";
+//#region src/switch/switch.ts
+var o = class extends i {
+	constructor(...e) {
+		super(...e), this.nveControl = "inline";
+	}
+	static {
+		this.styles = r([...i.styles, a]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-switch",
+			version: "0.0.2",
+			children: [
+				"label",
+				"input",
+				"nve-control-message"
+			]
+		};
+	}
+};
+e([n({ attribute: "nve-control" })], o.prototype, "nveControl", void 0), o = e([t()], o);
+//#endregion
+export { o as Switch };
+
+//# sourceMappingURL=switch2.js.map

package/dist/switch/switch2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch2.js","names":[],"sources":["../../src/switch/switch.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './switch.css?inline';\n\n/**\n * @element nve-switch\n * @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.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/switch\n * @cssprop --cursor\n * @cssprop --border-radius\n * @cssprop --border-width\n * @cssprop --border\n * @cssprop --background\n * @cssprop --width\n * @cssprop --height\n * @cssprop --anchor-width\n * @cssprop --anchor-height\n * @cssprop --anchor-border-radius\n * @cssprop --anchor-background\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n */\n@audit()\nexport class Switch extends Control {\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-switch',\n    version: '0.0.0',\n    children: ['label', 'input', 'nve-control-message']\n  };\n}\n"],"mappings":";;;;;;;AA4BO,IAAA,IAAA,cAAqB,EAAQ;;iCAC6B;;;gBAElC,EAAU,CAAC,GAAG,EAAQ,QAAQ,EAAO,CAAC;;;kBAExC;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAS;IAAsB;GACpD;;;GARA,EAAS,EAAE,WAAW,eAAe,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,SAFxC,GAAO,CAAA,EAAA,EAAA"}

package/dist/tabs/define.d.ts

@@ -0,0 +1,7 @@
+import { TabsItem, Tabs } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-tabs-item': TabsItem;
+        'nve-tabs': Tabs;
+    }
+}

package/dist/tabs/define.js

@@ -0,0 +1,6 @@
+import { define as e } from "../internal/utils/dom.js";
+import { Tabs as t, TabsItem as n } from "./tabs2.js";
+e(n), e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/tabs/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/tabs/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 { TabsItem, Tabs } from '@nvidia-elements/core/tabs';\n\ndefine(TabsItem);\ndefine(Tabs);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-tabs-item': TabsItem;\n    'nve-tabs': Tabs;\n  }\n}\n"],"mappings":";;AAMA,EAAO,EAAS,EAChB,EAAO,EAAK"}

package/dist/tabs/index.d.ts

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

package/dist/tabs/index.js

@@ -0,0 +1,2 @@
+import { Tabs as e, TabsItem as t } from "./tabs2.js";
+export { e as Tabs, t as TabsItem };

package/dist/tabs/tabs-item.js

@@ -0,0 +1,6 @@
+//#region src/tabs/tabs-item.css?inline
+var e = ":host{--border-background: var(--indicator-background);--border-height: var(--indicator-height);--border-width: 100%;--border-top: auto;--width: 100%;--padding: 0 var(--nve-ref-size-200);--font-size: var(--nve-ref-font-size-100);--font-weight: var(--nve-ref-font-weight-medium);--border-radius: var(--nve-ref-border-radius-sm);--color: var(--nve-sys-text-muted-color);--height: var(--nve-ref-size-800);--cursor: pointer;--text-transform: initial;--nve-sys-interaction-state-ratio: 0}[internal-host]{width:var(--width);gap:var(--nve-ref-space-xs);padding:var(--padding);height:var(--height);color:var(--color);font-weight:var(--font-weight);font-size:var(--font-size);line-height:var(--nve-ref-font-size-500);background-image:linear-gradient(color-mix(in oklab,var(--nve-sys-interaction-state-base) 100%,var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)) 0 0)!important;inset:var(--border-inset);border-radius:var(--border-radius);cursor:var(--cursor);text-transform:var(--text-transform);display:inline-flex;align-items:center;border:0;position:relative}:host(:state(selected)){--color: var(--nve-sys-text-emphasis-color);--font-weight: var(--nve-ref-font-weight-semibold)}:host(:state(selected)):after{width:var(--border-width);height:var(--border-height);border-radius:var(--border-radius);background:var(--border-background);top:var(--border-top);content:\"\";display:block;position:absolute;bottom:0;left:0}:host(:state(selected)) ::slotted(nve-icon){--color: var(--nve-sys-interaction-color)}:host(:hover:not(:state(disabled),:state(selected))){--color: var(--nve-sys-text-emphasis-color);--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}:host(:state(disabled)){--color: var(--nve-sys-interaction-disabled-color);--cursor: not-allowed}:host(:is(:focus,:state(focused))) [internal-host]{outline-offset:-3px;outline:5px auto -webkit-focus-ring-color;outline:Highlight solid 2px}::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}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=tabs-item.js.map

package/dist/tabs/tabs-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-item.js","names":[],"sources":["../../src/tabs/tabs-item.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  --border-background: var(--indicator-background);\n  --border-height: var(--indicator-height);\n  --border-width: 100%;\n  --border-top: auto;\n  --width: 100%;\n  --padding: 0 var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-medium);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --color: var(--nve-sys-text-muted-color);\n  --height: var(--nve-ref-size-800);\n  --cursor: pointer;\n  --text-transform: initial;\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n[internal-host] {\n  width: var(--width);\n  gap: var(--nve-ref-space-xs);\n  padding: var(--padding);\n  height: var(--height);\n  color: var(--color);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  line-height: var(--nve-ref-font-size-500);\n  background-image: linear-gradient(\n    color-mix(\n        in oklab,\n        var(--nve-sys-interaction-state-base) 100%,\n        var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)\n      )\n      0 0\n  ) !important;\n  inset: var(--border-inset);\n  border-radius: var(--border-radius);\n  cursor: var(--cursor);\n  text-transform: var(--text-transform);\n  display: inline-flex;\n  align-items: center;\n  border: 0;\n  position: relative;\n}\n\n:host(:state(selected)) {\n  --color: var(--nve-sys-text-emphasis-color);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n/* @deprecated use the --indicator-background variable instead */\n:host(:state(selected))::after {\n  width: var(--border-width);\n  height: var(--border-height);\n  border-radius: var(--border-radius);\n  background: var(--border-background);\n  top: var(--border-top);\n  content: '';\n  display: block;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n}\n\n:host(:state(selected)) ::slotted(nve-icon),\n:host(:state(selected)) ::slotted(nve-icon) {\n  --color: var(--nve-sys-interaction-color);\n}\n\n:host(:hover:not(:state(disabled), :state(selected))) {\n  --color: var(--nve-sys-text-emphasis-color);\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host(:state(disabled)) {\n  --color: var(--nve-sys-interaction-disabled-color);\n  --cursor: not-allowed;\n}\n\n:host(:is(:focus, :state(focused))) [internal-host] {\n  outline-offset: -3px;\n  outline: 5px auto -webkit-focus-ring-color; /* var(--nve-ref-outline-webkit) */\n  outline: Highlight solid 2px; /* --nve-ref-outline */\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"],"mappings":""}

package/dist/tabs/tabs.d.ts

@@ -0,0 +1,84 @@
+import { PropertyValues, LitElement } from 'lit';
+import { KeynavListConfig, BaseButton } from '../internal';
+/**
+ * @element nve-tabs-item
+ * @description Represents an individual tab within a tablist, providing a selectable button for switching between content views.
+ * @since 0.10.0
+ * @entrypoint \@nvidia-elements/core/tabs
+ * @slot - default slot for content
+ * @cssprop --font-size
+ * @cssprop --border-width
+ * @cssprop --border-height
+ * @cssprop --border-top
+ * @cssprop --border-background
+ * @cssprop --width
+ * @cssprop --padding
+ * @cssprop --font-size
+ * @cssprop --font-weight
+ * @cssprop --border-radius
+ * @cssprop --color
+ * @cssprop --height
+ * @cssprop --cursor
+ * @cssprop --text-transform
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ * @responsive false
+ */
+export declare class TabsItem extends BaseButton {
+    /**
+     * Determines which tab item the user selects, defaults to false.
+     */
+    selected: boolean;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        parents: string[];
+    };
+    render(): import('lit-html').TemplateResult<1>;
+    constructor();
+    connectedCallback(): void;
+    updated(props: PropertyValues<this>): void;
+}
+/**
+ * @element nve-tabs
+ * @description Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.
+ * @since 0.10.0
+ * @entrypoint \@nvidia-elements/core/tabs
+ * @slot - default slot for tab-item
+ * @cssprop --gap
+ * @cssprop --indicator-background
+ * @cssprop --indicator-border-radius
+ * @cssprop --indicator-height
+ * @cssprop --border-inset
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ * @responsive false
+ */
+export declare class Tabs extends LitElement {
+    #private;
+    /**
+     * Determines whether the tabs should display in a vertical layout vs. defaulting to horizontal.
+     */
+    vertical: boolean;
+    /**
+     * Determines whether the tabs should display a border on selected items vs. defaults to show border.
+     */
+    borderless: boolean;
+    /**
+     * Determines whether the tabs 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 items;
+    /** @private */
+    _internals: ElementInternals;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+    updated(props: PropertyValues<this>): void;
+}

package/dist/tabs/tabs.examples.js

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

package/dist/tabs/tabs.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.examples.js","names":[],"sources":["../../src/tabs/tabs.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/tabs/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/Tabs',\n  component: 'nve-tabs',\n};\n\n/**\n * @summary Basic tabs component for organizing content into selectable sections with disabled state support.\n */\nexport const Default = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Borderless tabs variant for minimal visual styling without border emphasis.\n * @tags test-case\n */\nexport const BorderlessTabs = {\n  render: () => html`\n<nve-tabs borderless behavior-select>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3 </nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with custom border background styling for brand-specific visual customization.\n * @tags test-case\n */\nexport const BorderBackground = {\n  render: () => html`\n<nve-tabs behavior-select style=\"--indicator-background: var(--nve-ref-color-brand-green-900); --indicator-border-radius: none;\">\n  <nve-tabs-item selected>\n    Tab 1\n  </nve-tabs-item>\n  <nve-tabs-item>\n    Tab 2\n  </nve-tabs-item>\n  <nve-tabs-item>\n    Tab 3\n  </nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with notification dots for indicating unread content or alerts within tab sections.\n */\nexport const WithDots = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3 </nve-tabs-item>\n  <nve-tabs-item selected>\n    Tab 4\n    <nve-dot aria-label=\"10 notifications\">10</nve-dot>\n  </nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Vertical tabs layout for sidebar navigation and vertical content organization patterns.\n */\nexport const VerticalTabs = {\n  render: () => html`\n<nve-tabs vertical behavior-select style=\"width: 250px\">\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Borderless vertical tabs with icons for enhanced visual navigation and minimal styling.\n * @tags test-case\n */\nexport const BorderlessVerticalTabs = {\n  render: () => html`\n<nve-tabs vertical borderless behavior-select style=\"width: 250px\">\n  <nve-tabs-item>\n    <nve-icon name=\"gear\"></nve-icon> Tab 1\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon name=\"person\"></nve-icon> Tab 2\n  </nve-tabs-item>\n  <nve-tabs-item selected>\n    <nve-icon name=\"beaker\"></nve-icon> Tab 3\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon name=\"add-grid\"></nve-icon> Tab 4\n  </nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Stateless tabs for external state management without built-in selection behavior.\n */\nexport const StatelessTabs = {\n  render: () => html`\n<nve-tabs>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with link navigation for routing-based tab switching and page navigation.\n */\nexport const Links = {\n  render: () => html`\n<nve-tabs>\n  <nve-tabs-item selected>\n    <a href=\"./docs/elements/tabs/#links\">Tab 1</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"./docs/elements/tabs/#links\">Tab 2</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"/docs/elements/tabs/#links\">Tab 3</a>\n  </nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with overflow handling for managing large numbers of tabs with scrolling behavior.\n * @tags test-case\n */\nexport const OverflowTabs = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n  <nve-tabs-item>Tab 6</nve-tabs-item>\n  <nve-tabs-item>Tab 7</nve-tabs-item>\n  <nve-tabs-item>Tab 8</nve-tabs-item>\n  <nve-tabs-item>Tab 9</nve-tabs-item>\n  <nve-tabs-item>Tab 10</nve-tabs-item>\n  <nve-tabs-item>Tab 11</nve-tabs-item>\n  <nve-tabs-item>Tab 12</nve-tabs-item>\n  <nve-tabs-item>Tab 13</nve-tabs-item>\n  <nve-tabs-item>Tab 14</nve-tabs-item>\n  <nve-tabs-item>Tab 15</nve-tabs-item>\n  <nve-tabs-item>Tab 16</nve-tabs-item>\n  <nve-tabs-item>Tab 17</nve-tabs-item>\n  <nve-tabs-item>Tab 18</nve-tabs-item>\n  <nve-tabs-item>Tab 19</nve-tabs-item>\n  <nve-tabs-item>Tab 20</nve-tabs-item>\n</nve-tabs>`,\n};\n\n/**\n * @summary Tabs selection state and a popover working together without any CSS Anchor Positioning collisions.\n * @tags test-case\n */\nexport const WithTooltips = {\n  render: () => html`\n<nve-tooltip id=\"tab1\">Tooltip for tab 1</nve-tooltip>\n<nve-tooltip id=\"tab2\">Tooltip for tab 2</nve-tooltip>\n<nve-tooltip id=\"tab3\">Tooltip for tab 3</nve-tooltip>\n<nve-tabs behavior-select>\n  <nve-tabs-item selected popovertarget=\"tab1\">Tab 1</nve-tabs-item>\n  <nve-tabs-item popovertarget=\"tab2\">Tab 2</nve-tabs-item>\n  <nve-tabs-item id=\"tab-item-3\" popovertarget=\"tab3\">Tab 3</nve-tabs-item>\n</nve-tabs>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/tabs/tabs.examples.json

@@ -0,0 +1,106 @@
+{
+  "element": "nve-tabs",
+  "entrypoint": "@nvidia-elements/core/tabs/tabs.examples.json",
+  "items": [
+    {
+      "id": "core-tabs_default",
+      "name": "Default",
+      "template": "<nve-tabs behavior-select>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n</nve-tabs>\n",
+      "summary": "Basic tabs component for organizing content into selectable sections with disabled state support.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tabs_borderless-tabs",
+      "name": "BorderlessTabs",
+      "template": "<nve-tabs borderless behavior-select>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3 </nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>\n",
+      "summary": "Borderless tabs variant for minimal visual styling without border emphasis.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tabs_border-background",
+      "name": "BorderBackground",
+      "template": "<nve-tabs\n  behavior-select\n  style=\"--indicator-background: var(--nve-ref-color-brand-green-900); --indicator-border-radius: none\"\n>\n  <nve-tabs-item selected> Tab 1 </nve-tabs-item>\n  <nve-tabs-item> Tab 2 </nve-tabs-item>\n  <nve-tabs-item> Tab 3 </nve-tabs-item>\n</nve-tabs>\n",
+      "summary": "Tabs with custom border background styling for brand-specific visual customization.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tabs_with-dots",
+      "name": "WithDots",
+      "template": "<nve-tabs behavior-select>\n  <nve-tabs-item>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3 </nve-tabs-item>\n  <nve-tabs-item selected>\n    Tab 4\n    <nve-dot aria-label=\"10 notifications\">10</nve-dot>\n  </nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>\n",
+      "summary": "Tabs with notification dots for indicating unread content or alerts within tab sections.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tabs_vertical-tabs",
+      "name": "VerticalTabs",
+      "template": "<nve-tabs vertical behavior-select style=\"width: 250px\">\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>\n",
+      "summary": "Vertical tabs layout for sidebar navigation and vertical content organization patterns.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tabs_borderless-vertical-tabs",
+      "name": "BorderlessVerticalTabs",
+      "template": "<nve-tabs vertical borderless behavior-select style=\"width: 250px\">\n  <nve-tabs-item> <nve-icon name=\"gear\"></nve-icon> Tab 1 </nve-tabs-item>\n  <nve-tabs-item> <nve-icon name=\"person\"></nve-icon> Tab 2 </nve-tabs-item>\n  <nve-tabs-item selected> <nve-icon name=\"beaker\"></nve-icon> Tab 3 </nve-tabs-item>\n  <nve-tabs-item> <nve-icon name=\"add-grid\"></nve-icon> Tab 4 </nve-tabs-item>\n</nve-tabs>\n",
+      "summary": "Borderless vertical tabs with icons for enhanced visual navigation and minimal styling.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tabs_stateless-tabs",
+      "name": "StatelessTabs",
+      "template": "<nve-tabs>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n</nve-tabs>\n",
+      "summary": "Stateless tabs for external state management without built-in selection behavior.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tabs_links",
+      "name": "Links",
+      "template": "<nve-tabs>\n  <nve-tabs-item selected>\n    <a href=\"./docs/elements/tabs/#links\">Tab 1</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"./docs/elements/tabs/#links\">Tab 2</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"/docs/elements/tabs/#links\">Tab 3</a>\n  </nve-tabs-item>\n</nve-tabs>\n",
+      "summary": "Tabs with link navigation for routing-based tab switching and page navigation.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tabs_overflow-tabs",
+      "name": "OverflowTabs",
+      "template": "<nve-tabs behavior-select>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n  <nve-tabs-item>Tab 6</nve-tabs-item>\n  <nve-tabs-item>Tab 7</nve-tabs-item>\n  <nve-tabs-item>Tab 8</nve-tabs-item>\n  <nve-tabs-item>Tab 9</nve-tabs-item>\n  <nve-tabs-item>Tab 10</nve-tabs-item>\n  <nve-tabs-item>Tab 11</nve-tabs-item>\n  <nve-tabs-item>Tab 12</nve-tabs-item>\n  <nve-tabs-item>Tab 13</nve-tabs-item>\n  <nve-tabs-item>Tab 14</nve-tabs-item>\n  <nve-tabs-item>Tab 15</nve-tabs-item>\n  <nve-tabs-item>Tab 16</nve-tabs-item>\n  <nve-tabs-item>Tab 17</nve-tabs-item>\n  <nve-tabs-item>Tab 18</nve-tabs-item>\n  <nve-tabs-item>Tab 19</nve-tabs-item>\n  <nve-tabs-item>Tab 20</nve-tabs-item>\n</nve-tabs>\n",
+      "summary": "Tabs with overflow handling for managing large numbers of tabs with scrolling behavior.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-tabs_with-tooltips",
+      "name": "WithTooltips",
+      "template": "<nve-tooltip id=\"tab1\">Tooltip for tab 1</nve-tooltip>\n<nve-tooltip id=\"tab2\">Tooltip for tab 2</nve-tooltip>\n<nve-tooltip id=\"tab3\">Tooltip for tab 3</nve-tooltip>\n<nve-tabs behavior-select>\n  <nve-tabs-item selected popovertarget=\"tab1\">Tab 1</nve-tabs-item>\n  <nve-tabs-item popovertarget=\"tab2\">Tab 2</nve-tabs-item>\n  <nve-tabs-item id=\"tab-item-3\" popovertarget=\"tab3\">Tab 3</nve-tabs-item>\n</nve-tabs>\n",
+      "summary": "Tabs selection state and a popover working together without any CSS Anchor Positioning collisions.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/tabs/tabs.global.js

@@ -0,0 +1,6 @@
+//#region src/tabs/tabs.global.css?inline
+var e = "nve-tabs{--indicator-background: var(--nve-sys-accent-secondary-background);--indicator-height: var(--nve-ref-border-width-xl);--indicator-border-radius: var(--nve-ref-border-radius-sm);&:after{background:var(--indicator-background);height:var(--indicator-height);border-radius:var(--indicator-border-radius);position:fixed;display:block;content:\"\";width:anchor-size(width);transition:left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);position-anchor:--selected;top:calc(anchor(bottom) - var(--indicator-height));left:anchor(left);z-index:-1}&[borderless]:after{display:none!important}}nve-tabs[vertical]{&:after{width:var(--indicator-height);height:anchor-size(height);transition:top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);top:anchor(top)}}nve-tabs-item{&[selected]{anchor-name:--selected}@container style(--border-background: var(--indicator-background)){&:after{visibility:hidden!important}}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=tabs.global.js.map

package/dist/tabs/tabs.global.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.global.js","names":[],"sources":["../../src/tabs/tabs.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-tabs,\nnve-tabs {\n  --indicator-background: var(--nve-sys-accent-secondary-background);\n  --indicator-height: var(--nve-ref-border-width-xl);\n  --indicator-border-radius: var(--nve-ref-border-radius-sm);\n\n  &::after {\n    background: var(--indicator-background);\n    height: var(--indicator-height);\n    border-radius: var(--indicator-border-radius);\n    position: fixed;\n    display: block;\n    content: '';\n    width: anchor-size(width);\n    transition: left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);\n    position-anchor: --selected;\n    top: calc(anchor(bottom) - var(--indicator-height));\n    left: anchor(left);\n    z-index: -1;\n  }\n\n  &[borderless]::after {\n    display: none !important;\n  }\n}\n\nnve-tabs[vertical],\nnve-tabs[vertical] {\n  &::after {\n    width: var(--indicator-height);\n    height: anchor-size(height);\n    transition: top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);\n    top: anchor(top);\n  }\n}\n\nnve-tabs-item,\nnve-tabs-item {\n  &[selected] {\n    anchor-name: --selected;\n  }\n\n  /* if the item does not have custom styles disable the item specific indicator */\n  @container style(--border-background: var(--indicator-background)) {\n    &::after {\n      visibility: hidden !important;\n    }\n  }\n}\n"],"mappings":""}

package/dist/tabs/tabs.js

@@ -0,0 +1,6 @@
+//#region src/tabs/tabs.css?inline
+var e = ":host{--gap: var(--nve-ref-space-xs)}[internal-host]{display:flex;flex-direction:row;gap:var(--gap);overflow-x:auto;white-space:nowrap;scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width)}:host([vertical]){--gap: var(--nve-ref-space-xxxs)}:host([vertical]) [internal-host]{flex-direction:column}:host([vertical]) ::slotted(nve-tabs-item){--border-width: var(--nve-ref-border-width-lg);--border-height: 24px;--border-top: calc(50% - 12px) ;--border-inset: 0 8px 0 8px;--width: calc(100% - 8px) }:host([vertical]) ::slotted(nve-tabs-item:state(selected)){--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}:host([borderless]) ::slotted(nve-tabs-item){--border-width: 0;--border-height: 0}::slotted(nve-tabs-item){white-space:nowrap}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=tabs.js.map

package/dist/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../../src/tabs/tabs.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-xs);\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: row;\n  gap: var(--gap);\n  overflow-x: auto;\n  white-space: nowrap;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\n:host([vertical]) {\n  --gap: var(--nve-ref-space-xxxs);\n}\n\n:host([vertical]) [internal-host] {\n  flex-direction: column;\n}\n\n:host([vertical]) ::slotted(nve-tabs-item),\n:host([vertical]) ::slotted(nve-tabs-item) {\n  --border-width: var(--nve-ref-border-width-lg);\n  --border-height: 24px;\n  --border-top: calc(50% - 12px);\n  --border-inset: 0 8px 0 8px;\n  --width: calc(100% - 8px);\n}\n\n:host([vertical]) ::slotted(nve-tabs-item:state(selected)),\n:host([vertical]) ::slotted(nve-tabs-item:state(selected)) {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host([borderless]) ::slotted(nve-tabs-item),\n:host([borderless]) ::slotted(nve-tabs-item) {\n  --border-width: 0;\n  --border-height: 0;\n}\n\n::slotted(nve-tabs-item),\n::slotted(nve-tabs-item) {\n  white-space: nowrap;\n}\n"],"mappings":""}

package/dist/tabs/tabs2.js

@@ -0,0 +1,90 @@
+import { appendAnchorName as e, appendRootNodeStyle as t, removeAnchorName as n } from "../internal/utils/dom.js";
+import { attachInternals as r } from "../internal/utils/a11y.js";
+import { stateSelected as i } from "../internal/controllers/state-selected.controller.js";
+import { __decorate as a } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { BaseButton as o } from "../internal/base/button.js";
+import { audit as s } from "../internal/controllers/audit.controller.js";
+import { keyNavigationList as c } from "../internal/controllers/keynav-list.controller.js";
+import { useStyles as l } from "../internal/styles/index.js";
+import u from "./tabs.global.js";
+import d from "./tabs-item.js";
+import f from "./tabs.js";
+import { LitElement as p, html as m } from "lit";
+import { property as h } from "lit/decorators/property.js";
+import { queryAssignedElements as g } from "lit/decorators/query-assigned-elements.js";
+//#region src/tabs/tabs.ts
+var _ = class extends o {
+	static {
+		this.styles = l([d]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-tabs-item",
+			version: "0.0.2",
+			parents: ["nve-tabs"]
+		};
+	}
+	render() {
+		return m`<div internal-host focus-within><slot></slot></div>`;
+	}
+	constructor() {
+		super(), this.selected = !1, this.type = "button";
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._internals.role = "tab";
+	}
+	updated(t) {
+		t.has("selected") && (this.selected ? e(this, "--selected") : n(this, "--selected"));
+	}
+};
+a([h({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "selected", void 0), _ = a([s(), i()], _);
+var v = class extends p {
+	constructor(...e) {
+		super(...e), this.vertical = !1, this.borderless = !1, this.behaviorSelect = !1;
+	}
+	static {
+		this.styles = l([f]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-tabs",
+			version: "0.0.2",
+			children: ["nve-tabs-item"]
+		};
+	}
+	get keynavListConfig() {
+		return {
+			items: this.items,
+			layout: this.vertical ? "vertical" : "horizontal"
+		};
+	}
+	#e(e) {
+		!this.behaviorSelect || !e.matches("nve-tabs-item, nve-tabs-item") || e.disabled || (this.keynavListConfig.items.forEach((e) => e.selected = !1), e.selected = !0);
+	}
+	render() {
+		return m`<div internal-host><slot></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), t(this, u), r(this), this._internals.role = "tablist", this.addEventListener("click", (e) => this.#e(e.target));
+	}
+	updated(e) {
+		super.updated(e), this._internals.ariaOrientation = this.vertical ? "vertical" : "horizontal";
+	}
+};
+a([h({
+	type: Boolean,
+	reflect: !0
+})], v.prototype, "vertical", void 0), a([h({
+	type: Boolean,
+	reflect: !0
+})], v.prototype, "borderless", void 0), a([h({
+	type: Boolean,
+	attribute: "behavior-select"
+})], v.prototype, "behaviorSelect", void 0), a([g()], v.prototype, "items", void 0), v = a([s(), c()], v);
+//#endregion
+export { v as Tabs, _ as TabsItem };
+
+//# sourceMappingURL=tabs2.js.map

package/dist/tabs/tabs2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs2.js","names":["#selectTab"],"sources":["../../src/tabs/tabs.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  BaseButton,\n  stateSelected,\n  useStyles,\n  keyNavigationList,\n  attachInternals,\n  audit,\n  appendRootNodeStyle,\n  appendAnchorName,\n  removeAnchorName\n} from '@nvidia-elements/core/internal';\nimport globalStyles from './tabs.global.css?inline';\nimport tabsItemStyleSheet from './tabs-item.css?inline';\nimport tabsStyleSheet from './tabs.css?inline';\n\n/**\n * @element nve-tabs-item\n * @description Represents an individual tab within a tablist, providing a selectable button for switching between content views.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - default slot for content\n * @cssprop --font-size\n * @cssprop --border-width\n * @cssprop --border-height\n * @cssprop --border-top\n * @cssprop --border-background\n * @cssprop --width\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --height\n * @cssprop --cursor\n * @cssprop --text-transform\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@stateSelected<TabsItem>()\nexport class TabsItem extends BaseButton {\n  /**\n   * Determines which tab item the user selects, defaults to false.\n   */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  static styles = useStyles([tabsItemStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs-item',\n    version: '0.0.0',\n    parents: ['nve-tabs']\n  };\n\n  render() {\n    return html`\n      <div internal-host focus-within>\n        <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  updated(props: PropertyValues<this>) {\n    if (props.has('selected')) {\n      if (this.selected) {\n        appendAnchorName(this, '--selected');\n      } else {\n        removeAnchorName(this, '--selected');\n      }\n    }\n  }\n}\n\n/**\n * @element nve-tabs\n * @description Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - default slot for tab-item\n * @cssprop --gap\n * @cssprop --indicator-background\n * @cssprop --indicator-border-radius\n * @cssprop --indicator-height\n * @cssprop --border-inset\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@keyNavigationList<Tabs>()\nexport class Tabs extends LitElement {\n  /**\n   * Determines whether the tabs 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 tabs should display a border on selected items vs. defaults to show border.\n   */\n  @property({ type: Boolean, reflect: true }) borderless = false;\n\n  /**\n   * Determines whether the tabs should handle selection behavior vs. defaults to off.\n   */\n  @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n  static styles = useStyles([tabsStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs',\n    version: '0.0.0',\n    children: ['nve-tabs-item']\n  };\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.items,\n      layout: this.vertical ? 'vertical' : 'horizontal'\n    };\n  }\n\n  @queryAssignedElements() private items!: TabsItem[];\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #selectTab(tabItem: HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean }) {\n    if (!this.behaviorSelect || !tabItem.matches('nve-tabs-item, nve-tabs-item') || tabItem.disabled) {\n      return;\n    }\n\n    this.keynavListConfig.items.forEach((i: HTMLElement) => ((i as TabsItem).selected = false));\n    tabItem.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    appendRootNodeStyle(this, globalStyles);\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  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this._internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAgDO,IAAA,IAAA,cAAuB,EAAW;;gBAMvB,EAAU,CAAC,EAAmB,CAAC;;;kBAEpB;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,WAAA;GACX;;CAED,SAAS;AACP,SAAO,CAAI;;CAOb,cAAc;AAEZ,EADA,OAAO,kBAnB8C,IAoBrD,KAAK,OAAO;;CAGd,oBAAoB;AAElB,EADA,MAAM,mBAAmB,EACzB,KAAK,WAAW,OAAO;;CAGzB,QAAQ,GAA6B;AACnC,EAAI,EAAM,IAAI,WAAW,KACnB,KAAK,WACP,EAAiB,MAAM,aAAa,GAEpC,EAAiB,MAAM,aAAa;;;GAjCzC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,SAN5C,GAAO,EACP,GAAyB,CAAA,EAAA,EAAA;AA4DnB,IAAA,IAAA,cAAmB,EAAW;;+BAIoB,sBAKE,0BAKmB;;;gBAE5D,EAAU,CAAC,EAAe,CAAC;;;kBAEhB;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,gBAAA;GACZ;;CAGD,IAAI,mBAAqC;AACvC,SAAO;GACL,OAAO,KAAK;GACZ,QAAQ,KAAK,WAAW,aAAa;GACtC;;CAQH,GAAW,GAAgG;AACrG,GAAC,KAAK,kBAAkB,CAAC,EAAQ,QAAQ,+BAA+B,IAAI,EAAQ,aAIxF,KAAK,iBAAiB,MAAM,SAAS,MAAoB,EAAgB,WAAW,GAAO,EAC3F,EAAQ,WAAW;;CAGrB,SAAS;AACP,SAAO,CAAI;;CAOb,oBAAoB;AAKlB,EAJA,MAAM,mBAAmB,EACzB,EAAoB,MAAM,EAAa,EACvC,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO,WACvB,KAAK,iBAAiB,UAAU,MAC9B,MAAA,EAAgB,EAAE,OAAgG,CACnH;;CAGH,QAAQ,GAA6B;AAEnC,EADA,MAAM,QAAQ,EAAM,EACpB,KAAK,WAAW,kBAAkB,KAAK,WAAW,aAAa;;;GA9DhE,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAK1C,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KAK1C,EAAS;CAAE,MAAM;CAAS,WAAW;CAAmB,CAAC,CAAA,EAAA,EAAA,WAAA,kBAAA,KAAA,EAAA,KAkBzD,GAAuB,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA,SAlCzB,GAAO,EACP,GAAyB,CAAA,EAAA,EAAA"}

package/dist/tag/define.d.ts

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

package/dist/tag/define.js

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

package/dist/tag/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/tag/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 { Tag } from '@nvidia-elements/core/tag';\n\ndefine(Tag);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-tag': Tag;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,EAAI"}

package/dist/tag/index.d.ts

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

package/dist/tag/index.js

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

package/dist/tag/tag.d.ts

@@ -0,0 +1,47 @@
+import { Color, Prominence, BaseButton } from '../internal';
+import { Icon } from '../icon';
+/**
+ * @element nve-tag
+ * @description A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.
+ * @since 0.10.0
+ * @entrypoint \@nvidia-elements/core/tag
+ * @slot - default slot for content
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --gap
+ * @cssprop --font-size
+ * @cssprop --padding
+ * @cssprop --border
+ * @cssprop --border-radius
+ * @cssprop --font-weight
+ * @cssprop --cursor
+ * @cssprop --height
+ * @cssprop --width
+ * @cssprop --max-width
+ * @cssprop --text-decoration
+ * @csspart icon - The icon element
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/
+ */
+export declare class Tag extends BaseButton {
+    #private;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [Icon.metadata.tag]: typeof Icon;
+    };
+    /** Determines if tag is closable, if true, the component renders a close icon. */
+    closable: boolean;
+    /** Determines the color of the tag. */
+    color: Color;
+    /** Determines the visual prominence or weight */
+    prominence?: Extract<Prominence, 'emphasis'>;
+    /** Updates internal string values for internationalization. */
+    i18n: Partial<import('../internal').I18nStrings & {
+        __set: boolean;
+    }>;
+    render(): import('lit-html').TemplateResult<1>;
+    constructor();
+}

package/dist/tag/tag.examples.js

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

package/dist/tag/tag.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.examples.js","names":[],"sources":["../../src/tag/tag.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/tag/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Tag',\n  component: 'nve-tag',\n};\n\n/**\n * @summary Basic tag component for interactive labeling and categorizing of content, providing clear visual organization and metadata display.\n */\nexport const Default = {\n  render: () => html`\n<nve-tag>topic-tag</nve-tag>`\n};\n\n/**\n * @summary Closable tags with comprehensive color palette, enabling user interaction for filtering, selection, and dynamic content management.\n * @tags test-case\n */\nexport const Closable = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag closable>default-color</nve-tag>\n  <nve-tag closable color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag closable color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag closable color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag closable color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag closable color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag closable color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag closable color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag closable color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag closable color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag closable color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag closable color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag closable color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag closable color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag closable color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag closable color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag closable color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag closable color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag closable color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag closable color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag closable color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag closable color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag closable color=\"brand-green\">brand-green</nve-tag>\n</div>`\n};\n\n/**\n * @summary Read-only tags for displaying static labels and metadata, providing visual context without user interaction capabilities.\n */\nexport const Readonly = {\n  render: () => html`\n<nve-tag readonly>topic-tag</nve-tag>`\n};\n\n/**\n * @summary Tag group layout with overflow handling and add functionality, ideal for managing many categories with space constraints.\n */\nexport const Group = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:vertical-center\">\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>3+</nve-tag>\n  <nve-icon-button container=\"flat\" size=\"sm\" icon-name=\"add\"></nve-icon-button>\n</div>`\n};\n\n/**\n * @summary Comprehensive color palette for tag backgrounds, enabling visual categorization and brand consistency across different content types.\n */\nexport const Color = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag>default-color</nve-tag>\n  <nve-tag color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag color=\"brand-green\">brand-green</nve-tag>\n</div>\n  `\n};\n\n/**\n * @summary High prominence tags with emphasis styling for important categories and priority labels that require visual attention.\n */\nexport const Prominence = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag prominence=\"emphasis\" color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"brand-green\">brand-green</nve-tag>\n</div>`\n};\n\n\n/**\n * @summary Single tag with constrained width, with text overflow behavior and content truncation in limited space.\n * @tags test-case\n */\nexport const OverflowSingle = {\n  render: () => html`\n<nve-tag style=\"--width: 150px\">some really long content</nve-tag>`\n};\n\n\n/**\n * @summary Many tags with max width constraints, showing how content adapts to space limitations and maintains visual consistency.\n * @tags test-case\n */\nexport const OverflowMaxWidth= {\n  render: () => html`\n  <style>\n    .limit-width {\n      --max-width: 100px;\n    }\n  </style>\n  <nve-tag class=\"limit-width\">two words</nve-tag>\n  <nve-tag class=\"limit-width\">three words here</nve-tag>\n  <nve-tag class=\"limit-width\">four words long here</nve-tag>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}