@nvidia-elements/core 0.0.1 → 0.0.3

package/dist/internal/services/transition.service.js

@@ -0,0 +1,32 @@
+var e = new class {
+	get #e() {
+		return globalThis.document.querySelector("[type=speculationrules]");
+	}
+	get #t() {
+		return globalThis.document.documentElement.getAttribute("nve-transition");
+	}
+	#n;
+	enable() {
+		globalThis.document && (this.#n?.disconnect(), this.#r(), this.#n = new MutationObserver(() => this.#r()), this.#n.observe(globalThis.document.documentElement, { attributeFilter: ["nve-transition"] }));
+	}
+	disable() {
+		this.#a(), this.#n?.disconnect();
+	}
+	#r() {
+		globalThis.document && this.#t === "auto" ? this.#e || this.#i() : this.#a();
+	}
+	#i() {
+		let e = globalThis.document.createElement("script");
+		e.id = "nve-speculationrules", e.type = "speculationrules", e.textContent = JSON.stringify({ prerender: [{
+			where: { href_matches: "/*" },
+			eagerness: "moderate"
+		}] }), globalThis.document.head.appendChild(e);
+	}
+	#a() {
+		globalThis.document?.querySelector("#nve-speculationrules")?.remove();
+	}
+}();
+//#endregion
+export { e as TransitionService };
+
+//# sourceMappingURL=transition.service.js.map

package/dist/internal/services/transition.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition.service.js","names":["#hasSpeculationRules","#nveTransition","#observer","#toggleSpeculationRules","#removeSpeculationRules","#appendSpeculationRules"],"sources":["../../../src/internal/services/transition.service.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nclass TransitionService_ {\n  get #hasSpeculationRules() {\n    return globalThis.document.querySelector('[type=speculationrules]');\n  }\n\n  get #nveTransition() {\n    return globalThis.document.documentElement.getAttribute('nve-transition');\n  }\n\n  #observer: MutationObserver;\n\n  enable() {\n    if (globalThis.document) {\n      this.#observer?.disconnect();\n      this.#toggleSpeculationRules();\n      this.#observer = new MutationObserver(() => this.#toggleSpeculationRules());\n      this.#observer.observe(globalThis.document.documentElement, {\n        attributeFilter: ['nve-transition']\n      });\n    }\n  }\n\n  disable() {\n    this.#removeSpeculationRules();\n    this.#observer?.disconnect();\n  }\n\n  #toggleSpeculationRules() {\n    if (globalThis.document && this.#nveTransition === 'auto') {\n      if (!this.#hasSpeculationRules) {\n        this.#appendSpeculationRules();\n      }\n    } else {\n      this.#removeSpeculationRules();\n    }\n  }\n\n  #appendSpeculationRules() {\n    const speculationRules = globalThis.document.createElement('script');\n    speculationRules.id = 'nve-speculationrules';\n    speculationRules.type = 'speculationrules';\n    speculationRules.textContent = JSON.stringify({\n      prerender: [\n        {\n          where: { href_matches: '/*' },\n          eagerness: 'moderate'\n        }\n      ]\n    });\n    globalThis.document.head.appendChild(speculationRules);\n  }\n\n  #removeSpeculationRules() {\n    globalThis.document?.querySelector('#nve-speculationrules')?.remove();\n  }\n}\n\n/**\n * The Transition Service provides setup to enable View Transitions APIs.\n * This includes initializing base speculation rules for smooth transition between navigations.\n *\n * https://developer.chrome.com/docs/web-platform/view-transitions/cross-document\n * https://developer.chrome.com/docs/web-platform/prerender-pages#speculation-rules-api\n */\nexport const TransitionService = new TransitionService_();\n"],"mappings":"AAmEA,IAAa,IAAoB,IAhEjC,MAAyB;CACvB,KAAA,IAA2B;AACzB,SAAO,WAAW,SAAS,cAAc,0BAA0B;;CAGrE,KAAA,IAAqB;AACnB,SAAO,WAAW,SAAS,gBAAgB,aAAa,iBAAiB;;CAG3E;CAEA,SAAS;AACP,EAAI,WAAW,aACb,MAAA,GAAgB,YAAY,EAC5B,MAAA,GAA8B,EAC9B,MAAA,IAAiB,IAAI,uBAAuB,MAAA,GAA8B,CAAC,EAC3E,MAAA,EAAe,QAAQ,WAAW,SAAS,iBAAiB,EAC1D,iBAAiB,CAAC,iBAAiB,EACpC,CAAC;;CAIN,UAAU;AAER,EADA,MAAA,GAA8B,EAC9B,MAAA,GAAgB,YAAY;;CAG9B,KAA0B;AACxB,EAAI,WAAW,YAAY,MAAA,MAAwB,SAC5C,MAAA,KACH,MAAA,GAA8B,GAGhC,MAAA,GAA8B;;CAIlC,KAA0B;EACxB,IAAM,IAAmB,WAAW,SAAS,cAAc,SAAS;AAWpE,EAVA,EAAiB,KAAK,wBACtB,EAAiB,OAAO,oBACxB,EAAiB,cAAc,KAAK,UAAU,EAC5C,WAAW,CACT;GACE,OAAO,EAAE,cAAc,MAAM;GAC7B,WAAW;GACZ,CACF,EACF,CAAC,EACF,WAAW,SAAS,KAAK,YAAY,EAAiB;;CAGxD,KAA0B;AACxB,aAAW,UAAU,cAAc,wBAAwB,EAAE,QAAQ;;GAWhB"}

package/dist/internal/styles/base.js

@@ -0,0 +1,6 @@
+//#region src/internal/styles/base.css?inline
+var e = ":host{all:initial;display:block;visibility:inherit;box-sizing:border-box;font-size:inherit;pointer-events:inherit;contain:layout;font-family:var(--nve-ref-font-family);outline:var(--nve-debug-element-outline, initial);color-scheme:var(--nve-sys-color-scheme)}*,*:before,*:after{box-sizing:inherit}[hidden],:host([hidden]:not([nve-popover])){display:none!important}slot{display:contents}:host(:focus-within) [focus-within],:host(:focus) [focusable],:host([tabindex=\"0\"]:focus) [focusable]{outline:Highlight solid 2px!important;outline:5px auto -webkit-focus-ring-color!important}:host([nofocus]) [focus-within]{outline:0!important}:host(:focus-within:not(:focus-visible,[readonly])) [focus-within]:not([focusable=active]),:host(:focus:not(:focus-visible)) [focusable]:not([focusable=active]),:host([tabindex=\"0\"]:focus:not(:focus-visible)) [focusable]:not([focusable=active]){outline:none!important;outline-offset:0!important}@supports selector(:state(focus)){:host(:state(focus)) [focusable],:host([tabindex=\"0\"]:state(focus)){outline:Highlight solid 2px!important;outline:5px auto -webkit-focus-ring-color!important}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=base.js.map

