@nvidia-elements/core 2.20.1 → 2.20.3

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":["inputQuery","setupControlValidationStates","cleanups","control","messages","updateValidityState","hideInactiveValidationMessages","resetValidityState","hideAllValidationMessages","addCleanupListener","m","showActiveValidationMessages","current","ControlMessage","setupControlStates","observers","states","addControlInteractionListeners","getElementUpdate","value","e","setupControlGroupStates","toggleControlGroupDisabledState","controlGroup","getAttributeChanges","i","setupControlStatusStates","getAttributeListChanges","target","mutation","matchesElementName","updateControlStatusState","message","type","listener"],"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/forms/validation.examples.js

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

package/dist/forms/validation.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"validation.examples.js","names":[],"sources":["../../src/forms/validation.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, unsafeCSS, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { state } from 'lit/decorators/state.js';\nimport { query } from 'lit/decorators/query.js';\nimport layout from '@nvidia-elements/styles/layout.css?inline';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/alert/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/password/define.js';\n\nexport default {\n  title: 'Elements/Forms',\n  component: 'forms'\n};\n\n/**\n * @summary Use real-time validation with contextual error messages to disable submit until form is valid.\n * @tags pattern\n */\nexport const LoginForm = {\n  render() {\n    return html`\n<form id=\"validation\" nve-layout=\"column gap:md\" style=\"max-width: 350px;\">\n  <nve-input>\n    <label>email</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia\\.com\" autocomplete=\"off\" />\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    <nve-control-message error=\"patternMismatch\">invalid NVIDIA email</nve-control-message>\n  </nve-input>\n\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    <nve-control-message error=\"tooShort\">minimum length is 6 characters</nve-control-message>\n  </nve-password>\n\n  <nve-button disabled>login to account</nve-button>\n\n  <nve-alert-group hidden status=\"success\">\n    <nve-alert></nve-alert>\n  </nve-alert-group>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('form#validation');\n  const alertGroup = document.querySelector('#validation nve-alert-group');\n  const alert = document.querySelector('#validation nve-alert');\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    const { email, password } = Object.fromEntries(new FormData(form));\n    alert.innerText = email + ' / ' + password;\n    alertGroup.hidden = false;\n  });\n\n  form.addEventListener('input', e => {\n    form.querySelector('nve-button').disabled = form.matches(':invalid');\n  });\n</script>\n    `\n  }\n}\n\n/**\n * @summary Login form with grouped error display showing all validation issues together after submission attempt.\n */\nexport const ErrorGroup = {\n  render: () => html`\n<form nve-layout=\"column gap:md\" style=\"max-width: 350px;\" novalidate>\n  <nve-input>\n    <label>email</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia\\.com\" autocomplete=\"off\" />\n    <nve-control-message status=\"error\">invalid email</nve-control-message>\n  </nve-input>\n\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n    <nve-control-message status=\"error\">minimum length is 6 characters</nve-control-message>\n  </nve-password>\n\n  <nve-button>login to account</nve-button>\n\n  <nve-alert-group status=\"danger\">\n    <nve-alert>invalid email</nve-alert>\n    <nve-alert>password required</nve-alert>\n  </nve-alert-group>\n</form>\n  `\n}\n\n/**\n * @summary Login form example of success feedback with positive confirmation messages for valid input and successful form submission.\n */\nexport const SuccessGroup = {\n  render: () => {\n    return html`\n<form nve-layout=\"column gap:md\" style=\"max-width: 350px;\" novalidate>\n  <nve-input>\n    <label>username</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia\\.com\" autocomplete=\"off\" />\n    <nve-control-message status=\"success\">username available</nve-control-message>\n  </nve-input>\n\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n  </nve-password>\n\n  <nve-button>login to account</nve-button>\n\n  <nve-alert-group status=\"success\">\n    <nve-alert closable>account created</nve-alert>\n  </nve-alert-group>\n</form>\n`\n  }\n}\n\n/**\n * @summary Form reset functionality allowing users to clear individual fields or reset the entire form.\n */\nexport const ResetForm = {\n  render: () => {\n    return html`\n<form nve-layout=\"column gap:md\" style=\"max-width: 350px;\">\n  <nve-input>\n    <label>email</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia\\.com\" autocomplete=\"off\" value=\"test@nvidia.com\" />\n    <nve-icon-button aria-label=\"reset\" icon-name=\"cancel\" container=\"flat\" type=\"button\"></nve-icon-button>\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    <nve-control-message error=\"patternMismatch\">invalid NVIDIA email</nve-control-message>\n  </nve-input>\n\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n  </nve-password>\n\n  <nve-button type=\"button\">reset form</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('form');\n  const input = form.querySelector('nve-input');\n  const resetInput = form.querySelector('nve-icon-button[icon-name=\"cancel\"]');\n  const resetForm = form.querySelector('nve-button');\n\n  resetInput.addEventListener('click', e => input.reset());\n  resetForm.addEventListener('click', e => form.reset());\n  form.addEventListener('reset', e => console.log(e));\n</script>\n`\n  }\n}\n\n@customElement('app-login')\nexport class AppLogin extends LitElement {\n  static styles = [unsafeCSS(layout)];\n\n  @query('form') form: HTMLFormElement;\n\n  @state() formValues = { email: '', password: '', remember: false };\n\n  @state() showNotification = false;\n\n  render() {\n    return html`\n      <form @submit=${e => this.#submit(e)} @input=${this.#input} nve-layout=\"column gap:lg align:stretch\" style=\"max-width: 400px\">\n        <nve-input>\n          <label>Email</label>\n          <input .value=${this.formValues.email} type=\"email\" name=\"email\" autocomplete=\"off\" pattern=\".+@nvidia.com\" required />\n          <nve-control-message error=\"valueMissing\">required</nve-control-message>\n          <nve-control-message error=\"patternMismatch\">invalid NVIDIA email</nve-control-message>\n        </nve-input>\n\n        <nve-password>\n          <label>Password</label>\n          <input .value=${this.formValues.password} type=\"password\" name=\"password\" minlength=\"6\" required />\n          <nve-control-message error=\"valueMissing\">required</nve-control-message>\n          <nve-control-message error=\"tooShort\">minimum length is 6 characters</nve-control-message>\n        </nve-password>\n\n        <nve-checkbox>\n          <label>Remember me</label>\n          <input ?checked=${this.formValues.remember} type=\"checkbox\" name=\"remember\" />\n        </nve-checkbox>\n\n        <nve-button interaction=\"emphasis\">Login</nve-button>\n      </form>\n      <pre>${JSON.stringify(this.formValues, null, 2)}</pre>\n      <nve-notification ?hidden=${!this.showNotification} @close=${() => this.showNotification = false} close-timeout=\"2000\" status=\"success\" position=\"top\">Submited: ${JSON.stringify(this.formValues)}</nve-notification>\n    `;\n  }\n\n  #input() {\n    this.formValues = Object.fromEntries(new FormData(this.form)) as unknown as { email: string, password: string, remember: boolean };\n  }\n\n  #submit(e) {\n    e.preventDefault();\n    if (this.form.reportValidity()) {\n      this.showNotification = true\n    }\n  }\n}\n\n/**\n * @summary Forms work with LitElement\n * @tags test-case\n */\nexport const LitForms = {\n  render: () => html`<app-login></app-login>`\n}\n"],"mappings":";AAGA,IAAA,IAAe"}
+{"version":3,"file":"validation.examples.js","names":["validation_examples_default"],"sources":["../../src/forms/validation.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, unsafeCSS, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { state } from 'lit/decorators/state.js';\nimport { query } from 'lit/decorators/query.js';\nimport layout from '@nvidia-elements/styles/layout.css?inline';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/alert/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/password/define.js';\n\nexport default {\n  title: 'Elements/Forms',\n  component: 'forms'\n};\n\n/**\n * @summary Use real-time validation with contextual error messages to disable submit until form is valid.\n * @tags pattern\n */\nexport const LoginForm = {\n  render() {\n    return html`\n<form id=\"validation\" nve-layout=\"column gap:md\" style=\"max-width: 350px;\">\n  <nve-input>\n    <label>email</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia\\.com\" autocomplete=\"off\" />\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    <nve-control-message error=\"patternMismatch\">invalid NVIDIA email</nve-control-message>\n  </nve-input>\n\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    <nve-control-message error=\"tooShort\">minimum length is 6 characters</nve-control-message>\n  </nve-password>\n\n  <nve-button disabled>login to account</nve-button>\n\n  <nve-alert-group hidden status=\"success\">\n    <nve-alert></nve-alert>\n  </nve-alert-group>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('form#validation');\n  const alertGroup = document.querySelector('#validation nve-alert-group');\n  const alert = document.querySelector('#validation nve-alert');\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    const { email, password } = Object.fromEntries(new FormData(form));\n    alert.innerText = email + ' / ' + password;\n    alertGroup.hidden = false;\n  });\n\n  form.addEventListener('input', e => {\n    form.querySelector('nve-button').disabled = form.matches(':invalid');\n  });\n</script>\n    `\n  }\n}\n\n/**\n * @summary Login form with grouped error display showing all validation issues together after submission attempt.\n */\nexport const ErrorGroup = {\n  render: () => html`\n<form nve-layout=\"column gap:md\" style=\"max-width: 350px;\" novalidate>\n  <nve-input>\n    <label>email</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia\\.com\" autocomplete=\"off\" />\n    <nve-control-message status=\"error\">invalid email</nve-control-message>\n  </nve-input>\n\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n    <nve-control-message status=\"error\">minimum length is 6 characters</nve-control-message>\n  </nve-password>\n\n  <nve-button>login to account</nve-button>\n\n  <nve-alert-group status=\"danger\">\n    <nve-alert>invalid email</nve-alert>\n    <nve-alert>password required</nve-alert>\n  </nve-alert-group>\n</form>\n  `\n}\n\n/**\n * @summary Login form example of success feedback with positive confirmation messages for valid input and successful form submission.\n */\nexport const SuccessGroup = {\n  render: () => {\n    return html`\n<form nve-layout=\"column gap:md\" style=\"max-width: 350px;\" novalidate>\n  <nve-input>\n    <label>username</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia\\.com\" autocomplete=\"off\" />\n    <nve-control-message status=\"success\">username available</nve-control-message>\n  </nve-input>\n\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n  </nve-password>\n\n  <nve-button>login to account</nve-button>\n\n  <nve-alert-group status=\"success\">\n    <nve-alert closable>account created</nve-alert>\n  </nve-alert-group>\n</form>\n`\n  }\n}\n\n/**\n * @summary Form reset functionality allowing users to clear individual fields or reset the entire form.\n */\nexport const ResetForm = {\n  render: () => {\n    return html`\n<form nve-layout=\"column gap:md\" style=\"max-width: 350px;\">\n  <nve-input>\n    <label>email</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia\\.com\" autocomplete=\"off\" value=\"test@nvidia.com\" />\n    <nve-icon-button aria-label=\"reset\" icon-name=\"cancel\" container=\"flat\" type=\"button\"></nve-icon-button>\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    <nve-control-message error=\"patternMismatch\">invalid NVIDIA email</nve-control-message>\n  </nve-input>\n\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n  </nve-password>\n\n  <nve-button type=\"button\">reset form</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('form');\n  const input = form.querySelector('nve-input');\n  const resetInput = form.querySelector('nve-icon-button[icon-name=\"cancel\"]');\n  const resetForm = form.querySelector('nve-button');\n\n  resetInput.addEventListener('click', e => input.reset());\n  resetForm.addEventListener('click', e => form.reset());\n  form.addEventListener('reset', e => console.log(e));\n</script>\n`\n  }\n}\n\n@customElement('app-login')\nexport class AppLogin extends LitElement {\n  static styles = [unsafeCSS(layout)];\n\n  @query('form') form: HTMLFormElement;\n\n  @state() formValues = { email: '', password: '', remember: false };\n\n  @state() showNotification = false;\n\n  render() {\n    return html`\n      <form @submit=${e => this.#submit(e)} @input=${this.#input} nve-layout=\"column gap:lg align:stretch\" style=\"max-width: 400px\">\n        <nve-input>\n          <label>Email</label>\n          <input .value=${this.formValues.email} type=\"email\" name=\"email\" autocomplete=\"off\" pattern=\".+@nvidia.com\" required />\n          <nve-control-message error=\"valueMissing\">required</nve-control-message>\n          <nve-control-message error=\"patternMismatch\">invalid NVIDIA email</nve-control-message>\n        </nve-input>\n\n        <nve-password>\n          <label>Password</label>\n          <input .value=${this.formValues.password} type=\"password\" name=\"password\" minlength=\"6\" required />\n          <nve-control-message error=\"valueMissing\">required</nve-control-message>\n          <nve-control-message error=\"tooShort\">minimum length is 6 characters</nve-control-message>\n        </nve-password>\n\n        <nve-checkbox>\n          <label>Remember me</label>\n          <input ?checked=${this.formValues.remember} type=\"checkbox\" name=\"remember\" />\n        </nve-checkbox>\n\n        <nve-button interaction=\"emphasis\">Login</nve-button>\n      </form>\n      <pre>${JSON.stringify(this.formValues, null, 2)}</pre>\n      <nve-notification ?hidden=${!this.showNotification} @close=${() => this.showNotification = false} close-timeout=\"2000\" status=\"success\" position=\"top\">Submited: ${JSON.stringify(this.formValues)}</nve-notification>\n    `;\n  }\n\n  #input() {\n    this.formValues = Object.fromEntries(new FormData(this.form)) as unknown as { email: string, password: string, remember: boolean };\n  }\n\n  #submit(e) {\n    e.preventDefault();\n    if (this.form.reportValidity()) {\n      this.showNotification = true\n    }\n  }\n}\n\n/**\n * @summary Forms work with LitElement\n * @tags test-case\n */\nexport const LitForms = {\n  render: () => html`<app-login></app-login>`\n}\n"],"mappings":";AAGA,IAAAA,IAAe"}

