@nvidia-elements/core 0.0.1 → 0.0.2

package/dist/checkbox/checkbox.examples.json

@@ -0,0 +1,77 @@
+{
+  "element": "nve-checkbox",
+  "entrypoint": "@nvidia-elements/core/checkbox/checkbox.examples.json",
+  "items": [
+    {
+      "id": "core-checkbox_default",
+      "name": "Default",
+      "template": "<nve-checkbox>\n  <label>label</label>\n  <input type=\"checkbox\" checked />\n</nve-checkbox>\n",
+      "summary": "Basic checkbox component with label for binary selection and form input.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-checkbox_states",
+      "name": "States",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox>\n    <label>label</label>\n    <input type=\"checkbox\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox>\n  <nve-checkbox>\n    <label>disabled</label>\n    <input type=\"checkbox\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox>\n  <nve-checkbox>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-checkbox>\n  <nve-checkbox>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-checkbox>\n</div>\n",
+      "summary": "Checkbox states including default, disabled, success, and error with control messages for validation feedback.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-checkbox_vertical-group",
+      "name": "VerticalGroup",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group>\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group>\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group>\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group>\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n",
+      "summary": "Checkbox group with vertical layout for related options stacked in a column with validation states.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-checkbox_vertical-inline-group",
+      "name": "VerticalInlineGroup",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n",
+      "summary": "Checkbox group with vertical inline layout for compact vertical stacking with inline label positioning.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-checkbox_horizontal-group",
+      "name": "HorizontalGroup",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n",
+      "summary": "Checkbox group with horizontal layout for related options arranged in a row, ideal for limited choices.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-checkbox_horizontal-inline-group",
+      "name": "HorizontalInlineGroup",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-checkbox>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-checkbox-group>\n</div>\n",
+      "summary": "Checkbox group with horizontal inline layout for space-efficient horizontal arrangement with inline labels.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-checkbox_indeterminate",
+      "name": "Indeterminate",
+      "template": "<nve-checkbox>\n  <label>checkbox 1</label>\n  <input type=\"checkbox\" checked id=\"indeterminate\" />\n</nve-checkbox>\n<script type=\"module\">\n  document.querySelector(\"#indeterminate\").indeterminate = true;\n</script>\n",
+      "summary": "Checkbox with indeterminate state for representing partial selection or mixed values in hierarchical lists.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/checkbox/checkbox.js

@@ -0,0 +1,6 @@
+//#region src/checkbox/checkbox.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-xs);--border-color: var(--nve-ref-border-color);--background: transparent;--check-color: transparent;display:inline-block;contain:layout}::slotted(input){width:var(--width)!important;height:var(--height)!important;cursor:var(--cursor)!important;margin:0!important;position:absolute!important;opacity:0!important;inset:0!important}[input]{align-items:center;position:relative}@keyframes 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;position:relative;overflow:visible;transition:transform var(--nve-ref-animation-duration-200) cubic-bezier(.12,.32,.54,2),border-color var(--nve-ref-animation-duration-150) ease}[input] slot:before{content:\"\";width:calc(var(--width) * .7);height:calc(var(--width) * .7 / 1.369);aspect-ratio:1.369;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1.05)}@supports not (clip-path: shape(from 0% 0%,line to 100% 100%)){[input] slot:before{clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);width:calc(var(--width) * .6);height:calc(var(--width) * .6);aspect-ratio:1}}@supports (clip-path: shape(from 0% 0%,line to 100% 100%)){[input] slot:before{clip-path:shape(from 98.17% 2.51%,arc by 0% 12.12% of 8% 8.57% small cw,line by -60.51% 82.87%,arc by -8.85% 0% of 8% 8.57% small cw,line to 1.68% 60.34%,arc by .15% -11.91% of 8% 8.58% small cw,arc by 8.7% -.21% of 8% 8.58% small cw,line to 33.23% 79.32%,line by 56.09% -76.81%,arc by 8.85% 0% of 8% 8.57% small cw,close)}}:host(:state(checked)){--background: var(--accent-color);--check-color: var(--nve-sys-text-white-color)}:host(:state(checked)) [input] slot{border:0}:host(:state(checked):state(dirty)) [input] slot{animation:select-pop var(--nve-ref-animation-duration-200) ease-out}:host(:state(checked)) [input] slot:before{background:var(--check-color)}:host(:state(indeterminate)){--background: var(--border-color)}:host(:state(indeterminate)) [input] slot:before{display:none}:host(:state(indeterminate)) [input] slot:after{background:var(--nve-sys-interaction-color);content:\"\";display:inline-block;width:calc(var(--width) * .5);height:var(--border-width);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/checkbox/checkbox.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-xs);\n  --border-color: var(--nve-ref-border-color);\n  --background: transparent;\n  --check-color: transparent;\n  display: inline-block;\n  contain: layout;\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  opacity: 0 !important;\n  inset: 0 !important;\n}\n\n[input] {\n  align-items: center;\n  position: relative;\n}\n\n@keyframes 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  position: relative;\n  overflow: visible;\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}\n\n[input] slot::before {\n  content: '';\n  width: calc(var(--width) * 0.7);\n  height: calc(var(--width) * 0.7 / 1.369);\n  aspect-ratio: 1.369;\n  pointer-events: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1.05);\n}\n\n/* Fallback for browsers that don't support clip-path: shape(). Use polygon-based checkmark as fallback */\n@supports not (clip-path: shape(from 0% 0%, line to 100% 100%)) {\n  [input] slot::before {\n    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);\n    width: calc(var(--width) * 0.6);\n    height: calc(var(--width) * 0.6);\n    aspect-ratio: 1;\n  }\n}\n\n/* Modern browsers with shape() support */\n@supports (clip-path: shape(from 0% 0%, line to 100% 100%)) {\n  [input] slot::before {\n    clip-path: shape(\n      from 98.17% 2.51%,\n      arc by 0% 12.12% of 8% 8.57% small cw,\n      line by -60.51% 82.87%,\n      arc by -8.85% 0% of 8% 8.57% small cw,\n      line to 1.68% 60.34%,\n      arc by 0.15% -11.91% of 8% 8.58% small cw,\n      arc by 8.7% -0.21% of 8% 8.58% small cw,\n      line to 33.23% 79.32%,\n      line by 56.09% -76.81%,\n      arc by 8.85% 0% of 8% 8.57% small cw,\n      close\n    );\n  }\n}\n\n:host(:state(checked)) {\n  --background: var(--accent-color);\n  --check-color: var(--nve-sys-text-white-color);\n}\n\n:host(:state(checked)) [input] slot {\n  border: 0;\n}\n\n:host(:state(checked):state(dirty)) [input] slot {\n  animation: select-pop var(--nve-ref-animation-duration-200) ease-out;\n}\n\n:host(:state(checked)) [input] slot::before {\n  background: var(--check-color);\n}\n\n:host(:state(indeterminate)) {\n  --background: var(--border-color);\n}\n\n:host(:state(indeterminate)) [input] slot::before {\n  display: none;\n}\n\n:host(:state(indeterminate)) [input] slot::after {\n  background: var(--nve-sys-interaction-color); /* eslint-disable-line @nvidia-elements/lint/no-unexpected-css-variable */\n  content: '';\n  display: inline-block;\n  width: calc(var(--width) * 0.5);\n  height: var(--border-width);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n"],"mappings":""}

package/dist/checkbox/checkbox2.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 "./checkbox.js";
+//#region src/checkbox/checkbox.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-checkbox",
+			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 Checkbox };
+
+//# sourceMappingURL=checkbox2.js.map

package/dist/checkbox/checkbox2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox2.js","names":[],"sources":["../../src/checkbox/checkbox.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { CSSResult } from 'lit';\nimport { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './checkbox.css?inline';\n\n/**\n * @element nve-checkbox\n * @description A checkbox is a control that enables users to choose between two distinct mutually exclusive options (checked or unchecked, on or off) through a single click or tap.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/checkbox\n * @cssprop --cursor\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border-width\n * @cssprop --border-radius\n * @cssprop --border-color\n * @cssprop --background\n * @cssprop --check-color\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/\n */\n@audit()\nexport class Checkbox extends Control {\n  @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';\n\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  /** @private - disable for inline control */\n  declare fitText: boolean;\n\n  /** @private - disable for inline control */\n  declare fitContent: boolean;\n\n  static readonly metadata = {\n    tag: 'nve-checkbox',\n    version: '0.0.0',\n    children: ['label', 'input', 'nve-control-message']\n  };\n}\n"],"mappings":";;;;;;;AAwBO,IAAA,IAAA,cAAuB,EAAQ;;iCAC2B;;;gBAElC,EAAU,CAAC,GAAG,EAAQ,QAAQ,EAAO,CAAC;;;kBAQxC;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/checkbox/define.d.ts

@@ -0,0 +1,7 @@
+import { Checkbox, CheckboxGroup } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-checkbox': Checkbox;
+        'nve-checkbox-group': CheckboxGroup;
+    }
+}

package/dist/checkbox/define.js

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

package/dist/checkbox/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/checkbox/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 { Checkbox, CheckboxGroup } from '@nvidia-elements/core/checkbox';\nimport '@nvidia-elements/core/forms/define.js';\n\ndefine(Checkbox);\ndefine(CheckboxGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-checkbox': Checkbox;\n    'nve-checkbox-group': CheckboxGroup;\n  }\n}\n"],"mappings":";;;AAOA,EAAO,EAAS,EAChB,EAAO,EAAc"}

package/dist/checkbox/index.d.ts

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

package/dist/checkbox/index.js

@@ -0,0 +1,3 @@
+import { Checkbox as e } from "./checkbox2.js";
+import { CheckboxGroup as t } from "./checkbox-group2.js";
+export { e as Checkbox, t as CheckboxGroup };

package/dist/color/color.d.ts

@@ -0,0 +1,30 @@
+import { ContainerElement } from '../internal';
+import { Control } from '../forms';
+import { IconButton } from '../icon-button';
+/**
+ * @element nve-color
+ * @description A color picker is a control that enables users to choose a color value.
+ * @since 0.3.0
+ * @entrypoint \@nvidia-elements/core/color
+ * @cssprop --cursor
+ * @csspart icon-button - The eye dropper icon button element
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color
+ */
+export declare class Color extends Control implements ContainerElement {
+    #private;
+    /**
+     * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
+     * Use when embedding within another container such as a toolbar.
+     */
+    container?: 'flat';
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [IconButton.metadata.tag]: typeof IconButton;
+    };
+    protected get suffixContent(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+}

package/dist/color/color.examples.js

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

package/dist/color/color.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.examples.js","names":[],"sources":["../../src/color/color.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/color/define.js';\n\nexport default {\n  title: 'Elements/Color',\n  component: 'nve-color',\n};\n\n/**\n * @summary Basic color picker input with label and message for selecting hex color values.\n */\nexport const Default = {\n  render: () => html`\n<nve-color>\n  <label>label</label>\n  <input type=\"color\" />\n  <nve-control-message>message</nve-control-message>\n</nve-color>\n`\n};\n\n/**\n * @summary Color picker with datalist providing predefined color swatches for quick selection from a color palette.\n */\nexport const Datalist = {\n  render: () => html`\n<nve-color>\n<label>label</label>\n  <input type=\"color\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"#1a6b00\"></option>\n    <option value=\"#448d00\"></option>\n    <option value=\"#69b027\"></option>\n    <option value=\"#8ac057\"></option>\n    <option value=\"#a9d081\"></option>\n    <option value=\"#0758bb\"></option>\n    <option value=\"#0865d8\"></option>\n    <option value=\"#0971f1\"></option>\n    <option value=\"#7298f4\"></option>\n    <option value=\"#a1b7f7\"></option>\n    <option value=\"#b43931\"></option>\n    <option value=\"#d04238\"></option>\n    <option value=\"#e94a3f\"></option>\n    <option value=\"#ee847f\"></option>\n    <option value=\"#f2aba8\"></option>\n  </datalist>\n</nve-color>\n  `\n}\n\n/**\n * @summary Color pickers with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-color>\n    <label>label</label>\n    <input type=\"color\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-color>\n    <label>disabled</label>\n    <input type=\"color\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-color>\n    <label>success</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-color>\n\n  <nve-color>\n    <label>error</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-color>\n</div>`\n};\n\n/**\n * @summary Color pickers with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-color layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"color\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-color layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"color\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-color layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-color>\n\n  <nve-color layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-color>\n</div>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/color/color.examples.json

@@ -0,0 +1,46 @@
+{
+  "element": "nve-color",
+  "entrypoint": "@nvidia-elements/core/color/color.examples.json",
+  "items": [
+    {
+      "id": "core-color_default",
+      "name": "Default",
+      "template": "<nve-color>\n  <label>label</label>\n  <input type=\"color\" />\n  <nve-control-message>message</nve-control-message>\n</nve-color>\n",
+      "summary": "Basic color picker input with label and message for selecting hex color values.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-color_datalist",
+      "name": "Datalist",
+      "template": "<nve-color>\n  <label>label</label>\n  <input type=\"color\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"#1a6b00\"></option>\n    <option value=\"#448d00\"></option>\n    <option value=\"#69b027\"></option>\n    <option value=\"#8ac057\"></option>\n    <option value=\"#a9d081\"></option>\n    <option value=\"#0758bb\"></option>\n    <option value=\"#0865d8\"></option>\n    <option value=\"#0971f1\"></option>\n    <option value=\"#7298f4\"></option>\n    <option value=\"#a1b7f7\"></option>\n    <option value=\"#b43931\"></option>\n    <option value=\"#d04238\"></option>\n    <option value=\"#e94a3f\"></option>\n    <option value=\"#ee847f\"></option>\n    <option value=\"#f2aba8\"></option>\n  </datalist>\n</nve-color>\n",
+      "summary": "Color picker with datalist providing predefined color swatches for quick selection from a color palette.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-color_vertical",
+      "name": "Vertical",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-color>\n    <label>label</label>\n    <input type=\"color\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n  <nve-color>\n    <label>disabled</label>\n    <input type=\"color\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n  <nve-color>\n    <label>success</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-color>\n  <nve-color>\n    <label>error</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-color>\n</div>\n",
+      "summary": "Color pickers with vertical layout including validation states for disabled, success, and error.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-color_horizontal",
+      "name": "Horizontal",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-color layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"color\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n  <nve-color layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"color\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n  <nve-color layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-color>\n  <nve-color layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"color\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-color>\n</div>\n",
+      "summary": "Color pickers with horizontal layout showing validation states for inline forms and compact layouts.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/color/color.global.js

@@ -0,0 +1,6 @@
+//#region src/color/color.global.css?inline
+var e = "nve-color input::-webkit-color-swatch{border:none!important}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=color.global.js.map

package/dist/color/color.global.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.global.js","names":[],"sources":["../../src/color/color.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-color input::-webkit-color-swatch,\nnve-color input::-webkit-color-swatch {\n  border: none !important;\n}\n"],"mappings":""}

package/dist/color/color.js

@@ -0,0 +1,6 @@
+//#region src/color/color.css?inline
+var e = ":host{--cursor: pointer}::slotted(input){padding:0!important;border:0!important;height:auto}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=color.js.map

package/dist/color/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":[],"sources":["../../src/color/color.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}\n\n::slotted(input) {\n  padding: 0 !important;\n  border: 0 !important;\n  height: auto;\n}\n"],"mappings":""}

package/dist/color/color2.js

@@ -0,0 +1,50 @@
+import { appendRootNodeStyle as e, openEyeDropper as t } from "../internal/utils/dom.js";
+import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { scopedRegistry as r } from "../internal/decorators/scoped-registry.js";
+import { useStyles as i } from "../internal/styles/index.js";
+import { Control as a } from "../forms/control/control2.js";
+import { IconButton as o } from "../icon-button/icon-button2.js";
+import { inputStyles as s } from "../input/input2.js";
+import c from "./color.global.js";
+import l from "./color.js";
+import { html as u } from "lit";
+import { property as d } from "lit/decorators/property.js";
+//#region src/color/color.ts
+var f = class extends a {
+	static {
+		this.styles = i([
+			...a.styles,
+			s,
+			l
+		]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-color",
+			version: "0.0.2"
+		};
+	}
+	static {
+		this.elementDefinitions = { [o.metadata.tag]: o };
+	}
+	get suffixContent() {
+		return u`<nve-icon-button part="icon-button" .role="${"button"}" .ariaLabel="${this.i18n.expand}" icon-name="dropper" container="inline" @click="${() => this.#e()}"></nve-icon-button>`;
+	}
+	connectedCallback() {
+		if (super.connectedCallback(), e(this, c), this.input.value === "#000000") {
+			let e = getComputedStyle(this).getPropertyValue("--background").trim();
+			e.includes("#") && (this.input.value = e);
+		}
+	}
+	async #e() {
+		this.input.value = await t(), this.input.dispatchEvent(new Event("input", { bubbles: !0 })), this.input.dispatchEvent(new Event("change", { bubbles: !0 }));
+	}
+};
+n([d({
+	type: String,
+	reflect: !0
+})], f.prototype, "container", void 0), f = n([r()], f);
+//#endregion
+export { f as Color };
+
+//# sourceMappingURL=color2.js.map

package/dist/color/color2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color2.js","names":["#select"],"sources":["../../src/color/color.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { appendRootNodeStyle, openEyeDropper, scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport globalStyles from './color.global.css?inline';\nimport styles from './color.css?inline';\n\n/**\n * @element nve-color\n * @description A color picker is a control that enables users to choose a color value.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/color\n * @cssprop --cursor\n * @csspart icon-button - The eye dropper icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color\n */\n@scopedRegistry()\nexport class Color extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-color',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" .role=${'button'} .ariaLabel=${this.i18n.expand} icon-name=\"dropper\" container=\"inline\" @click=${() => this.#select()}></nve-icon-button>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    if (this.input.value === '#000000') {\n      const color = getComputedStyle(this).getPropertyValue('--background').trim();\n      if (color.includes('#')) {\n        this.input.value = color;\n      }\n    }\n  }\n\n  async #select() {\n    this.input.value = await openEyeDropper();\n    this.input.dispatchEvent(new Event('input', { bubbles: true }));\n    this.input.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAuBO,IAAA,IAAA,cAAoB,EAAoC;;gBAO7C,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;GAAO,CAAC;;;kBAExC;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAW,SAAS,MAAM,GAC5B;;CAED,IAAc,gBAAgB;AAC5B,SAAO,CAAI,8CAA6C,SAAS,gBAAc,KAAK,KAAK,OAAO,yDAAuD,MAAA,GAAc,CAAC;;CAGxK,oBAAoB;AAGlB,MAFA,MAAM,mBAAmB,EACzB,EAAoB,MAAM,EAAa,EACnC,KAAK,MAAM,UAAU,WAAW;GAClC,IAAM,IAAQ,iBAAiB,KAAK,CAAC,iBAAiB,eAAe,CAAC,MAAM;AAC5E,GAAI,EAAM,SAAS,IAAI,KACrB,KAAK,MAAM,QAAQ;;;CAKzB,OAAA,IAAgB;AAGd,EAFA,KAAK,MAAM,QAAQ,MAAM,GAAgB,EACzC,KAAK,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,IAAM,CAAC,CAAC,EAC/D,KAAK,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,IAAM,CAAC,CAAC;;;GA/BjE,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,SAN3C,GAAgB,CAAA,EAAA,EAAA"}

package/dist/color/define.d.ts

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

package/dist/color/define.js

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

package/dist/color/define.js.map

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

package/dist/color/index.d.ts

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

package/dist/color/index.js

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

package/dist/combobox/combobox.d.ts

@@ -0,0 +1,70 @@
+import { PropertyValues, nothing } from 'lit';
+import { ContainerElement } from '../internal';
+import { Control } from '../forms';
+import { Menu, MenuItem } from '../menu';
+import { Dropdown } from '../dropdown';
+import { Tag } from '../tag';
+import { Icon } from '../icon';
+import { Checkbox } from '../checkbox';
+/**
+ * @element nve-combobox
+ * @description An editable combobox with autocomplete behavior and selection support.
+ * @since 0.17.0
+ * @entrypoint \@nvidia-elements/core/combobox
+ * @slot - default slot for an input and a datalist/select element
+ * @slot prefix-icon - slot for icon before the input
+ * @slot footer - slot for dropdown footer content
+ * @cssprop --scroll-height
+ * @cssprop --padding
+ * @cssprop --font-size
+ * @cssprop --height
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --border-radius
+ * @cssprop --border
+ * @cssprop --cursor
+ * @cssprop --font-weight
+ * @cssprop --width
+ * @cssprop --border-color
+ * @cssprop --max-height
+ * @cssprop --text-transform
+ * @csspart tag - The tag element for selected items
+ * @csspart dropdown - The dropdown popup element
+ * @csspart menu - The menu element
+ * @csspart menu-item - The menu item elements
+ * @csspart checkbox - The checkbox element
+ * @csspart icon - The icon element
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
+ */
+export declare class Combobox extends Control implements ContainerElement {
+    #private;
+    /**
+     * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.
+     * Use when embedding within another container such as a toolbar.
+     */
+    container: 'flat';
+    /** Disable rendering of inline tags for many-item select */
+    notags: boolean;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [Checkbox.metadata.tag]: typeof Checkbox;
+        [Icon.metadata.tag]: typeof Icon;
+        [Dropdown.metadata.tag]: typeof Dropdown;
+        [Menu.metadata.tag]: typeof Menu;
+        [MenuItem.metadata.tag]: typeof MenuItem;
+        [Tag.metadata.tag]: typeof Tag;
+    };
+    protected _associateDatalist: boolean;
+    protected get prefixContent(): import('lit-html').TemplateResult<1>;
+    protected get suffixContent(): typeof nothing | import('lit-html').TemplateResult<1>;
+    firstUpdated(props: PropertyValues<this>): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    reset(): void;
+    /** Select all options provided */
+    selectAll(): void;
+}

package/dist/combobox/combobox.examples.js

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

package/dist/combobox/combobox.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.examples.js","names":["#unusedFilters","#removeFilter","#createfilter","#updateFilter","#addFilter","#valueChange"],"sources":["../../src/combobox/combobox.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { choose } from 'lit/directives/choose.js';\nimport '@nvidia-elements/core/progressive-filter-chip/define.js';\nimport '@nvidia-elements/core/combobox/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/tag/define.js';\nimport '@nvidia-elements/core/date/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\n\nexport default {\n  title: 'Elements/Combobox',\n  component: 'nve-combobox',\n};\n\n/**\n * @summary Basic combobox with search input and datalist options for filtering and selection.\n */\nexport const Default = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Vertical layout showing different combobox states (normal, disabled, success, error) stacked for comparison.\n * @tags test-case\n */\nexport const Vertical = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox>\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox>\n    <label>success</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox>\n    <label>error</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-combobox>\n</div>`\n};\n\n/**\n * @summary Horizontal layout showing different combobox states (normal, disabled, success, error) for inline form layouts.\n */\nexport const Horizontal = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-combobox layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"search\" disabled />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-combobox>\n\n  <nve-combobox layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"search\" />\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-combobox>\n</div>`\n};\n\n/**\n * @summary Flat container style with prefix icon for compact inline filtering interfaces.\n */\nexport const Flat = () => {\n  return html`\n  <nve-combobox container=\"flat\">\n    <nve-icon name=\"filter\" slot=\"prefix-icon\"></nve-icon>\n    <input type=\"search\" aria-label=\"search\">\n    <datalist>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </datalist>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Single select allows users only to select from a predefined list\n * of options. Invalid input is automatically cleared. All options are visible\n * on focus until typing begins for filtering.\n */\nexport const Select = () => {\n  return html`\n<nve-combobox>\n  <label>label</label>\n  <input type=\"search\">\n  <select>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n  `\n};\n\n/**\n * @summary Multi select allows users to select many options from a\n * predefined list. The select `value` will only reflect the first selected value.\n * To get all selected options check the `selected` property on each `<option>`\n * or the select property `selectedOptions`.\n * On focus all options will show until the user starts typing. Select is the\n * selection value of the combobox. The input is the filter value.\n */\nexport const MultiSelect = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option selected value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Combobox with an empty initial value using a disabled placeholder option. Use when no default selection exists and the user must make an explicit choice.\n */\nexport const EmptyDefault = () => {\n  return html`\n<nve-combobox>\n  <label>label</label>\n  <input type=\"search\">\n  <select>\n    <option disabled selected></option>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </select>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n  `\n};\n\n/**\n * @summary Combobox options with display labels that differ from underlying values. Use when option values are IDs or codes but users need to see human-readable text in the input.\n */\nexport const Label = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select>\n      <option value=\"1\">Status</option>\n      <option value=\"2\">Priority</option>\n      <option value=\"3\">Date</option>\n      <option value=\"4\">Session</option>\n      <option value=\"5\">Configuration</option>\n      <option value=\"6\">Contains</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select with labeled options where display text differs from option values.\n */\nexport const LabelMultiSelect = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"1\">Status</option>\n      <option value=\"2\">Priority</option>\n      <option value=\"3\">Date</option>\n      <option value=\"4\">Session</option>\n      <option value=\"5\">Configuration</option>\n      <option value=\"6\">Contains</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Overflow behavior where many tags collapse into a simple text label when the parent container is too narrow.\n * @tags test-case\n */\nexport const Overflow = () => {\n  return html`\n  <nve-combobox style=\"width: 250px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option selected value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option selected value=\"date\"></option>\n      <option selected value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Combobox handling of long option text in constrained width containers.\n * @tags test-case\n */\nexport const PopoverOverflow = () => {\n  return html`\n  <nve-combobox style=\"width: 100px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select>\n      <option value=\"really-long-text-option-that-keeps-going\"></option>  \n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select with reset functionality via icon button and footer button to clear all selections.\n */\nexport const Reset = () => {\n  return html`\n  <nve-combobox id=\"combobox-reset\" style=\"width: 500px; --scroll-height: 220px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-icon-button aria-label=\"clear selection\" icon-name=\"cancel\" container=\"inline\"></nve-icon-button>\n    <nve-button slot=\"footer\" aria-label=\"clear selection\" container=\"flat\">reset</nve-button>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <script type=\"module\">\n    document.querySelector('#combobox-reset nve-icon-button').addEventListener('click', e => e.target.parentElement.reset());\n    document.querySelector('#combobox-reset nve-button').addEventListener('click', e => e.target.parentElement.reset());\n  </script>\n  `\n};\n\n/**\n * @summary Multi-select with footer action button for extra operations on selected items.\n */\nexport const Footer = () => {\n  return html`\n  <nve-combobox style=\"width: 500px; --scroll-height: 200px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n      <option value=\"includes\"></option>\n      <option value=\"user\"></option>\n      <option value=\"progress\"></option>\n    </select>\n    <nve-button slot=\"footer\" container=\"flat\">action</nve-button>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select with bulk selection controls (Select All/Deselect All) in footer for efficient mass operations.\n */\nexport const SelectAll = () => {\n  return html`\n  <nve-combobox id=\"combobox-select-all\" style=\"width: 500px; --scroll-height: 200px\">\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"status\"></option>\n      <option value=\"priority\"></option>\n      <option value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n      <option value=\"includes\"></option>\n      <option value=\"user\"></option>\n      <option value=\"progress\"></option>\n    </select>\n    <div slot=\"footer\" nve-layout=\"row align:stretch full\">\n      <nve-button container=\"flat\">Select All</nve-button>\n      <nve-button container=\"flat\">Deselect All</nve-button>\n    </div>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  <script type=\"module\">\n    const combobox = document.querySelector('#combobox-select-all');\n    const [selectAll, deselectAll] = Array.from(combobox.querySelectorAll('nve-button'));\n\n    selectAll.addEventListener('click', () => combobox.selectAll());\n    deselectAll.addEventListener('click', () => combobox.reset());\n    combobox.addEventListener('change', e => console.log(e.target.selectedOptions));\n  </script>\n  `\n};\n\n/**\n * @summary Multi-select with disabled options to show unavailable choices while maintaining visual context.\n */\nexport const DisabledOptions = () => {\n  return html`\n  <nve-combobox>\n    <label>label</label>\n    <input type=\"search\">\n    <select multiple>\n      <option value=\"status\" disabled></option>\n      <option value=\"priority\" disabled></option>\n      <option value=\"date\" disabled></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n  `\n};\n\n/**\n * @summary Multi-select without built-in tags, using external tag management for custom selection display.\n */\nexport const NoTags = () => {\n  return html`\n  <form id=\"notags\" nve-layout=\"column gap:lg align:stretch\">\n    <nve-combobox notags>\n      <label>label</label>\n      <input type=\"search\">\n      <select multiple>\n        <option selected value=\"status\"></option>\n        <option selected value=\"priority\"></option>\n        <option value=\"date\"></option>\n        <option value=\"session\"></option>\n        <option value=\"configuration\"></option>\n        <option value=\"contains\"></option>\n      </select>\n    </nve-combobox>\n    <div id=\"tags\" nve-layout=\"row gap:xs\">\n    </div>\n  </form>\n  <script type=\"module\">\n    const form = document.querySelector('#notags');\n    const select = form.querySelector('select');\n    const tags = form.querySelector('#tags');\n    updateTags();\n    select.addEventListener('change', e => updateTags());\n    tags.addEventListener('close', e => {\n      Array.from(select.options).find(o => o.value === e.target.value).selected = false;\n      updateTags();\n    });\n    function updateTags() {\n      tags.innerHTML = '';\n      Array.from(select.selectedOptions).forEach(o => tags.innerHTML += '<nve-tag closable value=\"' + o.value + '\">' + o.value + '</nve-tag>');\n    }\n  </script>\n  `\n};\n\n/**\n * @summary Complete form integration showing combobox with form submission, reset, and programmatic value setting.\n */\nexport const Form = () => {\n  return html`\n<form nve-layout=\"column gap:lg align:stretch\">\n  <nve-combobox style=\"--scroll-height: 220px\">\n    <label>label</label>\n    <input type=\"search\" name=\"input\">\n    <select multiple name=\"select\" value=\"priority\">\n      <option value=\"status\"></option>\n      <option selected value=\"priority\"></option>\n      <option selected value=\"date\"></option>\n      <option value=\"session\"></option>\n      <option value=\"configuration\"></option>\n      <option value=\"contains\"></option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-combobox>\n\n  <div nve-layout=\"row gap:xs\">\n    <nve-button type=\"button\">set</nve-button>\n    <nve-button type=\"reset\">reset</nve-button>\n    <nve-button type=\"submit\">submit</nve-button>\n  </div>\n</form>\n\n<script type=\"module\">\n  const form = document.querySelector('form');\n  const select = document.querySelector('select');\n  const input = document.querySelector('input');\n  const btn = document.querySelector('[type=button]');\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    const formData = new FormData(form);\n    console.log('input: ', formData.get('input'));\n    console.log('select: ', formData.get('select'));\n    console.log('selectedOptions: ', Array.from(select.selectedOptions).map(o => o.value));\n  });\n\n  btn.addEventListener('click', () => {\n    select.value = 'status';\n    select.options[0].selected = true;\n    input.value = 'test';\n  });\n</script>\n  `\n};\n\n/**\n * @summary Fetches options asynchronously as the user types, cancelling stale requests with AbortController. Use for server-backed search where the full option set is too large to load up front.\n * @tags pattern\n */\nexport const DynamicTypeaheadSearch = () => {\n  return html`\n<nve-combobox id=\"combobox\">\n  <label>GPU Search</label>\n  <input type=\"search\" placeholder=\"Type to search…\" />\n  <datalist>\n    <option disabled selected></option>\n  </datalist>\n</nve-combobox>\n\n<script type=\"module\">\n  const combobox = document.getElementById('combobox');\n  const input = combobox.querySelector('input');\n  const datalist = combobox.querySelector('datalist');\n\n  let controller = null;\n  input.addEventListener('input', async () => {\n    if (controller) controller.abort();\n    controller = new AbortController();\n\n    const query = input.value.trim();\n    if (!query) {\n      datalist.innerHTML = '';\n      return;\n    }\n    try {\n      const results = await mockFetch(query, controller.signal);\n      datalist.innerHTML = results.map((v) => '<option value=\"' + v + '\">').join('');\n    } catch (err) {\n      if (err.name !== 'AbortError') datalist.innerHTML = '';\n    }\n  });\n\n  function mockFetch(query, signal) {\n    return new Promise((resolve, reject) => {\n      const timer = setTimeout(() => {\n        resolve(['A100 GPU', 'H100 GPU', 'H200 GPU', 'DGX A100', 'DGX H100', 'CUDA Toolkit'].filter((v) => v.toLowerCase().startsWith(query.toLowerCase())));\n      }, 500);\n      signal.addEventListener('abort', () => {\n        clearTimeout(timer);\n        reject(new DOMException('Aborted', 'AbortError'));\n      });\n    });\n  }\n</script>\n  `\n}\n\n/**\n * @summary Performance test with 1000 options to show filtering efficiency with large datasets.\n * @tags test-case performance\n */\nexport const Performance = () => {\n  return html`\n<nve-combobox id=\"performance-combobox\">\n  <input type=\"search\" aria-label=\"performance test\">\n  <datalist></datalist>\n</nve-combobox>\n<script type=\"module\">\n  const datalist = document.querySelector('#performance-combobox datalist');\n  const options = new Array(1000).fill('').map((_, i) => {\n    const option = document.createElement('option');\n    option.value = i + ' item';\n    return option;\n  });\n  datalist.append(...options);\n</script>`\n}\n\n/* eslint-disable @nvidia-elements/lint/no-missing-slotted-elements */\n/**\n * @summary Performance test with 1000 options to show filtering efficiency with large datasets.\n * @tags test-case performance\n */\nexport const PerformanceSelect = () => {\n  return html`\n<div nve-layout=\"pad:lg\">\n  <nve-combobox id=\"performance-combobox\">\n    <input type=\"search\" aria-label=\"performance test\">\n    <select multiple></select>\n  </nve-combobox>\n</div>\n<script type=\"module\">\n  const select = document.querySelector('#performance-combobox select');\n  const options = new Array(1000).fill('').map((_, i) => {\n    const option = document.createElement('option');\n    option.value = i + ' item';\n    return option;\n  });\n  select.append(...options);\n</script>`\n}\n\n/**\n * @summary Dynamic options with datalist and select variants of combobox.\n * @tags test-case\n */\nexport const DynamicOptions = () => {\n  return html`\n<nve-combobox id=\"dynamic-options-combobox\">\n  <input type=\"search\" aria-label=\"performance test\" />\n  <datalist>\n    <option>default</option>\n  </datalist>\n</nve-combobox>\n<script type=\"module\">\n  let i = 0;\n  setInterval(function() {\n    if (i > 100) clearInterval(interval);\n    const datalist = document.querySelector(\"#dynamic-options-combobox datalist\");\n    const option = document.createElement(\"option\");\n    option.value = i + \" item\";\n    datalist.append(option);\n    i++;\n    console.log('append');\n  }, 1000);\n</script>\n  `\n}\n\n/**\n * @summary Interactive demo showing progressive filter chips with dynamic combobox creation for complex filtering interfaces.\n * @tags test-case\n */\nexport const FilterDemo = {\n  render: () => html`<combobox-demo></combobox-demo>`\n}\n\nconst schema = {\n  status: {\n    type: 'select',\n    options: ['success', 'failure', 'processing'],\n    initial: 'success'\n  },\n  priority: {\n    type: 'select',\n    options: ['high', 'medium', 'low'],\n    initial: 'high'\n  },\n  created: {\n    type: 'date',\n    initial: new Date()\n  },\n  progress: {\n    type: 'number',\n    initial: 0\n  },\n  sessionId: {\n    type: 'text',\n    initial: ''\n  }\n};\n\n\nclass ComboboxDemo extends LitElement {\n  @state() private value = [{ name: '', value: '' }];\n\n  // todo\n  /* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n  render() {\n    return html`\n      <nve-button id=\"filter-btn\" ?pressed=${!!this.value.filter(v => v.name.length).length}><nve-icon name=\"filter\"></nve-icon> </nve-icon>filters</nve-button>\n      <nve-dropdown id=\"one\" hidden trigger=\"filter-btn\" anchor=\"filter-btn\" @open=${e => e.target.hidden = false} @close=${e => e.target.hidden = true} style=\"--min-width: 400px; --min-height: 500px;\">\n        <progressive-filter-demo @change=${e => this.value = e.detail} .value=${this.value} .schema=${schema}></progressive-filter-demo>\n      </nve-dropdown>\n      <pre style=\"margin-top: 300px\">${JSON.stringify(this.value.filter(v => v.name.length), null, 2)}</pre>\n    `;\n  }\n}\n\ncustomElements.get('combobox-demo') || customElements.define('combobox-demo', ComboboxDemo);\n\nclass ProgressiveFilterDemo extends LitElement {\n  static styles = [unsafeCSS(`\n    :host {\n      display: flex;\n      flex-direction: column;\n      gap: var(--nve-ref-space-xs);\n    }\n\n    nve-progressive-filter-chip {\n      width: 100%;\n    }\n  `)];\n\n  @property({ type: Object }) schema = {};\n\n  @property({ type: Array }) value: { name: string, value: string }[] = [{ name: '', value: '' }];\n\n  get #unusedFilters() {\n    return Object.entries(this.schema).filter(([key]) => !this.value.find(f => f.name === key));\n  }\n\n  render() {\n    return html`\n      ${this.value.map(filter => html`\n      <nve-progressive-filter-chip closable @close=${() => this.#removeFilter(filter)}>\n        <nve-combobox>\n          <span slot=\"prefix-icon\"></span>\n          <input type=\"search\" placeholder=\"filter\" .value=${filter.name} @change=${e => this.#createfilter(e.target.value, filter)} aria-label=\"filter\" />\n          <datalist>${this.#unusedFilters.map(([key]) => html`<option .value=${key}>${key}</option>`)}</datalist>\n        </nve-combobox>\n        ${choose(this.schema[filter.name]?.type, [\n      ['text', () => html`<nve-combobox><input type=\"text\" @change=${e => this.#updateFilter(e.target.value, filter)} .value=${filter.value} placeholder=\"value\" aria-label=\"filter value\" /></nve-combobox>`],\n      ['number', () => html`<nve-combobox><input type=\"number\" @change=${e => this.#updateFilter(e.target.value, filter)} .value=${filter.value} aria-label=\"filter value\" /></nve-combobox>`],\n      ['date', () => html`<nve-date><input type=\"date\" @change=${e => this.#updateFilter(e.target.value, filter)} .value=${filter.value} aria-label=\"filter value\" /></nve-date>`],\n      ['select', () => html`<nve-select><select @change=${e => this.#updateFilter(e.target.value, filter)} value=${filter.value} aria-label=\"filter value\">${this.schema[filter.name]?.options?.map(v => html`<option value=${v}>${v}</option>`)}</select></nve-select>`]\n    ], () => html`<nve-combobox><input type=\"text\" placeholder=\"value\" disabled aria-label=\"filter value\" /></nve-combobox>`)}\n      </nve-progressive-filter-chip>`)}\n      <nve-button container=\"flat\" @click=${this.#addFilter} .disabled=${this.#unusedFilters.length === 0 || !!this.value.find(v => v.name === '')} style=\"align: center; margin-top: 12px;\">\n        <nve-icon name=\"add\"></nve-icon> Add Filter\n      </nve-button>\n    `;\n  }\n\n  #addFilter() {\n    this.value = [...this.value, { name: '', value: '' }];\n    this.#valueChange();\n  }\n\n  #removeFilter(filter: { name: string, value: string }) {\n    this.value = this.value.filter(o => o.name !== filter.name);\n    this.#valueChange();\n  }\n\n  #updateFilter(value: string, filter: { name: string, value: string }) {\n    this.value = this.value.map(v => v.name === filter.name ? { ...filter, value } : v);\n    this.#valueChange();\n  }\n\n  #createfilter(name, filter: { name: string, value: string }) {\n    this.value = this.value.map(v => v.name === filter.name ? { name, value: this.schema[name]?.initial ?? '' } : v);\n    this.#valueChange();\n  }\n\n  #valueChange() {\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value }));\n  }\n}\n\ncustomElements.get('progressive-filter-demo') || customElements.define('progressive-filter-demo', ProgressiveFilterDemo);\n"],"mappings":";AAGA,IAAA,IAAe"}