package/dist/internal/styles/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","names":[],"sources":["../../../src/internal/styles/base.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n/**\n * https://web.dev/custom-elements-best-practices/\n * Base CSS for all custom elements.\n */\n\n:host {\n  all: initial;\n  display: block;\n  visibility: inherit;\n  box-sizing: border-box;\n  font-size: inherit;\n  pointer-events: inherit;\n  contain: layout; /* https://developer.mozilla.org/en-US/docs/Web/CSS/contain */\n  font-family: var(--nve-ref-font-family);\n  outline: var(--nve-debug-element-outline, initial);\n  color-scheme: var(--nve-sys-color-scheme);\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: inherit;\n}\n\n/* https://developers.google.com/web/fundamentals/web-components/best-practices#add-a-:host-display-style-that-respects-the-hidden-attribute */\n[hidden],\n:host([hidden]:not([nve-popover])) {\n  display: none !important;\n}\n\nslot {\n  display: contents;\n}\n\n/* https://coryrylan.com/blog/dont-override-css-outline-focus-styles */\n:host(:focus-within) [focus-within],\n:host(:focus) [focusable],\n:host([tabindex='0']:focus) [focusable] {\n  outline: Highlight solid 2px !important;\n  outline: 5px auto -webkit-focus-ring-color !important;\n}\n\n:host([nofocus]) [focus-within] {\n  outline: 0 !important;\n}\n\n:host(:focus-within:not(:focus-visible, [readonly])) [focus-within]:not([focusable='active']),\n:host(:focus:not(:focus-visible)) [focusable]:not([focusable='active']),\n:host([tabindex='0']:focus:not(:focus-visible)) [focusable]:not([focusable='active']) {\n  outline: none !important;\n  outline-offset: 0 !important;\n}\n\n@supports selector(:state(focus)) {\n  :host(:state(focus)) [focusable],\n  :host([tabindex='0']:state(focus)) {\n    outline: Highlight solid 2px !important;\n    outline: 5px auto -webkit-focus-ring-color !important;\n  }\n}\n"],"mappings":""}

package/dist/internal/styles/color.state.js

@@ -0,0 +1,6 @@
+//#region src/internal/styles/color.state.css?inline
+var e = ":host{--state-color-base: var(--nve-sys-status-color);--state-color-background: color-mix( in oklab, var(--state-color-base) var(--nve-sys-contrast-mute-ratio), var(--nve-sys-contrast-mute-color) );--state-color: color-mix(in oklab, var(--state-color-base), var(--nve-sys-text-emphasis-color) 16%)}:host([prominence=\"emphasis\"]){--background: var(--state-color);--color: var(--nve-sys-contrast-mute-color)}:host([color=\"red-cardinal\"]){--state-color-base: var(--nve-ref-color-red-cardinal-1100)}:host([color=\"gray-slate\"]){--state-color-base: var(--nve-ref-color-gray-slate-1100)}:host([color=\"gray-denim\"]){--state-color-base: var(--nve-ref-color-gray-denim-1100)}:host([color=\"blue-indigo\"]){--state-color-base: var(--nve-ref-color-blue-indigo-1100)}:host([color=\"blue-cobalt\"]){--state-color-base: var(--nve-ref-color-blue-cobalt-1100)}:host([color=\"blue-sky\"]){--state-color-base: var(--nve-ref-color-blue-sky-1100)}:host([color=\"teal-cyan\"]){--state-color-base: var(--nve-ref-color-teal-cyan-1100)}:host([color=\"green-mint\"]){--state-color-base: var(--nve-ref-color-green-mint-1100)}:host([color=\"teal-seafoam\"]){--state-color-base: var(--nve-ref-color-teal-seafoam-1100)}:host([color=\"green-grass\"]){--state-color-base: var(--nve-ref-color-green-grass-1100)}:host([color=\"yellow-amber\"]){--state-color-base: var(--nve-ref-color-yellow-amber-1100)}:host([color=\"orange-pumpkin\"]){--state-color-base: var(--nve-ref-color-orange-pumpkin-1100)}:host([color=\"red-tomato\"]){--state-color-base: var(--nve-ref-color-red-tomato-1100)}:host([color=\"pink-magenta\"]){--state-color-base: var(--nve-ref-color-pink-magenta-1100)}:host([color=\"purple-plum\"]){--state-color-base: var(--nve-ref-color-purple-plum-1100)}:host([color=\"purple-violet\"]){--state-color-base: var(--nve-ref-color-purple-violet-1100)}:host([color=\"purple-lavender\"]){--state-color-base: var(--nve-ref-color-purple-lavender-1100)}:host([color=\"pink-rose\"]){--state-color-base: var(--nve-ref-color-pink-rose-1100)}:host([color=\"green-jade\"]){--state-color-base: var(--nve-ref-color-green-jade-1100)}:host([color=\"lime-pear\"]){--state-color-base: var(--nve-ref-color-lime-pear-1100)}:host([color=\"yellow-nova\"]){--state-color-base: var(--nve-ref-color-yellow-nova-1100)}:host([color=\"brand-green\"]){--state-color-base: var(--nve-ref-color-brand-green-1100)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=color.state.js.map

package/dist/internal/styles/color.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.state.js","names":[],"sources":["../../../src/internal/styles/color.state.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  --state-color-base: var(--nve-sys-status-color);\n  --state-color-background: color-mix(\n    in oklab,\n    var(--state-color-base) var(--nve-sys-contrast-mute-ratio),\n    var(--nve-sys-contrast-mute-color)\n  );\n  --state-color: color-mix(in oklab, var(--state-color-base), var(--nve-sys-text-emphasis-color) 16%);\n}\n\n:host([prominence='emphasis']) {\n  --background: var(--state-color);\n  --color: var(--nve-sys-contrast-mute-color);\n}\n\n:host([color='red-cardinal']) {\n  --state-color-base: var(--nve-ref-color-red-cardinal-1100);\n}\n\n:host([color='gray-slate']) {\n  --state-color-base: var(--nve-ref-color-gray-slate-1100);\n}\n\n:host([color='gray-denim']) {\n  --state-color-base: var(--nve-ref-color-gray-denim-1100);\n}\n\n:host([color='blue-indigo']) {\n  --state-color-base: var(--nve-ref-color-blue-indigo-1100);\n}\n\n:host([color='blue-cobalt']) {\n  --state-color-base: var(--nve-ref-color-blue-cobalt-1100);\n}\n\n:host([color='blue-sky']) {\n  --state-color-base: var(--nve-ref-color-blue-sky-1100);\n}\n\n:host([color='teal-cyan']) {\n  --state-color-base: var(--nve-ref-color-teal-cyan-1100);\n}\n\n:host([color='green-mint']) {\n  --state-color-base: var(--nve-ref-color-green-mint-1100);\n}\n\n:host([color='teal-seafoam']) {\n  --state-color-base: var(--nve-ref-color-teal-seafoam-1100);\n}\n\n:host([color='green-grass']) {\n  --state-color-base: var(--nve-ref-color-green-grass-1100);\n}\n\n:host([color='yellow-amber']) {\n  --state-color-base: var(--nve-ref-color-yellow-amber-1100);\n}\n\n:host([color='orange-pumpkin']) {\n  --state-color-base: var(--nve-ref-color-orange-pumpkin-1100);\n}\n\n:host([color='red-tomato']) {\n  --state-color-base: var(--nve-ref-color-red-tomato-1100);\n}\n\n:host([color='pink-magenta']) {\n  --state-color-base: var(--nve-ref-color-pink-magenta-1100);\n}\n\n:host([color='purple-plum']) {\n  --state-color-base: var(--nve-ref-color-purple-plum-1100);\n}\n\n:host([color='purple-violet']) {\n  --state-color-base: var(--nve-ref-color-purple-violet-1100);\n}\n\n:host([color='purple-lavender']) {\n  --state-color-base: var(--nve-ref-color-purple-lavender-1100);\n}\n\n:host([color='pink-rose']) {\n  --state-color-base: var(--nve-ref-color-pink-rose-1100);\n}\n\n:host([color='green-jade']) {\n  --state-color-base: var(--nve-ref-color-green-jade-1100);\n}\n\n:host([color='lime-pear']) {\n  --state-color-base: var(--nve-ref-color-lime-pear-1100);\n}\n\n:host([color='yellow-nova']) {\n  --state-color-base: var(--nve-ref-color-yellow-nova-1100);\n}\n\n:host([color='brand-green']) {\n  --state-color-base: var(--nve-ref-color-brand-green-1100);\n}\n"],"mappings":""}

