@nvidia-elements/core 0.0.1 → 0.0.3

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

@@ -0,0 +1,17 @@
+import { CSSResult } from 'lit';
+import { ControlGroup } from '../forms';
+/**
+ * @element nve-radio-group
+ * @description Groups related radio buttons together with a shared label and validation messaging for single-select form inputs.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/radio
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+ */
+export declare class RadioGroup extends ControlGroup {
+    static styles: CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        children: string[];
+    };
+}

package/dist/radio/radio-group.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","names":[],"sources":["../../src/radio/radio-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/radio/radio-group2.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group2.js","names":[],"sources":["../../src/radio/radio-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, typeSSR, useStyles } from '@nvidia-elements/core/internal';\nimport { ControlGroup } from '@nvidia-elements/core/forms';\nimport styles from './radio-group.css?inline';\n\n/**\n * @element nve-radio-group\n * @description Groups related radio buttons together with a shared label and validation messaging for single-select form inputs.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/radio\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/radio/\n */\n@audit()\n@typeSSR()\nexport class RadioGroup extends ControlGroup {\n  static styles: CSSResult[] = useStyles([...ControlGroup.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-radio-group',\n    version: '0.0.0',\n    children: ['label', 'nve-control-message', 'nve-radio']\n  };\n}\n"],"mappings":";;;;;;;AAiBO,IAAA,IAAA,cAAyB,EAAa;;gBACd,EAAU,CAAC,GAAG,EAAa,QAAQ,EAAO,CAAC;;;kBAE7C;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAuB;IAAY;GACxD;;;OATF,GAAO,EACP,GAAS,CAAA,EAAA,EAAA"}

package/dist/radio/radio.d.ts

@@ -0,0 +1,30 @@
+import { CSSResult } from 'lit';
+import { Control } from '../forms';
+/**
+ * @element nve-radio
+ * @description A radio button is a control that enables users to choose one option from a list of mutually exclusive options.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/radio
+ * @cssprop --cursor
+ * @cssprop --width
+ * @cssprop --height
+ * @cssprop --border-width
+ * @cssprop --border-radius
+ * @cssprop --border-color
+ * @cssprop --radio-color
+ * @cssprop --background
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+ */
+export declare class Radio extends Control {
+    protected nveControl: string;
+    /** @private - disable for inline control */
+    fitText: boolean;
+    /** @private - disable for inline control */
+    fitContent: boolean;
+    static styles: CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        children: string[];
+    };
+}

package/dist/radio/radio.examples.js

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

package/dist/radio/radio.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.examples.js","names":[],"sources":["../../src/radio/radio.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/radio/define.js';\n\nexport default {\n  title: 'Elements/Radio',\n  component: 'nve-radio',\n};\n\n/**\n * @summary Basic radio button group for mutually exclusive single-choice selection from many options.\n */\nexport const Default = {\n  render: () => html`\n  <nve-radio-group>\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  `\n}\n\n/**\n * @summary Radio groups with vertical layout including validation states for disabled, success, and error.\n */\nexport const VerticalGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group>\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group>\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group>\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group>\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n`\n};\n\n/**\n * @summary Radio 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-radio-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n`\n};\n\n/**\n * @summary Radio groups with horizontal layout for options arranged in a row, ideal for limited choices.\n * @tags test-case\n */\nexport const HorizontalGroup = {\n  render: () => html`\n<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n`\n};\n\n/**\n * @summary Radio 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-radio-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/radio/radio.examples.json

@@ -0,0 +1,57 @@
+{
+  "element": "nve-radio",
+  "entrypoint": "@nvidia-elements/core/radio/radio.examples.json",
+  "items": [
+    {
+      "id": "core-radio_default",
+      "name": "Default",
+      "template": "<nve-radio-group>\n  <label>label</label>\n  <nve-radio>\n    <label>radio 1</label>\n    <input type=\"radio\" checked />\n  </nve-radio>\n  <nve-radio>\n    <label>radio 2</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-radio>\n    <label>radio 3</label>\n    <input type=\"radio\" />\n  </nve-radio>\n  <nve-control-message>message</nve-control-message>\n</nve-radio-group>\n",
+      "summary": "Basic radio button group for mutually exclusive single-choice selection from many options.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-radio_vertical-group",
+      "name": "VerticalGroup",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group>\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group>\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group>\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group>\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
+      "summary": "Radio groups with vertical layout including validation states for disabled, success, and error.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-radio_vertical-inline-group",
+      "name": "VerticalInlineGroup",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
+      "summary": "Radio groups with vertical inline layout for compact vertical stacking with inline label positioning.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-radio_horizontal-group",
+      "name": "HorizontalGroup",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
+      "summary": "Radio groups with horizontal layout for options arranged in a row, ideal for limited choices.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-radio_horizontal-inline-group",
+      "name": "HorizontalInlineGroup",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" disabled />\n    </nve-radio>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-radio-group>\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-radio-group>\n</div>\n",
+      "summary": "Radio groups with horizontal inline layout for space-efficient horizontal arrangement with inline labels.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/radio/radio.js

@@ -0,0 +1,6 @@
+//#region src/radio/radio.css?inline
+var e = ":host{--cursor: pointer;--width: var(--nve-ref-size-400);--height: var(--nve-ref-size-400);--border-width: var(--nve-ref-border-width-md);--border-radius: var(--nve-ref-border-radius-full);--border-color: var(--nve-ref-border-color);--radio-color: var(--border-color);--background: transparent;display:inline-block;contain:layout;will-change:transform,border-color}::slotted(input){width:var(--width)!important;height:var(--height)!important;cursor:var(--cursor)!important;margin:0!important;position:absolute!important;border-radius:var(--border-radius)!important;opacity:0!important;inset:0!important}[input]{align-items:center;position:relative}@keyframes radio-select-pop{0%{transform:scale(.8)}50%{transform:scale(1.1)}to{transform:scale(1)}}[input] slot{width:var(--width);height:var(--height);border:var(--border-width) solid var(--border-color);background:var(--background);border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;transition:transform var(--nve-ref-animation-duration-200) cubic-bezier(.12,.32,.54,2),border-color var(--nve-ref-animation-duration-150) ease;will-change:transform,border-color}[input] slot:before{content:\"\";width:calc(var(--width) / 2);height:calc(var(--height) / 2);border-radius:var(--border-radius);transform:scale(0);opacity:0;transition:transform var(--nve-ref-animation-duration-250) ease,opacity var(--nve-ref-animation-duration-200) ease,background-color var(--nve-ref-animation-duration-150) ease}:host(:state(checked):state(dirty)) [input] slot{animation:radio-select-pop var(--nve-ref-animation-duration-200) ease-out}:host(:state(checked)) [input] slot:before{background:var(--radio-color);transform:scale(1);opacity:1}:host(:state(checked)){--border-color: var(--accent-color)}:host(:state(disabled)){--border-color: var(--nve-sys-interaction-disabled-background)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=radio.js.map

package/dist/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","names":[],"sources":["../../src/radio/radio.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  --width: var(--nve-ref-size-400);\n  --height: var(--nve-ref-size-400);\n  --border-width: var(--nve-ref-border-width-md);\n  --border-radius: var(--nve-ref-border-radius-full);\n  --border-color: var(--nve-ref-border-color);\n  --radio-color: var(--border-color);\n  --background: transparent;\n  display: inline-block;\n  contain: layout;\n  will-change: transform, border-color;\n}\n\n::slotted(input) {\n  width: var(--width) !important;\n  height: var(--height) !important;\n  cursor: var(--cursor) !important;\n  margin: 0 !important;\n  position: absolute !important;\n  border-radius: var(--border-radius) !important;\n  opacity: 0 !important;\n  inset: 0 !important;\n}\n\n[input] {\n  align-items: center;\n  position: relative;\n}\n\n@keyframes radio-select-pop {\n  0% {\n    transform: scale(0.8);\n  }\n\n  50% {\n    transform: scale(1.1);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n[input] slot {\n  width: var(--width);\n  height: var(--height);\n  border: var(--border-width) solid var(--border-color);\n  background: var(--background);\n  border-radius: var(--border-radius);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition:\n    transform var(--nve-ref-animation-duration-200) cubic-bezier(0.12, 0.32, 0.54, 2),\n    border-color var(--nve-ref-animation-duration-150) ease;\n  will-change: transform, border-color;\n}\n\n[input] slot::before {\n  content: '';\n  width: calc(var(--width) / 2);\n  height: calc(var(--height) / 2);\n  border-radius: var(--border-radius);\n  transform: scale(0);\n  opacity: 0;\n  transition:\n    transform var(--nve-ref-animation-duration-250) ease,\n    opacity var(--nve-ref-animation-duration-200) ease,\n    background-color var(--nve-ref-animation-duration-150) ease;\n}\n\n:host(:state(checked):state(dirty)) [input] slot {\n  animation: radio-select-pop var(--nve-ref-animation-duration-200) ease-out;\n}\n\n:host(:state(checked)) [input] slot::before {\n  background: var(--radio-color);\n  transform: scale(1);\n  opacity: 1;\n}\n\n:host(:state(checked)) {\n  --border-color: var(--accent-color);\n}\n\n:host(:state(disabled)) {\n  --border-color: var(--nve-sys-interaction-disabled-background);\n}\n"],"mappings":""}

package/dist/radio/radio2.js

@@ -0,0 +1,31 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.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 "./radio.js";
+//#region src/radio/radio.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-radio",
+			version: "0.0.3",
+			children: [
+				"label",
+				"input",
+				"nve-control-message"
+			]
+		};
+	}
+};
+e([n({ attribute: "nve-control" })], o.prototype, "nveControl", void 0), o = e([t()], o);
+//#endregion
+export { o as Radio };
+
+//# sourceMappingURL=radio2.js.map

package/dist/radio/radio2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio2.js","names":[],"sources":["../../src/radio/radio.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 './radio.css?inline';\n\n/**\n * @element nve-radio\n * @description A radio button is a control that enables users to choose one option from a list of mutually exclusive options.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/radio\n * @cssprop --cursor\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-width\n * @cssprop --border-radius\n * @cssprop --border-color\n * @cssprop --radio-color\n * @cssprop --background\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/radio/\n */\n@audit()\nexport class Radio extends Control {\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n  /** @private - disable for inline control */\n  declare fitText: boolean;\n\n  /** @private - disable for inline control */\n  declare fitContent: boolean;\n\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-radio',\n    version: '0.0.0',\n    children: ['label', 'input', 'nve-control-message']\n  };\n}\n"],"mappings":";;;;;;;AAwBO,IAAA,IAAA,cAAoB,EAAQ;;iCAC8B;;;gBAQlC,EAAU,CAAC,GAAG,EAAQ,QAAQ,EAAO,CAAC;;;kBAExC;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC;IAAS;IAAS;IAAsB;GACpD;;;GAdA,EAAS,EAAE,WAAW,eAAe,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,SAFxC,GAAO,CAAA,EAAA,EAAA"}

package/dist/range/define.d.ts

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

package/dist/range/define.js

@@ -0,0 +1,9 @@
+import { define as e } from "../internal/utils/dom.js";
+import { ControlMessage as t } from "../forms/control-message/control-message2.js";
+import { Control as n } from "../forms/control/control2.js";
+import { ControlGroup as r } from "../forms/control-group/control-group2.js";
+import { Range as i } from "./range2.js";
+e(i), e(n), e(r), e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/range/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/range/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 { Range } from '@nvidia-elements/core/range';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Range);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-range': Range;\n  }\n}\n"],"mappings":";;;;;AAOA,EAAO,EAAM,EACb,EAAO,EAAQ,EACf,EAAO,EAAa,EACpB,EAAO,EAAe"}

package/dist/range/index.d.ts

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

package/dist/range/index.js

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

package/dist/range/range.d.ts

@@ -0,0 +1,34 @@
+import { Control } from '../forms';
+import { PropertyValues, nothing } from 'lit';
+/**
+ * @element nve-range
+ * @description A range slider is a control that enables users to choose a value from a continuous range of values.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/range
+ * @cssprop --background
+ * @cssprop --control-height
+ * @cssprop --cursor
+ * @cssprop --track-width
+ * @cssprop --track-height
+ * @cssprop --track-border-radius
+ * @cssprop --track-background
+ * @cssprop --thumb-width
+ * @cssprop --thumb-height
+ * @cssprop --thumb-background
+ * @cssprop --thumb-border
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/slider/
+ */
+export declare class Range extends Control {
+    #private;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    /** Determines the orientation of the range slider. */
+    orientation: 'vertical' | 'horizontal';
+    connectedCallback(): void;
+    firstUpdated(props: PropertyValues<this>): void;
+    updated(props: PropertyValues<this>): void;
+    protected get suffixContent(): typeof nothing | import('lit-html').TemplateResult<1>;
+}

package/dist/range/range.examples.js

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

package/dist/range/range.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.examples.js","names":[],"sources":["../../src/range/range.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/range/define.js';\n\nexport default {\n  title: 'Elements/Range',\n  component: 'nve-range',\n};\n\n/**\n * @summary Basic range component for numeric value selection, providing a simple slider interface for adjusting values within a defined range.\n */\nexport const Default = {\n  render: () => html`\n<nve-range>\n  <label>label</label>\n  <input type=\"range\" />\n  <nve-control-message>message</nve-control-message>\n</nve-range>`\n};\n\n/**\n * @summary Range with datalist for visual tick marks and labeled values, enabling users to see available options and precisely select predetermined values.\n */\nexport const Datalist = {\n  render: () => html`\n<nve-range>\n<label>label</label>\n  <input type=\"range\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"0\">0</option>\n    <option value=\"25\"></option>\n    <option value=\"50\"></option>\n    <option value=\"75\"></option>\n    <option value=\"100\"></option>\n  </datalist>\n</nve-range>\n  `\n}\n\n/**\n * @summary Range with combined step increments and datalist labels, ensuring precise value selection with clear visual indicators at each valid step position.\n */\nexport const DatalistWithSteps = {\n  render: () => html`\n<nve-range>\n<label>label</label>\n  <input type=\"range\" min=\"0\" max=\"100\" step=\"10\" />\n  <datalist>\n    <option value=\"0\">0</option>\n    <option value=\"10\">10</option>\n    <option value=\"20\">20</option>\n    <option value=\"30\">30</option>\n    <option value=\"40\">40</option>\n    <option value=\"50\">50</option>\n    <option value=\"60\">60</option>\n    <option value=\"70\">70</option>\n    <option value=\"80\">80</option>\n    <option value=\"90\">90</option>\n    <option value=\"100\">100</option>\n  </datalist>\n</nve-range>\n  `\n}\n\n/**\n * @summary Range with defined step increments for discrete value selection, constraining the slider to specific intervals for controlled input precision.\n */\nexport const Step = {\n  render: () => html`\n<nve-range>\n  <label>label</label>\n  <input type=\"range\" min=\"0\" max=\"100\" step=\"20\" />\n  <nve-control-message>message</nve-control-message>\n</nve-range>\n  `\n}\n\n/**\n * @summary Vertical layout configuration for stacked form arrangements, displaying label, slider, and message in a column format with support for states including disabled, success, and error feedback.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-range>\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-range>\n    <label>disabled</label>\n    <input type=\"range\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-range>\n    <label>success</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-range>\n\n  <nve-range>\n    <label>error</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-range>\n</div>`\n};\n\n/**\n * @summary Horizontal layout configuration for inline form arrangements, positioning label and slider side-by-side for compact displays with support for states including disabled, success, and error feedback.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-range layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-range layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"range\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-range layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-range>\n\n  <nve-range layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-range>\n</div>`\n};\n\n/**\n * @summary Vertical range slider for space-constrained layouts or controls where bottom-to-top value selection is intuitive, such as volume or equalizer adjustments.\n */\nexport const OrientationVertical = {\n  render: () => html`\n<div style=\"height: 200px\">\n  <nve-range orientation=\"vertical\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n</div>`\n};\n\n/**\n * @summary Vertical range slider with datalist tick marks and labeled values for precise value selection in vertical layouts.\n */\nexport const OrientationVerticalDatalist = {\n  render: () => html`\n<div style=\"height: 250px\">\n  <nve-range orientation=\"vertical\">\n    <label>label</label>\n    <input type=\"range\" />\n    <datalist>\n      <option value=\"0\">0</option>\n      <option value=\"25\">25</option>\n      <option value=\"50\">50</option>\n      <option value=\"75\">75</option>\n      <option value=\"100\">100</option>\n    </datalist>\n  </nve-range>\n</div>`\n};\n\n/**\n * @summary Range component can have its visual styles overwritten to achieve custom themes.\n * @tags test-case\n */\nexport const CustomStyles = {\n  render: () => html`\n<nve-range style=\"\n--background: #76b900;\n--track-background: red;\n--track-height: 4px;\n--track-border-radius: 16px;\n--thumb-background: black;\n--thumb-border: inset 0 0 0 2px white;\n--thumb-width: 14px;\n--thumb-height: 14px;\">\n  <input type=\"range\" aria-label=\"range\" />\n</nve-range>`\n};"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/range/range.examples.json

@@ -0,0 +1,93 @@
+{
+  "element": "nve-range",
+  "entrypoint": "@nvidia-elements/core/range/range.examples.json",
+  "items": [
+    {
+      "id": "core-range_default",
+      "name": "Default",
+      "template": "<nve-range>\n  <label>label</label>\n  <input type=\"range\" />\n  <nve-control-message>message</nve-control-message>\n</nve-range>\n",
+      "summary": "Basic range component for numeric value selection, providing a simple slider interface for adjusting values within a defined range.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-range_datalist",
+      "name": "Datalist",
+      "template": "<nve-range>\n  <label>label</label>\n  <input type=\"range\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"0\">0</option>\n    <option value=\"25\"></option>\n    <option value=\"50\"></option>\n    <option value=\"75\"></option>\n    <option value=\"100\"></option>\n  </datalist>\n</nve-range>\n",
+      "summary": "Range with datalist for visual tick marks and labeled values, enabling users to see available options and precisely select predetermined values.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-range_datalist-with-steps",
+      "name": "DatalistWithSteps",
+      "template": "<nve-range>\n  <label>label</label>\n  <input type=\"range\" min=\"0\" max=\"100\" step=\"10\" />\n  <datalist>\n    <option value=\"0\">0</option>\n    <option value=\"10\">10</option>\n    <option value=\"20\">20</option>\n    <option value=\"30\">30</option>\n    <option value=\"40\">40</option>\n    <option value=\"50\">50</option>\n    <option value=\"60\">60</option>\n    <option value=\"70\">70</option>\n    <option value=\"80\">80</option>\n    <option value=\"90\">90</option>\n    <option value=\"100\">100</option>\n  </datalist>\n</nve-range>\n",
+      "summary": "Range with combined step increments and datalist labels, ensuring precise value selection with clear visual indicators at each valid step position.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-range_step",
+      "name": "Step",
+      "template": "<nve-range>\n  <label>label</label>\n  <input type=\"range\" min=\"0\" max=\"100\" step=\"20\" />\n  <nve-control-message>message</nve-control-message>\n</nve-range>\n",
+      "summary": "Range with defined step increments for discrete value selection, constraining the slider to specific intervals for controlled input precision.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-range_vertical",
+      "name": "Vertical",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-range>\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-range>\n    <label>disabled</label>\n    <input type=\"range\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-range>\n    <label>success</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-range>\n  <nve-range>\n    <label>error</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-range>\n</div>\n",
+      "summary": "Vertical layout configuration for stacked form arrangements, displaying label, slider, and message in a column format with support for states including disabled, success, and error feedback.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-range_horizontal",
+      "name": "Horizontal",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-range layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-range layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"range\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-range layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-range>\n  <nve-range layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"range\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-range>\n</div>\n",
+      "summary": "Horizontal layout configuration for inline form arrangements, positioning label and slider side-by-side for compact displays with support for states including disabled, success, and error feedback.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-range_orientation-vertical",
+      "name": "OrientationVertical",
+      "template": "<div style=\"height: 200px\">\n  <nve-range orientation=\"vertical\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n</div>\n",
+      "summary": "Vertical range slider for space-constrained layouts or controls where bottom-to-top value selection is intuitive, such as volume or equalizer adjustments.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-range_orientation-vertical-datalist",
+      "name": "OrientationVerticalDatalist",
+      "template": "<div style=\"height: 250px\">\n  <nve-range orientation=\"vertical\">\n    <label>label</label>\n    <input type=\"range\" />\n    <datalist>\n      <option value=\"0\">0</option>\n      <option value=\"25\">25</option>\n      <option value=\"50\">50</option>\n      <option value=\"75\">75</option>\n      <option value=\"100\">100</option>\n    </datalist>\n  </nve-range>\n</div>\n",
+      "summary": "Vertical range slider with datalist tick marks and labeled values for precise value selection in vertical layouts.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-range_custom-styles",
+      "name": "CustomStyles",
+      "template": "<nve-range\n  style=\"\n    --background: #76b900;\n    --track-background: red;\n    --track-height: 4px;\n    --track-border-radius: 16px;\n    --thumb-background: black;\n    --thumb-border: inset 0 0 0 2px white;\n    --thumb-width: 14px;\n    --thumb-height: 14px;\n  \"\n>\n  <input type=\"range\" aria-label=\"range\" />\n</nve-range>\n",
+      "summary": "Range component can have its visual styles overwritten to achieve custom themes.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/range/range.global.js

@@ -0,0 +1,6 @@
+//#region src/range/range.global.css?inline
+var e = "nve-range input[type=range]::-webkit-slider-thumb{width:var(--thumb-width);height:var(--thumb-height);background:var(--thumb-background);border-radius:50%;box-shadow:var(--thumb-border);margin-block-start:calc((var(--track-height) - var(--thumb-height)) / 2);appearance:var(--_appearance);filter:var(--filter)}nve-range input[type=range]::-webkit-slider-runnable-track{background:transparent;height:var(--track-height);border-radius:var(--nve-ref-border-radius-lg);align-self:center}nve-range:has(datalist) input[type=range]::-webkit-slider-container{min-block-size:auto}nve-range[orientation=vertical] input[type=range]::-webkit-slider-container{display:flex;align-items:center;overflow:visible}nve-range[orientation=vertical] input[type=range]::-webkit-slider-runnable-track{width:100%;height:100%}nve-range[orientation=vertical] input[type=range]::-webkit-slider-thumb{margin:0}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=range.global.js.map

package/dist/range/range.global.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.global.js","names":[],"sources":["../../src/range/range.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-range input[type='range']::-webkit-slider-thumb,\nnve-range input[type='range']::-webkit-slider-thumb {\n  width: var(--thumb-width);\n  height: var(--thumb-height);\n  background: var(--thumb-background);\n  border-radius: 50%;\n  box-shadow: var(--thumb-border);\n  margin-block-start: calc((var(--track-height) - var(--thumb-height)) / 2);\n  appearance: var(--_appearance);\n  filter: var(--filter);\n}\n\nnve-range input[type='range']::-webkit-slider-runnable-track,\nnve-range input[type='range']::-webkit-slider-runnable-track {\n  background: transparent;\n  height: var(--track-height);\n  border-radius: var(--nve-ref-border-radius-lg);\n  align-self: center;\n}\n\nnve-range:has(datalist) input[type='range']::-webkit-slider-container {\n  min-block-size: auto;\n}\n\nnve-range[orientation='vertical'] input[type='range']::-webkit-slider-container,\nnve-range[orientation='vertical'] input[type='range']::-webkit-slider-container {\n  display: flex;\n  align-items: center;\n  overflow: visible;\n}\n\nnve-range[orientation='vertical'] input[type='range']::-webkit-slider-runnable-track,\nnve-range[orientation='vertical'] input[type='range']::-webkit-slider-runnable-track {\n  width: 100%;\n  height: 100%;\n}\n\nnve-range[orientation='vertical'] input[type='range']::-webkit-slider-thumb,\nnve-range[orientation='vertical'] input[type='range']::-webkit-slider-thumb {\n  margin: 0;\n}\n"],"mappings":""}

package/dist/range/range.js

@@ -0,0 +1,6 @@
+//#region src/range/range.css?inline
+var e = ":host{--background: var(--accent-color);--control-height: var(--nve-sys-interaction-field-height);--cursor: pointer;--track-width: .5;--track-height: var(--nve-ref-size-150);--track-border-radius: var(--nve-ref-border-radius-md);--track-background: var(--nve-sys-interaction-background);--thumb-width: var(--nve-ref-size-400);--thumb-height: var(--nve-ref-size-400);--thumb-background: var(--nve-sys-text-muted-color);--thumb-border: 0 0 0 2px var(--nve-sys-layer-canvas-background);width:100%;contain:layout}:host(:state(disabled)){--background: var(--nve-sys-interaction-disabled-background)}:host([prominence=\"muted\"]){--filter: grayscale(90%)}:host(:not(:state(disabled)):hover) [input]{--filter: brightness(1.1)}:host([prominence=\"muted\"]:not(:state(disabled)):hover) [input]{--filter: grayscale(90%) brightness(1.1)}::slotted(input){accent-color:var(--accent-color)!important;height:calc(var(--track-height) * 3)!important;cursor:var(--cursor)!important;margin:0!important;width:var(--control-width)!important;background:transparent;align-self:center;appearance:var(--_appearance);position:relative;z-index:2}[input]{position:relative;filter:none}[input]:before{content:\"\";display:block;width:100%;height:var(--track-height);background:var(--track-background);border-radius:var(--track-border-radius);filter:var(--filter);position:absolute;pointer-events:none;align-self:center;z-index:0;left:0}[input]:after{content:\"\";display:block;width:calc(var(--track-width) * 100% - var(--track-width) * var(--thumb-width) / 2);height:var(--track-height);background:var(--background);border-top-left-radius:var(--track-border-radius);border-bottom-left-radius:var(--track-border-radius);filter:var(--filter);position:absolute;pointer-events:none;align-self:center;z-index:1;left:0}[input]:has(.datalist-labels){flex-direction:column}[input]:has(.datalist-labels):before{margin-block-start:var(--track-height)}[input]:has(.datalist-labels):after{margin-block-start:var(--track-height)}.datalist-labels{display:flex;cursor:auto;position:relative;min-height:calc(var(--nve-ref-size-150) + var(--nve-ref-space-md) + 1em)}.datalist-tick{display:flex;flex-direction:column;align-items:center;gap:var(--nve-ref-space-xxs);transform:translate(-50%);font-size:var(--nve-ref-font-size-100);color:var(--nve-sys-text-muted-color);position:absolute}.datalist-tick:before{content:\"\";width:var(--nve-ref-size-100);height:var(--nve-ref-size-150);border-radius:var(--nve-ref-border-radius-md);background:var(--nve-sys-interaction-background)}:host([orientation=\"vertical\"]){width:fit-content;height:100%;contain:layout}:host([orientation=\"vertical\"]) [internal-host]{height:100%}:host([orientation=\"vertical\"]) [input]{height:100%}:host([orientation=\"vertical\"]) ::slotted(input){writing-mode:vertical-lr!important;direction:rtl!important;width:var(--thumb-width)!important;height:calc(100% - var(--track-height) * 2)!important;margin:var(--track-height) auto!important;align-self:auto!important}:host([orientation=\"vertical\"]) [input]:before{width:var(--track-height);height:calc(100% - var(--track-height) * 2);left:50%;top:var(--track-height);transform:translate(-50%);align-self:auto}:host([orientation=\"vertical\"]) [input]:after{width:var(--track-height);height:calc(var(--track-width) * (100% - var(--track-height) * 2) - var(--track-width) * var(--thumb-height) / 2);left:50%;top:auto;bottom:var(--track-height);transform:translate(-50%);align-self:auto;border-radius:var(--nve-ref-border-radius-none) var(--nve-ref-border-radius-none) var(--track-border-radius) var(--track-border-radius)}:host([orientation=\"vertical\"]) [input]:has(.datalist-labels){flex-direction:row}:host([orientation=\"vertical\"]) [input]:has(.datalist-labels):before,:host([orientation=\"vertical\"]) [input]:has(.datalist-labels):after{margin-block-start:0}:host([orientation=\"vertical\"]) .datalist-labels{flex-direction:column;height:calc(100% - var(--track-height) * 2);margin-block:var(--track-height);position:absolute;left:calc(50% + var(--thumb-width) / 2 + var(--nve-ref-space-xxs) / 2)}:host([orientation=\"vertical\"]) .datalist-tick{flex-direction:row;transform:none}:host([orientation=\"vertical\"]) .datalist-tick:before{width:var(--nve-ref-size-150);height:var(--nve-ref-size-100)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=range.js.map

package/dist/range/range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.js","names":[],"sources":["../../src/range/range.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  --background: var(--accent-color);\n  --control-height: var(--nve-sys-interaction-field-height);\n  --cursor: pointer;\n  --track-width: 0.5;\n  --track-height: var(--nve-ref-size-150);\n  --track-border-radius: var(--nve-ref-border-radius-md);\n  --track-background: var(--nve-sys-interaction-background);\n  --thumb-width: var(--nve-ref-size-400);\n  --thumb-height: var(--nve-ref-size-400);\n  --thumb-background: var(--nve-sys-text-muted-color);\n  --thumb-border: 0 0 0 2px var(--nve-sys-layer-canvas-background);\n  width: 100%;\n  contain: layout;\n}\n\n:host(:state(disabled)) {\n  --background: var(--nve-sys-interaction-disabled-background);\n}\n\n:host([prominence='muted']) {\n  --filter: grayscale(90%);\n}\n\n:host(:not(:state(disabled)):hover) [input] {\n  --filter: brightness(1.1);\n}\n\n:host([prominence='muted']:not(:state(disabled)):hover) [input] {\n  --filter: grayscale(90%) brightness(1.1);\n}\n\n::slotted(input) {\n  /* https://web.dev/accent-color/#guaranteeing-contrast */\n  accent-color: var(--accent-color) !important;\n  height: calc(var(--track-height) * 3) !important;\n  cursor: var(--cursor) !important;\n  margin: 0 !important;\n  width: var(--control-width) !important;\n  background: transparent;\n  align-self: center;\n  appearance: var(--_appearance);\n  position: relative;\n  z-index: 2;\n}\n\n[input] {\n  position: relative;\n  filter: none;\n}\n\n[input]::before {\n  content: '';\n  display: block;\n  width: 100%;\n  height: var(--track-height);\n  background: var(--track-background);\n  border-radius: var(--track-border-radius);\n  filter: var(--filter);\n  position: absolute;\n  pointer-events: none;\n  align-self: center;\n  z-index: 0;\n  left: 0;\n}\n\n[input]::after {\n  content: '';\n  display: block;\n  width: calc(var(--track-width) * 100% - var(--track-width) * var(--thumb-width) / 2);\n  height: var(--track-height);\n  background: var(--background);\n  border-top-left-radius: var(--track-border-radius);\n  border-bottom-left-radius: var(--track-border-radius);\n  filter: var(--filter);\n  position: absolute;\n  pointer-events: none;\n  align-self: center;\n  z-index: 1;\n  left: 0;\n}\n\n[input]:has(.datalist-labels) {\n  flex-direction: column;\n}\n\n[input]:has(.datalist-labels)::before {\n  margin-block-start: var(--track-height);\n}\n\n[input]:has(.datalist-labels)::after {\n  margin-block-start: var(--track-height);\n}\n\n.datalist-labels {\n  display: flex;\n  cursor: auto;\n  position: relative;\n  min-height: calc(var(--nve-ref-size-150) + var(--nve-ref-space-md) + 1em);\n}\n\n.datalist-tick {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--nve-ref-space-xxs);\n  transform: translateX(-50%);\n  font-size: var(--nve-ref-font-size-100);\n  color: var(--nve-sys-text-muted-color);\n  position: absolute;\n}\n\n.datalist-tick::before {\n  content: '';\n  width: var(--nve-ref-size-100);\n  height: var(--nve-ref-size-150);\n  border-radius: var(--nve-ref-border-radius-md);\n  background: var(--nve-sys-interaction-background);\n}\n\n:host([orientation='vertical']) {\n  width: fit-content;\n  height: 100%;\n  contain: layout;\n}\n\n:host([orientation='vertical']) [internal-host] {\n  height: 100%;\n}\n\n:host([orientation='vertical']) [input] {\n  height: 100%;\n}\n\n:host([orientation='vertical']) ::slotted(input) {\n  writing-mode: vertical-lr !important;\n  direction: rtl !important;\n  width: var(--thumb-width) !important;\n  height: calc(100% - var(--track-height) * 2) !important;\n  margin: var(--track-height) auto !important;\n  align-self: auto !important;\n}\n\n:host([orientation='vertical']) [input]::before {\n  width: var(--track-height);\n  height: calc(100% - var(--track-height) * 2);\n  left: 50%;\n  top: var(--track-height);\n  transform: translateX(-50%);\n  align-self: auto;\n}\n\n:host([orientation='vertical']) [input]::after {\n  width: var(--track-height);\n  height: calc(var(--track-width) * (100% - var(--track-height) * 2) - var(--track-width) * var(--thumb-height) / 2);\n  left: 50%;\n  top: auto;\n  bottom: var(--track-height);\n  transform: translateX(-50%);\n  align-self: auto;\n  border-radius: var(--nve-ref-border-radius-none) var(--nve-ref-border-radius-none) var(--track-border-radius)\n    var(--track-border-radius);\n}\n\n:host([orientation='vertical']) [input]:has(.datalist-labels) {\n  flex-direction: row;\n}\n\n:host([orientation='vertical']) [input]:has(.datalist-labels)::before,\n:host([orientation='vertical']) [input]:has(.datalist-labels)::after {\n  margin-block-start: 0;\n}\n\n:host([orientation='vertical']) .datalist-labels {\n  flex-direction: column;\n  height: calc(100% - var(--track-height) * 2);\n  margin-block: var(--track-height);\n  position: absolute;\n  left: calc(50% + var(--thumb-width) / 2 + var(--nve-ref-space-xxs) / 2);\n}\n\n:host([orientation='vertical']) .datalist-tick {\n  flex-direction: row;\n  transform: none;\n}\n\n:host([orientation='vertical']) .datalist-tick::before {\n  width: var(--nve-ref-size-150);\n  height: var(--nve-ref-size-100);\n}\n"],"mappings":""}

package/dist/range/range2.js

@@ -0,0 +1,55 @@
+import { appendRootNodeStyle as e, getElementUpdate as t } from "../internal/utils/dom.js";
+import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { useStyles as r } from "../internal/styles/index.js";
+import { Control as i } from "../forms/control/control2.js";
+import a from "./range.global.js";
+import o from "./range.js";
+import { html as s, isServer as c, nothing as l } from "lit";
+import { property as u } from "lit/decorators/property.js";
+//#region src/range/range.ts
+var d = class extends i {
+	constructor(...e) {
+		super(...e), this.orientation = "horizontal";
+	}
+	static {
+		this.styles = r([...i.styles, o]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-range",
+			version: "0.0.3"
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback(), e(this, a), this._internals.ariaOrientation = this.orientation;
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.#e(), this.input.addEventListener("input", () => this.#e()), t(this.input, "value", (e) => this.#e(e));
+	}
+	updated(e) {
+		super.updated(e), e.has("orientation") && (this._internals.ariaOrientation = this.orientation);
+	}
+	#e(e) {
+		let t = e ?? this.input.valueAsNumber, n = this.input.min ? parseFloat(this.input.min) : 0, r = this.input.max ? parseFloat(this.input.max) : 100;
+		this.style.setProperty("--track-width", `${Math.floor((t - n) / (r - n) * 100) / 100}`);
+	}
+	get suffixContent() {
+		let e = c ? null : this.querySelector("datalist");
+		return e ? this.#t(e) : l;
+	}
+	#t(e) {
+		let t = Array.from(e.options), n = this.input?.min ? parseFloat(this.input.min) : 0, r = this.input?.max ? parseFloat(this.input.max) : 100;
+		return s`<div class="datalist-labels">${t.map((e) => {
+			let t = parseFloat(e.value), i = (t - n) / (r - n) * 100;
+			return s`<span class="datalist-tick" style="${this.orientation === "vertical" ? `bottom: ${i}%; transform: translateY(${i}%)` : `left: ${i}%; transform: translateX(-${i}%)`}">${e.textContent || t}</span>`;
+		})}</div>`;
+	}
+};
+n([u({
+	type: String,
+	reflect: !0
+})], d.prototype, "orientation", void 0);
+//#endregion
+export { d as Range };
+
+//# sourceMappingURL=range2.js.map

package/dist/range/range2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range2.js","names":["#setTrackWidth","#renderDatalistTicks"],"sources":["../../src/range/range.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { appendRootNodeStyle, getElementUpdate, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { property } from 'lit/decorators/property.js';\nimport globalStyles from './range.global.css?inline';\nimport styles from './range.css?inline';\nimport type { PropertyValues } from 'lit';\nimport { html, nothing, isServer } from 'lit';\n/**\n * @element nve-range\n * @description A range slider is a control that enables users to choose a value from a continuous range of values.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/range\n * @cssprop --background\n * @cssprop --control-height\n * @cssprop --cursor\n * @cssprop --track-width\n * @cssprop --track-height\n * @cssprop --track-border-radius\n * @cssprop --track-background\n * @cssprop --thumb-width\n * @cssprop --thumb-height\n * @cssprop --thumb-background\n * @cssprop --thumb-border\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/slider/\n */\nexport class Range extends Control {\n  static styles = useStyles([...Control.styles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-range',\n    version: '0.0.0'\n  };\n\n  /** Determines the orientation of the range slider. */\n  @property({ type: String, reflect: true }) orientation: 'vertical' | 'horizontal' = 'horizontal';\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    this._internals.ariaOrientation = this.orientation;\n  }\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.#setTrackWidth();\n    this.input.addEventListener('input', () => this.#setTrackWidth());\n    getElementUpdate(this.input, 'value', (value: unknown) => this.#setTrackWidth(value as number));\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    if (props.has('orientation')) {\n      this._internals.ariaOrientation = this.orientation;\n    }\n  }\n\n  #setTrackWidth(val?: number) {\n    const value = val ?? this.input.valueAsNumber;\n    const min = this.input.min ? parseFloat(this.input.min) : 0;\n    const max = this.input.max ? parseFloat(this.input.max) : 100;\n    this.style.setProperty('--track-width', `${Math.floor(((value - min) / (max - min)) * 100) / 100}`);\n  }\n\n  protected get suffixContent() {\n    const datalist = !isServer ? this.querySelector<HTMLDataListElement>('datalist') : null;\n    return datalist ? this.#renderDatalistTicks(datalist) : nothing;\n  }\n\n  #renderDatalistTicks(datalist: HTMLDataListElement) {\n    const options = Array.from(datalist.options);\n    const min = this.input?.min ? parseFloat(this.input.min) : 0;\n    const max = this.input?.max ? parseFloat(this.input.max) : 100;\n\n    return html`<div class=\"datalist-labels\">\n      ${options.map(option => {\n        const value = parseFloat(option.value);\n        const position = ((value - min) / (max - min)) * 100;\n        const style =\n          this.orientation === 'vertical'\n            ? `bottom: ${position}%; transform: translateY(${position}%)`\n            : `left: ${position}%; transform: translateX(-${position}%)`;\n        return html`<span class=\"datalist-tick\" style=${style}>${option.textContent || value}</span>`;\n      })}\n    </div>`;\n  }\n}\n"],"mappings":";;;;;;;;;AA4BA,IAAa,IAAb,cAA2B,EAAQ;;kCASmD;;;gBARpE,EAAU,CAAC,GAAG,EAAQ,QAAQ,EAAO,CAAC;;;kBAE3B;GACzB,KAAK;GACL,SAAS;GACV;;CAKD,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,EAAoB,MAAM,EAAa,EACvC,KAAK,WAAW,kBAAkB,KAAK;;CAGzC,aAAa,GAA6B;AAIxC,EAHA,MAAM,aAAa,EAAM,EACzB,MAAA,GAAqB,EACrB,KAAK,MAAM,iBAAiB,eAAe,MAAA,GAAqB,CAAC,EACjE,EAAiB,KAAK,OAAO,UAAU,MAAmB,MAAA,EAAoB,EAAgB,CAAC;;CAGjG,QAAQ,GAA6B;AAEnC,EADA,MAAM,QAAQ,EAAM,EAChB,EAAM,IAAI,cAAc,KAC1B,KAAK,WAAW,kBAAkB,KAAK;;CAI3C,GAAe,GAAc;EAC3B,IAAM,IAAQ,KAAO,KAAK,MAAM,eAC1B,IAAM,KAAK,MAAM,MAAM,WAAW,KAAK,MAAM,IAAI,GAAG,GACpD,IAAM,KAAK,MAAM,MAAM,WAAW,KAAK,MAAM,IAAI,GAAG;AAC1D,OAAK,MAAM,YAAY,iBAAiB,GAAG,KAAK,OAAQ,IAAQ,MAAQ,IAAM,KAAQ,IAAI,GAAG,MAAM;;CAGrG,IAAc,gBAAgB;EAC5B,IAAM,IAAY,IAAiE,OAAtD,KAAK,cAAmC,WAAW;AAChF,SAAO,IAAW,MAAA,EAA0B,EAAS,GAAG;;CAG1D,GAAqB,GAA+B;EAClD,IAAM,IAAU,MAAM,KAAK,EAAS,QAAQ,EACtC,IAAM,KAAK,OAAO,MAAM,WAAW,KAAK,MAAM,IAAI,GAAG,GACrD,IAAM,KAAK,OAAO,MAAM,WAAW,KAAK,MAAM,IAAI,GAAG;AAE3D,SAAO,CAAI,gCACP,EAAQ,KAAI,MAAU;GACtB,IAAM,IAAQ,WAAW,EAAO,MAAM,EAChC,KAAa,IAAQ,MAAQ,IAAM,KAAQ;AAKjD,UAAO,CAAI,sCAHT,KAAK,gBAAgB,aACjB,WAAW,EAAS,2BAA2B,EAAS,MACxD,SAAS,EAAS,4BAA4B,EAAS,IACP,IAAG,EAAO,eAAe,EAAM;IACrF,CAAC;;;GAhDN,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA"}

package/dist/resize-handle/define.d.ts

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

package/dist/resize-handle/define.js

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

package/dist/resize-handle/define.js.map

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

package/dist/resize-handle/index.d.ts

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