package/dist/gauge/define.js

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

package/dist/gauge/define.js.map

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

package/dist/gauge/gauge.examples.js

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

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

@@ -1 +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    <nve-gauge status=\"accent\" value=\"66\">66%</nve-gauge>\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=\"84\" 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"}
+{"version":3,"file":"gauge.examples.js","names":["gauge_examples_default"],"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    <nve-gauge status=\"accent\" value=\"66\">66%</nve-gauge>\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=\"84\" 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,IAAAA,IAAS"}

package/dist/gauge/gauge.js

@@ -1,6 +1,5 @@
-//#region src/gauge/gauge.css?inline
+// 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-end{r:calc(var(--track-width) / 3.2)}:host([size=\"sm\"]){--font-size: var(--nve-ref-font-size-300);--width: 96px;--_needle-size: calc(var(--track-width) / 2.25);.fill-dot-end{r:calc(var(--track-width) / 2.4)}}:host([size=\"lg\"]){--font-size: var(--nve-ref-font-size-500);--width: 160px;--_needle-size: calc(var(--track-width) / 3.75);.fill-dot-end{r:calc(var(--track-width) / 4)}}[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{stroke-linecap:round}.background-surface,.fill-surface{inline-size:100%;block-size:100%}.background-surface{background:var(--background)}.fill-surface{background:var(--track-background)}.fill-dot-end{fill:var(--thumb-background);transform:rotate(var(--_dot-angle));transform-box:view-box;transform-origin:var(--_dot-origin)}:host([thumb=\"dot\"]) .fill-dot-end{animation:gauge-dot-in var(--_animation-duration) var(--nve-ref-animation-easing-100);will-change:transform}.fill-layer[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);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-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