package/dist/internal/styles/index.d.ts

@@ -0,0 +1,4 @@
+export declare const colorStateStyles: string;
+export declare const statusStateStyles: string;
+export declare const supportStateStyles: string;
+export declare function useStyles(styles: unknown[]): import('lit').CSSResult[];

package/dist/internal/styles/index.js

@@ -0,0 +1,19 @@
+import e from "./base.js";
+import t from "./interaction-state.js";
+import n from "./color.state.js";
+import r from "./status.state.js";
+import i from "./support.state.js";
+import { unsafeCSS as a } from "lit";
+//#region src/internal/styles/index.ts
+var o = n, s = r, c = i;
+function l(n) {
+	return [
+		a(e),
+		a(t),
+		...n.map((e) => a(e))
+	];
+}
+//#endregion
+export { o as colorStateStyles, s as statusStateStyles, c as supportStateStyles, l as useStyles };
+
+//# sourceMappingURL=index.js.map

package/dist/internal/styles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/internal/styles/index.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { unsafeCSS } from 'lit';\nimport base from './base.css?inline';\nimport state from './interaction-state.css?inline';\nimport _colorStateStyles from './color.state.css?inline';\nimport _statusStateStyles from './status.state.css?inline';\nimport _supportStateStyles from './support.state.css?inline';\n\nexport const colorStateStyles = _colorStateStyles;\n\nexport const statusStateStyles = _statusStateStyles;\n\nexport const supportStateStyles = _supportStateStyles;\n\nexport function useStyles(styles: unknown[]) {\n  return [unsafeCSS(base), unsafeCSS(state), ...styles.map(s => unsafeCSS(s))];\n}\n"],"mappings":";;;;;;;AAUA,IAAa,IAAmB,GAEnB,IAAoB,GAEpB,IAAqB;AAElC,SAAgB,EAAU,GAAmB;AAC3C,QAAO;EAAC,EAAU,EAAK;EAAE,EAAU,EAAM;EAAE,GAAG,EAAO,KAAI,MAAK,EAAU,EAAE,CAAC;EAAC"}

package/dist/internal/styles/interaction-state.js

@@ -0,0 +1,6 @@
+//#region src/internal/styles/interaction-state.css?inline
+var e = "[interaction-state]{background-image:var( --background-image, linear-gradient( color-mix( in oklab, var(--nve-sys-interaction-state-base) 100%, var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio) ) 0 0 ) )!important}:host(:hover) [interaction-state],:host(:state(hover)) [interaction-state]{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}:host(:active) [interaction-state],:host(:state(active)) [interaction-state]{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-active)}:host([selected]) [interaction-state],:host(:state(selected)) [interaction-state]{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected)}:host([current]) [interaction-state],:host(:state(current)) [interaction-state]{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected)}:host([disabled]) [interaction-state],:host(:state(disabled)) [interaction-state]{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-disabled)}:host(:not(:state(anchor))[readonly]) [interaction-state],:host(:not(:state(anchor)):state(readonly)) [interaction-state]{--nve-sys-interaction-state-ratio: 0}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=interaction-state.js.map

