@nvidia-elements/core 2.0.4 → 2.1.0

package/dist/forms/control-group/control-group.d.ts

@@ -1,4 +1,5 @@
-import { PropertyValues, LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+import { LitElement } from 'lit';
 /**
  * @element nve-control-group
  * @description Groups many related form controls under a shared label and validation context for semantically linked inputs.
@@ -21,14 +22,14 @@ export declare class ControlGroup extends LitElement {
     prominence: 'muted';
     get label(): HTMLLabelElement | null;
     get inputs(): HTMLInputElement[];
-    static styles: import('lit').CSSResult[];
+    static styles: import("lit").CSSResult[];
     static readonly metadata: {
         tag: string;
         version: string;
     };
     /** @private */
     _internals: ElementInternals;
-    render(): import('lit').TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     connectedCallback(): void;
     firstUpdated(props: PropertyValues<this>): void;
     disconnectedCallback(): void;

package/dist/forms/control-group/control-group2.js

@@ -1,6 +1,6 @@
 import { associateAriaDescribedBy as e, associateAriaLabel as t, associateControlGroup as n, attachInternals as r } from "../../internal/utils/a11y.js";
 import { useStyles as i } from "../../internal/styles/index.js";
-import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import a from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
 import { inputQuery as o, setupControlGroupStates as s, setupControlStatusStates as c } from "../utils/states.js";
 import { setupControlLayoutStates as l } from "../utils/layout.js";
 import u from "./control-group.js";
@@ -24,7 +24,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-control-group",
-			version: "2.0.4"
+			version: "2.1.0"
 		};
 	}
 	render() {

package/dist/forms/control-message/control-message.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
-import { Icon } from '../../icon';
-import { ValidityStateError } from '../utils/types.js';
+import { Icon } from '@nvidia-elements/core/icon';
+import { type ValidityStateError } from '../utils/types.js';
 /**
  * @element nve-control-message
  * @description Defining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.
@@ -24,7 +24,7 @@ export declare class ControlMessage extends LitElement {
      * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
      */
     error: ValidityStateError | null;
-    static styles: import('lit').CSSResult[];
+    static styles: import("lit").CSSResult[];
     static readonly metadata: {
         tag: string;
         version: string;
@@ -33,5 +33,5 @@ export declare class ControlMessage extends LitElement {
         [Icon.metadata.tag]: typeof Icon;
     };
     slot: string;
-    render(): import('lit').TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }

package/dist/forms/control-message/control-message2.js

@@ -1,7 +1,7 @@
 import { hostAttr as e } from "../../internal/decorators/host-attr.js";
 import { scopedRegistry as t } from "../../internal/decorators/scoped-registry.js";
 import { useStyles as n } from "../../internal/styles/index.js";
-import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/decorate.js";
+import r from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
 import { Icon as i } from "../../icon/icon2.js";
 import a from "./control-message.js";
 import { LitElement as o, html as s } from "lit";
@@ -23,7 +23,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-control-message",
-			version: "2.0.4"
+			version: "2.1.0"
 		};
 	}
 	static {

package/dist/forms/define.d.ts

@@ -1,4 +1,4 @@
-import { Control, ControlGroup, ControlMessage } from '.';
+import { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';
 declare global {
     interface HTMLElementTagNameMap {
         'nve-control': Control;

package/dist/forms/utils/layout.d.ts

@@ -1,5 +1,5 @@
-import { ControlGroup } from '../control-group/control-group.js';
-import { Control } from '../control/control.js';
+import type { ControlGroup } from '../control-group/control-group.js';
+import type { Control } from '../control/control.js';
 export declare const breakpoints: {
     vertical: number;
     verticalInline: number;

package/dist/forms/utils/layout.js

@@ -23,6 +23,6 @@ function n(t, n) {
 	return i.indexOf(n) < i.indexOf(r) && (r = n), r;
 }
 //#endregion
-export { t as setupControlLayoutStates };
+export { e as breakpoints, n as getControlLayout, t as setupControlLayoutStates };
 
 //# sourceMappingURL=layout.js.map

package/dist/forms/utils/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","names":[],"sources":["../../../src/forms/utils/layout.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ControlGroup } from '../control-group/control-group.js';\nimport type { Control } from '../control/control.js';\n\nexport const breakpoints = {\n  vertical: 300,\n  verticalInline: 400,\n  horizontal: 500,\n  horizontalInline: 600\n};\n\nexport function setupControlLayoutStates(control: Control | ControlGroup) {\n  const initalLayout = control.layout;\n  const resizeObserver = new ResizeObserver(entries => {\n    if (!(control as Control).fitContent) {\n      control.layout = getControlLayout(entries[0]!.contentRect.width, initalLayout);\n    }\n  });\n  resizeObserver.observe(control);\n  return resizeObserver;\n}\n\ntype ControlLayouts = 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';\n\nexport function getControlLayout(width: number, initalLayout: ControlLayouts) {\n  let layout: ControlLayouts = initalLayout;\n  if (width < breakpoints.vertical) {\n    layout = 'vertical';\n  } else if (width < breakpoints.verticalInline) {\n    layout = 'vertical-inline';\n  } else if (width < breakpoints.horizontal) {\n    layout = 'horizontal';\n  } else if (width < breakpoints.horizontalInline) {\n    layout = 'horizontal-inline';\n  }\n\n  const layouts: ControlLayouts[] = ['vertical', 'vertical-inline', 'horizontal', 'horizontal-inline'];\n  if (layouts.indexOf(initalLayout) < layouts.indexOf(layout)) {\n    layout = initalLayout;\n  }\n\n  return layout;\n}\n\nexport function isInlineInputType(input: HTMLInputElement) {\n  return input.type === 'radio' || input.type === 'checkbox';\n}\n"],"mappings":";AAMA,IAAa,IAAc;CACzB,UAAU;CACV,gBAAgB;CAChB,YAAY;CACZ,kBAAkB;AACpB;AAEA,SAAgB,EAAyB,GAAiC;CACxE,IAAM,IAAe,EAAQ,QACvB,IAAiB,IAAI,gBAAe,MAAW;EACnD,AAAM,EAAoB,eACxB,EAAQ,SAAS,EAAiB,EAAQ,GAAI,YAAY,OAAO,CAAY;CAEjF,CAAC;CAED,OADA,EAAe,QAAQ,CAAO,GACvB;AACT;AAIA,SAAgB,EAAiB,GAAe,GAA8B;CAC5E,IAAI,IAAyB;CAC7B,AAAI,IAAQ,EAAY,WACtB,IAAS,aACA,IAAQ,EAAY,iBAC7B,IAAS,oBACA,IAAQ,EAAY,aAC7B,IAAS,eACA,IAAQ,EAAY,qBAC7B,IAAS;CAGX,IAAM,IAA4B;EAAC;EAAY;EAAmB;EAAc;CAAmB;CAKnG,OAJI,EAAQ,QAAQ,CAAY,IAAI,EAAQ,QAAQ,CAAM,MACxD,IAAS,IAGJ;AACT"}
+{"version":3,"file":"layout.js","names":[],"sources":["../../../src/forms/utils/layout.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ControlGroup } from '../control-group/control-group.js';\nimport type { Control } from '../control/control.js';\n\nexport const breakpoints = {\n  vertical: 300,\n  verticalInline: 400,\n  horizontal: 500,\n  horizontalInline: 600\n};\n\nexport function setupControlLayoutStates(control: Control | ControlGroup) {\n  const initalLayout = control.layout;\n  const resizeObserver = new ResizeObserver(entries => {\n    if (!(control as Control).fitContent) {\n      control.layout = getControlLayout(entries[0]!.contentRect.width, initalLayout);\n    }\n  });\n  resizeObserver.observe(control);\n  return resizeObserver;\n}\n\ntype ControlLayouts = 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';\n\nexport function getControlLayout(width: number, initalLayout: ControlLayouts) {\n  let layout: ControlLayouts = initalLayout;\n  if (width < breakpoints.vertical) {\n    layout = 'vertical';\n  } else if (width < breakpoints.verticalInline) {\n    layout = 'vertical-inline';\n  } else if (width < breakpoints.horizontal) {\n    layout = 'horizontal';\n  } else if (width < breakpoints.horizontalInline) {\n    layout = 'horizontal-inline';\n  }\n\n  const layouts: ControlLayouts[] = ['vertical', 'vertical-inline', 'horizontal', 'horizontal-inline'];\n  if (layouts.indexOf(initalLayout) < layouts.indexOf(layout)) {\n    layout = initalLayout;\n  }\n\n  return layout;\n}\n\nexport function isInlineInputType(input: HTMLInputElement) {\n  return input.type === 'radio' || input.type === 'checkbox';\n}\n"],"mappings":";AAMA,IAAa,IAAc;CACzB,UAAU;CACV,gBAAgB;CAChB,YAAY;CACZ,kBAAkB;AACpB;AAEA,SAAgB,EAAyB,GAAiC;CACxE,IAAM,IAAe,EAAQ,QACvB,IAAiB,IAAI,gBAAe,MAAW;EACnD,AAAM,EAAoB,eACxB,EAAQ,SAAS,EAAiB,EAAQ,EAAE,CAAE,YAAY,OAAO,CAAY;CAEjF,CAAC;CAED,OADA,EAAe,QAAQ,CAAO,GACvB;AACT;AAIA,SAAgB,EAAiB,GAAe,GAA8B;CAC5E,IAAI,IAAyB;CAC7B,AAAI,IAAQ,EAAY,WACtB,IAAS,aACA,IAAQ,EAAY,iBAC7B,IAAS,oBACA,IAAQ,EAAY,aAC7B,IAAS,eACA,IAAQ,EAAY,qBAC7B,IAAS;CAGX,IAAM,IAA4B;EAAC;EAAY;EAAmB;EAAc;CAAmB;CAKnG,OAJI,EAAQ,QAAQ,CAAY,IAAI,EAAQ,QAAQ,CAAM,MACxD,IAAS,IAGJ;AACT"}

package/dist/forms/utils/states.d.ts

@@ -1,6 +1,6 @@
-import { ControlGroup } from '../control-group/control-group.js';
+import type { ControlGroup } from '../control-group/control-group.js';
 import { ControlMessage } from '../control-message/control-message.js';
-import { Control } from '../control/control.js';
+import type { Control } from '../control/control.js';
 export declare const inputQuery = "input, select, selectmenu, textarea, [nve-control]";
 export interface ControlStateCleanup {
     disconnect: () => void;

package/dist/forms/utils/states.js

@@ -71,6 +71,6 @@ function g(e, t) {
 	t.find((e) => e.error) && e.input.validity.valid && t.filter((t) => t.error && !e.input.validity[t.error]).forEach((e) => e.setAttribute("hidden", ""));
 }
 //#endregion
-export { a as inputQuery, l as setupControlGroupStates, s as setupControlStates, d as setupControlStatusStates, o as setupControlValidationStates };
+export { m as hideAllValidationMessages, g as hideInactiveValidationMessages, a as inputQuery, l as setupControlGroupStates, s as setupControlStates, d as setupControlStatusStates, o as setupControlValidationStates, h as showActiveValidationMessages, p as updateControlStatusState };
 
 //# sourceMappingURL=states.js.map

package/dist/forms/utils/states.js.map

@@ -1 +1 @@
-{"version":3,"file":"states.js","names":[],"sources":["../../../src/forms/utils/states.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  getAttributeChanges,\n  getAttributeListChanges,\n  getElementUpdate,\n  matchesElementName\n} from '@nvidia-elements/core/internal';\nimport type { ControlGroup } from '../control-group/control-group.js';\nimport { ControlMessage } from '../control-message/control-message.js';\nimport type { Control } from '../control/control.js';\n\nexport const inputQuery = 'input, select, selectmenu, textarea, [nve-control]';\nexport interface ControlStateCleanup {\n  disconnect: () => void;\n}\n\n/**\n * Adds validation states to custom element\n * :state(valid) form control is in a valid state\n * :state(invalid) form control is in a invalid state\n */\n// eslint-disable-next-line max-lines-per-function\nexport function setupControlValidationStates(control: Control, messages: ControlMessage[]) {\n  const cleanups: ControlStateCleanup[] = [];\n\n  if (\n    !control.input.form?.noValidate &&\n    !control.input.formNoValidate &&\n    !control.input.hasAttribute('formnovalidate')\n  ) {\n    hideAllValidationMessages(messages);\n\n    /**\n     * updateValidityState() logic triggered by input blur() or input() change events\n     */\n    const updateValidityState = () => {\n      if (control.input.validity?.valid) {\n        control._internals.states.delete('invalid');\n        control._internals.states.add('valid');\n        control.status = null!;\n      }\n\n      hideInactiveValidationMessages(control, messages);\n    };\n\n    const resetValidityState = () => {\n      control.status = null!;\n      control._internals.states.delete('valid');\n      control._internals.states.delete('invalid');\n      hideAllValidationMessages(messages);\n    };\n\n    const onBlur = () => {\n      control.input.checkValidity();\n      updateValidityState();\n    };\n\n    const onInput = () => {\n      updateValidityState();\n    };\n\n    const onInvalid = () => {\n      if (messages.find(m => m.error)) {\n        hideAllValidationMessages(messages);\n        showActiveValidationMessages(control, messages);\n      }\n\n      control.status = 'error';\n      control._internals.states.delete('valid');\n      control._internals.states.add('invalid');\n    };\n\n    cleanups.push(\n      addCleanupListener(control.input, 'blur', onBlur),\n      addCleanupListener(control.input, 'input', onInput),\n      addCleanupListener(control.input, 'invalid', onInvalid),\n      addCleanupListener(control, 'reset', resetValidityState)\n    );\n\n    if (control.input.form) {\n      cleanups.push(addCleanupListener(control.input.form, 'reset', resetValidityState));\n    }\n  }\n\n  const onSlotChange = () => {\n    const current = Array.from(control.querySelectorAll<ControlMessage>(ControlMessage.metadata.tag));\n    control._internals.states.delete('valid');\n    control._internals.states.delete('invalid');\n    if (current.find(m => !m.hidden && (m.status === 'error' || m.error))) {\n      control._internals.states.add('invalid');\n    } else {\n      control._internals.states.add('valid');\n    }\n  };\n  cleanups.push(addCleanupListener(control.shadowRoot!, 'slotchange', onSlotChange));\n\n  return cleanups;\n}\n\n/**\n * Adds control interaction states to custom element\n * :state(checked) form control is in a checked state\n * :state(disabled) form control is in a disabled state\n * :state(readonly) form control is in a readonly state\n * :state(touched) form control received focus and then blurred\n * :state(dirty) user modified the form control\n */\nexport function setupControlStates(control: Control) {\n  const observers: ControlStateCleanup[] = [];\n  const states = control._internals.states;\n  control.input.checked ? states.add('checked') : states.delete('checked');\n  control.input.indeterminate ? states.add('indeterminate') : states.delete('indeterminate');\n\n  observers.push(...addControlInteractionListeners(control));\n  observers.push(\n    getElementUpdate(control.input, 'readonly', value =>\n      (value === '' ? true : value) ? states.add('readonly') : states.delete('readonly')\n    ),\n    getElementUpdate(control.input, 'checked', () =>\n      control.input.checked ? states.add('checked') : states.delete('checked')\n    ),\n    getElementUpdate(control.input, 'disabled', value =>\n      (value === '' ? true : value) ? states.add('disabled') : states.delete('disabled')\n    ),\n    getElementUpdate(control.input, 'indeterminate', () =>\n      control.input.indeterminate ? states.add('indeterminate') : states.delete('indeterminate')\n    )\n  );\n  return observers;\n}\n\nfunction addControlInteractionListeners(control: Control): ControlStateCleanup[] {\n  const cleanups: ControlStateCleanup[] = [];\n  const states = control._internals.states;\n  const onFocus = () => control._internals.states.add('focus');\n  const onInput = () => control._internals.states.add('dirty');\n  const onBlur = () => {\n    control._internals.states.add('touched');\n    control._internals.states.delete('focus');\n  };\n\n  const onRootChange = (e: Event) => {\n    if ((e.target as HTMLInputElement).name === control.input?.name) {\n      control.input.checked ? states.add('checked') : states.delete('checked');\n    }\n  };\n\n  const onFormReset = () => {\n    control._internals.states.delete('touched');\n    control._internals.states.delete('dirty');\n    control._internals.states.delete('error');\n    control._internals.states.delete('success');\n    control.requestUpdate();\n  };\n\n  cleanups.push(\n    addCleanupListener(control.input, 'focus', onFocus),\n    addCleanupListener(control.input, 'input', onInput),\n    addCleanupListener(control.input, 'blur', onBlur),\n    addCleanupListener(control.input.getRootNode(), 'change', onRootChange)\n  );\n\n  if (control.input.form) {\n    cleanups.push(addCleanupListener(control.input.form, 'reset', onFormReset));\n  }\n\n  return cleanups;\n}\n\n/**\n * Adds control group interaction states to custom element\n * :state(disabled) any form control within group is in a disabled state\n */\nexport function setupControlGroupStates(controlGroup: ControlGroup) {\n  toggleControlGroupDisabledState(controlGroup);\n  return getAttributeChanges(controlGroup, 'disabled', () => toggleControlGroupDisabledState(controlGroup));\n}\n\nfunction toggleControlGroupDisabledState(controlGroup: ControlGroup) {\n  if (Array.from(controlGroup.inputs).find(i => i.disabled)) {\n    controlGroup._internals.states.add('disabled');\n  } else {\n    controlGroup._internals.states.delete('disabled');\n  }\n}\n\n/**\n * Adds control status states to custom element\n * :state(error) form control is in a error state\n * :state(success) form control is in a success state\n */\nexport function setupControlStatusStates(control: Control | ControlGroup, messages: ControlMessage[]) {\n  updateControlStatusState(control, messages.find(m => !m.hidden)!);\n  const observers: ControlStateCleanup[] = [];\n  observers.push(\n    getAttributeListChanges(control, ['hidden', 'status'], mutation => {\n      const target = mutation.target as ControlMessage;\n      if (matchesElementName(target, ControlMessage)) {\n        updateControlStatusState(control, target);\n      }\n    })\n  );\n\n  const onSlotChange = () => {\n    const current = Array.from(control.querySelectorAll<ControlMessage>(ControlMessage.metadata.tag));\n    const message = current.find(m => m.status && !m.hidden);\n    control._internals.states.delete('error');\n    control._internals.states.delete('success');\n    if (message) {\n      control._internals.states.add(message.status!);\n    }\n  };\n  observers.push(addCleanupListener(control.shadowRoot!, 'slotchange', onSlotChange));\n\n  return observers;\n}\n\nfunction addCleanupListener(target: EventTarget, type: string, listener: EventListener): ControlStateCleanup {\n  target.addEventListener(type, listener);\n  return {\n    disconnect: () => target.removeEventListener(type, listener)\n  };\n}\n\nexport function updateControlStatusState(control: Control | ControlGroup, message: ControlMessage) {\n  control._internals.states.delete('error');\n  control._internals.states.delete('success');\n\n  if (message?.status?.length && !message?.hidden) {\n    control._internals.states.add(message.status);\n  }\n}\n\nexport function showNonValidationMessages(messages: ControlMessage[]) {\n  messages.filter(m => !m.hasAttribute('error')).forEach(m => m.removeAttribute('hidden'));\n}\n\nexport function hideAllValidationMessages(messages: ControlMessage[]) {\n  messages.filter(m => m.hasAttribute('error')).forEach(m => m.setAttribute('hidden', ''));\n}\n\nexport function showActiveValidationMessages(control: Control, messages: ControlMessage[]) {\n  messages.find(m => m.error && control.input.validity[m.error])?.removeAttribute('hidden');\n}\n\nexport function hideInactiveValidationMessages(control: Control, messages: ControlMessage[]) {\n  if (messages.find(m => m.error) && control.input.validity.valid) {\n    messages.filter(m => m.error && !control.input.validity[m.error!]).forEach(m => m.setAttribute('hidden', ''));\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"states.js","names":[],"sources":["../../../src/forms/utils/states.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  getAttributeChanges,\n  getAttributeListChanges,\n  getElementUpdate,\n  matchesElementName\n} from '@nvidia-elements/core/internal';\nimport type { ControlGroup } from '../control-group/control-group.js';\nimport { ControlMessage } from '../control-message/control-message.js';\nimport type { Control } from '../control/control.js';\n\nexport const inputQuery = 'input, select, selectmenu, textarea, [nve-control]';\nexport interface ControlStateCleanup {\n  disconnect: () => void;\n}\n\n/**\n * Adds validation states to custom element\n * :state(valid) form control is in a valid state\n * :state(invalid) form control is in a invalid state\n */\n// eslint-disable-next-line max-lines-per-function\nexport function setupControlValidationStates(control: Control, messages: ControlMessage[]) {\n  const cleanups: ControlStateCleanup[] = [];\n\n  if (\n    !control.input.form?.noValidate &&\n    !control.input.formNoValidate &&\n    !control.input.hasAttribute('formnovalidate')\n  ) {\n    hideAllValidationMessages(messages);\n\n    /**\n     * updateValidityState() logic triggered by input blur() or input() change events\n     */\n    const updateValidityState = () => {\n      if (control.input.validity?.valid) {\n        control._internals.states.delete('invalid');\n        control._internals.states.add('valid');\n        control.status = null!;\n      }\n\n      hideInactiveValidationMessages(control, messages);\n    };\n\n    const resetValidityState = () => {\n      control.status = null!;\n      control._internals.states.delete('valid');\n      control._internals.states.delete('invalid');\n      hideAllValidationMessages(messages);\n    };\n\n    const onBlur = () => {\n      control.input.checkValidity();\n      updateValidityState();\n    };\n\n    const onInput = () => {\n      updateValidityState();\n    };\n\n    const onInvalid = () => {\n      if (messages.find(m => m.error)) {\n        hideAllValidationMessages(messages);\n        showActiveValidationMessages(control, messages);\n      }\n\n      control.status = 'error';\n      control._internals.states.delete('valid');\n      control._internals.states.add('invalid');\n    };\n\n    cleanups.push(\n      addCleanupListener(control.input, 'blur', onBlur),\n      addCleanupListener(control.input, 'input', onInput),\n      addCleanupListener(control.input, 'invalid', onInvalid),\n      addCleanupListener(control, 'reset', resetValidityState)\n    );\n\n    if (control.input.form) {\n      cleanups.push(addCleanupListener(control.input.form, 'reset', resetValidityState));\n    }\n  }\n\n  const onSlotChange = () => {\n    const current = Array.from(control.querySelectorAll<ControlMessage>(ControlMessage.metadata.tag));\n    control._internals.states.delete('valid');\n    control._internals.states.delete('invalid');\n    if (current.find(m => !m.hidden && (m.status === 'error' || m.error))) {\n      control._internals.states.add('invalid');\n    } else {\n      control._internals.states.add('valid');\n    }\n  };\n  cleanups.push(addCleanupListener(control.shadowRoot!, 'slotchange', onSlotChange));\n\n  return cleanups;\n}\n\n/**\n * Adds control interaction states to custom element\n * :state(checked) form control is in a checked state\n * :state(disabled) form control is in a disabled state\n * :state(readonly) form control is in a readonly state\n * :state(touched) form control received focus and then blurred\n * :state(dirty) user modified the form control\n */\nexport function setupControlStates(control: Control) {\n  const observers: ControlStateCleanup[] = [];\n  const states = control._internals.states;\n  control.input.checked ? states.add('checked') : states.delete('checked');\n  control.input.indeterminate ? states.add('indeterminate') : states.delete('indeterminate');\n\n  observers.push(...addControlInteractionListeners(control));\n  observers.push(\n    getElementUpdate(control.input, 'readonly', value =>\n      (value === '' ? true : value) ? states.add('readonly') : states.delete('readonly')\n    ),\n    getElementUpdate(control.input, 'checked', () =>\n      control.input.checked ? states.add('checked') : states.delete('checked')\n    ),\n    getElementUpdate(control.input, 'disabled', value =>\n      (value === '' ? true : value) ? states.add('disabled') : states.delete('disabled')\n    ),\n    getElementUpdate(control.input, 'indeterminate', () =>\n      control.input.indeterminate ? states.add('indeterminate') : states.delete('indeterminate')\n    )\n  );\n  return observers;\n}\n\nfunction addControlInteractionListeners(control: Control): ControlStateCleanup[] {\n  const cleanups: ControlStateCleanup[] = [];\n  const states = control._internals.states;\n  const onFocus = () => control._internals.states.add('focus');\n  const onInput = () => control._internals.states.add('dirty');\n  const onBlur = () => {\n    control._internals.states.add('touched');\n    control._internals.states.delete('focus');\n  };\n\n  const onRootChange = (e: Event) => {\n    if ((e.target as HTMLInputElement).name === control.input?.name) {\n      control.input.checked ? states.add('checked') : states.delete('checked');\n    }\n  };\n\n  const onFormReset = () => {\n    control._internals.states.delete('touched');\n    control._internals.states.delete('dirty');\n    control._internals.states.delete('error');\n    control._internals.states.delete('success');\n    control.requestUpdate();\n  };\n\n  cleanups.push(\n    addCleanupListener(control.input, 'focus', onFocus),\n    addCleanupListener(control.input, 'input', onInput),\n    addCleanupListener(control.input, 'blur', onBlur),\n    addCleanupListener(control.input.getRootNode(), 'change', onRootChange)\n  );\n\n  if (control.input.form) {\n    cleanups.push(addCleanupListener(control.input.form, 'reset', onFormReset));\n  }\n\n  return cleanups;\n}\n\n/**\n * Adds control group interaction states to custom element\n * :state(disabled) any form control within group is in a disabled state\n */\nexport function setupControlGroupStates(controlGroup: ControlGroup) {\n  toggleControlGroupDisabledState(controlGroup);\n  return getAttributeChanges(controlGroup, 'disabled', () => toggleControlGroupDisabledState(controlGroup));\n}\n\nfunction toggleControlGroupDisabledState(controlGroup: ControlGroup) {\n  if (Array.from(controlGroup.inputs).find(i => i.disabled)) {\n    controlGroup._internals.states.add('disabled');\n  } else {\n    controlGroup._internals.states.delete('disabled');\n  }\n}\n\n/**\n * Adds control status states to custom element\n * :state(error) form control is in a error state\n * :state(success) form control is in a success state\n */\nexport function setupControlStatusStates(control: Control | ControlGroup, messages: ControlMessage[]) {\n  updateControlStatusState(control, messages.find(m => !m.hidden)!);\n  const observers: ControlStateCleanup[] = [];\n  observers.push(\n    getAttributeListChanges(control, ['hidden', 'status'], mutation => {\n      const target = mutation.target as ControlMessage;\n      if (matchesElementName(target, ControlMessage)) {\n        updateControlStatusState(control, target);\n      }\n    })\n  );\n\n  const onSlotChange = () => {\n    const current = Array.from(control.querySelectorAll<ControlMessage>(ControlMessage.metadata.tag));\n    const message = current.find(m => m.status && !m.hidden);\n    control._internals.states.delete('error');\n    control._internals.states.delete('success');\n    if (message) {\n      control._internals.states.add(message.status!);\n    }\n  };\n  observers.push(addCleanupListener(control.shadowRoot!, 'slotchange', onSlotChange));\n\n  return observers;\n}\n\nfunction addCleanupListener(target: EventTarget, type: string, listener: EventListener): ControlStateCleanup {\n  target.addEventListener(type, listener);\n  return {\n    disconnect: () => target.removeEventListener(type, listener)\n  };\n}\n\nexport function updateControlStatusState(control: Control | ControlGroup, message: ControlMessage) {\n  control._internals.states.delete('error');\n  control._internals.states.delete('success');\n\n  if (message?.status?.length && !message?.hidden) {\n    control._internals.states.add(message.status);\n  }\n}\n\nexport function showNonValidationMessages(messages: ControlMessage[]) {\n  messages.filter(m => !m.hasAttribute('error')).forEach(m => m.removeAttribute('hidden'));\n}\n\nexport function hideAllValidationMessages(messages: ControlMessage[]) {\n  messages.filter(m => m.hasAttribute('error')).forEach(m => m.setAttribute('hidden', ''));\n}\n\nexport function showActiveValidationMessages(control: Control, messages: ControlMessage[]) {\n  messages.find(m => m.error && control.input.validity[m.error])?.removeAttribute('hidden');\n}\n\nexport function hideInactiveValidationMessages(control: Control, messages: ControlMessage[]) {\n  if (messages.find(m => m.error) && control.input.validity.valid) {\n    messages.filter(m => m.error && !control.input.validity[m.error!]).forEach(m => m.setAttribute('hidden', ''));\n  }\n}\n"],"mappings":"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"}

package/dist/gauge/define.d.ts

@@ -0,0 +1,6 @@
+import { Gauge } from '@nvidia-elements/core/gauge';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-gauge': Gauge;
+    }
+}

package/dist/gauge/define.js

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

package/dist/gauge/define.js.map

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

package/dist/gauge/gauge.d.ts

@@ -0,0 +1,52 @@
+import type { PropertyValues } from 'lit';
+import { LitElement } from 'lit';
+import type { Size, SupportStatus } from '@nvidia-elements/core/internal';
+/**
+ * @element nve-gauge
+ * @description Use a gauge to show system resource usage.
+ * @since 2.0.4
+ * @entrypoint \@nvidia-elements/core/gauge
+ * @slot - Content to display in the gauge center.
+ * @cssprop --track-width
+ * @cssprop --accent-color
+ * @cssprop --background
+ * @cssprop --needle-background
+ * @cssprop --track-background
+ * @cssprop --thumb-background
+ * @cssprop --color
+ * @cssprop --width
+ * @cssprop --height
+ * @cssprop --font-size
+ * @cssprop --gap
+ * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role
+ * @stable false
+ */
+export declare class Gauge extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    /** @private */
+    _internals: ElementInternals;
+    /** The current `value` of the gauge. */
+    value: number;
+    /** The `max` value of the gauge that the `value` is proportionally scaled to. */
+    max?: number | undefined;
+    /** Four visual treatments represent the `status` of tasks. */
+    status?: SupportStatus | 'neutral';
+    /** Determines the gauge shape. Set `half` for a compact semi-circular arc. */
+    shape?: 'half';
+    /** Controls the value indicator. Set `dot` for only the end dot or `needle` for a pointer. */
+    thumb: 'fill' | 'dot' | 'needle';
+    /** T-shirt `size` of the gauge. */
+    size?: Size;
+    /** Enables updating internal string values for internationalization. */
+    i18n: Partial<import("@nvidia-elements/core/internal").I18nStrings & {
+        __set: boolean;
+    }>;
+    render(): import("lit").TemplateResult<1>;
+    connectedCallback(): void;
+    updated(props: PropertyValues<this>): void;
+}

package/dist/gauge/gauge.examples.js

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

package/dist/gauge/gauge.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.examples.js","names":[],"sources":["../../src/gauge/gauge.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/gauge/define.js';\n\nexport default {\n  title: 'Elements/Gauge',\n  component: 'nve-gauge',\n};\n\n/**\n * @summary 270-degree gauges for displaying system resource usage.\n */\nexport const Default = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-gauge value=\"50\">50%</nve-gauge>\n      <nve-gauge status=\"accent\" value=\"66\">66%</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Shape variants compare the default 270-degree gauge with the compact half gauge for telemetry layouts with tighter vertical space.\n * @tags test-case\n */\nexport const Shape = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm align:vertical-center\">\n      <nve-gauge status=\"accent\" value=\"66\">66%</nve-gauge>\n      <nve-gauge shape=\"half\" status=\"accent\" value=\"66\">66%</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Half shape variant for telemetry layouts with tighter vertical space.\n * @tags test-case\n */\nexport const ShapeHalf = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm align:vertical-center\">\n      <nve-gauge shape=\"half\" value=\"66\" size=\"sm\">66%</nve-gauge>\n      <nve-gauge shape=\"half\" value=\"66\">66%</nve-gauge>\n      <nve-gauge shape=\"half\" value=\"66\" size=\"lg\">66%</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Half shape with needle thumb variant for rapidly changing values in confined spaces.\n * @tags test-case\n */\nexport const ShapeHalfNeedle = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm align:vertical-center\">\n      <nve-gauge shape=\"half\" thumb=\"needle\" value=\"66\" size=\"sm\">66%</nve-gauge>\n      <nve-gauge shape=\"half\" thumb=\"needle\" value=\"66\">66%</nve-gauge>\n      <nve-gauge shape=\"half\" thumb=\"needle\" value=\"66\" size=\"lg\">66%</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Thumb variants compare filled, dot, and needle indicators for dashboards that need different levels of visual emphasis.\n * @tags test-case\n */\nexport const Thumb = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-gauge thumb=\"fill\" value=\"66\">fill</nve-gauge>\n      <nve-gauge thumb=\"dot\" value=\"66\">dot</nve-gauge>\n      <nve-gauge thumb=\"needle\" value=\"66\">needle</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Gauges with values from 0% to 100% for displaying system resource usage.\n * @tags test-case\n */\nexport const Values = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-gauge value=\"0\">0%</nve-gauge>\n      <nve-gauge value=\"33\">33%</nve-gauge>\n      <nve-gauge value=\"66\">66%</nve-gauge>\n      <nve-gauge value=\"100\">100%</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Gauges with custom max values for mission checkpoints, validation clips, and map tile processing.\n * @tags test-case\n */\nexport const Max = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-gauge status=\"accent\" max=\"20\" value=\"5\">5/20</nve-gauge>\n      <nve-gauge max=\"20\" value=\"10\">10/20</nve-gauge>\n      <nve-gauge max=\"20\" value=\"15\">15/20</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Gauges with accent, success, warning, and danger colors for autonomous system health and readiness signals.\n * @tags test-case\n */\nexport const Status = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-gauge value=\"50\">50%</nve-gauge>\n      <nve-gauge status=\"accent\" value=\"75\">75%</nve-gauge>\n      <nve-gauge status=\"success\" value=\"75\">75%</nve-gauge>\n      <nve-gauge status=\"warning\" value=\"75\" aria-valuetext=\"2.1m\">2.1m</nve-gauge>\n      <nve-gauge status=\"danger\" value=\"75\" aria-valuetext=\"0Hz\">0Hz</nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Use gradient colors for gauges with scaled non-segmented values such as temperature and bandwidth.\n * @tags pattern\n */\nexport const Gradient = {\n  render: () => html`\n    <style>\n      nve-gauge#gauge-temperature-example {\n        --background: conic-gradient(\n          from 225deg at 50% 50%,\n          var(--nve-sys-support-success-emphasis-color) 0deg 18deg,\n          var(--nve-sys-support-warning-emphasis-color) 135deg,\n          var(--nve-sys-support-danger-emphasis-color) 252deg 300deg,\n          var(--nve-sys-support-success-emphasis-color) 300deg 360deg\n        );\n      }\n\n      nve-gauge#gauge-mbps-example {\n        --background: conic-gradient(\n          from 225deg at 50% 50%,\n          var(--nve-sys-support-danger-emphasis-color) 0deg 18deg,\n          var(--nve-sys-support-warning-emphasis-color) 135deg,\n          var(--nve-sys-support-success-emphasis-color) 252deg 300deg,\n          var(--nve-sys-support-danger-emphasis-color) 300deg 360deg\n        );\n      }\n    </style>\n\n    <div nve-layout=\"row gap:md\">\n      <nve-gauge thumb=\"dot\" value=\"82\" id=\"gauge-temperature-example\" aria-label=\"Temperature\" aria-valuetext=\"82°C\">\n        <span>82&deg;C</span>\n        <span nve-text=\"body sm muted\">TEMP</span>\n      </nve-gauge>\n\n      <nve-gauge thumb=\"needle\" value=\"98\" id=\"gauge-mbps-example\" aria-label=\"Download\" aria-valuetext=\"980Mbps\">\n        <span nve-text=\"body sm\">980Mbps</span>\n        <span nve-text=\"body sm muted\">Download</span>\n      </nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Small gauge paired with route-solve text for compact autonomous vehicle task rows.\n * @tags test-case\n */\nexport const WithText = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\" nve-text=\"medium\">\n      <nve-gauge status=\"accent\" size=\"sm\" value=\"50\" aria-labelledby=\"route-solve-label\" aria-valuetext=\"2.4s\">2.4s</nve-gauge>\n      <span id=\"route-solve-label\">Route solve</span>\n    </div>\n`};\n\n/**\n * @summary Gauges in small, medium, and large sizes for dense robotics and autonomous vehicle dashboards.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-gauge size=\"sm\" value=\"50\" aria-valuetext=\"30Hz\">\n        <span nve-text=\"grow\">30Hz</span>\n      </nve-gauge>\n      <nve-gauge size=\"md\" value=\"50\" aria-valuetext=\"12Hz\">\n        <span nve-text=\"grow\">12Hz</span>\n      </nve-gauge>\n      <nve-gauge size=\"lg\" value=\"50\" aria-valuetext=\"84%\">\n        <span nve-text=\"grow\">84%</span>\n      </nve-gauge>\n    </div>\n`};\n\n/**\n * @summary Use for displaying real-time system usage and performance metrics.\n * @tags pattern\n */\nexport const Dynamic = {\n  render: () => html`\n<div nve-layout=\"row gap:sm\">\n  <nve-gauge id=\"dynamic-gpu-gauge\" status=\"success\" value=\"0\" aria-label=\"GPU\" aria-valuetext=\"0%\">\n    <span nve-text=\"grow\">0%</span>\n    <span nve-text=\"body sm muted\">GPU</span>\n  </nve-gauge>\n</div>\n<script type=\"module\">\n  const gauge = document.querySelector('#dynamic-gpu-gauge');\n  const valueElement = gauge.querySelector('span');\n  setInterval(() => {\n    const value = Math.floor(Math.random() * 101);\n    const text = value + '%';\n    gauge.value = value;\n    gauge.status = value >= 80 ? 'danger' : value >= 60 ? 'warning' : 'success';\n    gauge.setAttribute('aria-valuetext', text);\n    valueElement.textContent = text;\n  }, 1500);\n</script>\n`};\n\n/**\n * @summary Autonomous vehicle taxi gauges combine battery, perception, compute, and link status with realistic drift. Use for live dispatch views that need changing system health.\n * @tags test-case\n */\nexport const MultiGauge = {\n  render: () => html`\n<div nve-layout=\"row gap:sm\">\n  <nve-gauge id=\"av-taxi-battery-gauge\" status=\"success\" value=\"74\" aria-label=\"Battery\" aria-valuetext=\"74%\">\n    <span nve-text=\"grow\">74%</span>\n    <span nve-text=\"body sm muted\">BATTERY</span>\n  </nve-gauge>\n  <nve-gauge id=\"av-taxi-perception-gauge\" status=\"success\" value=\"96\" aria-label=\"Perception\" aria-valuetext=\"96%\">\n    <span nve-text=\"grow\">96%</span>\n    <span nve-text=\"body sm muted\">PERCEPTION</span>\n  </nve-gauge>\n  <nve-gauge id=\"av-taxi-compute-gauge\" status=\"success\" value=\"62\" aria-label=\"GPU\" aria-valuetext=\"62%\">\n    <span nve-text=\"grow\">62%</span>\n    <span nve-text=\"body sm muted\">GPU</span>\n  </nve-gauge>\n</div>\n<script type=\"module\">\n  const clamp = (value, min, max) => Math.min(Math.max(value, min), max);\n  const telemetry = {\n    battery: 74,\n    compute: 62,\n    perception: 96\n  };\n  const gauges = {\n    battery: document.querySelector('#av-taxi-battery-gauge'),\n    compute: document.querySelector('#av-taxi-compute-gauge'),\n    perception: document.querySelector('#av-taxi-perception-gauge')\n  };\n\n  const setGauge = (gauge, value, text, status) => {\n    gauge.value = Math.round(value);\n    gauge.status = status;\n    gauge.setAttribute('aria-valuetext', text);\n    gauge.querySelector('span').textContent = text;\n  };\n\n  setInterval(() => {\n    telemetry.battery = clamp(telemetry.battery - 0.08 + (Math.random() - 0.4) * 0.3, 46, 82);\n    telemetry.compute = clamp(telemetry.compute + (Math.random() - 0.48) * 7, 34, 91);\n    telemetry.perception = clamp(telemetry.perception + (Math.random() - 0.52) * 2.4, 88, 99);\n\n    const battery = Math.round(telemetry.battery);\n    const compute = Math.round(telemetry.compute);\n    const perception = Math.round(telemetry.perception);\n\n    setGauge(gauges.battery, battery, battery + '%', battery < 30 ? 'danger' : battery < 50 ? 'warning' : 'success');\n    setGauge(gauges.compute, compute, compute + '%', compute >= 85 ? 'danger' : compute >= 70 ? 'warning' : 'success');\n    setGauge(gauges.perception, perception, perception + '%', perception < 90 ? 'danger' : perception < 94 ? 'warning' : 'success');\n  }, 1600);\n</script>\n`};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/gauge/gauge.examples.json

@@ -0,0 +1,147 @@
+{
+  "element": "nve-gauge",
+  "entrypoint": "@nvidia-elements/core/gauge/gauge.examples.json",
+  "items": [
+    {
+      "id": "gauge",
+      "name": "Default",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge value=\"50\">50%</nve-gauge>\n  <nve-gauge status=\"accent\" value=\"66\">66%</nve-gauge>\n</div>\n",
+      "summary": "270-degree gauges for displaying system resource usage.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "gauge-shape",
+      "name": "Shape",
+      "template": "<div nve-layout=\"row gap:sm align:vertical-center\">\n  <nve-gauge status=\"accent\" value=\"66\">66%</nve-gauge>\n  <nve-gauge shape=\"half\" status=\"accent\" value=\"66\">66%</nve-gauge>\n</div>\n",
+      "summary": "Shape variants compare the default 270-degree gauge with the compact half gauge for telemetry layouts with tighter vertical space.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "gauge-shape-half",
+      "name": "ShapeHalf",
+      "template": "<div nve-layout=\"row gap:sm align:vertical-center\">\n  <nve-gauge shape=\"half\" value=\"66\" size=\"sm\">66%</nve-gauge>\n  <nve-gauge shape=\"half\" value=\"66\">66%</nve-gauge>\n  <nve-gauge shape=\"half\" value=\"66\" size=\"lg\">66%</nve-gauge>\n</div>\n",
+      "summary": "Half shape variant for telemetry layouts with tighter vertical space.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "gauge-shape-half-needle",
+      "name": "ShapeHalfNeedle",
+      "template": "<div nve-layout=\"row gap:sm align:vertical-center\">\n  <nve-gauge shape=\"half\" thumb=\"needle\" value=\"66\" size=\"sm\">66%</nve-gauge>\n  <nve-gauge shape=\"half\" thumb=\"needle\" value=\"66\">66%</nve-gauge>\n  <nve-gauge shape=\"half\" thumb=\"needle\" value=\"66\" size=\"lg\">66%</nve-gauge>\n</div>\n",
+      "summary": "Half shape with needle thumb variant for rapidly changing values in confined spaces.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "gauge-thumb",
+      "name": "Thumb",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge thumb=\"fill\" value=\"66\">fill</nve-gauge>\n  <nve-gauge thumb=\"dot\" value=\"66\">dot</nve-gauge>\n  <nve-gauge thumb=\"needle\" value=\"66\">needle</nve-gauge>\n</div>\n",
+      "summary": "Thumb variants compare filled, dot, and needle indicators for dashboards that need different levels of visual emphasis.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "gauge-values",
+      "name": "Values",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge value=\"0\">0%</nve-gauge>\n  <nve-gauge value=\"33\">33%</nve-gauge>\n  <nve-gauge value=\"66\">66%</nve-gauge>\n  <nve-gauge value=\"100\">100%</nve-gauge>\n</div>\n",
+      "summary": "Gauges with values from 0% to 100% for displaying system resource usage.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "gauge-max",
+      "name": "Max",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge status=\"accent\" max=\"20\" value=\"5\">5/20</nve-gauge>\n  <nve-gauge max=\"20\" value=\"10\">10/20</nve-gauge>\n  <nve-gauge max=\"20\" value=\"15\">15/20</nve-gauge>\n</div>\n",
+      "summary": "Gauges with custom max values for mission checkpoints, validation clips, and map tile processing.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "gauge-status",
+      "name": "Status",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge value=\"50\">50%</nve-gauge>\n  <nve-gauge status=\"accent\" value=\"75\">75%</nve-gauge>\n  <nve-gauge status=\"success\" value=\"75\">75%</nve-gauge>\n  <nve-gauge status=\"warning\" value=\"75\" aria-valuetext=\"2.1m\">2.1m</nve-gauge>\n  <nve-gauge status=\"danger\" value=\"75\" aria-valuetext=\"0Hz\">0Hz</nve-gauge>\n</div>\n",
+      "summary": "Gauges with accent, success, warning, and danger colors for autonomous system health and readiness signals.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "gauge-gradient",
+      "name": "Gradient",
+      "template": "<style>\n  nve-gauge#gauge-temperature-example {\n    --background: conic-gradient(\n      from 225deg at 50% 50%,\n      var(--nve-sys-support-success-emphasis-color) 0deg 18deg,\n      var(--nve-sys-support-warning-emphasis-color) 135deg,\n      var(--nve-sys-support-danger-emphasis-color) 252deg 300deg,\n      var(--nve-sys-support-success-emphasis-color) 300deg 360deg\n    );\n  }\n  nve-gauge#gauge-mbps-example {\n    --background: conic-gradient(\n      from 225deg at 50% 50%,\n      var(--nve-sys-support-danger-emphasis-color) 0deg 18deg,\n      var(--nve-sys-support-warning-emphasis-color) 135deg,\n      var(--nve-sys-support-success-emphasis-color) 252deg 300deg,\n      var(--nve-sys-support-danger-emphasis-color) 300deg 360deg\n    );\n  }\n</style>\n<div nve-layout=\"row gap:md\">\n  <nve-gauge thumb=\"dot\" value=\"82\" id=\"gauge-temperature-example\" aria-label=\"Temperature\" aria-valuetext=\"82°C\">\n    <span>82&deg;C</span>\n    <span nve-text=\"body sm muted\">TEMP</span>\n  </nve-gauge>\n  <nve-gauge thumb=\"needle\" value=\"98\" id=\"gauge-mbps-example\" aria-label=\"Download\" aria-valuetext=\"980Mbps\">\n    <span nve-text=\"body sm\">980Mbps</span>\n    <span nve-text=\"body sm muted\">Download</span>\n  </nve-gauge>\n</div>\n",
+      "summary": "Use gradient colors for gauges with scaled non-segmented values such as temperature and bandwidth.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "pattern"
+      ]
+    },
+    {
+      "id": "gauge-with-text",
+      "name": "WithText",
+      "template": "<div nve-layout=\"row gap:xs align:vertical-center\" nve-text=\"medium\">\n  <nve-gauge status=\"accent\" size=\"sm\" value=\"50\" aria-labelledby=\"route-solve-label\" aria-valuetext=\"2.4s\"\n    >2.4s</nve-gauge\n  >\n  <span id=\"route-solve-label\">Route solve</span>\n</div>\n",
+      "summary": "Small gauge paired with route-solve text for compact autonomous vehicle task rows.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "gauge-size",
+      "name": "Size",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge size=\"sm\" value=\"50\" aria-valuetext=\"30Hz\">\n    <span nve-text=\"grow\">30Hz</span>\n  </nve-gauge>\n  <nve-gauge size=\"md\" value=\"50\" aria-valuetext=\"12Hz\">\n    <span nve-text=\"grow\">12Hz</span>\n  </nve-gauge>\n  <nve-gauge size=\"lg\" value=\"50\" aria-valuetext=\"84%\">\n    <span nve-text=\"grow\">84%</span>\n  </nve-gauge>\n</div>\n",
+      "summary": "Gauges in small, medium, and large sizes for dense robotics and autonomous vehicle dashboards.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "gauge-dynamic",
+      "name": "Dynamic",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge id=\"dynamic-gpu-gauge\" status=\"success\" value=\"0\" aria-label=\"GPU\" aria-valuetext=\"0%\">\n    <span nve-text=\"grow\">0%</span>\n    <span nve-text=\"body sm muted\">GPU</span>\n  </nve-gauge>\n</div>\n<script type=\"module\">\n  const gauge = document.querySelector(\"#dynamic-gpu-gauge\");\n  const valueElement = gauge.querySelector(\"span\");\n  setInterval(() => {\n    const value = Math.floor(Math.random() * 101);\n    const text = value + \"%\";\n    gauge.value = value;\n    gauge.status = value >= 80 ? \"danger\" : value >= 60 ? \"warning\" : \"success\";\n    gauge.setAttribute(\"aria-valuetext\", text);\n    valueElement.textContent = text;\n  }, 1500);\n</script>\n",
+      "summary": "Use for displaying real-time system usage and performance metrics.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "pattern"
+      ]
+    },
+    {
+      "id": "gauge-multi-gauge",
+      "name": "MultiGauge",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge id=\"av-taxi-battery-gauge\" status=\"success\" value=\"74\" aria-label=\"Battery\" aria-valuetext=\"74%\">\n    <span nve-text=\"grow\">74%</span>\n    <span nve-text=\"body sm muted\">BATTERY</span>\n  </nve-gauge>\n  <nve-gauge id=\"av-taxi-perception-gauge\" status=\"success\" value=\"96\" aria-label=\"Perception\" aria-valuetext=\"96%\">\n    <span nve-text=\"grow\">96%</span>\n    <span nve-text=\"body sm muted\">PERCEPTION</span>\n  </nve-gauge>\n  <nve-gauge id=\"av-taxi-compute-gauge\" status=\"success\" value=\"62\" aria-label=\"GPU\" aria-valuetext=\"62%\">\n    <span nve-text=\"grow\">62%</span>\n    <span nve-text=\"body sm muted\">GPU</span>\n  </nve-gauge>\n</div>\n<script type=\"module\">\n  const clamp = (value, min, max) => Math.min(Math.max(value, min), max);\n  const telemetry = {\n    battery: 74,\n    compute: 62,\n    perception: 96,\n  };\n  const gauges = {\n    battery: document.querySelector(\"#av-taxi-battery-gauge\"),\n    compute: document.querySelector(\"#av-taxi-compute-gauge\"),\n    perception: document.querySelector(\"#av-taxi-perception-gauge\"),\n  };\n  const setGauge = (gauge, value, text, status) => {\n    gauge.value = Math.round(value);\n    gauge.status = status;\n    gauge.setAttribute(\"aria-valuetext\", text);\n    gauge.querySelector(\"span\").textContent = text;\n  };\n  setInterval(() => {\n    telemetry.battery = clamp(telemetry.battery - 0.08 + (Math.random() - 0.4) * 0.3, 46, 82);\n    telemetry.compute = clamp(telemetry.compute + (Math.random() - 0.48) * 7, 34, 91);\n    telemetry.perception = clamp(telemetry.perception + (Math.random() - 0.52) * 2.4, 88, 99);\n    const battery = Math.round(telemetry.battery);\n    const compute = Math.round(telemetry.compute);\n    const perception = Math.round(telemetry.perception);\n    setGauge(gauges.battery, battery, battery + \"%\", battery < 30 ? \"danger\" : battery < 50 ? \"warning\" : \"success\");\n    setGauge(gauges.compute, compute, compute + \"%\", compute >= 85 ? \"danger\" : compute >= 70 ? \"warning\" : \"success\");\n    setGauge(\n      gauges.perception,\n      perception,\n      perception + \"%\",\n      perception < 90 ? \"danger\" : perception < 94 ? \"warning\" : \"success\",\n    );\n  }, 1600);\n</script>\n",
+      "summary": "Autonomous vehicle taxi gauges combine battery, perception, compute, and link status with realistic drift. Use for live dispatch views that need changing system health.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/gauge/gauge.js

@@ -0,0 +1,6 @@
+//#region src/gauge/gauge.css?inline
+var e = ":host{--color: var(--nve-sys-text-emphasis-color);--background: var(--nve-sys-interaction-background);--needle-background: var(--nve-sys-interaction-color);--accent-color: var(--nve-sys-interaction-color);--thumb-background: var(--accent-color);--track-background: var(--accent-color);--track-width: 8px;--font-size: var(--nve-ref-font-size-400);--font-weight: var(--nve-ref-font-weight-regular);--gap: var(--nve-ref-space-xs);--width: 128px;--height: calc(var(--width) * .8627);--_animation-duration: var(--nve-ref-animation-duration-250);--_needle-size: calc(var(--track-width) / 3);display:inline-block;position:relative;width:var(--width);height:var(--height);font-weight:var(--font-weight);container-type:inline-size;contain:layout;text-box:trim-both cap alphabetic}.fill-dot-start,.fill-dot-end{r:calc(var(--track-width) / 2.4)}:host([size=\"sm\"]){--font-size: var(--nve-ref-font-size-300);--width: 96px;--_needle-size: calc(var(--track-width) / 2.25);.fill-dot-start,.fill-dot-end{r:calc(var(--track-width) / 1.8)}}:host([size=\"lg\"]){--font-size: var(--nve-ref-font-size-500);--width: 160px;--_needle-size: calc(var(--track-width) / 3.75);.fill-dot-start,.fill-dot-end{r:calc(var(--track-width) / 3)}}[internal-host]{display:grid;place-items:center;position:relative;height:100%}:host([shape=\"half\"]){--height: calc(var(--width) * .5313)}:host([shape=\"half\"]) [internal-host]{place-items:end center}svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}path{fill:none;stroke:#fff;stroke-width:var(--track-width);vector-effect:non-scaling-stroke}path.background{stroke-linecap:round}path.gauge{animation:gauge-progress-in var(--_animation-duration) var(--nve-ref-animation-easing-100);stroke-linecap:butt;stroke-dasharray:var(--_dash-progress) var(--_dash-gap);transition:stroke-dasharray var(--_animation-duration) var(--nve-ref-animation-easing-100);will-change:stroke-dasharray}.background-surface,.fill-surface{inline-size:100%;block-size:100%}.background-surface{background:var(--background)}.fill-surface{background:var(--track-background)}.fill-dot-start{fill:var(--track-background)}.fill-dot-end{animation:gauge-dot-in var(--_animation-duration) var(--nve-ref-animation-easing-100);fill:var(--thumb-background);transform:rotate(var(--_dot-angle));transform-box:view-box;transform-origin:var(--_dot-origin);transition:transform var(--_animation-duration) var(--nve-ref-animation-easing-100);will-change:transform}.fill-layer[hidden],.fill-dot-start[hidden],.fill-dot-end[hidden],.needle[hidden]{display:none}.needle{animation:gauge-needle-in var(--_animation-duration) var(--nve-ref-animation-easing-100);transform:rotate(var(--_needle-angle));transform-box:view-box;transform-origin:var(--_needle-origin);transition:transform var(--_animation-duration) var(--nve-ref-animation-easing-100);will-change:transform}.needle-line{stroke:var(--needle-background);stroke-linecap:round;stroke-width:var(--_needle-size)}.needle-hub{fill:var(--needle-background);r:var(--_needle-size)}slot{display:flex;flex-direction:column;place-items:center;justify-content:center;height:100%;gap:var(--gap);color:var(--color);font-size:var(--font-size);font-weight:var(--nve-ref-font-weight-medium);padding-block-start:calc(var(--track-width) * 2);text-box:trim-both cap alphabetic;line-height:1;width:50%;font-variant-numeric:tabular-nums}:host([shape=\"half\"]) slot{transform:translateY(1cqh)}:host([thumb=\"needle\"]) slot{transform:translateY(1cqh);justify-content:end}:host([shape=\"half\"][thumb=\"needle\"]) slot{transform:translateY(2cqh)}::slotted(*){color:var(--color);font-size:var(--font-size)}:host([status=\"success\"]){--accent-color: var(--nve-sys-support-success-emphasis-color);--background: var(--nve-sys-support-success-muted-color)}:host([status=\"warning\"]){--accent-color: var(--nve-sys-support-warning-emphasis-color);--background: var(--nve-sys-support-warning-muted-color)}:host([status=\"danger\"]){--accent-color: var(--nve-sys-support-danger-emphasis-color);--background: var(--nve-sys-support-danger-muted-color)}:host([status=\"accent\"]){--accent-color: var(--nve-sys-accent-secondary-background)}@media(prefers-reduced-motion:reduce){:host{--_animation-duration: 0s}}@keyframes gauge-progress-in{0%{stroke-dasharray:0 var(--_dash-gap)}to{stroke-dasharray:var(--_dash-progress) var(--_dash-gap)}}@keyframes gauge-dot-in{0%{transform:rotate(var(--_dot-start-angle))}to{transform:rotate(var(--_dot-angle))}}@keyframes gauge-needle-in{0%{transform:rotate(var(--_needle-start-angle))}to{transform:rotate(var(--_needle-angle))}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=gauge.js.map

package/dist/gauge/gauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.js","names":[],"sources":["../../src/gauge/gauge.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  --color: var(--nve-sys-text-emphasis-color);\n  --background: var(--nve-sys-interaction-background);\n  --needle-background: var(--nve-sys-interaction-color);\n  --accent-color: var(--nve-sys-interaction-color);\n  --thumb-background: var(--accent-color);\n  --track-background: var(--accent-color);\n  --track-width: 8px;\n  --font-size: var(--nve-ref-font-size-400);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --gap: var(--nve-ref-space-xs);\n  --width: 128px;\n  --height: calc(var(--width) * 0.8627);\n  --_animation-duration: var(--nve-ref-animation-duration-250);\n  --_needle-size: calc(var(--track-width) / 3);\n\n  display: inline-block;\n  position: relative;\n  width: var(--width);\n  height: var(--height);\n  font-weight: var(--font-weight);\n  container-type: inline-size;\n  contain: layout;\n  text-box: trim-both cap alphabetic;\n}\n\n.fill-dot-start,\n.fill-dot-end {\n  r: calc(var(--track-width) / 2.4);\n}\n\n:host([size='sm']) {\n  --font-size: var(--nve-ref-font-size-300);\n  --width: 96px;\n  --_needle-size: calc(var(--track-width) / 2.25);\n\n  .fill-dot-start,\n  .fill-dot-end {\n    r: calc(var(--track-width) / 1.8);\n  }\n}\n\n:host([size='lg']) {\n  --font-size: var(--nve-ref-font-size-500);\n  --width: 160px;\n  --_needle-size: calc(var(--track-width) / 3.75);\n\n  .fill-dot-start,\n  .fill-dot-end {\n    r: calc(var(--track-width) / 3);\n  }\n}\n\n[internal-host] {\n  display: grid;\n  place-items: center;\n  position: relative;\n  height: 100%;\n}\n\n:host([shape='half']) {\n  --height: calc(var(--width) * 0.5313);\n}\n\n:host([shape='half']) [internal-host] {\n  place-items: end center;\n}\n\nsvg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n\npath {\n  fill: none;\n  stroke: white;\n  stroke-width: var(--track-width);\n  vector-effect: non-scaling-stroke;\n}\n\npath.background {\n  stroke-linecap: round;\n}\n\npath.gauge {\n  animation: gauge-progress-in var(--_animation-duration) var(--nve-ref-animation-easing-100);\n  stroke-linecap: butt;\n  stroke-dasharray: var(--_dash-progress) var(--_dash-gap);\n  transition: stroke-dasharray var(--_animation-duration) var(--nve-ref-animation-easing-100);\n  will-change: stroke-dasharray;\n}\n\n.background-surface,\n.fill-surface {\n  inline-size: 100%;\n  block-size: 100%;\n}\n\n.background-surface {\n  background: var(--background);\n}\n\n.fill-surface {\n  background: var(--track-background);\n}\n\n.fill-dot-start {\n  fill: var(--track-background);\n}\n\n.fill-dot-end {\n  animation: gauge-dot-in var(--_animation-duration) var(--nve-ref-animation-easing-100);\n  fill: var(--thumb-background);\n  transform: rotate(var(--_dot-angle));\n  transform-box: view-box;\n  transform-origin: var(--_dot-origin);\n  transition: transform var(--_animation-duration) var(--nve-ref-animation-easing-100);\n  will-change: transform;\n}\n\n.fill-layer[hidden],\n.fill-dot-start[hidden],\n.fill-dot-end[hidden],\n.needle[hidden] {\n  display: none;\n}\n\n.needle {\n  animation: gauge-needle-in var(--_animation-duration) var(--nve-ref-animation-easing-100);\n  transform: rotate(var(--_needle-angle));\n  transform-box: view-box;\n  transform-origin: var(--_needle-origin);\n  transition: transform var(--_animation-duration) var(--nve-ref-animation-easing-100);\n  will-change: transform;\n}\n\n.needle-line {\n  stroke: var(--needle-background);\n  stroke-linecap: round;\n  stroke-width: var(--_needle-size);\n}\n\n.needle-hub {\n  fill: var(--needle-background);\n  r: var(--_needle-size);\n}\n\nslot {\n  display: flex;\n  flex-direction: column;\n  place-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: var(--gap);\n  color: var(--color);\n  font-size: var(--font-size);\n  font-weight: var(--nve-ref-font-weight-medium);\n  padding-block-start: calc(var(--track-width) * 2);\n  text-box: trim-both cap alphabetic;\n  line-height: 1;\n  width: 50%;\n  font-variant-numeric: tabular-nums;\n}\n\n:host([shape='half']) slot {\n  transform: translateY(1cqh);\n}\n\n:host([thumb='needle']) slot {\n  transform: translateY(1cqh);\n  justify-content: end;\n}\n\n:host([shape='half'][thumb='needle']) slot {\n  transform: translateY(2cqh);\n}\n\n::slotted(*) {\n  color: var(--color);\n  font-size: var(--font-size);\n}\n\n:host([status='success']) {\n  --accent-color: var(--nve-sys-support-success-emphasis-color);\n  --background: var(--nve-sys-support-success-muted-color);\n}\n\n:host([status='warning']) {\n  --accent-color: var(--nve-sys-support-warning-emphasis-color);\n  --background: var(--nve-sys-support-warning-muted-color);\n}\n\n:host([status='danger']) {\n  --accent-color: var(--nve-sys-support-danger-emphasis-color);\n  --background: var(--nve-sys-support-danger-muted-color);\n}\n\n:host([status='accent']) {\n  --accent-color: var(--nve-sys-accent-secondary-background);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --_animation-duration: 0s;\n  }\n}\n\n@keyframes gauge-progress-in {\n  from {\n    stroke-dasharray: 0 var(--_dash-gap);\n  }\n\n  to {\n    stroke-dasharray: var(--_dash-progress) var(--_dash-gap);\n  }\n}\n\n@keyframes gauge-dot-in {\n  from {\n    transform: rotate(var(--_dot-start-angle));\n  }\n\n  to {\n    transform: rotate(var(--_dot-angle));\n  }\n}\n\n@keyframes gauge-needle-in {\n  from {\n    transform: rotate(var(--_needle-start-angle));\n  }\n\n  to {\n    transform: rotate(var(--_needle-angle));\n  }\n}\n"],"mappings":""}