@@ -1 +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-end {\n  r: calc(var(--track-width) / 3.2);\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-end {\n    r: calc(var(--track-width) / 2.4);\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-end {\n    r: calc(var(--track-width) / 4);\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  stroke-linecap: round;\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-end {\n  fill: var(--thumb-background);\n  transform: rotate(var(--_dot-angle));\n  transform-box: view-box;\n  transform-origin: var(--_dot-origin);\n}\n\n:host([thumb='dot']) .fill-dot-end {\n  animation: gauge-dot-in var(--_animation-duration) var(--nve-ref-animation-easing-100);\n  will-change: transform;\n}\n\n.fill-layer[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  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-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":""}
+{"version":3,"file":"gauge.js","names":["gauge_default"],"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-end {\n  r: calc(var(--track-width) / 3.2);\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-end {\n    r: calc(var(--track-width) / 2.4);\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-end {\n    r: calc(var(--track-width) / 4);\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  stroke-linecap: round;\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-end {\n  fill: var(--thumb-background);\n  transform: rotate(var(--_dot-angle));\n  transform-box: view-box;\n  transform-origin: var(--_dot-origin);\n}\n\n:host([thumb='dot']) .fill-dot-end {\n  animation: gauge-dot-in var(--_animation-duration) var(--nve-ref-animation-easing-100);\n  will-change: transform;\n}\n\n.fill-layer[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  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-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":""}

package/dist/gauge/gauge2.js

@@ -1,12 +1,12 @@
 import { attachInternals as e } from "../internal/utils/a11y.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import r from "./gauge.js";
 import { LitElement as i, html as a } from "lit";
 import { property as o } from "lit/decorators/property.js";
 import { I18nController as s } from "@nvidia-elements/foundations/internal/i18n";
 import { styleMap as c } from "lit/directives/style-map.js";
-//#region src/gauge/gauge.ts
+// src/gauge/gauge.ts
 var l = {
 	default: {
 		center: 64,
@@ -45,7 +45,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-gauge",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	#e;
@@ -142,7 +142,6 @@ n([o({ type: Number })], f.prototype, "value", void 0), n([o({ type: Number })],
 	type: String,
 	reflect: !0
 })], f.prototype, "size", void 0), n([o({ type: Object })], f.prototype, "i18n", void 0);
-//#endregion
 export { f as Gauge };
 
 //# sourceMappingURL=gauge2.js.map

package/dist/gauge/gauge2.js.map

@@ -1 +1 @@
-{"version":3,"file":"gauge2.js","names":[],"sources":["../../src/gauge/gauge.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type { Size, SupportStatus } from '@nvidia-elements/core/internal';\nimport { attachInternals, useStyles } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './gauge.css?inline';\n\nconst GAUGE_GEOMETRY = {\n  default: {\n    center: 64,\n    path: 'M 27.23 100.77 A 52 52 0 1 1 100.77 100.77',\n    radius: 52,\n    startAngle: 135,\n    sweepAngle: 270,\n    surfaceHeight: 128,\n    viewBox: '8.53 8.53 110.93 95.7'\n  },\n  half: {\n    center: 64,\n    path: 'M 12 64 A 52 52 0 0 1 116 64',\n    radius: 52,\n    startAngle: 180,\n    sweepAngle: 180,\n    surfaceHeight: 64,\n    viewBox: '8.53 8.53 110.93 58.93'\n  }\n} as const;\n\ntype GaugeGeometry = (typeof GAUGE_GEOMETRY)[keyof typeof GAUGE_GEOMETRY];\n\nconst thumbStyle = (thumb: 'dot' | 'needle', progressAngle: number, geometry: GaugeGeometry) => ({\n  [`--_${thumb}-angle`]: `${progressAngle}deg`,\n  [`--_${thumb}-origin`]: `${geometry.center}px ${geometry.center}px`,\n  [`--_${thumb}-start-angle`]: `${geometry.startAngle}deg`\n});\n\nconst i18nDefaults = {\n  danger: 'danger',\n  information: 'information',\n  success: 'success',\n  warning: 'warning'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-gauge\n * @description Use a gauge to show system resource usage.\n * @documentation https://nvidia.github.io/elements/docs/elements/gauge/\n * @since 2.0.4\n * @entrypoint \\@nvidia-elements/core/gauge\n * @slot - Content to display in the gauge center.\n * @cssprop --track-width\n * @cssprop --accent-color\n * @cssprop --background\n * @cssprop --needle-background\n * @cssprop --track-background\n * @cssprop --thumb-background\n * @cssprop --color\n * @cssprop --width\n * @cssprop --height\n * @cssprop --font-size\n * @cssprop --gap\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n * @stable false\n */\nexport class Gauge extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-gauge',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** The current `value` of the gauge. */\n  @property({ type: Number }) value = 0;\n\n  /** The `max` value of the gauge that the `value` is proportionally scaled to. */\n  @property({ type: Number }) max? = 100;\n\n  /** Four visual treatments represent the `status` of tasks. */\n  @property({ type: String, reflect: true }) status?: SupportStatus | 'neutral' = 'neutral';\n\n  /** Determines the gauge shape. Set `half` for a compact semi-circular arc. */\n  @property({ type: String, reflect: true }) shape?: 'half';\n\n  /** Controls the value indicator. Set `dot` for only the end dot or `needle` for a pointer. */\n  @property({ type: String, reflect: true }) thumb: 'fill' | 'dot' | 'needle' = 'fill';\n\n  /** T-shirt `size` of the gauge. */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** Progress the gauge paints, which eases toward the value instead of jumping to it. */\n  #paintedProgress = 0;\n\n  #progressAnimation?: Animation;\n\n  #progressFrame = 0;\n\n  #normalizedValues() {\n    const sourceMax = this.max;\n    const max = sourceMax !== undefined && Number.isFinite(sourceMax) && sourceMax > 0 ? sourceMax : 100;\n    const value = Number.isFinite(this.value) ? Math.min(Math.max(this.value, 0), max) : 0;\n    return { value, max };\n  }\n\n  render() {\n    const geometry = this.#geometry();\n    const progress = this.#paintedProgress;\n    const thumb = this.#normalizedThumb();\n    const progressAngle = this.#angleAtProgress(geometry, progress);\n    const fillPath = this.#pathAtProgress(geometry, progress);\n    const showFill = thumb === 'fill';\n    const showDot = progress > 0 && (thumb === 'fill' || thumb === 'dot');\n\n    return html`\n      <div internal-host>\n        <svg viewBox=${geometry.viewBox} role=\"presentation\" aria-hidden=\"true\">\n          <defs>\n            <mask id=\"background-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n              <path d=${geometry.path} class=\"background\"></path>\n            </mask>\n            <mask id=\"fill-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n              <path d=${fillPath} class=\"gauge\" ?empty=${progress <= 0}></path>\n            </mask>\n          </defs>\n          <foreignObject width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#background-mask)\">\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"background-surface\"></div>\n          </foreignObject>\n          <foreignObject class=\"fill-layer\" width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#fill-mask)\"\n            ?hidden=${!showFill || progress <= 0}>\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"fill-surface\"></div>\n          </foreignObject>\n          <circle class=\"fill-dot-end\" cx=${geometry.center + geometry.radius} cy=${geometry.center}\n            ?hidden=${!showDot}\n            style=${styleMap(thumbStyle('dot', progressAngle, geometry))}>\n          </circle>\n          <g class=\"needle\"\n            ?hidden=${thumb !== 'needle'}\n            style=${styleMap(thumbStyle('needle', progressAngle, geometry))}>\n            <line class=\"needle-line\" x1=${geometry.center} y1=${geometry.center} x2=${geometry.center + 40} y2=${geometry.center}></line>\n            <circle class=\"needle-hub\" cx=${geometry.center} cy=${geometry.center}></circle>\n          </g>\n        </svg>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'progressbar';\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    // settle the value, otherwise reattaching paints the frame where the animation stopped\n    if (this.#progressAnimation) {\n      this.#stopProgressAnimation();\n      this.#paintedProgress = this.#targetProgress();\n      this.requestUpdate();\n    }\n  }\n\n  willUpdate(props: PropertyValues<this>) {\n    super.willUpdate(props);\n\n    if (props.has('value') || props.has('max')) {\n      this.#animateProgress();\n    }\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    const { value, max } = this.#normalizedValues();\n    this._internals.ariaValueNow = `${value}`;\n    this._internals.ariaValueMax = `${max}`;\n    const { status } = this;\n    const statusLabel =\n      status !== undefined && status !== 'neutral' && status !== 'accent' ? this.i18n[status] : undefined;\n    this._internals.ariaLabel = statusLabel ?? this.i18n.information ?? null;\n  }\n\n  #targetProgress() {\n    const { value, max } = this.#normalizedValues();\n    return (value / max) * 100;\n  }\n\n  /**\n   * Eases the painted progress toward the value with the duration and easing declared in css, so\n   * that `prefers-reduced-motion` and a `--_animation-duration` override both settle immediately.\n   */\n  #animateProgress() {\n    const target = this.#targetProgress();\n    const timing = this.hasUpdated ? this.#animationTiming() : undefined;\n\n    this.#stopProgressAnimation();\n\n    if (!timing || target === this.#paintedProgress) {\n      this.#paintedProgress = target;\n      return;\n    }\n\n    const from = this.#paintedProgress;\n    // keyframeless animations only keep time, leaving every painted frame to `render`\n    const animation = this.animate(null, timing);\n    const paint = (progress: number) => {\n      this.#paintedProgress = from + (target - from) * progress;\n      this.requestUpdate();\n    };\n    const paintFrame = () => {\n      paint(animation.effect?.getComputedTiming().progress ?? 0);\n\n      if (animation.playState === 'running') {\n        this.#progressFrame = requestAnimationFrame(paintFrame);\n      }\n    };\n\n    animation.finished.then(\n      () => {\n        // a value that changes on the frame this settles already started the next animation\n        if (this.#progressAnimation === animation) {\n          this.#stopProgressAnimation();\n          paint(1);\n        }\n      },\n      () => undefined\n    );\n\n    this.#progressAnimation = animation;\n    this.#progressFrame = requestAnimationFrame(paintFrame);\n  }\n\n  #stopProgressAnimation() {\n    // only a browser render starts an animation, so server rendering never reaches these apis\n    if (this.#progressAnimation) {\n      cancelAnimationFrame(this.#progressFrame);\n      this.#progressAnimation.cancel();\n      this.#progressAnimation = undefined;\n    }\n  }\n\n  #animationTiming() {\n    const gaugeStyles = getComputedStyle(this);\n    const duration = gaugeStyles.getPropertyValue('--_animation-duration').trim();\n    const milliseconds = parseFloat(duration) * (duration.endsWith('ms') ? 1 : 1000);\n    const easing = gaugeStyles.getPropertyValue('--nve-ref-animation-easing-100').trim();\n\n    return milliseconds > 0 ? { duration: milliseconds, easing: easing || 'linear' } : undefined;\n  }\n\n  #angleAtProgress(geometry: GaugeGeometry, progress: number) {\n    return geometry.startAngle + geometry.sweepAngle * (progress / 100);\n  }\n\n  #pathAtProgress(geometry: GaugeGeometry, progress: number) {\n    const start = this.#pointAtAngle(geometry, geometry.startAngle);\n    const sweepAngle = geometry.sweepAngle * (progress / 100);\n    const end = this.#pointAtAngle(geometry, geometry.startAngle + sweepAngle);\n    const largeArcFlag = sweepAngle > 180 ? 1 : 0;\n    return `M ${start.x} ${start.y} A ${geometry.radius} ${geometry.radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;\n  }\n\n  #pointAtAngle(geometry: GaugeGeometry, angle: number) {\n    const radians = (angle * Math.PI) / 180;\n    return {\n      x: geometry.center + geometry.radius * Math.cos(radians),\n      y: geometry.center + geometry.radius * Math.sin(radians)\n    };\n  }\n\n  #geometry() {\n    return this.shape === 'half' ? GAUGE_GEOMETRY.half : GAUGE_GEOMETRY.default;\n  }\n\n  #normalizedThumb() {\n    return this.thumb === 'dot' || this.thumb === 'needle' ? this.thumb : 'fill';\n  }\n}\n"],"mappings":";;;;;;;;;AAYA,IAAM,IAAiB;CACrB,SAAS;EACP,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,YAAY;EACZ,YAAY;EACZ,eAAe;EACf,SAAS;CACX;CACA,MAAM;EACJ,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,YAAY;EACZ,YAAY;EACZ,eAAe;EACf,SAAS;CACX;AACF,GAIM,KAAc,GAAyB,GAAuB,OAA6B;EAC9F,MAAM,EAAM,UAAU,GAAG,EAAc;EACvC,MAAM,EAAM,WAAW,GAAG,EAAS,OAAO,KAAK,EAAS,OAAO;EAC/D,MAAM,EAAM,gBAAgB,GAAG,EAAS,WAAW;AACtD,IAEM,IAAe;CACnB,QAAQ;CACR,aAAa;CACb,SAAS;CACT,SAAS;AACX,GAuBa,IAAb,cAA2B,EAAW;;EAuCnB,aA3BmB,KAAA,QAAA,GAGD,KAAA,MAAA,KAG6C,KAAA,SAAA,WAMF,KAAA,QAAA,QAKtC,KAAA,KAAA,IAAI,EAAqB,MAAM,CAAY,GAGhD,KAAA,OAAA,KAAK,GAAgB,MAGrC,KAAA,KAAA,GAIF,KAAA,KAAA;;;EAtCD,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAuBA;CAMA;CAEA;CAEA;CAEA,KAAoB;EAClB,IAAM,IAAY,KAAK,KACjB,IAAM,MAAc,KAAA,KAAa,OAAO,SAAS,CAAS,KAAK,IAAY,IAAI,IAAY;EAEjG,OAAO;GAAE,OADK,OAAO,SAAS,KAAK,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,OAAO,CAAC,GAAG,CAAG,IAAI;GACrE;EAAI;CACtB;CAEA,SAAS;EACP,IAAM,IAAW,KAAK,GAAU,GAC1B,IAAW,KAAK,IAChB,IAAQ,KAAK,GAAiB,GAC9B,IAAgB,KAAK,GAAiB,GAAU,CAAQ,GACxD,IAAW,KAAK,GAAgB,GAAU,CAAQ,GAClD,IAAW,MAAU,QACrB,IAAU,IAAW,MAAM,MAAU,UAAU,MAAU;EAE/D,OAAO,CAAI,oCAEQ,EAAS,QAAQ,uIAE2D,EAAS,cAAc,aAClG,EAAS,KAAK,qHAEuD,EAAS,cAAc,aAC5F,EAAS,0BAAwB,KAAY,EAAE,4DAGzB,EAAS,cAAc,kLAGJ,EAAS,cAAc,oCAClE,CAAC,KAAY,KAAY,EAAE,0HAGL,EAAS,SAAS,EAAS,OAAO,QAAM,EAAS,OAAO,aAC9E,CAAC,EAAQ,WACX,EAAS,EAAW,OAAO,GAAe,CAAQ,CAAC,EAAE,wCAGnD,MAAU,SAAS,WACrB,EAAS,EAAW,UAAU,GAAe,CAAQ,CAAC,EAAE,kCACjC,EAAS,OAAO,QAAM,EAAS,OAAO,QAAM,EAAS,SAAS,GAAG,QAAM,EAAS,OAAO,0CACtF,EAAS,OAAO,QAAM,EAAS,OAAO;CAMhF;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,uBAAuB;EAIrB,AAHA,MAAM,qBAAqB,GAGvB,KAAK,OACP,KAAK,GAAuB,GAC5B,KAAK,KAAmB,KAAK,GAAgB,GAC7C,KAAK,cAAc;CAEvB;CAEA,WAAW,GAA6B;EAGtC,AAFA,MAAM,WAAW,CAAK,IAElB,EAAM,IAAI,OAAO,KAAK,EAAM,IAAI,KAAK,MACvC,KAAK,GAAiB;CAE1B;CAEA,QAAQ,GAA6B;EACnC,MAAM,QAAQ,CAAK;EACnB,IAAM,EAAE,UAAO,WAAQ,KAAK,GAAkB;EAE9C,AADA,KAAK,WAAW,eAAe,GAAG,KAClC,KAAK,WAAW,eAAe,GAAG;EAClC,IAAM,EAAE,cAAW,MACb,IACJ,MAAW,KAAA,KAAa,MAAW,aAAa,MAAW,WAAW,KAAK,KAAK,KAAU,KAAA;EAC5F,KAAK,WAAW,YAAY,KAAe,KAAK,KAAK,eAAe;CACtE;CAEA,KAAkB;EAChB,IAAM,EAAE,UAAO,WAAQ,KAAK,GAAkB;EAC9C,OAAQ,IAAQ,IAAO;CACzB;CAMA,KAAmB;EACjB,IAAM,IAAS,KAAK,GAAgB,GAC9B,IAAS,KAAK,aAAa,KAAK,GAAiB,IAAI,KAAA;EAI3D,IAFA,KAAK,GAAuB,GAExB,CAAC,KAAU,MAAW,KAAK,IAAkB;GAC/C,KAAK,KAAmB;GACxB;EACF;EAEA,IAAM,IAAO,KAAK,IAEZ,IAAY,KAAK,QAAQ,MAAM,CAAM,GACrC,KAAS,MAAqB;GAElC,AADA,KAAK,KAAmB,KAAQ,IAAS,KAAQ,GACjD,KAAK,cAAc;EACrB,GACM,UAAmB;GAGvB,AAFA,EAAM,EAAU,QAAQ,kBAAkB,CAAC,CAAC,YAAY,CAAC,GAErD,EAAU,cAAc,cAC1B,KAAK,KAAiB,sBAAsB,CAAU;EAE1D;EAcA,AAZA,EAAU,SAAS,WACX;GAEJ,AAAI,KAAK,OAAuB,MAC9B,KAAK,GAAuB,GAC5B,EAAM,CAAC;EAEX,SACM,KAAA,CACR,GAEA,KAAK,KAAqB,GAC1B,KAAK,KAAiB,sBAAsB,CAAU;CACxD;CAEA,KAAyB;EAEvB,AAGE,KAAK,QAFL,qBAAqB,KAAK,EAAc,GACxC,KAAK,GAAmB,OAAO,GACL,KAAA;CAE9B;CAEA,KAAmB;EACjB,IAAM,IAAc,iBAAiB,IAAI,GACnC,IAAW,EAAY,iBAAiB,uBAAuB,CAAC,CAAC,KAAK,GACtE,IAAe,WAAW,CAAQ,KAAK,EAAS,SAAS,IAAI,IAAI,IAAI,MACrE,IAAS,EAAY,iBAAiB,gCAAgC,CAAC,CAAC,KAAK;EAEnF,OAAO,IAAe,IAAI;GAAE,UAAU;GAAc,QAAQ,KAAU;EAAS,IAAI,KAAA;CACrF;CAEA,GAAiB,GAAyB,GAAkB;EAC1D,OAAO,EAAS,aAAa,EAAS,cAAc,IAAW;CACjE;CAEA,GAAgB,GAAyB,GAAkB;EACzD,IAAM,IAAQ,KAAK,GAAc,GAAU,EAAS,UAAU,GACxD,IAAa,EAAS,cAAc,IAAW,MAC/C,IAAM,KAAK,GAAc,GAAU,EAAS,aAAa,CAAU,GACnE,IAAe,MAAa;EAClC,OAAO,KAAK,EAAM,EAAE,GAAG,EAAM,EAAE,KAAK,EAAS,OAAO,GAAG,EAAS,OAAO,KAAK,EAAa,KAAK,EAAI,EAAE,GAAG,EAAI;CAC7G;CAEA,GAAc,GAAyB,GAAe;EACpD,IAAM,IAAW,IAAQ,KAAK,KAAM;EACpC,OAAO;GACL,GAAG,EAAS,SAAS,EAAS,SAAS,KAAK,IAAI,CAAO;GACvD,GAAG,EAAS,SAAS,EAAS,SAAS,KAAK,IAAI,CAAO;EACzD;CACF;CAEA,KAAY;EACV,OAAO,KAAK,UAAU,SAAS,EAAe,OAAO,EAAe;CACtE;CAEA,KAAmB;EACjB,OAAO,KAAK,UAAU,SAAS,KAAK,UAAU,WAAW,KAAK,QAAQ;CACxE;AACF;AAlNG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA"}
+{"version":3,"file":"gauge2.js","names":["styles","_decorate","__decorate","gauge_default","GAUGE_GEOMETRY","thumbStyle","thumb","progressAngle","geometry","i18nDefaults","Gauge","LitElement","_args","#i18nController","I18nController","#paintedProgress","#progressFrame","useStyles","sourceMax","max","#geometry","progress","#normalizedThumb","#angleAtProgress","fillPath","#pathAtProgress","showFill","showDot","styleMap","attachInternals","#progressAnimation","#stopProgressAnimation","#targetProgress","props","#animateProgress","#normalizedValues","value","statusLabel","status","target","timing","#animationTiming","from","animation","paint","paintFrame","gaugeStyles","duration","milliseconds","easing","start","#pointAtAngle","sweepAngle","end","largeArcFlag","radians","angle","property"],"sources":["../../src/gauge/gauge.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type { Size, SupportStatus } from '@nvidia-elements/core/internal';\nimport { attachInternals, useStyles } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './gauge.css?inline';\n\nconst GAUGE_GEOMETRY = {\n  default: {\n    center: 64,\n    path: 'M 27.23 100.77 A 52 52 0 1 1 100.77 100.77',\n    radius: 52,\n    startAngle: 135,\n    sweepAngle: 270,\n    surfaceHeight: 128,\n    viewBox: '8.53 8.53 110.93 95.7'\n  },\n  half: {\n    center: 64,\n    path: 'M 12 64 A 52 52 0 0 1 116 64',\n    radius: 52,\n    startAngle: 180,\n    sweepAngle: 180,\n    surfaceHeight: 64,\n    viewBox: '8.53 8.53 110.93 58.93'\n  }\n} as const;\n\ntype GaugeGeometry = (typeof GAUGE_GEOMETRY)[keyof typeof GAUGE_GEOMETRY];\n\nconst thumbStyle = (thumb: 'dot' | 'needle', progressAngle: number, geometry: GaugeGeometry) => ({\n  [`--_${thumb}-angle`]: `${progressAngle}deg`,\n  [`--_${thumb}-origin`]: `${geometry.center}px ${geometry.center}px`,\n  [`--_${thumb}-start-angle`]: `${geometry.startAngle}deg`\n});\n\nconst i18nDefaults = {\n  danger: 'danger',\n  information: 'information',\n  success: 'success',\n  warning: 'warning'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-gauge\n * @description Use a gauge to show system resource usage.\n * @documentation https://nvidia.github.io/elements/docs/elements/gauge/\n * @since 2.0.4\n * @entrypoint \\@nvidia-elements/core/gauge\n * @slot - Content to display in the gauge center.\n * @cssprop --track-width\n * @cssprop --accent-color\n * @cssprop --background\n * @cssprop --needle-background\n * @cssprop --track-background\n * @cssprop --thumb-background\n * @cssprop --color\n * @cssprop --width\n * @cssprop --height\n * @cssprop --font-size\n * @cssprop --gap\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n * @stable false\n */\nexport class Gauge extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-gauge',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** The current `value` of the gauge. */\n  @property({ type: Number }) value = 0;\n\n  /** The `max` value of the gauge that the `value` is proportionally scaled to. */\n  @property({ type: Number }) max? = 100;\n\n  /** Four visual treatments represent the `status` of tasks. */\n  @property({ type: String, reflect: true }) status?: SupportStatus | 'neutral' = 'neutral';\n\n  /** Determines the gauge shape. Set `half` for a compact semi-circular arc. */\n  @property({ type: String, reflect: true }) shape?: 'half';\n\n  /** Controls the value indicator. Set `dot` for only the end dot or `needle` for a pointer. */\n  @property({ type: String, reflect: true }) thumb: 'fill' | 'dot' | 'needle' = 'fill';\n\n  /** T-shirt `size` of the gauge. */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** Progress the gauge paints, which eases toward the value instead of jumping to it. */\n  #paintedProgress = 0;\n\n  #progressAnimation?: Animation;\n\n  #progressFrame = 0;\n\n  #normalizedValues() {\n    const sourceMax = this.max;\n    const max = sourceMax !== undefined && Number.isFinite(sourceMax) && sourceMax > 0 ? sourceMax : 100;\n    const value = Number.isFinite(this.value) ? Math.min(Math.max(this.value, 0), max) : 0;\n    return { value, max };\n  }\n\n  render() {\n    const geometry = this.#geometry();\n    const progress = this.#paintedProgress;\n    const thumb = this.#normalizedThumb();\n    const progressAngle = this.#angleAtProgress(geometry, progress);\n    const fillPath = this.#pathAtProgress(geometry, progress);\n    const showFill = thumb === 'fill';\n    const showDot = progress > 0 && (thumb === 'fill' || thumb === 'dot');\n\n    return html`\n      <div internal-host>\n        <svg viewBox=${geometry.viewBox} role=\"presentation\" aria-hidden=\"true\">\n          <defs>\n            <mask id=\"background-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n              <path d=${geometry.path} class=\"background\"></path>\n            </mask>\n            <mask id=\"fill-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n              <path d=${fillPath} class=\"gauge\" ?empty=${progress <= 0}></path>\n            </mask>\n          </defs>\n          <foreignObject width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#background-mask)\">\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"background-surface\"></div>\n          </foreignObject>\n          <foreignObject class=\"fill-layer\" width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#fill-mask)\"\n            ?hidden=${!showFill || progress <= 0}>\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"fill-surface\"></div>\n          </foreignObject>\n          <circle class=\"fill-dot-end\" cx=${geometry.center + geometry.radius} cy=${geometry.center}\n            ?hidden=${!showDot}\n            style=${styleMap(thumbStyle('dot', progressAngle, geometry))}>\n          </circle>\n          <g class=\"needle\"\n            ?hidden=${thumb !== 'needle'}\n            style=${styleMap(thumbStyle('needle', progressAngle, geometry))}>\n            <line class=\"needle-line\" x1=${geometry.center} y1=${geometry.center} x2=${geometry.center + 40} y2=${geometry.center}></line>\n            <circle class=\"needle-hub\" cx=${geometry.center} cy=${geometry.center}></circle>\n          </g>\n        </svg>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'progressbar';\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    // settle the value, otherwise reattaching paints the frame where the animation stopped\n    if (this.#progressAnimation) {\n      this.#stopProgressAnimation();\n      this.#paintedProgress = this.#targetProgress();\n      this.requestUpdate();\n    }\n  }\n\n  willUpdate(props: PropertyValues<this>) {\n    super.willUpdate(props);\n\n    if (props.has('value') || props.has('max')) {\n      this.#animateProgress();\n    }\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    const { value, max } = this.#normalizedValues();\n    this._internals.ariaValueNow = `${value}`;\n    this._internals.ariaValueMax = `${max}`;\n    const { status } = this;\n    const statusLabel =\n      status !== undefined && status !== 'neutral' && status !== 'accent' ? this.i18n[status] : undefined;\n    this._internals.ariaLabel = statusLabel ?? this.i18n.information ?? null;\n  }\n\n  #targetProgress() {\n    const { value, max } = this.#normalizedValues();\n    return (value / max) * 100;\n  }\n\n  /**\n   * Eases the painted progress toward the value with the duration and easing declared in css, so\n   * that `prefers-reduced-motion` and a `--_animation-duration` override both settle immediately.\n   */\n  #animateProgress() {\n    const target = this.#targetProgress();\n    const timing = this.hasUpdated ? this.#animationTiming() : undefined;\n\n    this.#stopProgressAnimation();\n\n    if (!timing || target === this.#paintedProgress) {\n      this.#paintedProgress = target;\n      return;\n    }\n\n    const from = this.#paintedProgress;\n    // keyframeless animations only keep time, leaving every painted frame to `render`\n    const animation = this.animate(null, timing);\n    const paint = (progress: number) => {\n      this.#paintedProgress = from + (target - from) * progress;\n      this.requestUpdate();\n    };\n    const paintFrame = () => {\n      paint(animation.effect?.getComputedTiming().progress ?? 0);\n\n      if (animation.playState === 'running') {\n        this.#progressFrame = requestAnimationFrame(paintFrame);\n      }\n    };\n\n    animation.finished.then(\n      () => {\n        // a value that changes on the frame this settles already started the next animation\n        if (this.#progressAnimation === animation) {\n          this.#stopProgressAnimation();\n          paint(1);\n        }\n      },\n      () => undefined\n    );\n\n    this.#progressAnimation = animation;\n    this.#progressFrame = requestAnimationFrame(paintFrame);\n  }\n\n  #stopProgressAnimation() {\n    // only a browser render starts an animation, so server rendering never reaches these apis\n    if (this.#progressAnimation) {\n      cancelAnimationFrame(this.#progressFrame);\n      this.#progressAnimation.cancel();\n      this.#progressAnimation = undefined;\n    }\n  }\n\n  #animationTiming() {\n    const gaugeStyles = getComputedStyle(this);\n    const duration = gaugeStyles.getPropertyValue('--_animation-duration').trim();\n    const milliseconds = parseFloat(duration) * (duration.endsWith('ms') ? 1 : 1000);\n    const easing = gaugeStyles.getPropertyValue('--nve-ref-animation-easing-100').trim();\n\n    return milliseconds > 0 ? { duration: milliseconds, easing: easing || 'linear' } : undefined;\n  }\n\n  #angleAtProgress(geometry: GaugeGeometry, progress: number) {\n    return geometry.startAngle + geometry.sweepAngle * (progress / 100);\n  }\n\n  #pathAtProgress(geometry: GaugeGeometry, progress: number) {\n    const start = this.#pointAtAngle(geometry, geometry.startAngle);\n    const sweepAngle = geometry.sweepAngle * (progress / 100);\n    const end = this.#pointAtAngle(geometry, geometry.startAngle + sweepAngle);\n    const largeArcFlag = sweepAngle > 180 ? 1 : 0;\n    return `M ${start.x} ${start.y} A ${geometry.radius} ${geometry.radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;\n  }\n\n  #pointAtAngle(geometry: GaugeGeometry, angle: number) {\n    const radians = (angle * Math.PI) / 180;\n    return {\n      x: geometry.center + geometry.radius * Math.cos(radians),\n      y: geometry.center + geometry.radius * Math.sin(radians)\n    };\n  }\n\n  #geometry() {\n    return this.shape === 'half' ? GAUGE_GEOMETRY.half : GAUGE_GEOMETRY.default;\n  }\n\n  #normalizedThumb() {\n    return this.thumb === 'dot' || this.thumb === 'needle' ? this.thumb : 'fill';\n  }\n}\n"],"mappings":"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"}

package/dist/gauge/index.js

@@ -1,2 +1 @@
-import { Gauge as e } from "./gauge2.js";
-export { e as Gauge };
+export { Gauge } from "./gauge2.js";

package/dist/grid/cell/cell.js

@@ -1,6 +1,5 @@
-//#region src/grid/cell/cell.css?inline
+// src/grid/cell/cell.css?inline
 var e = ":host{--color: var(--nve-sys-layer-canvas-color);--padding: var(--nve-ref-size-200) var(--nve-ref-size-500);--min-height: var(--row-height);--min-width: var(--nve-ref-size-1000);--font-weight: var(--nve-ref-font-weight-medium);--font-size: var(--nve-ref-font-size-100);--height: 100%;--border-left: 0;--border-right: 0;--justify-content: start;transition:box-shadow .3s ease-in-out}[internal-host]{background:color-mix(in oklab,var(--background, var(--nve-sys-layer-canvas-background)) 100%,var(--nve-sys-interaction-state-mix) var(--interaction-state-ratio, .01%));color:var(--color);padding:var(--padding);height:var(--height);min-height:var(--min-height);font-size:var(--font-size);min-width:var(--min-width);border-left:var(--border-left);border-right:var(--border-right);justify-content:var(--justify-content);font-weight:var(--font-weight);display:flex;align-items:center;outline-offset:-2px}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=cell.js.map

package/dist/grid/cell/cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"cell.js","names":[],"sources":["../../../src/grid/cell/cell.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-layer-canvas-color);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-500);\n  --min-height: var(--row-height);\n  --min-width: var(--nve-ref-size-1000);\n  --font-weight: var(--nve-ref-font-weight-medium);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: 100%;\n  --border-left: 0;\n  --border-right: 0;\n  --justify-content: start;\n  transition: box-shadow 300ms ease-in-out;\n}\n\n[internal-host] {\n  background: color-mix(\n    in oklab,\n    var(--background, var(--nve-sys-layer-canvas-background)) 100%,\n    var(--nve-sys-interaction-state-mix) var(--interaction-state-ratio, 0.01%)\n  ); /* 0.01 to prevent css optimizer from removing % type */\n  color: var(--color);\n  padding: var(--padding);\n  height: var(--height);\n  min-height: var(--min-height);\n  font-size: var(--font-size);\n  min-width: var(--min-width);\n  border-left: var(--border-left);\n  border-right: var(--border-right);\n  justify-content: var(--justify-content);\n  font-weight: var(--font-weight);\n  display: flex;\n  align-items: center;\n  outline-offset: -2px;\n}\n"],"mappings":""}
+{"version":3,"file":"cell.js","names":["cell_default"],"sources":["../../../src/grid/cell/cell.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-layer-canvas-color);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-500);\n  --min-height: var(--row-height);\n  --min-width: var(--nve-ref-size-1000);\n  --font-weight: var(--nve-ref-font-weight-medium);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: 100%;\n  --border-left: 0;\n  --border-right: 0;\n  --justify-content: start;\n  transition: box-shadow 300ms ease-in-out;\n}\n\n[internal-host] {\n  background: color-mix(\n    in oklab,\n    var(--background, var(--nve-sys-layer-canvas-background)) 100%,\n    var(--nve-sys-interaction-state-mix) var(--interaction-state-ratio, 0.01%)\n  ); /* 0.01 to prevent css optimizer from removing % type */\n  color: var(--color);\n  padding: var(--padding);\n  height: var(--height);\n  min-height: var(--min-height);\n  font-size: var(--font-size);\n  min-width: var(--min-width);\n  border-left: var(--border-left);\n  border-right: var(--border-right);\n  justify-content: var(--justify-content);\n  font-weight: var(--font-weight);\n  display: flex;\n  align-items: center;\n  outline-offset: -2px;\n}\n"],"mappings":""}

package/dist/grid/cell/cell2.js

@@ -2,7 +2,7 @@ import { attachInternals as e } from "../../internal/utils/a11y.js";
 import { useStyles as t } from "../../internal/styles/index.js";
 import n from "./cell.js";
 import { LitElement as r, html as i } from "lit";
-//#region src/grid/cell/cell.ts
+// src/grid/cell/cell.ts
 var a = class extends r {
 	static {
 		this.styles = t([n]);
@@ -10,7 +10,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-grid-cell",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	render() {
@@ -20,7 +20,6 @@ var a = class extends r {
 		super.connectedCallback(), e(this), this._internals.role = "gridcell";
 	}
 };
-//#endregion
 export { a as GridCell };
 
 //# sourceMappingURL=cell2.js.map

package/dist/grid/cell/cell2.js.map

@@ -1 +1 @@
-{"version":3,"file":"cell2.js","names":[],"sources":["../../../src/grid/cell/cell.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { useStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './cell.css?inline';\n\n/**\n * @element nve-grid-cell\n * @description Represents an individual data cell within a grid row, displaying content aligned to its parent column.\n * @documentation https://nvidia.github.io/elements/docs/elements/data-grid/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - Data or interactive controls displayed within the cell.\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --min-height\n * @cssprop --min-width\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --border-left\n * @cssprop --border-right\n * @cssprop --justify-content\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\nexport class GridCell extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-cell',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host focusable=\"active\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'gridcell';\n  }\n}\n"],"mappings":";;;;;AA2BA,IAAa,IAAb,cAA8B,EAAW;;EACvB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF"}
+{"version":3,"file":"cell2.js","names":["styles","cell_default","GridCell","LitElement","useStyles","attachInternals"],"sources":["../../../src/grid/cell/cell.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { useStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './cell.css?inline';\n\n/**\n * @element nve-grid-cell\n * @description Represents an individual data cell within a grid row, displaying content aligned to its parent column.\n * @documentation https://nvidia.github.io/elements/docs/elements/data-grid/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - Data or interactive controls displayed within the cell.\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --min-height\n * @cssprop --min-width\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --border-left\n * @cssprop --border-right\n * @cssprop --justify-content\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\nexport class GridCell extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-cell',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host focusable=\"active\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'gridcell';\n  }\n}\n"],"mappings":";;;;;AA2BA,IAAaE,IAAb,cAA8BC,EAAW;;EACvB,KAAA,SAAAC,EAAU,CAACJ,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxBK,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF"}

package/dist/grid/column/column.js

@@ -1,6 +1,5 @@
-//#region src/grid/column/column.css?inline
+// src/grid/column/column.css?inline
 var e = ":host{--nve-sys-interaction-background: var(--nve-sys-interaction-background-200);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);--color: var(--nve-sys-text-muted-color);--padding: var(--nve-ref-size-200) var(--nve-ref-size-500);--font-weight: var(--nve-ref-font-weight-semibold);--font-size: var(--nve-ref-font-size-100);--height: var(--nve-ref-size-1000);--min-width: var(--nve-ref-size-1000);--justify-content: start;--border-left: 0;--border-right: 0;transition:box-shadow .3s ease-in-out}[internal-host]{background:var(--background);color:var(--color);padding:var(--padding);height:var(--height);font-size:var(--font-size);font-weight:var(--font-weight);min-width:var(--min-width);border-left:var(--border-left);border-right:var(--border-right);justify-content:var(--justify-content);display:flex;align-items:center;outline-offset:-5px;white-space:nowrap}:host([width=\"max-content\"]){--padding: var(--nve-ref-size-300)}::slotted(nve-sort-button),::slotted(nve-icon-button){margin-inline-start:auto}@media(hover:hover){::slotted(nve-sort-button){opacity:0}::slotted(nve-sort-button[sort=\"ascending\"]),::slotted(nve-sort-button[sort=\"descending\"]),:host(:focus-within) ::slotted(nve-sort-button),:host(:hover) ::slotted(nve-sort-button){opacity:1}}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=column.js.map

package/dist/grid/column/column.js.map

@@ -1 +1 @@
-{"version":3,"file":"column.js","names":[],"sources":["../../../src/grid/column/column.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  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --color: var(--nve-sys-text-muted-color);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-500);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: var(--nve-ref-size-1000);\n  --min-width: var(--nve-ref-size-1000);\n  --justify-content: start;\n  --border-left: 0;\n  --border-right: 0;\n  transition: box-shadow 300ms ease-in-out;\n}\n\n[internal-host] {\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  height: var(--height);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  min-width: var(--min-width);\n  border-left: var(--border-left);\n  border-right: var(--border-right);\n  justify-content: var(--justify-content);\n  display: flex;\n  align-items: center;\n  outline-offset: -5px;\n  white-space: nowrap;\n}\n\n:host([width='max-content']) {\n  --padding: var(--nve-ref-size-300);\n}\n\n::slotted(nve-sort-button),\n::slotted(nve-icon-button) {\n  margin-inline-start: auto;\n}\n\n@media (hover: hover) {\n  ::slotted(nve-sort-button) {\n    opacity: 0;\n  }\n\n  ::slotted(nve-sort-button[sort='ascending']),\n  ::slotted(nve-sort-button[sort='descending']),\n  :host(:focus-within) ::slotted(nve-sort-button),\n  :host(:hover) ::slotted(nve-sort-button) {\n    opacity: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"column.js","names":["column_default"],"sources":["../../../src/grid/column/column.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  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --color: var(--nve-sys-text-muted-color);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-500);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: var(--nve-ref-size-1000);\n  --min-width: var(--nve-ref-size-1000);\n  --justify-content: start;\n  --border-left: 0;\n  --border-right: 0;\n  transition: box-shadow 300ms ease-in-out;\n}\n\n[internal-host] {\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  height: var(--height);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  min-width: var(--min-width);\n  border-left: var(--border-left);\n  border-right: var(--border-right);\n  justify-content: var(--justify-content);\n  display: flex;\n  align-items: center;\n  outline-offset: -5px;\n  white-space: nowrap;\n}\n\n:host([width='max-content']) {\n  --padding: var(--nve-ref-size-300);\n}\n\n::slotted(nve-sort-button),\n::slotted(nve-icon-button) {\n  margin-inline-start: auto;\n}\n\n@media (hover: hover) {\n  ::slotted(nve-sort-button) {\n    opacity: 0;\n  }\n\n  ::slotted(nve-sort-button[sort='ascending']),\n  ::slotted(nve-sort-button[sort='descending']),\n  :host(:focus-within) ::slotted(nve-sort-button),\n  :host(:hover) ::slotted(nve-sort-button) {\n    opacity: 1;\n  }\n}\n"],"mappings":""}

package/dist/grid/column/column2.js

@@ -1,11 +1,11 @@
 import { appendRootNodeStyle as e } from "../../internal/utils/dom.js";
 import { attachInternals as t } from "../../internal/utils/a11y.js";
 import { useStyles as n } from "../../internal/styles/index.js";
-import r from "../../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import r from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import i from "./column.js";
 import { LitElement as a, html as o } from "lit";
 import { property as s } from "lit/decorators/property.js";
-//#region src/grid/column/column.ts
+// src/grid/column/column.ts
 var c = class r extends a {
 	static {
 		this.styles = n([i]);
@@ -13,7 +13,7 @@ var c = class r extends a {
 	static {
 		this.metadata = {
 			tag: "nve-grid-column",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	get #e() {
@@ -96,7 +96,6 @@ r([s({
 	reflect: !0,
 	attribute: "aria-colindex"
 })], c.prototype, "ariaColIndex", void 0);
-//#endregion
 export { c as GridColumn };
 
 //# sourceMappingURL=column2.js.map

package/dist/grid/column/column2.js.map

@@ -1 +1 @@
-{"version":3,"file":"column2.js","names":[],"sources":["../../../src/grid/column/column.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { useStyles, attachInternals, appendRootNodeStyle } from '@nvidia-elements/core/internal';\nimport type { Grid } from '@nvidia-elements/core/grid';\nimport styles from './column.css?inline';\n\n/**\n * @element nve-grid-column\n * @description Defines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it.\n * @documentation https://nvidia.github.io/elements/docs/elements/data-grid/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - Column heading text or controls.\n * @slot actions - slot for column actions\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --min-width\n * @cssprop --justify-content\n * @cssprop --border-left\n * @cssprop --border-right\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\nexport class GridColumn extends LitElement {\n  /**\n   * Only set a fixed px width when you know the grid width. Most cases this should remain unset.\n   * If the total width of all columns is less than the grid width then the last column fills the remaining space.\n   * By default column widths are evenly divided unless width is explicitly provided.\n   */\n  @property({ type: String, reflect: true }) width: string;\n\n  /**\n   * Set the `position` property or attribute to `fixed` or `sticky` to make the column fixed or sticky.\n   * Fixed columns do not scroll horizontally with the grid. Sticky columns scroll horizontally with the grid\n   * until the column reaches the edge of the grid.\n   */\n  @property({ type: String, reflect: true }) position: 'fixed' | 'sticky' | '';\n\n  /**\n   * Control the content alignment within a given column.\n   */\n  @property({ type: String, reflect: true, attribute: 'column-align' }) columnAlign: 'start' | 'center' | 'end';\n\n  /**\n   * @private\n   */\n  @property({ type: String, reflect: true, attribute: 'aria-colindex' }) ariaColIndex: string; // eslint-disable-line local/reserved-property-names\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-column',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  get #grid() {\n    return this.parentElement!.parentElement as Grid;\n  }\n\n  render() {\n    return html`\n      <div internal-host focusable=\"active\">\n        <slot></slot>\n        <slot name=\"actions\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'columnheader';\n    this.addEventListener('sort', this.#onSort);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('sort', this.#onSort);\n  }\n\n  #onSort = (e: Event) => {\n    this.ariaSort = (e as CustomEvent<{ next: string }>).detail.next;\n  };\n\n  willUpdate(props: PropertyValues<this>) {\n    if (props.has('width') && this.width && Number.isFinite(Number(this.width))) {\n      this.width = `${this.width}px`; // eslint-disable-line local/stateless-property\n    }\n  }\n\n  async updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    if (props.get('columnAlign') !== this.columnAlign) {\n      this.#computeColumnAlignment();\n    }\n\n    if (props.get('position') !== this.position) {\n      this.#computeColumnPositions();\n    }\n\n    if (props.get('ariaColIndex') !== this.ariaColIndex) {\n      this.#computeColumnPositions();\n      this.#computeColumnAlignment();\n    }\n\n    if (props.get('width') !== this.width) {\n      this.dispatchEvent(new CustomEvent('nve-grid-column-resize', { bubbles: true, composed: true }));\n    }\n  }\n\n  #positionStylesheet: CSSStyleSheet;\n\n  #computeColumnPositions() {\n    if (this.position !== 'fixed') {\n      this.removeAttribute('left');\n      this.removeAttribute('right');\n      this.#positionStylesheet?.replaceSync('');\n      return;\n    }\n\n    const { side, positionStyle, borderStyle } = this.#buildFixedStyles();\n    const combinedStyle = `${positionStyle}\\n${borderStyle}`;\n\n    if (this.#positionStylesheet) {\n      this.#positionStylesheet.replaceSync(combinedStyle);\n    } else {\n      this.#positionStylesheet = appendRootNodeStyle(this.#grid, combinedStyle);\n    }\n\n    this.setAttribute(side, '');\n  }\n\n  #buildFixedStyles() {\n    const columns = Array.from(this.parentElement!.querySelectorAll<GridColumn>(GridColumn.metadata.tag));\n    const rightColumns = columns.slice(columns.indexOf(this) + 1, columns.length);\n    const position = this.getBoundingClientRect();\n    const gridPosition = this.#grid.getBoundingClientRect();\n    const side = this.offsetLeft < gridPosition.width / 2 ? 'left' : 'right';\n    const leftStyle = position.left - gridPosition.left;\n    const rightStyle = rightColumns.reduce((width, c) => width + c.getBoundingClientRect().width, 0);\n    const selector = `[id='${this.#grid.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),\n        [id='${this.#grid.id}'] nve-grid-cell:nth-of-type(${this.ariaColIndex})`;\n\n    const positionStyle = `\n        ${selector} {\n          position: sticky;\n          z-index: 99;\n          ${side === 'left' ? `left: ${leftStyle}px;` : `right: ${rightStyle}px;`}\n        }\n      `;\n\n    const borderStyle = this.#buildBorderStyle(selector, side);\n    return { side, positionStyle, borderStyle };\n  }\n\n  #buildBorderStyle(selector: string, side: 'left' | 'right') {\n    const isLastLeft = side === 'left' && (this.nextElementSibling as GridColumn)?.position !== this.position;\n    const isLastRight = side === 'right' && (this.previousElementSibling as GridColumn)?.position !== this.position;\n\n    if (!isLastLeft && !isLastRight) {\n      return '';\n    }\n\n    return `\n        ${selector} {\n          box-shadow: var(--scroll-shadow);\n          clip-path: inset(0px ${isLastLeft ? '-4px' : '0'} 0px ${isLastRight ? '-4px' : '0'});\n          --border-${side === 'right' ? 'left' : 'right'}: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n        }\n      `;\n  }\n\n  #computeColumnAlignment() {\n    if (this.columnAlign !== undefined) {\n      appendRootNodeStyle(\n        this.#grid,\n        `[id='${this.#grid.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),\n        [id='${this.#grid.id}'] nve-grid-cell:nth-of-type(${this.ariaColIndex}) {\n          --justify-content: ${this.columnAlign}\n        }`\n      );\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"column2.js","names":["styles","_decorate","__decorate","column_default","GridColumn","LitElement","useStyles","#grid","attachInternals","#onSort","props","#computeColumnAlignment","#computeColumnPositions","#positionStylesheet","#buildFixedStyles","combinedStyle","positionStyle","borderStyle","appendRootNodeStyle","side","columns","rightColumns","position","gridPosition","leftStyle","rightStyle","width","c","selector","#buildBorderStyle","isLastLeft","isLastRight","property"],"sources":["../../../src/grid/column/column.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { useStyles, attachInternals, appendRootNodeStyle } from '@nvidia-elements/core/internal';\nimport type { Grid } from '@nvidia-elements/core/grid';\nimport styles from './column.css?inline';\n\n/**\n * @element nve-grid-column\n * @description Defines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it.\n * @documentation https://nvidia.github.io/elements/docs/elements/data-grid/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - Column heading text or controls.\n * @slot actions - slot for column actions\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --min-width\n * @cssprop --justify-content\n * @cssprop --border-left\n * @cssprop --border-right\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\nexport class GridColumn extends LitElement {\n  /**\n   * Only set a fixed px width when you know the grid width. Most cases this should remain unset.\n   * If the total width of all columns is less than the grid width then the last column fills the remaining space.\n   * By default column widths are evenly divided unless width is explicitly provided.\n   */\n  @property({ type: String, reflect: true }) width: string;\n\n  /**\n   * Set the `position` property or attribute to `fixed` or `sticky` to make the column fixed or sticky.\n   * Fixed columns do not scroll horizontally with the grid. Sticky columns scroll horizontally with the grid\n   * until the column reaches the edge of the grid.\n   */\n  @property({ type: String, reflect: true }) position: 'fixed' | 'sticky' | '';\n\n  /**\n   * Control the content alignment within a given column.\n   */\n  @property({ type: String, reflect: true, attribute: 'column-align' }) columnAlign: 'start' | 'center' | 'end';\n\n  /**\n   * @private\n   */\n  @property({ type: String, reflect: true, attribute: 'aria-colindex' }) ariaColIndex: string; // eslint-disable-line local/reserved-property-names\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-column',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  get #grid() {\n    return this.parentElement!.parentElement as Grid;\n  }\n\n  render() {\n    return html`\n      <div internal-host focusable=\"active\">\n        <slot></slot>\n        <slot name=\"actions\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'columnheader';\n    this.addEventListener('sort', this.#onSort);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('sort', this.#onSort);\n  }\n\n  #onSort = (e: Event) => {\n    this.ariaSort = (e as CustomEvent<{ next: string }>).detail.next;\n  };\n\n  willUpdate(props: PropertyValues<this>) {\n    if (props.has('width') && this.width && Number.isFinite(Number(this.width))) {\n      this.width = `${this.width}px`; // eslint-disable-line local/stateless-property\n    }\n  }\n\n  async updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    if (props.get('columnAlign') !== this.columnAlign) {\n      this.#computeColumnAlignment();\n    }\n\n    if (props.get('position') !== this.position) {\n      this.#computeColumnPositions();\n    }\n\n    if (props.get('ariaColIndex') !== this.ariaColIndex) {\n      this.#computeColumnPositions();\n      this.#computeColumnAlignment();\n    }\n\n    if (props.get('width') !== this.width) {\n      this.dispatchEvent(new CustomEvent('nve-grid-column-resize', { bubbles: true, composed: true }));\n    }\n  }\n\n  #positionStylesheet: CSSStyleSheet;\n\n  #computeColumnPositions() {\n    if (this.position !== 'fixed') {\n      this.removeAttribute('left');\n      this.removeAttribute('right');\n      this.#positionStylesheet?.replaceSync('');\n      return;\n    }\n\n    const { side, positionStyle, borderStyle } = this.#buildFixedStyles();\n    const combinedStyle = `${positionStyle}\\n${borderStyle}`;\n\n    if (this.#positionStylesheet) {\n      this.#positionStylesheet.replaceSync(combinedStyle);\n    } else {\n      this.#positionStylesheet = appendRootNodeStyle(this.#grid, combinedStyle);\n    }\n\n    this.setAttribute(side, '');\n  }\n\n  #buildFixedStyles() {\n    const columns = Array.from(this.parentElement!.querySelectorAll<GridColumn>(GridColumn.metadata.tag));\n    const rightColumns = columns.slice(columns.indexOf(this) + 1, columns.length);\n    const position = this.getBoundingClientRect();\n    const gridPosition = this.#grid.getBoundingClientRect();\n    const side = this.offsetLeft < gridPosition.width / 2 ? 'left' : 'right';\n    const leftStyle = position.left - gridPosition.left;\n    const rightStyle = rightColumns.reduce((width, c) => width + c.getBoundingClientRect().width, 0);\n    const selector = `[id='${this.#grid.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),\n        [id='${this.#grid.id}'] nve-grid-cell:nth-of-type(${this.ariaColIndex})`;\n\n    const positionStyle = `\n        ${selector} {\n          position: sticky;\n          z-index: 99;\n          ${side === 'left' ? `left: ${leftStyle}px;` : `right: ${rightStyle}px;`}\n        }\n      `;\n\n    const borderStyle = this.#buildBorderStyle(selector, side);\n    return { side, positionStyle, borderStyle };\n  }\n\n  #buildBorderStyle(selector: string, side: 'left' | 'right') {\n    const isLastLeft = side === 'left' && (this.nextElementSibling as GridColumn)?.position !== this.position;\n    const isLastRight = side === 'right' && (this.previousElementSibling as GridColumn)?.position !== this.position;\n\n    if (!isLastLeft && !isLastRight) {\n      return '';\n    }\n\n    return `\n        ${selector} {\n          box-shadow: var(--scroll-shadow);\n          clip-path: inset(0px ${isLastLeft ? '-4px' : '0'} 0px ${isLastRight ? '-4px' : '0'});\n          --border-${side === 'right' ? 'left' : 'right'}: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n        }\n      `;\n  }\n\n  #computeColumnAlignment() {\n    if (this.columnAlign !== undefined) {\n      appendRootNodeStyle(\n        this.#grid,\n        `[id='${this.#grid.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),\n        [id='${this.#grid.id}'] nve-grid-cell:nth-of-type(${this.ariaColIndex}) {\n          --justify-content: ${this.columnAlign}\n        }`\n      );\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/grid/define.js

@@ -7,6 +7,5 @@ import { GridFooter as a } from "./footer/footer2.js";
 import { Grid as o } from "./grid2.js";
 import { define as s } from "@nvidia-elements/foundations/internal/define";
 s(o), s(t), s(r), s(n), s(a), s(i), s(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/grid/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/grid/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/foundations/internal/define';\nimport {\n  Grid,\n  GridColumn,\n  GridRow,\n  GridCell,\n  GridFooter,\n  GridHeader,\n  GridPlaceholder\n} from '@nvidia-elements/core/grid';\n\ndefine(Grid);\ndefine(GridColumn);\ndefine(GridRow);\ndefine(GridCell);\ndefine(GridFooter);\ndefine(GridHeader);\ndefine(GridPlaceholder);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-grid': Grid;\n    'nve-grid-column': GridColumn;\n    'nve-grid-row': GridRow;\n    'nve-grid-cell': GridCell;\n    'nve-grid-footer': GridFooter;\n    'nve-grid-header': GridHeader;\n    'nve-grid-placeholder': GridPlaceholder;\n  }\n}\n"],"mappings":";;;;;;;;AAcA,EAAO,CAAI,GACX,EAAO,CAAU,GACjB,EAAO,CAAO,GACd,EAAO,CAAQ,GACf,EAAO,CAAU,GACjB,EAAO,CAAU,GACjB,EAAO,CAAe"}
+{"version":3,"file":"define.js","names":["define","Grid","GridColumn","GridRow","GridCell","GridFooter","GridHeader","GridPlaceholder"],"sources":["../../src/grid/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/foundations/internal/define';\nimport {\n  Grid,\n  GridColumn,\n  GridRow,\n  GridCell,\n  GridFooter,\n  GridHeader,\n  GridPlaceholder\n} from '@nvidia-elements/core/grid';\n\ndefine(Grid);\ndefine(GridColumn);\ndefine(GridRow);\ndefine(GridCell);\ndefine(GridFooter);\ndefine(GridHeader);\ndefine(GridPlaceholder);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-grid': Grid;\n    'nve-grid-column': GridColumn;\n    'nve-grid-row': GridRow;\n    'nve-grid-cell': GridCell;\n    'nve-grid-footer': GridFooter;\n    'nve-grid-header': GridHeader;\n    'nve-grid-placeholder': GridPlaceholder;\n  }\n}\n"],"mappings":";;;;;;;;AAcAA,EAAOC,CAAI,GACXD,EAAOE,CAAU,GACjBF,EAAOG,CAAO,GACdH,EAAOI,CAAQ,GACfJ,EAAOK,CAAU,GACjBL,EAAOM,CAAU,GACjBN,EAAOO,CAAe"}

package/dist/grid/footer/footer.js

@@ -1,6 +1,5 @@
-//#region src/grid/footer/footer.css?inline
+// src/grid/footer/footer.css?inline
 var e = ":host{--background: var(--nve-sys-layer-container-background);--color: var(--nve-sys-layer-canvas-color);--padding: var(--nve-ref-size-200) var(--nve-ref-size-500);--height: var(--nve-ref-size-1000);contain:initial}[internal-host]{border-top:var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);background:var(--background);color:var(--color);padding:var(--padding);height:var(--height);display:flex;align-items:center}::slotted(nve-pagination){margin-inline:auto calc(-1 * var(--nve-ref-size-300))}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=footer.js.map

package/dist/grid/footer/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.js","names":[],"sources":["../../../src/grid/footer/footer.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: var(--nve-sys-layer-container-background);\n  --color: var(--nve-sys-layer-canvas-color);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-500);\n  --height: var(--nve-ref-size-1000);\n  contain: initial;\n}\n\n[internal-host] {\n  border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  height: var(--height);\n  display: flex;\n  align-items: center;\n}\n\n::slotted(nve-pagination) {\n  margin-inline: auto calc(-1 * var(--nve-ref-size-300));\n}\n"],"mappings":""}
+{"version":3,"file":"footer.js","names":["footer_default"],"sources":["../../../src/grid/footer/footer.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: var(--nve-sys-layer-container-background);\n  --color: var(--nve-sys-layer-canvas-color);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-500);\n  --height: var(--nve-ref-size-1000);\n  contain: initial;\n}\n\n[internal-host] {\n  border-top: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  height: var(--height);\n  display: flex;\n  align-items: center;\n}\n\n::slotted(nve-pagination) {\n  margin-inline: auto calc(-1 * var(--nve-ref-size-300));\n}\n"],"mappings":""}