package/dist/internal/styles/interaction-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interaction-state.js","names":[],"sources":["../../../src/internal/styles/interaction-state.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n[interaction-state] {\n  background-image: var(\n    --background-image,\n    linear-gradient(\n      color-mix(\n          in oklab,\n          var(--nve-sys-interaction-state-base) 100%,\n          var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)\n        )\n        0 0\n    )\n  ) !important;\n}\n\n:host(:hover) [interaction-state],\n:host(:state(hover)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host(:active) [interaction-state],\n:host(:state(active)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-active);\n}\n\n:host([selected]) [interaction-state],\n:host(:state(selected)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n\n:host([current]) [interaction-state],\n:host(:state(current)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n\n:host([disabled]) [interaction-state],\n:host(:state(disabled)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-disabled);\n}\n\n:host(:not(:state(anchor))[readonly]) [interaction-state],\n:host(:not(:state(anchor)):state(readonly)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0;\n}\n"],"mappings":""}

package/dist/internal/styles/popover.d.ts

@@ -0,0 +1 @@
+export declare const popoverStyles: string;

package/dist/internal/styles/popover.js

@@ -0,0 +1,6 @@
+//#region src/internal/styles/popover.css?inline
+var e = ":host{--animation-duration: var(--nve-ref-animation-duration-200);margin:calc(var(--nve-sys-layer-popover-offset) + calc(var(--nve-sys-layer-popover-arrow-offset) * 2));border:0;padding:0;background:none;position:fixed;overflow:visible;contain:initial;width:max-content;z-index:99;inset:revert;interest-delay-start:.5s}:host([popover]){opacity:0;pointer-events:none}:host(:state(transition-start)){transition-duration:var(--animation-duration);transition-timing-function:ease-in-out;transition-property:opacity,display,overlay,translate,transform;transition-behavior:allow-discrete}@supports not (container-type: anchored){:host{--animation-duration: 0}}:host(:popover-open){opacity:1;pointer-events:initial;@starting-style{opacity:0}}:host(:not([nve-popover])),:host([defer-hydration]){opacity:0!important;pointer-events:none!important}[internal-host]{width:var(--width);min-width:var(--min-width);font-family:inherit;display:flex;flex-direction:column;overflow:visible;white-space:nowrap;z-index:9999;border:0;margin:0;user-select:text}@supports (position-area: bottom){[internal-host]{position:relative}.arrow{position-area:bottom;translate:0% 50%}:host([position=\"top\"]) .arrow{position-area:bottom;translate:0% 50%}:host([position=\"top\"][alignment=\"end\"]) .arrow{position-area:bottom right;translate:-50% 50%}:host([position=\"top\"][alignment=\"start\"]) .arrow{position-area:bottom left;translate:50% 50%}:host([position=\"bottom\"]) .arrow{position-area:top;translate:0% -50%}:host([position=\"bottom\"][alignment=\"end\"]) .arrow{position-area:top right;translate:-50% -50%}:host([position=\"bottom\"][alignment=\"start\"]) .arrow{position-area:top left;translate:50% -50%}:host([position=\"left\"]) .arrow{position-area:right;translate:50% 0%}:host([position=\"left\"][alignment=\"end\"]) .arrow{position-area:bottom right;translate:50% -50%}:host([position=\"left\"][alignment=\"start\"]) .arrow{position-area:top right;translate:50% 50%}:host([position=\"right\"]) .arrow{position-area:left;translate:-50% 0%}:host([position=\"right\"][alignment=\"end\"]) .arrow{position-area:bottom left;translate:-50% -50%}:host([position=\"right\"][alignment=\"start\"]) .arrow{position-area:top left;translate:-50% 50%}:host([position=\"center\"]){position-area:center}:host{inset:auto!important;place-self:normal!important;position-anchor:auto!important}:host([position=\"top\"]){position-area:top center}:host([position=\"top\"][alignment=\"start\"]){position-area:top left}:host([position=\"top\"][alignment=\"end\"]){position-area:top right}:host([position=\"top\"][alignment=\"start\"]){position-area:top span-right}:host([position=\"top\"][alignment=\"end\"]){position-area:top span-left}:host([position=\"bottom\"]){position-area:bottom center}:host([position=\"bottom\"][alignment=\"start\"]){position-area:bottom span-right}:host([position=\"bottom\"][alignment=\"end\"]){position-area:bottom span-left}:host([position=\"left\"]){position-area:left center}:host([position=\"left\"][alignment=\"end\"]){position-area:left span-top}:host([position=\"left\"][alignment=\"start\"]){position-area:left span-bottom}:host([position=\"right\"]){position-area:right center}:host([position=\"right\"][alignment=\"end\"]){position-area:right span-top}:host([position=\"right\"][alignment=\"start\"]){position-area:right span-bottom}:host([position=\"top\"]){position-try-fallbacks:top,bottom,left,right}:host([position=\"bottom\"]){position-try-fallbacks:bottom,top,left,right}:host([position=\"left\"]){position-try-fallbacks:left,right,top,bottom}:host([position=\"right\"]){position-try-fallbacks:right,left,top,bottom}}:host([position=\"center\"][alignment=\"center\"]){position-area:unset!important;margin:auto!important;inset:0!important}@supports (not selector(::search-text)) and (position-area: bottom){.arrow{translate:0% -50%}:host([position=\"top\"]) .arrow{translate:0% -50%}:host([position=\"top\"][alignment=\"end\"]) .arrow{translate:-150% -50%}:host([position=\"top\"][alignment=\"start\"]) .arrow{translate:150% -50%}:host([position=\"bottom\"]) .arrow{translate:0% 50%}:host([position=\"bottom\"][alignment=\"end\"]) .arrow{translate:-150% 50%}:host([position=\"bottom\"][alignment=\"start\"]) .arrow{translate:150% 50%}:host([position=\"left\"]) .arrow{translate:-50% 0%}:host([position=\"left\"][alignment=\"end\"]) .arrow{translate:-50% -150%}:host([position=\"left\"][alignment=\"start\"]) .arrow{translate:-50% 150%}:host([position=\"right\"]) .arrow{translate:50% 0%}:host([position=\"right\"][alignment=\"end\"]) .arrow{translate:50% -150%}:host([position=\"right\"][alignment=\"start\"]) .arrow{translate:50% 150%}}:host([popover][modal]):before{content:\" \";display:block;inset:0;z-index:99;position:fixed}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=popover.js.map

package/dist/internal/styles/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":[],"sources":["../../../src/internal/styles/popover.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  --animation-duration: var(--nve-ref-animation-duration-200);\n  margin: calc(var(--nve-sys-layer-popover-offset) + calc(var(--nve-sys-layer-popover-arrow-offset) * 2));\n  border: 0;\n  padding: 0;\n  background: none;\n  position: fixed;\n  overflow: visible;\n  contain: initial;\n  width: max-content;\n  z-index: 99;\n  inset: revert;\n  interest-delay-start: 0.5s;\n}\n\n:host([popover]) {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* apply transitions during beforetoggle event to prevent flash of unstyled popover on page load */\n:host(:state(transition-start)) {\n  transition-duration: var(--animation-duration);\n  transition-timing-function: ease-in-out;\n  transition-property: opacity, display, overlay, translate, transform;\n  transition-behavior: allow-discrete;\n}\n\n/** workaround for Safari / Firefox which do not respect transitions on implicit anchor positioning */\n@supports not (container-type: anchored) {\n  :host {\n    --animation-duration: 0;\n  }\n}\n\n:host(:popover-open) {\n  opacity: 1;\n  pointer-events: initial;\n\n  @starting-style {\n    opacity: 0;\n  }\n}\n\n/* lit SSR ensure popovers are not visible until hydration has happened */\n:host(:not([nve-popover])),\n:host([defer-hydration]) {\n  opacity: 0 !important;\n  pointer-events: none !important;\n}\n\n[internal-host] {\n  width: var(--width);\n  min-width: var(--min-width);\n  font-family: inherit;\n  display: flex;\n  flex-direction: column;\n  overflow: visible;\n  white-space: nowrap;\n  z-index: 9999;\n  border: 0;\n  margin: 0;\n  user-select: text;\n}\n\n@supports (position-area: bottom) {\n  [internal-host] {\n    position: relative;\n  }\n\n  .arrow {\n    position-area: bottom;\n    translate: 0% 50%;\n  }\n\n  :host([position='top']) .arrow {\n    position-area: bottom;\n    translate: 0% 50%;\n  }\n\n  :host([position='top'][alignment='end']) .arrow {\n    position-area: bottom right;\n    translate: -50% 50%;\n  }\n\n  :host([position='top'][alignment='start']) .arrow {\n    position-area: bottom left;\n    translate: 50% 50%;\n  }\n\n  :host([position='bottom']) .arrow {\n    position-area: top;\n    translate: 0% -50%;\n  }\n\n  :host([position='bottom'][alignment='end']) .arrow {\n    position-area: top right;\n    translate: -50% -50%;\n  }\n\n  :host([position='bottom'][alignment='start']) .arrow {\n    position-area: top left;\n    translate: 50% -50%;\n  }\n\n  :host([position='left']) .arrow {\n    position-area: right;\n    translate: 50% 0%;\n  }\n\n  :host([position='left'][alignment='end']) .arrow {\n    position-area: bottom right;\n    translate: 50% -50%;\n  }\n\n  :host([position='left'][alignment='start']) .arrow {\n    position-area: top right;\n    translate: 50% 50%;\n  }\n\n  :host([position='right']) .arrow {\n    position-area: left;\n    translate: -50% 0%;\n  }\n\n  :host([position='right'][alignment='end']) .arrow {\n    position-area: bottom left;\n    translate: -50% -50%;\n  }\n\n  :host([position='right'][alignment='start']) .arrow {\n    position-area: top left;\n    translate: -50% 50%;\n  }\n\n  /** positioning */\n  :host([position='center']) {\n    position-area: center;\n  }\n\n  :host {\n    inset: auto !important;\n    place-self: normal !important;\n\n    /*\n     * This line is critical for shadow root positioning and auto anchor association\n     * https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using#implicit_anchor_association\n     */\n    position-anchor: auto !important;\n  }\n\n  /** top */\n  :host([position='top']) {\n    position-area: top center;\n  }\n\n  :host([position='top'][alignment='start']) {\n    position-area: top left;\n  }\n\n  :host([position='top'][alignment='end']) {\n    position-area: top right;\n  }\n\n  :host([position='top'][alignment='start']) {\n    position-area: top span-right;\n  }\n\n  :host([position='top'][alignment='end']) {\n    position-area: top span-left;\n  }\n\n  /** bottom */\n  :host([position='bottom']) {\n    position-area: bottom center;\n  }\n\n  :host([position='bottom'][alignment='start']) {\n    position-area: bottom span-right;\n  }\n\n  :host([position='bottom'][alignment='end']) {\n    position-area: bottom span-left;\n  }\n\n  /** left */\n  :host([position='left']) {\n    position-area: left center;\n  }\n\n  :host([position='left'][alignment='end']) {\n    position-area: left span-top;\n  }\n\n  :host([position='left'][alignment='start']) {\n    position-area: left span-bottom;\n  }\n\n  /** right */\n  :host([position='right']) {\n    position-area: right center;\n  }\n\n  :host([position='right'][alignment='end']) {\n    position-area: right span-top;\n  }\n\n  :host([position='right'][alignment='start']) {\n    position-area: right span-bottom;\n  }\n\n  :host([position='top']) {\n    position-try-fallbacks: top, bottom, left, right;\n  }\n\n  :host([position='bottom']) {\n    position-try-fallbacks: bottom, top, left, right;\n  }\n\n  :host([position='left']) {\n    position-try-fallbacks: left, right, top, bottom;\n  }\n\n  :host([position='right']) {\n    position-try-fallbacks: right, left, top, bottom;\n  }\n}\n\n:host([position='center'][alignment='center']) {\n  position-area: unset !important;\n  margin: auto !important;\n  inset: 0 !important;\n}\n\n/*\n * Remove the following @supports block after Chrome 145 is stable.\n * This is to compensate for a change in Chrome 144 for how anchor positioning with transforms works.\n * https://developer.chrome.com/blog/chrome-144-beta#css_anchor_positioning_with_transforms\n * https://x.com/una/status/1995538970223018004\n * \n * The (not selector(::search-text)) selector is used to target Chrome 143 and below.\n */\n@supports (not selector(::search-text)) and (position-area: bottom) {\n  .arrow {\n    translate: 0% -50%;\n  }\n\n  :host([position='top']) .arrow {\n    translate: 0% -50%;\n  }\n\n  :host([position='top'][alignment='end']) .arrow {\n    translate: -150% -50%;\n  }\n\n  :host([position='top'][alignment='start']) .arrow {\n    translate: 150% -50%;\n  }\n\n  :host([position='bottom']) .arrow {\n    translate: 0% 50%;\n  }\n\n  :host([position='bottom'][alignment='end']) .arrow {\n    translate: -150% 50%;\n  }\n\n  :host([position='bottom'][alignment='start']) .arrow {\n    translate: 150% 50%;\n  }\n\n  :host([position='left']) .arrow {\n    translate: -50% 0%;\n  }\n\n  :host([position='left'][alignment='end']) .arrow {\n    translate: -50% -150%;\n  }\n\n  :host([position='left'][alignment='start']) .arrow {\n    translate: -50% 150%;\n  }\n\n  :host([position='right']) .arrow {\n    translate: 50% 0%;\n  }\n\n  :host([position='right'][alignment='end']) .arrow {\n    translate: 50% -150%;\n  }\n\n  :host([position='right'][alignment='start']) .arrow {\n    translate: 50% 150%;\n  }\n}\n\n:host([popover][modal])::before {\n  content: ' ';\n  display: block;\n  inset: 0;\n  z-index: 99;\n  position: fixed;\n}\n"],"mappings":""}

package/dist/internal/styles/popover2.js

@@ -0,0 +1,14 @@
+import { supportsCSSLegacyInsetArea as e, supportsCSSPositionArea as t } from "../utils/supports.js";
+import n from "./popover.js";
+import { isServer as r } from "lit";
+//#region src/internal/styles/popover.ts
+/* istanbul ignore file -- @preserve */
+var i = "\n[internal-host] { anchor-name: --internal-host }\n.arrow { position-anchor: --internal-host }\n";
+function a() {
+	return !r && !t() && e() ? n.replaceAll("position-area", "inset-area") + i : n + i;
+}
+var o = a();
+//#endregion
+export { o as popoverStyles };
+
+//# sourceMappingURL=popover2.js.map

package/dist/internal/styles/popover2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover2.js","names":[],"sources":["../../../src/internal/styles/popover.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* istanbul ignore file -- @preserve */\nimport { isServer } from 'lit';\nimport { supportsCSSPositionArea, supportsCSSLegacyInsetArea } from '../utils/supports.js';\nimport _popoverStyles from './popover.css?inline';\n\n// vite/esbuild minifier does not understand this syntax\nconst anchor = /* css */ `\n[internal-host] { anchor-name: --internal-host }\n.arrow { position-anchor: --internal-host }\n`;\n\nfunction getPopoverStyles() {\n  if (!isServer && !supportsCSSPositionArea() && supportsCSSLegacyInsetArea()) {\n    return _popoverStyles.replaceAll('position-area', 'inset-area') + anchor;\n  } else {\n    return _popoverStyles + anchor;\n  }\n}\n\nexport const popoverStyles = getPopoverStyles();\n"],"mappings":";;;;;AASA,IAAM,IAAmB;AAKzB,SAAS,IAAmB;AAIxB,QAHE,CAAC,KAAY,CAAC,GAAyB,IAAI,GAA4B,GAClE,EAAe,WAAW,iBAAiB,aAAa,GAAG,IAE3D,IAAiB;;AAI5B,IAAa,IAAgB,GAAkB"}

package/dist/internal/styles/status.state.js

@@ -0,0 +1,6 @@
+//#region src/internal/styles/status.state.css?inline
+var e = ":host{--status-color: var(--nve-sys-status-color)}:host([status=\"scheduled\"]){--status-color: var(--nve-sys-status-scheduled-color)}:host([status=\"queued\"]){--status-color: var(--nve-sys-status-queued-color)}:host([status=\"pending\"]){--status-color: var(--nve-sys-status-pending-color)}:host([status=\"starting\"]){--status-color: var(--nve-sys-status-starting-color)}:host([status=\"running\"]){--status-color: var(--nve-sys-status-running-color)}:host([status=\"restarting\"]){--status-color: var(--nve-sys-status-restarting-color)}:host([status=\"stopping\"]){--status-color: var(--nve-sys-status-stopping-color)}:host([status=\"finished\"]){--status-color: var(--nve-sys-status-finished-color)}:host([status=\"failed\"]){--status-color: var(--nve-sys-status-failed-color)}:host([status=\"unknown\"]){--status-color: var(--nve-sys-status-unknown-color)}:host([status=\"ignored\"]){--status-color: var(--nve-sys-status-ignored-color)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=status.state.js.map

package/dist/internal/styles/status.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.state.js","names":[],"sources":["../../../src/internal/styles/status.state.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  --status-color: var(--nve-sys-status-color);\n}\n\n:host([status='scheduled']) {\n  --status-color: var(--nve-sys-status-scheduled-color);\n}\n\n:host([status='queued']) {\n  --status-color: var(--nve-sys-status-queued-color);\n}\n\n:host([status='pending']) {\n  --status-color: var(--nve-sys-status-pending-color);\n}\n\n:host([status='starting']) {\n  --status-color: var(--nve-sys-status-starting-color);\n}\n\n:host([status='running']) {\n  --status-color: var(--nve-sys-status-running-color);\n}\n\n:host([status='restarting']) {\n  --status-color: var(--nve-sys-status-restarting-color);\n}\n\n:host([status='stopping']) {\n  --status-color: var(--nve-sys-status-stopping-color);\n}\n\n:host([status='finished']) {\n  --status-color: var(--nve-sys-status-finished-color);\n}\n\n:host([status='failed']) {\n  --status-color: var(--nve-sys-status-failed-color);\n}\n\n:host([status='unknown']) {\n  --status-color: var(--nve-sys-status-unknown-color);\n}\n\n:host([status='ignored']) {\n  --status-color: var(--nve-sys-status-ignored-color);\n}\n"],"mappings":""}

package/dist/internal/styles/support.state.js

@@ -0,0 +1,6 @@
+//#region src/internal/styles/support.state.css?inline
+var e = ":host{--status-color: var(--nve-sys-support-emphasis-color)}:host([status=\"muted\"]){--status-color: var(--nve-sys-text-muted-color)}:host([status=\"accent\"]){--status-color: var(--nve-sys-support-accent-emphasis-color)}:host([status=\"success\"]){--status-color: var(--nve-sys-support-success-emphasis-color)}:host([status=\"warning\"]){--status-color: var(--nve-sys-support-warning-emphasis-color)}:host([status=\"danger\"]){--status-color: var(--nve-sys-support-danger-emphasis-color)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=support.state.js.map

package/dist/internal/styles/support.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"support.state.js","names":[],"sources":["../../../src/internal/styles/support.state.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  --status-color: var(--nve-sys-support-emphasis-color);\n}\n\n:host([status='muted']) {\n  --status-color: var(--nve-sys-text-muted-color);\n}\n\n:host([status='accent']) {\n  --status-color: var(--nve-sys-support-accent-emphasis-color);\n}\n\n:host([status='success']) {\n  --status-color: var(--nve-sys-support-success-emphasis-color);\n}\n\n:host([status='warning']) {\n  --status-color: var(--nve-sys-support-warning-emphasis-color);\n}\n\n:host([status='danger']) {\n  --status-color: var(--nve-sys-support-danger-emphasis-color);\n}\n"],"mappings":""}

package/dist/internal/types/index.d.ts

@@ -0,0 +1,358 @@
+import { TemplateResult } from 'lit';
+import { IconName } from '../../icon';
+import { I18nStrings } from '../services/i18n.service.js';
+export type Color = 'red-cardinal' | 'gray-slate' | 'gray-denim' | 'blue-indigo' | 'blue-cobalt' | 'blue-sky' | 'teal-cyan' | 'green-mint' | 'teal-seafoam' | 'green-grass' | 'yellow-amber' | 'orange-pumpkin' | 'red-tomato' | 'pink-magenta' | 'purple-plum' | 'purple-violet' | 'purple-lavender' | 'pink-rose' | 'green-jade' | 'lime-pear' | 'yellow-nova' | 'brand-green';
+/** Controls the visual scale of an element to match its importance and available space.
+ * - `sm` - Compact size for dense layouts or secondary elements with less visual prominence.
+ * - `md` - Standard size that works well in most contexts and provides balanced visibility.
+ * - `lg` - Larger size for emphasizing important elements or improving touch targets in spacious layouts.
+ */
+export type Size = 'sm' | 'md' | 'lg';
+/** Controls the visual scale of an element to match its importance and available space.
+ * - `xs` - Extra small size for minimal elements or highly dense layouts.
+ * - `sm` - Compact size for dense layouts or secondary elements with less visual prominence.
+ * - `md` - Standard size that works well in most contexts and provides balanced visibility.
+ * - `lg` - Larger size for emphasizing important elements or improving touch targets in spacious layouts.
+ * - `xl` - Extra large size for emphasizing elements or sparse layouts.
+ */
+export type SizeExpanded = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Controls the visual prominence to establish hierarchy and guide user attention.
+ * - `emphasis` - Increases visual weight to draw attention and highlight important elements.
+ * - `muted` - Reduces visual weight for supporting content that should remain subtle and unobtrusive.
+ */
+export type Prominence = 'emphasis' | 'muted';
+/**
+ * Determines the container bounds of the element
+ * - `flat` Element has white space bounds but reduced visual container.
+ * - `inline` Element container reduces to fit within inline content such as a block of text.
+ * - `inset` Element container optimizes for embedding or inset placement inside another containing element.
+ * - `full` Element container optimizes for filling its container bounds.
+ * - `condensed` Element container optimizes for small, summarized or contained spaces.
+ */
+export type Container = 'inline' | 'flat' | 'inset' | 'full' | 'condensed';
+/** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.
+ * - `accent` - Highlights important actions or draws attention to primary interactive elements.
+ * - `warning` - Indicates cautionary actions that require careful consideration before proceeding.
+ * - `success` - Represents positive outcomes, confirmations, or constructive actions.
+ * - `danger` - Signals destructive or irreversible actions that need extra attention and confirmation.
+ */
+export type SupportStatus = 'accent' | 'warning' | 'success' | 'danger';
+/** Controls how the chart connects intermediate values between points in a data series.
+ * - `linear` - Connects points with straight line segments.
+ * - `smooth` - Connects points with smooth bezier curves.
+ * - `step` - Connects points with horizontal and vertical step segments.
+ */
+export type Interpolation = 'linear' | 'smooth' | 'step';
+/** Determines the orientation of an element. */
+export type Orientation = 'vertical' | 'horizontal';
+/** Communicates the current state of a task or process to keep users informed of progress and outcomes.
+ * - `scheduled` - Task has a scheduled future execution at a specific time.
+ * - `queued` - Task is waiting in line to begin after other tasks complete.
+ * - `pending` - Task is awaiting approval, user input, or external conditions before proceeding.
+ * - `starting` - Task is initializing and preparing to begin active execution.
+ * - `running` - Task is actively executing and making progress.
+ * - `restarting` - Task restarts after an interruption or reset.
+ * - `stopping` - Task is gracefully shutting down and completing cleanup operations.
+ * - `finished` - Task has completed successfully with the expected outcome.
+ * - `failed` - Task encountered an error and did not complete as intended.
+ * - `unknown` - Task status remains unknown or unavailable.
+ * - `ignored` - Task was intentionally skipped or excluded from execution.
+ */
+export type TaskStatus = 'scheduled' | 'queued' | 'pending' | 'starting' | 'running' | 'restarting' | 'stopping' | 'finished' | 'failed' | 'unknown' | 'ignored';
+/**
+ * https://open-ui.org/components/popup.research.explainer#api-shape
+ * - `auto` light dismiss, focus on open, return to trigger
+ * - `manual` no light dismiss, no auto focus
+ * - `hint` no light dismiss, no auto focus, open/close on hover/focus
+ */
+export type PopoverType = 'auto' | 'manual' | 'hint' | 'inline';
+/** Controls how the popover aligns along the edge of its anchor element.
+ * - `start` - Aligns the popover to the beginning edge of the anchor for left or top alignment.
+ * - `end` - Aligns the popover to the ending edge of the anchor for right or bottom alignment.
+ * - `center` - Centers the popover along the anchor's edge for balanced positioning.
+ */
+export type PopoverAlign = 'start' | 'end' | 'center';
+/** Determines the popover position relative to its assigned anchor and alignment.
+ * - `top` - Positions the popover above the anchor element.
+ * - `bottom` - Positions the popover below the anchor element.
+ * - `left` - Positions the popover to the left side of the anchor element.
+ * - `right` - Positions the popover to the right side of the anchor element.
+ */
+export type PopoverSides = 'top' | 'bottom' | 'left' | 'right';
+/** Controls the placement of the popover relative to its anchor element.
+ * - `center` - Centers the popover directly over the anchor element.
+ * - `top` - Positions the popover above the anchor element.
+ * - `bottom` - Positions the popover below the anchor element.
+ * - `left` - Positions the popover to the left side of the anchor element.
+ * - `right` - Positions the popover to the right side of the anchor element.
+ */
+export type PopoverPosition = 'center' | 'top' | 'bottom' | 'left' | 'right';
+/** Determines the position of an element relative to its anchor */
+export type Placement = PopoverPosition | `${PopoverSides}-${PopoverAlign}`;
+/** Controls the directional arrangement and spacing behavior of the element's content.
+ * - `vertical` - Arranges content in a vertical stack with block-level spacing.
+ * - `vertical-inline` - Arranges content vertically with compact inline spacing for dense layouts.
+ * - `horizontal` - Arranges content in a horizontal row with block-level spacing.
+ * - `horizontal-inline` - Arranges content horizontally with compact inline spacing.
+ */
+export type ControlLayout = 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';
+/** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
+ * - `page` - Marks the current page within a set of navigation links.
+ * - `step` - Marks the current step within a multi-step process or workflow.
+ */
+export type Current = 'page' | 'step';
+/** Controls how data points are visually encoded in a sparkline chart.
+ * - `line` - Renders data as a connected line to emphasize macro trend.
+ * - `area` - Renders data as a filled area beneath a line to emphasize magnitude over time.
+ * - `gradient` - Renders a line with gradient color treatment to communicate value intensity across the series.
+ * - `column` - Renders data as vertical columns for easy comparison of discrete values.
+ * - `winloss` - Renders outcomes as binary or ternary bars to highlight wins, losses, and optional ties.
+ */
+export type SparklineMark = 'line' | 'area' | 'gradient' | 'column' | 'winloss';
+export interface NveElement {
+    /**
+     * This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
+     * - `true` - The element has a disabled state and does not accept interaction.
+     * - `false` - The element has an enabled state and accepts interaction.
+     */
+    disabled?: boolean;
+    /** Indicates whether the element is currently actively engaged through user interaction. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:active)
+     * - `true` - The user is pressing or activating the element (mousedown, keydown, or touch).
+     * - `false` - No active user engagement on the element.
+     */
+    active?: boolean;
+    /** Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
+     * - `true` - The associated content expands and becomes visible to the user.
+     * - `false` - The associated content collapses and hides from the user.
+     */
+    expanded?: boolean;
+    /** Indicates the current state of a toggle button that switches on or off. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)
+     * - `true` - The button is in the pressed (on) state and the associated action or setting is active.
+     * - `false` - The button is in the unpressed (off) state and the associated action or setting is inactive.
+     */
+    pressed?: boolean;
+    /** Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
+     * - `true` - The element holds selection and represents the user's current choice within the group.
+     * - `false` - The element does not hold selection and the user can choose it.
+     */
+    selected?: boolean;
+    /** Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+     * - `true` - The element has a readonly state: the user cannot change its value, but can still focus and copy it.
+     * - `false` - The element allows editing and the user can change its value through interaction.
+     */
+    readonly?: boolean;
+    /** Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value) */
+    value?: string;
+    /** The name of the element, submitted as a pair with the element value as part of the form data. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) */
+    name?: string;
+    /** Indicates whether the user can dismiss or close the element.
+     * - `true` - The element displays a close control and the user can dismiss it.
+     * - `false` - The user cannot close the element and must dismiss it programmatically.
+     */
+    closable?: boolean;
+    /** Enables updating internal string values for internationalization. */
+    i18n?: Partial<I18nStrings & {
+        __set: boolean;
+    }>;
+    /** Indicates the element that represents the user's current location or position within a set. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
+     * - `page` - Marks the current page within a set of navigation links.
+     * - `step` - Marks the current step within a multi-step process or workflow.
+     */
+    current?: 'page' | 'step';
+    /** Controls the horizontal alignment of the element within its container, respecting the text direction. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout)
+     * - `start` - Aligns the element to the beginning of the inline axis (left in LTR, right in RTL).
+     * - `center` - Centers the element along the inline axis for balanced visual positioning.
+     * - `end` - Aligns the element to the end of the inline axis (right in LTR, left in RTL).
+     */
+    inlinePosition?: 'start' | 'center' | 'end';
+    /** Controls the vertical alignment of the element within its container. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout)
+     * - `start` - Aligns the element to the top of the block axis for top-aligned positioning.
+     * - `center` - Centers the element along the block axis for balanced vertical positioning.
+     * - `end` - Aligns the element to the bottom of the block axis for bottom-aligned positioning.
+     */
+    blockPosition?: 'start' | 'center' | 'end';
+    /** Controls the directional arrangement and spacing behavior of the element's content.
+     * - `vertical` - Arranges content in a vertical stack with block-level spacing.
+     * - `vertical-inline` - Arranges content vertically with compact inline spacing for dense layouts.
+     * - `horizontal` - Arranges content in a horizontal row with block-level spacing.
+     * - `horizontal-inline` - Arranges content horizontally with compact inline spacing.
+     */
+    layout?: 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';
+    /** Controls the directional flow of the element's layout and interaction pattern.
+     * - `vertical` - Element orients vertically with top-to-bottom flow.
+     * - `horizontal` - Element orients horizontally with left-to-right flow.
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /** Controls the visual prominence to establish hierarchy and guide user attention.
+     * - `emphasis` - Increases visual weight to draw attention and highlight important elements.
+     * - `muted` - Reduces visual weight for supporting content that should remain subtle and unobtrusive.
+     */
+    prominence?: 'emphasis' | 'muted';
+    /** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors.
+     * - `emphasis` Shows the interaction targets emphasis or highlighting primary actions.
+     * - `destructive` Shows the interaction targets destructive actions such as deleting or removing.
+     */
+    interaction?: 'emphasis' | 'destructive';
+    /** Defines a base color from the theme color palette */
+    color?: 'red-cardinal' | 'gray-slate' | 'gray-denim' | 'blue-indigo' | 'blue-cobalt' | 'blue-sky' | 'teal-cyan' | 'green-mint' | 'teal-seafoam' | 'green-grass' | 'yellow-amber' | 'orange-pumpkin' | 'red-tomato' | 'pink-magenta' | 'purple-plum' | 'purple-violet' | 'purple-lavender' | 'pink-rose' | 'green-jade' | 'lime-pear' | 'yellow-nova' | 'brand-green';
+    /** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.
+     * - `accent` - Highlights important actions or draws attention to primary interactive elements.
+     * - `warning` - Indicates cautionary actions that require careful consideration before proceeding.
+     * - `success` - Represents positive outcomes, confirmations, or constructive actions.
+     * - `danger` - Signals destructive or irreversible actions that need extra attention and confirmation.
+     */
+    status?: 'accent' | 'warning' | 'success' | 'danger';
+    /** Controls the visual scale of an element to match its importance and available space.
+     * - `sm` - Compact size for dense layouts or secondary elements with less visual prominence.
+     * - `md` - Standard size that works well in most contexts and provides balanced visibility.
+     * - `lg` - Larger size for emphasizing important elements or improving touch targets in spacious layouts.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Demonstrates different container styles to accommodate visual weight and context.
+     * - `flat` Element has white space bounds but reduced visual container.
+     * - `inline` Element container reduces to fit within inline content such as a block of text.
+     * - `inset` Element container optimizes for embedding or inset placement inside another containing element.
+     * - `full` Element container optimizes for filling its container bounds.
+     */
+    container?: 'inline' | 'flat' | 'inset' | 'full';
+    /** Determines the position of an element along both inline and block axis. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) */
+    position?: 'top-start' | 'top-end' | 'top-center' | 'bottom-start' | 'bottom-end' | 'bottom-center' | 'left-start' | 'left-end' | 'left-center' | 'right-start' | 'right-end' | 'right-center';
+    /** Determines the alignment of the popover relative to the provided anchor element. */
+    alignment?: 'start' | 'end' | 'center';
+    /** Provides the element that the popover should position relative to. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. */
+    anchor?: string | HTMLElement;
+    /** Defines what element triggers an `open` interaction event. A trigger can accept a idref string within the same render root or a HTMLElement DOM reference. */
+    trigger?: string | HTMLElement;
+    /** Defines named content areas where users can insert custom markup into the element.
+     * - `default` - The primary content area for the element.
+     * - `prefix` - Content that appears before the main element content.
+     * - `suffix` - Content that appears after the main element content.
+     * - `header` - Content that appears at the top of the element, used for titles or introductory information.
+     * - `footer` - Content that appears at the bottom of the element, used for supplementary information or actions.
+     * - `actions` - Content area specifically for interactive controls like buttons or links.
+     * - `icon` - Content area for displaying an icon that represents the element's purpose or state.
+     */
+    slots?: 'default' | 'prefix' | 'suffix' | 'header' | 'footer' | 'actions' | 'icon';
+    /**
+     * Sets the automatic dismissal time in milliseconds before the element emits a `close` event. Allow ~200-250ms per word for comfortable reading.
+     * - `0` - Warning or error messages requiring immediate acknowledgment.
+     * - `3000` - Brief success or confirmation messages.
+     * - `7000` - Standard informational messages.
+     * - `10000` - Messages with actions or requiring user decision.
+     */
+    closeTimeout?: number;
+    /**
+     * Sets the delay in milliseconds before the element emits a `open` event.
+     * - `0` - Keyboard focus interactions (always immediate for accessibility).
+     * - `500` - Dense interfaces with many tooltips to reduce visual noise and prevent accidental triggers.
+     */
+    openDelay?: number;
+    /** @private An instance of `ElementInternals` that decorators/controllers set dynamically */
+    _internals: ElementInternals;
+    render: TemplateResult;
+}
+/** Defines named content areas where users can insert custom markup into the element.
+ * - `default` - The primary content area for the element.
+ * - `prefix` - Content that appears before the main element content.
+ * - `suffix` - Content that appears after the main element content.
+ * - `header` - Content that appears at the top of the element, used for titles or introductory information.
+ * - `footer` - Content that appears at the bottom of the element, used for supplementary information or actions.
+ * - `actions` - Content area specifically for interactive controls like buttons or links.
+ * - `icon` - Content area for displaying an icon that represents the element's purpose or state.
+ */
+export type SlotName = 'default' | 'prefix' | 'suffix' | 'header' | 'footer' | 'actions' | 'icon';
+/** @deprecated Determines the flat container element interaction. */
+export type FlatInteraction = 'flat' | 'flat-emphasize' | `${'flat'}-${Interaction}`;
+/** @deprecated Determines if an element renders with an inverse contrast. */
+export type Inverse = 'inverse';
+/** @deprecated Determines the trend status of an element. Should convey the trend of a metric. */
+export type TrendStatus = 'trend-down' | 'trend-up' | 'trend-neutral';
+/** The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors.
+ * - `emphasis` Shows the interaction targets emphasis or highlighting primary actions.
+ * - `destructive` Shows the interaction targets destructive actions such as deleting or removing.
+ */
+export type Interaction = 'emphasis' | 'destructive';
+export interface ContainerElement {
+    container?: Partial<Container>;
+}
+/** An element that renders complex data structures (e.g., arrays, series, matrices) rather than composable UI content and values expressible with primitive attributes. */
+export interface DataElement<T extends unknown[] | Record<string, unknown>> {
+    data?: T;
+}
+export declare const statusIcons: {
+    [key: string]: IconName;
+};
+declare global {
+    var NVE_ELEMENTS: {
+        state: {
+            bundle: boolean;
+            env: 'watch' | 'production' | 'development';
+            pageHost: string;
+            moduleHost: string;
+            versions: string[];
+            scopedRegistry: {
+                [key: string]: CustomElementRegistry;
+            };
+            elementRegistry: Readonly<{
+                [key: string]: string;
+            }>;
+            i18nRegistry: Readonly<{
+                [key: string]: string;
+            }>;
+            audit: Readonly<{
+                [key: string]: {
+                    count?: number;
+                    excessiveInstanceLimitAudited?: boolean;
+                };
+            }>;
+        };
+        debug: (log?: (...args: unknown[]) => void) => void;
+    };
+    /** @deprecated use NVE_ELEMENTS */
+    var MLV_ELEMENTS: typeof NVE_ELEMENTS;
+    interface HTMLElement {
+        'nve-text': string;
+        'nve-layout': string;
+    }
+    interface CustomElementRegistry {
+        initialize(root: ShadowRoot | Document): void;
+    }
+    var CustomElementRegistry: {
+        new (): CustomElementRegistry;
+        prototype: CustomElementRegistry;
+    };
+}
+export interface ElementDefinition extends CustomElementConstructor {
+    metadata: {
+        version: string;
+        tag: string;
+    };
+    elementDefinitions?: {
+        [key: string]: ElementDefinition;
+    };
+    shadowRootOptions?: {
+        customElementRegistry?: CustomElementRegistry | null;
+    };
+}
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface OffsetPoint {
+    offsetX: number;
+    offsetY: number;
+}
+export interface Dimensions {
+    width: number;
+    height: number;
+}
+export type Rect = Point & Dimensions;
+export interface Scale {
+    min: number;
+    max: number;
+}
+/** https://github.com/tc39/proposal-decorators */
+export type LegacyDecoratorTarget = Function & {
+    addInitializer?: (initializer: (instance: any) => void) => void;
+};

package/dist/internal/types/index.js

@@ -0,0 +1,28 @@
+//#region src/internal/types/index.ts
+var e = {
+	"": "information-circle-stroke",
+	undefined: "information-circle-stroke",
+	default: "information-circle-stroke",
+	accent: "information-circle-stroke",
+	warning: "exclamation-triangle",
+	success: "checkmark-circle",
+	danger: "exclamation-circle",
+	scheduled: "clock",
+	failed: "x-circle",
+	finished: "checkmark-circle",
+	unknown: "question-mark-circle",
+	queued: "bar-pill-stack",
+	running: "running",
+	restarting: "refresh",
+	stopping: "stop-sign",
+	pending: "circle-dash",
+	starting: "circle-dot",
+	"trend-up": "trend-up",
+	"trend-down": "trend-down",
+	"trend-neutral": "minus",
+	ignored: "circle-angled-line"
+};
+//#endregion
+export { e as statusIcons };
+
+//# sourceMappingURL=index.js.map