@nvidia-elements/core 2.7.3 → 2.8.1

package/dist/pagination/pagination.examples.json

@@ -59,7 +59,7 @@
     {
       "id": "pagination-forms",
       "name": "Forms",
-      "template": "<form id=\"pagination-form\" nve-layout=\"column gap:md\">\n  <nve-pagination name=\"page\" value=\"1\" items=\"100\" step=\"10\" aria-label=\"pagination controls\"></nve-pagination>\n  <nve-button>submit page 10</nve-button>\n  <pre></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const pre = document.querySelector(\"form pre\");\n  form.addEventListener(\"change\", updateValues);\n  form.addEventListener(\"input\", updateValues);\n  form.addEventListener(\"submit\", updateValues);\n  form.addEventListener(\"step-change\", updateValues);\n  function updateValues(e) {\n    e.preventDefault();\n    console.log(e);\n    pre.innerText = JSON.stringify(\n      { ...Object.fromEntries(new FormData(form)), step: form.elements.page.step },\n      null,\n      2,\n    );\n  }\n</script>\n",
+      "template": "<form id=\"pagination-form\" nve-layout=\"column gap:md\">\n  <nve-pagination name=\"page\" value=\"1\" items=\"100\" step=\"10\" aria-label=\"pagination controls\"></nve-pagination>\n  <nve-button>submit page 10</nve-button>\n  <pre></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const pre = document.querySelector(\"form pre\");\n  form.addEventListener(\"change\", updateValues);\n  form.addEventListener(\"input\", updateValues);\n  form.addEventListener(\"submit\", updateValues);\n  form.addEventListener(\"step-change\", updateValues);\n  function updateValues(e) {\n    e.preventDefault();\n    console.log(e);\n    pre.innerText = JSON.stringify({ ...Object.fromEntries(new FormData(form)), step: form.elements.page.step }, null, 2);\n  }\n</script>\n",
       "summary": "Pagination as a form associated component that participates in form submission and emits change, input, and step-change events. Use when page selection needs to integrate with form data collection or server-side form handling.",
       "description": "",
       "composition": false,
@@ -68,7 +68,7 @@
     {
       "id": "pagination-no-items-count",
       "name": "NoItemsCount",
-      "template": "<form id=\"pagination-form\" nve-layout=\"column gap:md\">\n  <nve-pagination name=\"page\" value=\"1\" step=\"10\" aria-label=\"pagination controls\"></nve-pagination>\n  <pre></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const pre = document.querySelector(\"form pre\");\n  form.addEventListener(\"input\", updateValues);\n  form.addEventListener(\"step-change\", updateValues);\n  function updateValues(e) {\n    e.preventDefault();\n    pre.innerText = JSON.stringify(\n      { ...Object.fromEntries(new FormData(form)), step: form.elements.page.step },\n      null,\n      2,\n    );\n  }\n</script>\n",
+      "template": "<form id=\"pagination-form\" nve-layout=\"column gap:md\">\n  <nve-pagination name=\"page\" value=\"1\" step=\"10\" aria-label=\"pagination controls\"></nve-pagination>\n  <pre></pre>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const pre = document.querySelector(\"form pre\");\n  form.addEventListener(\"input\", updateValues);\n  form.addEventListener(\"step-change\", updateValues);\n  function updateValues(e) {\n    e.preventDefault();\n    pre.innerText = JSON.stringify({ ...Object.fromEntries(new FormData(form)), step: form.elements.page.step }, null, 2);\n  }\n</script>\n",
       "summary": "Pagination without items count display, useful when total count is unknown.",
       "description": "",
       "composition": false,
@@ -117,7 +117,7 @@
     {
       "id": "pagination-page-list-pattern",
       "name": "PageListPattern",
-      "template": "<nve-toolbar container=\"inset\">\n  <nve-button disabled container=\"flat\"\n    ><nve-icon name=\"chevron\" direction=\"left\" size=\"sm\"></nve-icon> previous</nve-button\n  >\n  <nve-button container=\"flat\" selected>1</nve-button>\n  <nve-button container=\"flat\">2</nve-button>\n  <nve-button container=\"flat\">3</nve-button>\n  <nve-button container=\"flat\">4</nve-button>\n  <nve-button container=\"flat\">next <nve-icon name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon></nve-button>\n</nve-toolbar>\n",
+      "template": "<nve-toolbar container=\"inset\">\n  <nve-button disabled container=\"flat\"><nve-icon name=\"chevron\" direction=\"left\" size=\"sm\"></nve-icon> previous</nve-button>\n  <nve-button container=\"flat\" selected>1</nve-button>\n  <nve-button container=\"flat\">2</nve-button>\n  <nve-button container=\"flat\">3</nve-button>\n  <nve-button container=\"flat\">4</nve-button>\n  <nve-button container=\"flat\">next <nve-icon name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon></nve-button>\n</nve-toolbar>\n",
       "summary": "Custom pagination pattern using toolbar with numbered page buttons and navigation arrows.",
       "description": "",
       "composition": true,
@@ -126,7 +126,7 @@
     {
       "id": "pagination-skip-pattern",
       "name": "SkipPattern",
-      "template": "<nve-toolbar container=\"inset\">\n  <nve-icon-button\n    container=\"flat\"\n    icon-name=\"arrow-stop\"\n    direction=\"left\"\n    aria-label=\"first\"\n    disabled\n  ></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"chevron\" direction=\"left\" aria-label=\"previous\"></nve-icon-button>\n  <nve-button container=\"flat\" selected>1</nve-button>\n  <nve-button container=\"flat\">2</nve-button>\n  <nve-button container=\"flat\">3</nve-button>\n  <nve-button container=\"flat\">4</nve-button>\n  <nve-icon-button icon-name=\"chevron\" direction=\"right\" aria-label=\"next\"></nve-icon-button>\n  <nve-icon-button icon-name=\"arrow-stop\" direction=\"right\" aria-label=\"last\"></nve-icon-button>\n</nve-toolbar>\n",
+      "template": "<nve-toolbar container=\"inset\">\n  <nve-icon-button container=\"flat\" icon-name=\"arrow-stop\" direction=\"left\" aria-label=\"first\" disabled></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"chevron\" direction=\"left\" aria-label=\"previous\"></nve-icon-button>\n  <nve-button container=\"flat\" selected>1</nve-button>\n  <nve-button container=\"flat\">2</nve-button>\n  <nve-button container=\"flat\">3</nve-button>\n  <nve-button container=\"flat\">4</nve-button>\n  <nve-icon-button icon-name=\"chevron\" direction=\"right\" aria-label=\"next\"></nve-icon-button>\n  <nve-icon-button icon-name=\"arrow-stop\" direction=\"right\" aria-label=\"last\"></nve-icon-button>\n</nve-toolbar>\n",
       "summary": "Enhanced pagination pattern with first/last page buttons and numbered page navigation.",
       "description": "",
       "composition": true,
@@ -135,7 +135,7 @@
     {
       "id": "pagination-vertical-pattern",
       "name": "VerticalPattern",
-      "template": "<nve-toolbar container=\"inset\">\n  <label nve-text=\"body muted sm\">1 of 13</label>\n  <nve-icon-button\n    container=\"flat\"\n    size=\"sm\"\n    icon-name=\"chevron\"\n    direction=\"up\"\n    aria-label=\"previous\"\n  ></nve-icon-button>\n  <nve-icon-button container=\"flat\" size=\"sm\" icon-name=\"chevron\" direction=\"down\" aria-label=\"next\"></nve-icon-button>\n</nve-toolbar>\n",
+      "template": "<nve-toolbar container=\"inset\">\n  <label nve-text=\"body muted sm\">1 of 13</label>\n  <nve-icon-button container=\"flat\" size=\"sm\" icon-name=\"chevron\" direction=\"up\" aria-label=\"previous\"></nve-icon-button>\n  <nve-icon-button container=\"flat\" size=\"sm\" icon-name=\"chevron\" direction=\"down\" aria-label=\"next\"></nve-icon-button>\n</nve-toolbar>\n",
       "summary": "Vertical pagination pattern with up/down navigation arrows for compact layouts.",
       "description": "",
       "composition": false,
@@ -144,7 +144,7 @@
     {
       "id": "pagination-custom-select-pattern",
       "name": "CustomSelectPattern",
-      "template": "<nve-toolbar container=\"inset\">\n  <nve-select style=\"--width: 80px\">\n    <select aria-label=\"page size\">\n      <option value=\"10\">1-10</option>\n    </select>\n  </nve-select>\n  <label nve-text=\"label muted sm\" style=\"width: 40px\">of ~13</label>\n  <nve-icon-button\n    container=\"flat\"\n    icon-name=\"chevron\"\n    direction=\"left\"\n    aria-label=\"previous\"\n    disabled\n  ></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"chevron\" direction=\"right\" aria-label=\"next\"></nve-icon-button>\n</nve-toolbar>\n",
+      "template": "<nve-toolbar container=\"inset\">\n  <nve-select style=\"--width: 80px\">\n    <select aria-label=\"page size\">\n      <option value=\"10\">1-10</option>\n    </select>\n  </nve-select>\n  <label nve-text=\"label muted sm\" style=\"width: 40px\">of ~13</label>\n  <nve-icon-button container=\"flat\" icon-name=\"chevron\" direction=\"left\" aria-label=\"previous\" disabled></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"chevron\" direction=\"right\" aria-label=\"next\"></nve-icon-button>\n</nve-toolbar>\n",
       "summary": "Custom pagination with select dropdown for page size and navigation arrows.",
       "description": "",
       "composition": true,

package/dist/pagination/pagination2.js

@@ -5,7 +5,7 @@ import { attachInternals as r } from "../internal/utils/a11y.js";
 import { typeSSR as i } from "../internal/controllers/type-ssr.controller.js";
 import { scopedRegistry as a } from "../internal/decorators/scoped-registry.js";
 import { useStyles as o } from "../internal/styles/index.js";
-import s from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import s from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { IconButton as c } from "../icon-button/icon-button2.js";
 import { Select as l } from "../select/select2.js";
 import u from "./pagination.js";
@@ -21,7 +21,7 @@ var g = class extends h(d) {
 	static {
 		this.metadata = {
 			tag: "nve-pagination",
-			version: "2.7.3",
+			version: "2.8.1",
 			valueSchema: { type: "number" }
 		};
 	}

package/dist/pagination/pagination2.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination2.js","names":["#currentPage","#isLastPage","#isFirstPage","#selectLabel","#label","#previousButton","#setValue","#nextButton","#startButton","#endButton","#select","#setStep","#i18nController","#setupLabelWidth","#resizeObserver"],"sources":["../../src/pagination/pagination.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  I18nController,\n  formatStandardNumber,\n  keyNavigationList,\n  typeSSR,\n  useStyles,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { Select } from '@nvidia-elements/core/select';\nimport styles from './pagination.css?inline';\n\n/* eslint-disable jsdoc/no-types */\n// explicit jsdoc annotation due to inheritance context lost with CEM generator\n\n/**\n * @element nve-pagination\n * @description Pagination is a control that enables users to navigate through pages of content.\n * @documentation https://nvidia.github.io/elements/docs/elements/pagination/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/pagination\n * @event input - Dispatched when the value (page) has changed\n * @event change - Dispatched when the value (page) has changed\n * @event first-page - Dispatched when the first page is active\n * @event last-page - Dispatched when the last page is active\n * @event step-change - Dispatched after the page size changes with the current page size in `detail`. The event bubbles and crosses shadow boundaries.\n * @slot suffix-label - Overrides the \"of total\" label when the total is an approximation.\n * @cssprop --background\n * @cssprop --font-size\n * @cssprop --width\n * @csspart icon-button - Base part applied to all icon button elements\n * @csspart previous-icon-button - The previous page icon button\n * @csspart next-icon-button - The next page icon button\n * @csspart start-icon-button - The first page icon button\n * @csspart end-icon-button - The last page icon button\n * @csspart select - The page size select element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n * @property {number} value - value the current page number\n * @attribute {string} step-sizes - A JSON-serialized array of page-size options available in the selector.\n */\n@typeSSR()\n@keyNavigationList<Pagination>()\n@scopedRegistry()\nexport class Pagination extends FormControlMixin<typeof LitElement, number>(LitElement) {\n  /**\n   * The number of items per page.\n   */\n  @property({ type: Number }) step = 10;\n  /**\n   * Page-size options available in the selector.\n   */\n  @property({ type: Array, attribute: 'step-sizes' }) stepSizes: number[] = [10, 20, 50, 100];\n\n  /**\n   * The total number of items.\n   */\n  @property({ type: Number }) items: number;\n\n  /**\n   * Whether the pagination is skippable to start/end.\n   */\n  @property({ type: Boolean }) skippable: boolean;\n\n  /**\n   * Whether the step selector has a disabled state.\n   */\n  @property({ type: Boolean, attribute: 'disable-step' }) disableStep: boolean;\n\n  /**\n   * Determines the container styles of component. Flat applies when nesting within other containers. Inline applies when placing within other inline content.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'inline';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-pagination',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'number' as const\n    }\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton,\n    [Select.metadata.tag]: Select\n  };\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.shadowRoot!.querySelectorAll<HTMLElement>(`${IconButton.metadata.tag}, input, select`),\n      layout: 'horizontal'\n    };\n  }\n\n  get #currentPage() {\n    return (this.value! - 1) * this.step + this.step;\n  }\n\n  get #isLastPage() {\n    return this.items / this.value! === this.step;\n  }\n\n  get #isFirstPage() {\n    return this.value === 1;\n  }\n\n  get #selectLabel() {\n    const start = (this.value! - 1) * this.step + 1;\n    const end = Math.min(this.value! * this.step, this.items || Infinity);\n    return `${formatStandardNumber(start)}-${formatStandardNumber(end)}`;\n  }\n\n  get #label() {\n    return this.items\n      ? html`<label><slot name=\"suffix-label\">${this.i18n.of} ${formatStandardNumber(this.items)}</slot></label>`\n      : nothing;\n  }\n\n  get #previousButton() {\n    return html`<nve-icon-button part=\"icon-button previous-icon-button\"\n      @click=${() => this.#setValue(this.value! - 1)}\n      .disabled=${this.disabled || this.#currentPage <= this.step}\n      .ariaLabel=${this.i18n.previous}\n      container=\"inline\"\n      icon-name=\"chevron\"\n      direction=\"left\"\n    ></nve-icon-button>`;\n  }\n\n  get #nextButton() {\n    return html`<nve-icon-button part=\"icon-button next-icon-button\"\n      @click=${() => this.#setValue(this.value! + 1)}\n      .disabled=${this.disabled || this.#currentPage >= this.items}\n      .ariaLabel=${this.i18n.next}\n      container=\"inline\"\n      icon-name=\"chevron\"\n      direction=\"right\"\n    ></nve-icon-button>`;\n  }\n\n  get #startButton() {\n    return html`<nve-icon-button part=\"icon-button start-icon-button\"\n      @click=${() => this.#setValue(1)}\n      .disabled=${this.disabled || this.#currentPage <= this.step}\n      .ariaLabel=${this.i18n.start}\n      container=\"inline\"\n      icon-name=\"arrow-stop\"\n      direction=\"left\"\n    ></nve-icon-button>`;\n  }\n\n  get #endButton() {\n    return html`<nve-icon-button part=\"icon-button end-icon-button\"\n      @click=${() => this.#setValue(this.items / this.step)}\n      .disabled=${this.disabled || (this.value! - 1) * this.step + this.step >= this.items}\n      .ariaLabel=${this.i18n.end}\n      container=\"inline\"\n      icon-name=\"arrow-stop\"\n      direction=\"right\"\n    ></nve-icon-button>`;\n  }\n\n  #resizeObserver: ResizeObserver;\n\n  get #select() {\n    return this.disableStep\n      ? html`<label>${this.#selectLabel}&nbsp;</label>`\n      : html`\n          <nve-select part=\"select\" .container=${this.container}>\n            <select\n              .ariaLabel=${this.i18n.currentPage}\n              @change=${(e: Event) => this.#setStep(parseInt((e.target as HTMLSelectElement).value, 10))}\n              value=${this.step}\n              .disabled=${this.disabled || this.disableStep}\n            >\n            ${this.stepSizes.map(i => html`<option ?selected=${this.step === i} value=${i}>${i}</option>`)}\n            </select>\n            <div class=\"select-label\">${this.#selectLabel}</div>\n          </nve-select>\n        `;\n  }\n\n  render() {\n    return html`\n      <div internal-host role=\"presentation\">\n        ${\n          this.skippable && this.items\n            ? html`\n              ${this.#startButton} ${this.#previousButton} ${this.#select} ${this.#label} ${this.#nextButton}\n              ${this.#endButton}\n            `\n            : html` ${this.#select} ${this.#label} ${this.#previousButton} ${this.#nextButton} `\n        }\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = 1;\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'toolbar';\n    await this.updateComplete;\n    this.#setupLabelWidth();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#resizeObserver?.unobserve(this);\n  }\n\n  #setupLabelWidth() {\n    const label = this.shadowRoot!.querySelector('.select-label');\n    const select = this.shadowRoot!.querySelector('select');\n    if (label && select) {\n      this.#resizeObserver = new ResizeObserver(\n        entries => (select!.style.minWidth = `${entries[0]!.contentRect.width + 36}px`)\n      );\n      this.#resizeObserver.observe(label);\n    }\n  }\n\n  #setStep(value: number) {\n    /* eslint-disable-next-line */\n    this.step = value; // stateful due to internalized select element\n    this.dispatchEvent(new CustomEvent('step-change', { detail: this.step, bubbles: true, composed: true }));\n    this.#setValue(this.value!);\n  }\n\n  #setValue(value: number) {\n    if (this.value !== value) {\n      this.value = value;\n      this.dispatchInputEvent();\n      this.dispatchChangeEvent();\n    }\n\n    if (this.#isLastPage) {\n      this.dispatchEvent(new CustomEvent('last-page', { bubbles: true, composed: true }));\n    }\n\n    if (this.#isFirstPage) {\n      this.dispatchEvent(new CustomEvent('first-page', { bubbles: true, composed: true }));\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"pagination2.js","names":[],"sources":["../../src/pagination/pagination.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  I18nController,\n  formatStandardNumber,\n  keyNavigationList,\n  typeSSR,\n  useStyles,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { Select } from '@nvidia-elements/core/select';\nimport styles from './pagination.css?inline';\n\n/* eslint-disable jsdoc/no-types */\n// explicit jsdoc annotation due to inheritance context lost with CEM generator\n\n/**\n * @element nve-pagination\n * @description Pagination is a control that enables users to navigate through pages of content.\n * @documentation https://nvidia.github.io/elements/docs/elements/pagination/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/pagination\n * @event input - Dispatched when the value (page) has changed\n * @event change - Dispatched when the value (page) has changed\n * @event first-page - Dispatched when the first page is active\n * @event last-page - Dispatched when the last page is active\n * @event step-change - Dispatched after the page size changes with the current page size in `detail`. The event bubbles and crosses shadow boundaries.\n * @slot suffix-label - Overrides the \"of total\" label when the total is an approximation.\n * @cssprop --background\n * @cssprop --font-size\n * @cssprop --width\n * @csspart icon-button - Base part applied to all icon button elements\n * @csspart previous-icon-button - The previous page icon button\n * @csspart next-icon-button - The next page icon button\n * @csspart start-icon-button - The first page icon button\n * @csspart end-icon-button - The last page icon button\n * @csspart select - The page size select element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n * @property {number} value - value the current page number\n * @attribute {string} step-sizes - A JSON-serialized array of page-size options available in the selector.\n */\n@typeSSR()\n@keyNavigationList<Pagination>()\n@scopedRegistry()\nexport class Pagination extends FormControlMixin<typeof LitElement, number>(LitElement) {\n  /**\n   * The number of items per page.\n   */\n  @property({ type: Number }) step = 10;\n  /**\n   * Page-size options available in the selector.\n   */\n  @property({ type: Array, attribute: 'step-sizes' }) stepSizes: number[] = [10, 20, 50, 100];\n\n  /**\n   * The total number of items.\n   */\n  @property({ type: Number }) items: number;\n\n  /**\n   * Whether the pagination is skippable to start/end.\n   */\n  @property({ type: Boolean }) skippable: boolean;\n\n  /**\n   * Whether the step selector has a disabled state.\n   */\n  @property({ type: Boolean, attribute: 'disable-step' }) disableStep: boolean;\n\n  /**\n   * Determines the container styles of component. Flat applies when nesting within other containers. Inline applies when placing within other inline content.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'inline';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-pagination',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'number' as const\n    }\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton,\n    [Select.metadata.tag]: Select\n  };\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      items: this.shadowRoot!.querySelectorAll<HTMLElement>(`${IconButton.metadata.tag}, input, select`),\n      layout: 'horizontal'\n    };\n  }\n\n  get #currentPage() {\n    return (this.value! - 1) * this.step + this.step;\n  }\n\n  get #isLastPage() {\n    return this.items / this.value! === this.step;\n  }\n\n  get #isFirstPage() {\n    return this.value === 1;\n  }\n\n  get #selectLabel() {\n    const start = (this.value! - 1) * this.step + 1;\n    const end = Math.min(this.value! * this.step, this.items || Infinity);\n    return `${formatStandardNumber(start)}-${formatStandardNumber(end)}`;\n  }\n\n  get #label() {\n    return this.items\n      ? html`<label><slot name=\"suffix-label\">${this.i18n.of} ${formatStandardNumber(this.items)}</slot></label>`\n      : nothing;\n  }\n\n  get #previousButton() {\n    return html`<nve-icon-button part=\"icon-button previous-icon-button\"\n      @click=${() => this.#setValue(this.value! - 1)}\n      .disabled=${this.disabled || this.#currentPage <= this.step}\n      .ariaLabel=${this.i18n.previous}\n      container=\"inline\"\n      icon-name=\"chevron\"\n      direction=\"left\"\n    ></nve-icon-button>`;\n  }\n\n  get #nextButton() {\n    return html`<nve-icon-button part=\"icon-button next-icon-button\"\n      @click=${() => this.#setValue(this.value! + 1)}\n      .disabled=${this.disabled || this.#currentPage >= this.items}\n      .ariaLabel=${this.i18n.next}\n      container=\"inline\"\n      icon-name=\"chevron\"\n      direction=\"right\"\n    ></nve-icon-button>`;\n  }\n\n  get #startButton() {\n    return html`<nve-icon-button part=\"icon-button start-icon-button\"\n      @click=${() => this.#setValue(1)}\n      .disabled=${this.disabled || this.#currentPage <= this.step}\n      .ariaLabel=${this.i18n.start}\n      container=\"inline\"\n      icon-name=\"arrow-stop\"\n      direction=\"left\"\n    ></nve-icon-button>`;\n  }\n\n  get #endButton() {\n    return html`<nve-icon-button part=\"icon-button end-icon-button\"\n      @click=${() => this.#setValue(this.items / this.step)}\n      .disabled=${this.disabled || (this.value! - 1) * this.step + this.step >= this.items}\n      .ariaLabel=${this.i18n.end}\n      container=\"inline\"\n      icon-name=\"arrow-stop\"\n      direction=\"right\"\n    ></nve-icon-button>`;\n  }\n\n  #resizeObserver: ResizeObserver;\n\n  get #select() {\n    return this.disableStep\n      ? html`<label>${this.#selectLabel}&nbsp;</label>`\n      : html`\n          <nve-select part=\"select\" .container=${this.container}>\n            <select\n              .ariaLabel=${this.i18n.currentPage}\n              @change=${(e: Event) => this.#setStep(parseInt((e.target as HTMLSelectElement).value, 10))}\n              value=${this.step}\n              .disabled=${this.disabled || this.disableStep}\n            >\n            ${this.stepSizes.map(i => html`<option ?selected=${this.step === i} value=${i}>${i}</option>`)}\n            </select>\n            <div class=\"select-label\">${this.#selectLabel}</div>\n          </nve-select>\n        `;\n  }\n\n  render() {\n    return html`\n      <div internal-host role=\"presentation\">\n        ${\n          this.skippable && this.items\n            ? html`\n              ${this.#startButton} ${this.#previousButton} ${this.#select} ${this.#label} ${this.#nextButton}\n              ${this.#endButton}\n            `\n            : html` ${this.#select} ${this.#label} ${this.#previousButton} ${this.#nextButton} `\n        }\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = 1;\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'toolbar';\n    await this.updateComplete;\n    this.#setupLabelWidth();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#resizeObserver?.unobserve(this);\n  }\n\n  #setupLabelWidth() {\n    const label = this.shadowRoot!.querySelector('.select-label');\n    const select = this.shadowRoot!.querySelector('select');\n    if (label && select) {\n      this.#resizeObserver = new ResizeObserver(\n        entries => (select!.style.minWidth = `${entries[0]!.contentRect.width + 36}px`)\n      );\n      this.#resizeObserver.observe(label);\n    }\n  }\n\n  #setStep(value: number) {\n    /* eslint-disable-next-line */\n    this.step = value; // stateful due to internalized select element\n    this.dispatchEvent(new CustomEvent('step-change', { detail: this.step, bubbles: true, composed: true }));\n    this.#setValue(this.value!);\n  }\n\n  #setValue(value: number) {\n    if (this.value !== value) {\n      this.value = value;\n      this.dispatchInputEvent();\n      this.dispatchChangeEvent();\n    }\n\n    if (this.#isLastPage) {\n      this.dispatchEvent(new CustomEvent('last-page', { bubbles: true, composed: true }));\n    }\n\n    if (this.#isFirstPage) {\n      this.dispatchEvent(new CustomEvent('first-page', { bubbles: true, composed: true }));\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/panel/panel2.js

@@ -4,7 +4,7 @@ import { stateExpanded as n } from "../internal/controllers/state-expanded.contr
 import { TypeExpandableController as r } from "../internal/controllers/type-expandable.controller.js";
 import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
 import { useStyles as a } from "../internal/styles/index.js";
-import o from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import o from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { IconButton as s } from "../icon-button/icon-button2.js";
 import c from "./panel.js";
 import l from "./panel-header.js";
@@ -21,7 +21,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-panel-header",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-panel-content",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	render() {
@@ -50,7 +50,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-panel-footer",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	render() {
@@ -69,7 +69,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-panel",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {

package/dist/panel/panel2.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel2.js","names":["#i18nController","#direction","#typeExpandableController"],"sources":["../../src/panel/panel.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 { property } from 'lit/decorators/property.js';\nimport { when } from 'lit/directives/when.js';\nimport {\n  stateExpanded,\n  I18nController,\n  TypeExpandableController,\n  useStyles,\n  attachInternals,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport panelStyleSheet from './panel.css?inline';\nimport panelHeaderStyleSheet from './panel-header.css?inline';\nimport panelContentStyleSheet from './panel-content.css?inline';\nimport panelFooterStyleSheet from './panel-footer.css?inline';\n\n/**\n * @element nve-panel-header\n * @description Displays the title, subtitle, and optional action controls at the top of a panel.\n * @documentation https://nvidia.github.io/elements/docs/elements/panel/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @slot - default content slot\n * @slot title - Title Text\n * @slot subtitle - Subtitle Text\n * @slot action-icon - Extra Action Button\n * @cssprop --padding\n * @cssprop --border-bottom\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n * @deprecated use `nve-page-panel-header` with `nve-page-panel` instead\n */\nexport class PanelHeader extends LitElement {\n  static styles = useStyles([panelHeaderStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel-header',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <div id=\"titles\">\n          <slot name=\"title\"></slot>\n          <slot name=\"subtitle\"></slot>\n          <slot></slot>\n        </div>\n\n        <slot name=\"action-icon\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback(); // Do not override connectedCallback w/out supering\n    this.slot = 'header';\n  }\n}\n\n/**\n * @element nve-panel-content\n * @description Contains the main body content within a panel, providing a structured region for detailed information.\n * @documentation https://nvidia.github.io/elements/docs/elements/panel/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @slot - This is a default/unnamed slot for panel content\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n * @deprecated use `nve-page-panel-content` with `nve-page-panel` instead\n */\nexport class PanelContent extends LitElement {\n  static styles = useStyles([panelContentStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel-content',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\n/**\n * @element nve-panel-footer\n * @description Provides a designated area at the bottom of a panel for actions or supplementary controls.\n * @documentation https://nvidia.github.io/elements/docs/elements/panel/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @slot - This is a default/unnamed slot for panel footer content\n * @cssprop --padding\n * @cssprop --border-top\n * @cssprop --gap\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n * @deprecated use `nve-page-panel-footer` with `nve-page-panel` instead\n */\nexport class PanelFooter extends LitElement {\n  static styles = useStyles([panelFooterStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel-footer',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <footer internal-host>\n        <slot></slot>\n      </footer>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback(); // Do not override connectedCallback w/out supering\n    this.slot = 'footer';\n  }\n}\n\n/**\n * @element nve-panel\n * @description Panel is inline container for content that couples to the content on the page (details, extra actions/options). Or [Drawer](./docs/elements/drawer/) is out of context of the rest of the page (notifications, navigations, settings).\n * @documentation https://nvidia.github.io/elements/docs/elements/panel/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @event open - Dispatched when the panel opens.\n * @event close - Dispatched when the panel closes.\n * @slot - This is a default/unnamed slot for panel content\n * @slot header - header element (Use `panel-header` or custom content)\n * @slot content - content element (Use `panel-content` or custom content)\n * @slot footer - footer element (Use `panel-footer` or custom content)\n * @cssprop --background\n * @cssprop --color\n * @cssprop --box-shadow\n * @cssprop --panel-button-border-radius - Border radius of the panel expand/collapse button\n * @csspart icon-button - The expand/collapse icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n * @deprecated use `nve-page-panel` with `nve-page` instead\n */\n\n@scopedRegistry()\n@stateExpanded<Panel>()\nexport class Panel extends LitElement {\n  /**\n   * Determines whether the panel is fully expanded, displaying its contents, or not.\n   */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /**\n   * Determines whether the panel collapses down to an expand icon, or fully hides.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * Determines whether the panel should handle auto-closing behavior vs. defaults to off.\n   */\n  @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n  /**\n   * Sets the proper collapse icon and collapse animation, based on which side of the page the panel occupies.\n   */\n  @property({ type: String }) side: 'left' | 'right' = 'left';\n\n  static styles = useStyles([panelStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n  #typeExpandableController = new TypeExpandableController(this);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  get #direction() {\n    if (this.side === 'left') {\n      return this.expanded ? 'left' : 'right';\n    } else {\n      return this.expanded ? 'right' : 'left';\n    }\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <div class=\"header\">\n          <slot name=\"header\"></slot>\n\n          ${when(\n            !this.closable,\n            () => html`\n              <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" .container=${this.expanded ? 'flat' : undefined} icon-name=\"double-chevron\"\n                @click=${() => this.#typeExpandableController.toggle()}\n                .direction=${this.#direction}\n                .expanded=${this.expanded}\n                .ariaLabel=${this.expanded ? this.i18n.close : this.i18n.expand}\n              ></nve-icon-button>\n            `,\n            () => html`\n              <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" container=\"flat\" icon-name=\"cancel\"\n                @click=${() => this.#typeExpandableController.close()}\n                .expanded=${this.expanded}\n                .ariaLabel=${this.expanded ? this.i18n.hide : this.i18n.show}\n              ></nve-icon-button>\n            `\n          )}\n        </div>\n\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'region';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAmCA,IAAa,IAAb,cAAiC,EAAW;;gBAC1B,EAAU,CAAC,CAAqB,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAWb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF,GAaa,IAAb,cAAkC,EAAW;;gBAC3B,EAAU,CAAC,CAAsB,CAAC;;;kBAEvB;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAGb;AACF,GAea,IAAb,cAAiC,EAAW;;gBAC1B,EAAU,CAAC,CAAqB,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF,GAyBO,IAAA,cAAoB,EAAW;;+BAImB,oBAKf,0BAKoC,gBAKvB,kBAgBb,IAAI,EAAqB,IAAI,aACzC,IAAI,EAAyB,IAAI,eAK1B,KAAKA,GAAgB;;;gBApBxC,EAAU,CAAC,CAAe,CAAC;;;kBAEhB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAKA;CACA;CAOA,IAAIC,KAAa;EAIb,OAHE,KAAK,SAAS,SACT,KAAK,WAAW,SAAS,UAEzB,KAAK,WAAW,UAAU;CAErC;CAEA,SAAS;EACP,OAAO,CAAI,qEAKH,EACA,CAAC,KAAK,gBACA,CAAI,uFAC6E,KAAK,WAAW,SAAS,KAAA,EAAU,6CACvG,KAAKC,GAA0B,OAAO,EAAE,gBAC1C,KAAKD,GAAW,eACjB,KAAK,SAAS,gBACb,KAAK,WAAW,KAAK,KAAK,QAAQ,KAAK,KAAK,OAAO,6BAG9D,CAAI,6HAES,KAAKC,GAA0B,MAAM,EAAE,eAC1C,KAAK,SAAS,gBACb,KAAK,WAAW,KAAK,KAAK,OAAO,KAAK,KAAK,KAAK,qBAGnE,EAAE;CAUV;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;GAvFG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKzC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAK1B,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,MAKxD,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAsBzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UA3C3B,EAAe,GACf,EAAqB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"panel2.js","names":[],"sources":["../../src/panel/panel.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 { property } from 'lit/decorators/property.js';\nimport { when } from 'lit/directives/when.js';\nimport {\n  stateExpanded,\n  I18nController,\n  TypeExpandableController,\n  useStyles,\n  attachInternals,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport panelStyleSheet from './panel.css?inline';\nimport panelHeaderStyleSheet from './panel-header.css?inline';\nimport panelContentStyleSheet from './panel-content.css?inline';\nimport panelFooterStyleSheet from './panel-footer.css?inline';\n\n/**\n * @element nve-panel-header\n * @description Displays the title, subtitle, and optional action controls at the top of a panel.\n * @documentation https://nvidia.github.io/elements/docs/elements/panel/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @slot - default content slot\n * @slot title - Title Text\n * @slot subtitle - Subtitle Text\n * @slot action-icon - Extra Action Button\n * @cssprop --padding\n * @cssprop --border-bottom\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n * @deprecated use `nve-page-panel-header` with `nve-page-panel` instead\n */\nexport class PanelHeader extends LitElement {\n  static styles = useStyles([panelHeaderStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel-header',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <div internal-host>\n        <div id=\"titles\">\n          <slot name=\"title\"></slot>\n          <slot name=\"subtitle\"></slot>\n          <slot></slot>\n        </div>\n\n        <slot name=\"action-icon\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback(); // Do not override connectedCallback w/out supering\n    this.slot = 'header';\n  }\n}\n\n/**\n * @element nve-panel-content\n * @description Contains the main body content within a panel, providing a structured region for detailed information.\n * @documentation https://nvidia.github.io/elements/docs/elements/panel/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @slot - This is a default/unnamed slot for panel content\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n * @deprecated use `nve-page-panel-content` with `nve-page-panel` instead\n */\nexport class PanelContent extends LitElement {\n  static styles = useStyles([panelContentStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel-content',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\n/**\n * @element nve-panel-footer\n * @description Provides a designated area at the bottom of a panel for actions or supplementary controls.\n * @documentation https://nvidia.github.io/elements/docs/elements/panel/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @slot - This is a default/unnamed slot for panel footer content\n * @cssprop --padding\n * @cssprop --border-top\n * @cssprop --gap\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n * @deprecated use `nve-page-panel-footer` with `nve-page-panel` instead\n */\nexport class PanelFooter extends LitElement {\n  static styles = useStyles([panelFooterStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel-footer',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <footer internal-host>\n        <slot></slot>\n      </footer>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback(); // Do not override connectedCallback w/out supering\n    this.slot = 'footer';\n  }\n}\n\n/**\n * @element nve-panel\n * @description Panel is inline container for content that couples to the content on the page (details, extra actions/options). Or [Drawer](./docs/elements/drawer/) is out of context of the rest of the page (notifications, navigations, settings).\n * @documentation https://nvidia.github.io/elements/docs/elements/panel/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/panel\n * @event open - Dispatched when the panel opens.\n * @event close - Dispatched when the panel closes.\n * @slot - This is a default/unnamed slot for panel content\n * @slot header - header element (Use `panel-header` or custom content)\n * @slot content - content element (Use `panel-content` or custom content)\n * @slot footer - footer element (Use `panel-footer` or custom content)\n * @cssprop --background\n * @cssprop --color\n * @cssprop --box-shadow\n * @cssprop --panel-button-border-radius - Border radius of the panel expand/collapse button\n * @csspart icon-button - The expand/collapse icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n * @deprecated use `nve-page-panel` with `nve-page` instead\n */\n\n@scopedRegistry()\n@stateExpanded<Panel>()\nexport class Panel extends LitElement {\n  /**\n   * Determines whether the panel is fully expanded, displaying its contents, or not.\n   */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /**\n   * Determines whether the panel collapses down to an expand icon, or fully hides.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * Determines whether the panel should handle auto-closing behavior vs. defaults to off.\n   */\n  @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n  /**\n   * Sets the proper collapse icon and collapse animation, based on which side of the page the panel occupies.\n   */\n  @property({ type: String }) side: 'left' | 'right' = 'left';\n\n  static styles = useStyles([panelStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-panel',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n  #typeExpandableController = new TypeExpandableController(this);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  get #direction() {\n    if (this.side === 'left') {\n      return this.expanded ? 'left' : 'right';\n    } else {\n      return this.expanded ? 'right' : 'left';\n    }\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <div class=\"header\">\n          <slot name=\"header\"></slot>\n\n          ${when(\n            !this.closable,\n            () => html`\n              <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" .container=${this.expanded ? 'flat' : undefined} icon-name=\"double-chevron\"\n                @click=${() => this.#typeExpandableController.toggle()}\n                .direction=${this.#direction}\n                .expanded=${this.expanded}\n                .ariaLabel=${this.expanded ? this.i18n.close : this.i18n.expand}\n              ></nve-icon-button>\n            `,\n            () => html`\n              <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" container=\"flat\" icon-name=\"cancel\"\n                @click=${() => this.#typeExpandableController.close()}\n                .expanded=${this.expanded}\n                .ariaLabel=${this.expanded ? this.i18n.hide : this.i18n.show}\n              ></nve-icon-button>\n            `\n          )}\n        </div>\n\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'region';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAmCA,IAAa,IAAb,cAAiC,EAAW;;EAC1B,KAAA,SAAA,EAAU,CAAC,CAAqB,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAWb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF,GAaa,IAAb,cAAkC,EAAW;;EAC3B,KAAA,SAAA,EAAU,CAAC,CAAsB,CAAC;;;EAEvB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAGb;AACF,GAea,IAAb,cAAiC,EAAW;;EAC1B,KAAA,SAAA,EAAU,CAAC,CAAqB,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;AACF,GAyBa,IAAN,cAAoB,EAAW;;EAyCD,aArCoB,KAAA,WAAA,IAKf,KAAA,WAAA,IAKoC,KAAA,iBAAA,IAKvB,KAAA,OAAA,QAgBb,KAAA,KAAA,IAAI,EAAqB,IAAI,GACzC,KAAA,KAAA,IAAI,EAAyB,IAAI,GAK1B,KAAA,OAAA,KAAK,GAAgB;;;EApBxC,KAAA,SAAA,EAAU,CAAC,CAAe,CAAC;;;EAEhB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAKA;CACA;CAOA,IAAI,KAAa;EAIb,OAHE,KAAK,SAAS,SACT,KAAK,WAAW,SAAS,UAEzB,KAAK,WAAW,UAAU;CAErC;CAEA,SAAS;EACP,OAAO,CAAI,qEAKH,EACA,CAAC,KAAK,gBACA,CAAI,uFAC6E,KAAK,WAAW,SAAS,KAAA,EAAU,6CACvG,KAAK,GAA0B,OAAO,EAAE,gBAC1C,KAAK,GAAW,eACjB,KAAK,SAAS,gBACb,KAAK,WAAW,KAAK,KAAK,QAAQ,KAAK,KAAK,OAAO,6BAG9D,CAAI,6HAES,KAAK,GAA0B,MAAM,EAAE,eAC1C,KAAK,SAAS,gBACb,KAAK,WAAW,KAAK,KAAK,OAAO,KAAK,KAAK,KAAK,qBAGnE,EAAE;CAUV;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;AAvFG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAKzC,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1B,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAKxD,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAsBzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GA3C3B,IAAA,EAAA,CAAA,EAAe,GACf,EAAqB,CAAA,GAAA,CAAA"}

package/dist/password/password2.js

@@ -1,6 +1,6 @@
 import { scopedRegistry as e } from "../internal/decorators/scoped-registry.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Control as r } from "../forms/control/control2.js";
 import { IconButton as i } from "../icon-button/icon-button2.js";
 import { inputStyles as a } from "../input/input2.js";
@@ -23,7 +23,7 @@ var u = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-password",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {

package/dist/password/password2.js.map

@@ -1 +1 @@
-{"version":3,"file":"password2.js","names":["#toggleVisibility"],"sources":["../../src/password/password.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 { state } from 'lit/decorators/state.js';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport styles from './password.css?inline';\n\n/**\n * @element nve-password\n * @description A password is a control that enables users to enter password text.\n * @documentation https://nvidia.github.io/elements/docs/elements/password/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/password\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The visibility toggle icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password\n */\n@scopedRegistry()\nexport class Password extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  @state() private pressed = false;\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-password',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" @click=${() => this.#toggleVisibility()} .pressed=${this.pressed} .iconName=${this.pressed ? 'eye-hidden' : 'eye'} container=\"inline\" .ariaLabel=${this.pressed ? this.i18n.hide : this.i18n.show}></nve-icon-button>`;\n  }\n\n  #toggleVisibility() {\n    this.pressed = !this.pressed;\n    this.input.type = this.pressed ? 'text' : 'password';\n  }\n}\n"],"mappings":";;;;;;;;;;;AA8BO,IAAA,IAAA,cAAuB,EAAoC;;8BAOrC;;;gBAEX,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;kBAEvC;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,qDAAoD,KAAKA,GAAkB,EAAE,cAAY,KAAK,QAAQ,eAAa,KAAK,UAAU,eAAe,MAAM,mCAAiC,KAAK,UAAU,KAAK,KAAK,OAAO,KAAK,KAAK,KAAK;CACpP;CAEA,KAAoB;EAElB,AADA,KAAK,UAAU,CAAC,KAAK,SACrB,KAAK,MAAM,OAAO,KAAK,UAAU,SAAS;CAC5C;AACF;GAvBG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAExC,EAAM,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,UARR,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"password2.js","names":[],"sources":["../../src/password/password.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 { state } from 'lit/decorators/state.js';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport styles from './password.css?inline';\n\n/**\n * @element nve-password\n * @description A password is a control that enables users to enter password text.\n * @documentation https://nvidia.github.io/elements/docs/elements/password/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/password\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The visibility toggle icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password\n */\n@scopedRegistry()\nexport class Password extends Control implements ContainerElement {\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  @state() private pressed = false;\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-password',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" @click=${() => this.#toggleVisibility()} .pressed=${this.pressed} .iconName=${this.pressed ? 'eye-hidden' : 'eye'} container=\"inline\" .ariaLabel=${this.pressed ? this.i18n.hide : this.i18n.show}></nve-icon-button>`;\n  }\n\n  #toggleVisibility() {\n    this.pressed = !this.pressed;\n    this.input.type = this.pressed ? 'text' : 'password';\n  }\n}\n"],"mappings":";;;;;;;;;;;AA8BO,IAAM,IAAN,cAAuB,EAAoC;;EAOrC,aAAA,KAAA,UAAA;;;EAEX,KAAA,SAAA,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,qDAAoD,KAAK,GAAkB,EAAE,cAAY,KAAK,QAAQ,eAAa,KAAK,UAAU,eAAe,MAAM,mCAAiC,KAAK,UAAU,KAAK,KAAK,OAAO,KAAK,KAAK,KAAK;CACpP;CAEA,KAAoB;EAElB,AADA,KAAK,UAAU,CAAC,KAAK,SACrB,KAAK,MAAM,OAAO,KAAK,UAAU,SAAS;CAC5C;AACF;AAvBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAExC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GARR,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}

package/dist/polyfills/index.js

@@ -4,7 +4,7 @@ import "formdata-polyfill";
 //#region src/polyfills/index.ts
 Element.prototype.toggleAttribute || (Element.prototype.toggleAttribute = function(e, t) {
 	let n = t === void 0 ? void 0 : t;
-	return this.hasAttribute(e) ? n ? !0 : (this.removeAttribute(e), !1) : n === !1 ? !1 : (this.setAttribute(e, ""), !0);
+	return this.hasAttribute(e) ? n ? !0 : (this.removeAttribute(e), !1) : n !== !1 && (this.setAttribute(e, ""), !0);
 });
 //#endregion
 

package/dist/polyfills/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/polyfills/index.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/**\n * - Vitest (happy-dom/js-dom)\n * - Safari\n *\n * Used for Custom Elements Form/A11y APIs\n * https://github.com/whatwg/html/pull/8467\n * https://bugs.webkit.org/show_bug.cgi?id=215911\n * https://bugzilla.mozilla.org/show_bug.cgi?id=1588763\n */\nimport 'construct-style-sheets-polyfill';\nimport 'element-internals-polyfill';\nimport 'formdata-polyfill';\nimport './custom-state-set.js';\n\n/**\n * https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute\n * - Vitest (happy-dom/js-dom)\n * - Safari\n *\n * Used in element-internals-polyfill\n */\nif (!Element.prototype.toggleAttribute) {\n  Element.prototype.toggleAttribute = function (name, force) {\n    const forceBool = force !== void 0 ? force : undefined;\n\n    if (this.hasAttribute(name)) {\n      if (forceBool) {\n        return true;\n      }\n\n      this.removeAttribute(name);\n      return false;\n    }\n    if (forceBool === false) {\n      return false;\n    }\n\n    this.setAttribute(name, '');\n    return true;\n  };\n}\n"],"mappings":";;;;AAwBK,QAAQ,UAAU,oBACrB,QAAQ,UAAU,kBAAkB,SAAU,GAAM,GAAO;CACzD,IAAM,IAAY,MAAU,KAAK,IAAY,KAAA,IAAR;CAerC,OAbI,KAAK,aAAa,CAAI,IACpB,IACK,MAGT,KAAK,gBAAgB,CAAI,GAClB,MAEL,MAAc,KACT,MAGT,KAAK,aAAa,GAAM,EAAE,GACnB;AACT"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/polyfills/index.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/**\n * - Vitest (happy-dom/js-dom)\n * - Safari\n *\n * Used for Custom Elements Form/A11y APIs\n * https://github.com/whatwg/html/pull/8467\n * https://bugs.webkit.org/show_bug.cgi?id=215911\n * https://bugzilla.mozilla.org/show_bug.cgi?id=1588763\n */\nimport 'construct-style-sheets-polyfill';\nimport 'element-internals-polyfill';\nimport 'formdata-polyfill';\nimport './custom-state-set.js';\n\n/**\n * https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute\n * - Vitest (happy-dom/js-dom)\n * - Safari\n *\n * Used in element-internals-polyfill\n */\nif (!Element.prototype.toggleAttribute) {\n  Element.prototype.toggleAttribute = function (name, force) {\n    const forceBool = force !== void 0 ? force : undefined;\n\n    if (this.hasAttribute(name)) {\n      if (forceBool) {\n        return true;\n      }\n\n      this.removeAttribute(name);\n      return false;\n    }\n    if (forceBool === false) {\n      return false;\n    }\n\n    this.setAttribute(name, '');\n    return true;\n  };\n}\n"],"mappings":";;;;AAwBK,QAAQ,UAAU,oBACrB,QAAQ,UAAU,kBAAkB,SAAU,GAAM,GAAO;CACzD,IAAM,IAAY,MAAU,KAAK,IAAY,KAAA,IAAR;CAerC,OAbI,KAAK,aAAa,CAAI,IACpB,IACK,MAGT,KAAK,gBAAgB,CAAI,GAClB,MAEL,MAAc,OAIlB,KAAK,aAAa,GAAM,EAAE,GACnB;AACT"}

package/dist/preferences-input/preferences-input.examples.json

@@ -5,7 +5,7 @@
     {
       "id": "preferences-input",
       "name": "Default",
-      "template": "<nve-preferences-input\n  name=\"theme\"\n  value='{ \"color-scheme\": \"dark\", \"scale\": \"compact\", \"reduced-motion\": \"true\" }'\n></nve-preferences-input>\n",
+      "template": "<nve-preferences-input name=\"theme\" value='{ \"color-scheme\": \"dark\", \"scale\": \"compact\", \"reduced-motion\": \"true\" }'></nve-preferences-input>\n",
       "summary": "Preferences input displaying theme settings (color scheme, scale, reduced motion) for user customization.",
       "description": "",
       "composition": false,

package/dist/preferences-input/preferences-input2.js

@@ -1,7 +1,7 @@
 import { I18nController as e } from "../internal/controllers/i18n.controller.js";
 import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
 import { useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Icon as i } from "../icon/icon2.js";
 import { Control as a } from "../forms/control/control2.js";
 import { Switch as o } from "../switch/switch2.js";
@@ -43,7 +43,7 @@ var x = class extends g(d) {
 	static {
 		this.metadata = {
 			tag: "nve-preferences-input",
-			version: "2.7.3",
+			version: "2.8.1",
 			valueSchema: {
 				type: "object",
 				properties: {

package/dist/preferences-input/preferences-input2.js.map

@@ -1 +1 @@
-{"version":3,"file":"preferences-input2.js","names":["#setColorScheme","#setScale","#setReducedMotion","#i18nController","#updatePreferences","#update"],"sources":["../../src/preferences-input/preferences-input.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, isServer, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { I18nController, scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { state } from 'lit/decorators/state.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { type IconName, Icon } from '@nvidia-elements/core/icon';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Divider } from '@nvidia-elements/core/divider';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Switch } from '@nvidia-elements/core/switch';\nimport styles from './preferences-input.css?inline';\n\n/* eslint-disable jsdoc/no-types */\n// Explicit JSDoc types because the CEM analyzer loses the inherited generic specialization.\n\nexport type ColorScheme = 'auto' | 'light' | 'dark' | 'high-contrast';\nexport type Scale = 'default' | 'compact' | 'relaxed';\nexport type Variant = 'reduced-motion';\n\nconst colorSchemes: ColorScheme[] = ['auto', 'light', 'dark', 'high-contrast'];\nconst scales: Scale[] = ['default', 'compact'];\nconst colorSchemesIcons = {\n  auto: 'computer',\n  light: 'sun',\n  dark: 'moon',\n  'high-contrast': 'circle-half'\n} satisfies Record<ColorScheme, IconName>;\n\nfunction getActivePreferences(element = globalThis.document.documentElement) {\n  const computedStyle = getComputedStyle(element);\n\n  return {\n    light: computedStyle.getPropertyValue('--nve-config-color-scheme-light') === 'true',\n    dark: computedStyle.getPropertyValue('--nve-config-color-scheme-dark') === 'true',\n    'high-contrast': computedStyle.getPropertyValue('--nve-config-color-scheme-high-contrast') === 'true',\n    compact: computedStyle.getPropertyValue('--nve-config-scale-compact') === 'true',\n    'reduced-motion': computedStyle.getPropertyValue('--nve-config-reduced-motion') === 'true'\n  } satisfies Partial<Record<ColorScheme | Scale | Variant, boolean>>;\n}\n\nexport interface PreferencesInputValue {\n  'color-scheme'?: ColorScheme | string;\n  scale?: Scale | string;\n  'reduced-motion'?: boolean;\n}\n\n/**\n * @element nve-preferences-input\n * @description A preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example.\n * @documentation https://nvidia.github.io/elements/docs/elements/preferences-input/\n * @since 1.23.7\n * @entrypoint \\@nvidia-elements/core/preferences-input\n * @property {PreferencesInputValue} value - Contains the current color scheme, scale, and reduced motion preferences. Assign an object through JavaScript or provide its JSON serialization in the HTML `value` attribute.\n * @attribute {string} value - JSON object parsed as `PreferencesInputValue`.\n * @event input - Dispatched when the value has changed\n * @event change - Dispatched when the value has changed\n * @cssprop --color\n * @cssprop --width\n * @csspart control - The control wrapper elements that contain the labels and menus\n * @csspart menu - The menu elements that display color scheme and scale options\n * @csspart menu-item - The individual menu item elements for each selectable option\n * @csspart icon - The icon element displayed next to color scheme options\n * @csspart divider - The divider elements that separate preference sections\n * @csspart switch - The switch element for the reduced motion toggle\n *\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/listbox/\n *\n */\n@scopedRegistry()\nexport class PreferencesInput extends FormControlMixin<typeof LitElement, PreferencesInputValue>(LitElement) {\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-preferences-input',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'object' as const,\n      properties: {\n        'color-scheme': { type: 'string' as const },\n        scale: { type: 'string' as const },\n        'reduced-motion': { type: 'boolean' as const }\n      }\n    }\n  };\n\n  static elementDefinitions = {\n    [Control.metadata.tag]: Control,\n    [Divider.metadata.tag]: Divider,\n    [Icon.metadata.tag]: Icon,\n    [Menu.metadata.tag]: Menu,\n    [MenuItem.metadata.tag]: MenuItem,\n    [Switch.metadata.tag]: Switch\n  };\n\n  @state() private activePreferences: ReturnType<typeof getActivePreferences> = {\n    light: false,\n    dark: false,\n    'high-contrast': false,\n    compact: false,\n    'reduced-motion': false\n  };\n\n  // eslint-disable-next-line max-lines-per-function\n  render() {\n    return html`\n      <div internal-host>\n        <nve-control part=\"control\">\n          <label>${this.i18n.colorScheme}</label>\n          <nve-menu part=\"menu\" nve-control>\n          ${colorSchemes.map(\n            value => html`\n            <nve-menu-item part=\"menu-item\"\n              .selected=${this.value?.['color-scheme'] === value}\n              .value=${value}\n              @click=${() => this.#setColorScheme(value)}\n            >\n              <nve-icon part=\"icon\" name=${colorSchemesIcons[value]}></nve-icon> ${value}\n            </nve-menu-item>\n            `\n          )}\n          </nve-menu>\n        </nve-control>\n        ${\n          this.activePreferences['compact']\n            ? html`\n        <nve-divider part=\"divider\"></nve-divider>\n        <nve-control part=\"control\">\n          <label>${this.i18n.scale}</label>\n          <nve-menu part=\"menu\" nve-control>\n          ${scales.map(\n            value => html`\n            <nve-menu-item part=\"menu-item\"\n              .selected=${this.value?.['scale'] === value}\n              .value=${value}\n              @click=${() => this.#setScale(value)}\n            >\n              ${value}\n            </nve-menu-item>\n            `\n          )}\n          </nve-menu>\n        </nve-control>\n          `\n            : ''\n        }\n        ${\n          this.activePreferences['reduced-motion']\n            ? html`\n        <nve-divider part=\"divider\"></nve-divider>\n        <nve-switch part=\"switch\">\n          <label>${this.i18n.reducedMotion}</label>\n          <input\n            type=\"checkbox\"\n            value=\"reduced-motion\"\n            .checked=${this.value?.['reduced-motion']}\n            @change=${(e: { target: HTMLInputElement }) => this.#setReducedMotion(e.target.checked)}\n          />\n        </nve-switch>`\n            : ''\n        }\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = {\n      'color-scheme': 'auto',\n      'reduced-motion': false,\n      scale: 'default'\n    };\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('nve-control', '');\n    this.#updatePreferences();\n  }\n\n  /** @private */\n  updateValue(value: PreferencesInputValue) {\n    super.updateValue({ ...this.value, ...value });\n    this.#updatePreferences();\n  }\n\n  #updatePreferences() {\n    /* istanbul ignore else -- Lit SSR mode is not reachable in browser unit tests. */\n    if (!isServer) {\n      const preferences = getActivePreferences();\n      if (JSON.stringify(this.activePreferences) !== JSON.stringify(preferences)) {\n        this.activePreferences = preferences;\n      }\n    }\n  }\n\n  #setColorScheme(value: ColorScheme) {\n    this.value = { ...this.value, 'color-scheme': value };\n    this.#update();\n  }\n\n  #setScale(value: Scale) {\n    this.value = { ...this.value, scale: value };\n    this.#update();\n  }\n\n  #setReducedMotion(value: boolean) {\n    this.value = { ...this.value, 'reduced-motion': value };\n    this.#update();\n  }\n\n  #update() {\n    this.dispatchInputEvent();\n    this.dispatchChangeEvent();\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"preferences-input2.js","names":[],"sources":["../../src/preferences-input/preferences-input.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, isServer, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { I18nController, scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { state } from 'lit/decorators/state.js';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { type IconName, Icon } from '@nvidia-elements/core/icon';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { Divider } from '@nvidia-elements/core/divider';\nimport { Menu, MenuItem } from '@nvidia-elements/core/menu';\nimport { Switch } from '@nvidia-elements/core/switch';\nimport styles from './preferences-input.css?inline';\n\n/* eslint-disable jsdoc/no-types */\n// Explicit JSDoc types because the CEM analyzer loses the inherited generic specialization.\n\nexport type ColorScheme = 'auto' | 'light' | 'dark' | 'high-contrast';\nexport type Scale = 'default' | 'compact' | 'relaxed';\nexport type Variant = 'reduced-motion';\n\nconst colorSchemes: ColorScheme[] = ['auto', 'light', 'dark', 'high-contrast'];\nconst scales: Scale[] = ['default', 'compact'];\nconst colorSchemesIcons = {\n  auto: 'computer',\n  light: 'sun',\n  dark: 'moon',\n  'high-contrast': 'circle-half'\n} satisfies Record<ColorScheme, IconName>;\n\nfunction getActivePreferences(element = globalThis.document.documentElement) {\n  const computedStyle = getComputedStyle(element);\n\n  return {\n    light: computedStyle.getPropertyValue('--nve-config-color-scheme-light') === 'true',\n    dark: computedStyle.getPropertyValue('--nve-config-color-scheme-dark') === 'true',\n    'high-contrast': computedStyle.getPropertyValue('--nve-config-color-scheme-high-contrast') === 'true',\n    compact: computedStyle.getPropertyValue('--nve-config-scale-compact') === 'true',\n    'reduced-motion': computedStyle.getPropertyValue('--nve-config-reduced-motion') === 'true'\n  } satisfies Partial<Record<ColorScheme | Scale | Variant, boolean>>;\n}\n\nexport interface PreferencesInputValue {\n  'color-scheme'?: ColorScheme | string;\n  scale?: Scale | string;\n  'reduced-motion'?: boolean;\n}\n\n/**\n * @element nve-preferences-input\n * @description A preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example.\n * @documentation https://nvidia.github.io/elements/docs/elements/preferences-input/\n * @since 1.23.7\n * @entrypoint \\@nvidia-elements/core/preferences-input\n * @property {PreferencesInputValue} value - Contains the current color scheme, scale, and reduced motion preferences. Assign an object through JavaScript or provide its JSON serialization in the HTML `value` attribute.\n * @attribute {string} value - JSON object parsed as `PreferencesInputValue`.\n * @event input - Dispatched when the value has changed\n * @event change - Dispatched when the value has changed\n * @cssprop --color\n * @cssprop --width\n * @csspart control - The control wrapper elements that contain the labels and menus\n * @csspart menu - The menu elements that display color scheme and scale options\n * @csspart menu-item - The individual menu item elements for each selectable option\n * @csspart icon - The icon element displayed next to color scheme options\n * @csspart divider - The divider elements that separate preference sections\n * @csspart switch - The switch element for the reduced motion toggle\n *\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/listbox/\n *\n */\n@scopedRegistry()\nexport class PreferencesInput extends FormControlMixin<typeof LitElement, PreferencesInputValue>(LitElement) {\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-preferences-input',\n    version: '0.0.0',\n    valueSchema: {\n      type: 'object' as const,\n      properties: {\n        'color-scheme': { type: 'string' as const },\n        scale: { type: 'string' as const },\n        'reduced-motion': { type: 'boolean' as const }\n      }\n    }\n  };\n\n  static elementDefinitions = {\n    [Control.metadata.tag]: Control,\n    [Divider.metadata.tag]: Divider,\n    [Icon.metadata.tag]: Icon,\n    [Menu.metadata.tag]: Menu,\n    [MenuItem.metadata.tag]: MenuItem,\n    [Switch.metadata.tag]: Switch\n  };\n\n  @state() private activePreferences: ReturnType<typeof getActivePreferences> = {\n    light: false,\n    dark: false,\n    'high-contrast': false,\n    compact: false,\n    'reduced-motion': false\n  };\n\n  // eslint-disable-next-line max-lines-per-function\n  render() {\n    return html`\n      <div internal-host>\n        <nve-control part=\"control\">\n          <label>${this.i18n.colorScheme}</label>\n          <nve-menu part=\"menu\" nve-control>\n          ${colorSchemes.map(\n            value => html`\n            <nve-menu-item part=\"menu-item\"\n              .selected=${this.value?.['color-scheme'] === value}\n              .value=${value}\n              @click=${() => this.#setColorScheme(value)}\n            >\n              <nve-icon part=\"icon\" name=${colorSchemesIcons[value]}></nve-icon> ${value}\n            </nve-menu-item>\n            `\n          )}\n          </nve-menu>\n        </nve-control>\n        ${\n          this.activePreferences['compact']\n            ? html`\n        <nve-divider part=\"divider\"></nve-divider>\n        <nve-control part=\"control\">\n          <label>${this.i18n.scale}</label>\n          <nve-menu part=\"menu\" nve-control>\n          ${scales.map(\n            value => html`\n            <nve-menu-item part=\"menu-item\"\n              .selected=${this.value?.['scale'] === value}\n              .value=${value}\n              @click=${() => this.#setScale(value)}\n            >\n              ${value}\n            </nve-menu-item>\n            `\n          )}\n          </nve-menu>\n        </nve-control>\n          `\n            : ''\n        }\n        ${\n          this.activePreferences['reduced-motion']\n            ? html`\n        <nve-divider part=\"divider\"></nve-divider>\n        <nve-switch part=\"switch\">\n          <label>${this.i18n.reducedMotion}</label>\n          <input\n            type=\"checkbox\"\n            value=\"reduced-motion\"\n            .checked=${this.value?.['reduced-motion']}\n            @change=${(e: { target: HTMLInputElement }) => this.#setReducedMotion(e.target.checked)}\n          />\n        </nve-switch>`\n            : ''\n        }\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.value = {\n      'color-scheme': 'auto',\n      'reduced-motion': false,\n      scale: 'default'\n    };\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('nve-control', '');\n    this.#updatePreferences();\n  }\n\n  /** @private */\n  updateValue(value: PreferencesInputValue) {\n    super.updateValue({ ...this.value, ...value });\n    this.#updatePreferences();\n  }\n\n  #updatePreferences() {\n    /* istanbul ignore else -- Lit SSR mode is not reachable in browser unit tests. */\n    if (!isServer) {\n      const preferences = getActivePreferences();\n      if (JSON.stringify(this.activePreferences) !== JSON.stringify(preferences)) {\n        this.activePreferences = preferences;\n      }\n    }\n  }\n\n  #setColorScheme(value: ColorScheme) {\n    this.value = { ...this.value, 'color-scheme': value };\n    this.#update();\n  }\n\n  #setScale(value: Scale) {\n    this.value = { ...this.value, scale: value };\n    this.#update();\n  }\n\n  #setReducedMotion(value: boolean) {\n    this.value = { ...this.value, 'reduced-motion': value };\n    this.#update();\n  }\n\n  #update() {\n    this.dispatchInputEvent();\n    this.dispatchChangeEvent();\n  }\n}\n"],"mappings":"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"}

package/dist/progress-bar/progress-bar.examples.json

@@ -67,7 +67,7 @@
     {
       "id": "progress-bar-indeterminate-custom-color",
       "name": "IndeterminateCustomColor",
-      "template": "<nve-progress-bar\n  style=\"--accent-color: var(--nve-sys-accent-primary-background); --height: var(--nve-ref-size-150); --opacity: 1\"\n></nve-progress-bar>\n",
+      "template": "<nve-progress-bar style=\"--accent-color: var(--nve-sys-accent-primary-background); --height: var(--nve-ref-size-150); --opacity: 1\"></nve-progress-bar>\n",
       "summary": "Indeterminate progress bar with custom color, height, and opacity for brand-specific styling and visual emphasis.",
       "description": "",
       "composition": false,

package/dist/progress-bar/progress-bar2.js

@@ -1,6 +1,6 @@
 import { scopedRegistry as e } from "../internal/decorators/scoped-registry.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import r from "./progress-bar.js";
 import { LitElement as i, html as a } from "lit";
 import { property as o } from "lit/decorators/property.js";
@@ -16,7 +16,7 @@ var c = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-progress-bar",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	render() {

package/dist/progress-bar/progress-bar2.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar2.js","names":[],"sources":["../../src/progress-bar/progress-bar.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 type { SupportStatus } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './progress-bar.css?inline';\n\n/**\n * @element nve-progress-bar\n * @description A progress bar is a visual indicator of the status of a running task. Under the hood, the component uses the native HTML `progress` element to achieve proper a11y concerns.\n * @documentation https://nvidia.github.io/elements/docs/elements/progress-bar/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/progress-bar\n * @cssprop --height\n * @cssprop --opacity\n * @cssprop --background\n * @cssprop --accent-color\n * @cssprop --indeterminate-gradient - Gradient used for indeterminate state animation\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n */\n@scopedRegistry()\nexport class ProgressBar extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-progress-bar',\n    version: '0.0.0'\n  };\n\n  /** The current `value` of the progress indicator, set to the native HTML progress element. */\n  @property({ type: Number, reflect: true }) value?: number;\n\n  /** The `max` property sets the highest value that `value` scales to. */\n  @property({ type: Number }) max? = 100;\n\n  /** Defines visual treatment to represent a ongoing task or support status. */\n  @property({ type: String, reflect: true }) status: SupportStatus;\n\n  render() {\n    const classes = {\n      full: this.value === this.max,\n      'min-width': this.value !== undefined && this.value > 0,\n      indeterminate: this.value === undefined\n    };\n\n    return html`\n      <progress internal-host .max=${this.max as number} .value=${this.value === undefined ? (100 as number) : (this.value as number)} class=${classMap(classes)}></progress>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;AAwBO,IAAA,IAAA,cAA0B,EAAW;;0BAYP;;;gBAXnB,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;CAWA,SAAS;EACP,IAAM,IAAU;GACd,MAAM,KAAK,UAAU,KAAK;GAC1B,aAAa,KAAK,UAAU,KAAA,KAAa,KAAK,QAAQ;GACtD,eAAe,KAAK,UAAU,KAAA;EAChC;EAEA,OAAO,CAAI,iCACsB,KAAK,IAAc,YAAU,KAAK,UAAU,KAAA,IAAa,MAAkB,KAAK,MAAiB,WAAS,EAAS,CAAO,EAAE;CAE/J;AACF;GAnBG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAGxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,MAGzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,UAhB1C,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"progress-bar2.js","names":[],"sources":["../../src/progress-bar/progress-bar.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 type { SupportStatus } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './progress-bar.css?inline';\n\n/**\n * @element nve-progress-bar\n * @description A progress bar is a visual indicator of the status of a running task. Under the hood, the component uses the native HTML `progress` element to achieve proper a11y concerns.\n * @documentation https://nvidia.github.io/elements/docs/elements/progress-bar/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/progress-bar\n * @cssprop --height\n * @cssprop --opacity\n * @cssprop --background\n * @cssprop --accent-color\n * @cssprop --indeterminate-gradient - Gradient used for indeterminate state animation\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n */\n@scopedRegistry()\nexport class ProgressBar extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-progress-bar',\n    version: '0.0.0'\n  };\n\n  /** The current `value` of the progress indicator, set to the native HTML progress element. */\n  @property({ type: Number, reflect: true }) value?: number;\n\n  /** The `max` property sets the highest value that `value` scales to. */\n  @property({ type: Number }) max? = 100;\n\n  /** Defines visual treatment to represent a ongoing task or support status. */\n  @property({ type: String, reflect: true }) status: SupportStatus;\n\n  render() {\n    const classes = {\n      full: this.value === this.max,\n      'min-width': this.value !== undefined && this.value > 0,\n      indeterminate: this.value === undefined\n    };\n\n    return html`\n      <progress internal-host .max=${this.max as number} .value=${this.value === undefined ? (100 as number) : (this.value as number)} class=${classMap(classes)}></progress>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;AAwBO,IAAM,IAAN,cAA0B,EAAW;;EAYP,aAAA,KAAA,MAAA;;;EAXnB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAWA,SAAS;EACP,IAAM,IAAU;GACd,MAAM,KAAK,UAAU,KAAK;GAC1B,aAAa,KAAK,UAAU,KAAA,KAAa,KAAK,QAAQ;GACtD,eAAe,KAAK,UAAU,KAAA;EAChC;EAEA,OAAO,CAAI,iCACsB,KAAK,IAAc,YAAU,KAAK,UAAU,KAAA,IAAa,MAAkB,KAAK,MAAiB,WAAS,EAAS,CAAO,EAAE;CAE/J;AACF;AAnBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxC,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,GAhB1C,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}

package/dist/progress-ring/progress-ring2.js

@@ -3,7 +3,7 @@ import { attachInternals as t } from "../internal/utils/a11y.js";
 import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
 import { useStyles as r } from "../internal/styles/index.js";
 import { statusIcons as i } from "../internal/types/index.js";
-import a from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import a from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Icon as o } from "../icon/icon2.js";
 import s from "./progress-ring.js";
 import { LitElement as c, html as l } from "lit";
@@ -19,7 +19,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-progress-ring",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {

package/dist/progress-ring/progress-ring2.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-ring2.js","names":["#i18nController"],"sources":["../../src/progress-ring/progress-ring.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 type { Size, SupportStatus } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  I18nController,\n  scopedRegistry,\n  statusIcons,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './progress-ring.css?inline';\n\n/**\n * @element nve-progress-ring\n * @description The `progress-ring` component shows the status of a pending task. It also serves the basis of the page loading element.\n * @documentation https://nvidia.github.io/elements/docs/elements/progress-ring/\n * @since 0.17.0\n * @entrypoint \\@nvidia-elements/core/progress-ring\n * @slot - Content to display in the ring center. Defaults to a status icon.\n * @cssprop --background-color\n * @cssprop --ring-color\n * @cssprop --ring-background-opacity\n * @cssprop --ring-width\n * @cssprop --width\n * @cssprop --height\n * @cssprop --animation-duration\n * @cssprop --color\n * @csspart icon - The icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n */\n@scopedRegistry()\nexport class ProgressRing extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-progress-ring',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** The current `value` of the progress ring. When not set, an indeterminate animation will show. */\n  @property({ type: Number }) value?: number;\n\n  /** The `max` value of the progress ring that the `value` is proportionally scaled to. */\n  @property({ type: Number }) max? = 100;\n\n  /** Four visual treatments represent the `status` of tasks. When `status` changes to `warning`, `success`, or `danger`, the component embeds appropriate icons. */\n  @property({ type: String, reflect: true }) status?: SupportStatus | 'neutral' = 'neutral';\n\n  /** T-shirt `size` of the progress indicator, used to scale the ring. */\n  @property({ type: String, reflect: true }) size?: Size | 'xxs' | 'xs' | 'xl';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  render() {\n    return html`\n      <div internal-host ?indeterminate=${this.value === undefined}>\n        <svg viewBox=\"0 0 16 16\" role=\"presentation\">\n          <circle cx=\"8px\" cy=\"8px\" r=\"6.5px\" class=\"background\"></circle>\n          <circle cx=\"8px\" cy=\"8px\" r=\"6.5px\" class=\"progress-ring-circle\"\n            stroke-dasharray=${`${((this.value ?? 0) / (this.max ?? 100)) * 44}px 44px`}>\n          </circle>\n        </svg>\n        <slot>\n          ${\n            this.status !== 'accent'\n              ? html`<nve-icon part=\"icon\" .name=${this.status ? statusIcons[this.status] : undefined} .status=${this.status as SupportStatus} aria-hidden=\"true\"></nve-icon>`\n              : ''\n          }\n        </slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'progressbar';\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this._internals.ariaValueNow = `${this.value === undefined ? '' : this.value}`;\n    this._internals.ariaValueMax = `${this.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"],"mappings":";;;;;;;;;;;AAoCO,IAAA,IAAA,cAA2B,EAAW;;0BAmBR,mBAG6C,qBAKxC,IAAI,EAAqB,IAAI,eAGlC,KAAKA,GAAgB;;;gBA7BxC,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAiBA;CAKA,SAAS;EACP,OAAO,CAAI,sCAC2B,KAAK,UAAU,KAAA,EAAU,oMAIpC,IAAK,KAAK,SAAS,MAAM,KAAK,OAAO,OAAQ,GAAG,SAAS,yBAK5E,KAAK,WAAW,WAEZ,KADA,CAAI,gCAA+B,KAAK,SAAS,EAAY,KAAK,UAAU,KAAA,EAAU,aAAW,KAAK,OAAwB,kCAEnI;CAIT;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAGnC,AAFA,MAAM,QAAQ,CAAK,GACnB,KAAK,WAAW,eAAe,GAAG,KAAK,UAAU,KAAA,IAAY,KAAK,KAAK,SACvE,KAAK,WAAW,eAAe,GAAG,KAAK;EACvC,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;AACF;GAnDG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAGzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,MAGzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAKxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UA/B3B,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"progress-ring2.js","names":[],"sources":["../../src/progress-ring/progress-ring.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 type { Size, SupportStatus } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  I18nController,\n  scopedRegistry,\n  statusIcons,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './progress-ring.css?inline';\n\n/**\n * @element nve-progress-ring\n * @description The `progress-ring` component shows the status of a pending task. It also serves the basis of the page loading element.\n * @documentation https://nvidia.github.io/elements/docs/elements/progress-ring/\n * @since 0.17.0\n * @entrypoint \\@nvidia-elements/core/progress-ring\n * @slot - Content to display in the ring center. Defaults to a status icon.\n * @cssprop --background-color\n * @cssprop --ring-color\n * @cssprop --ring-background-opacity\n * @cssprop --ring-width\n * @cssprop --width\n * @cssprop --height\n * @cssprop --animation-duration\n * @cssprop --color\n * @csspart icon - The icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n */\n@scopedRegistry()\nexport class ProgressRing extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-progress-ring',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** The current `value` of the progress ring. When not set, an indeterminate animation will show. */\n  @property({ type: Number }) value?: number;\n\n  /** The `max` value of the progress ring that the `value` is proportionally scaled to. */\n  @property({ type: Number }) max? = 100;\n\n  /** Four visual treatments represent the `status` of tasks. When `status` changes to `warning`, `success`, or `danger`, the component embeds appropriate icons. */\n  @property({ type: String, reflect: true }) status?: SupportStatus | 'neutral' = 'neutral';\n\n  /** T-shirt `size` of the progress indicator, used to scale the ring. */\n  @property({ type: String, reflect: true }) size?: Size | 'xxs' | 'xs' | 'xl';\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  render() {\n    return html`\n      <div internal-host ?indeterminate=${this.value === undefined}>\n        <svg viewBox=\"0 0 16 16\" role=\"presentation\">\n          <circle cx=\"8px\" cy=\"8px\" r=\"6.5px\" class=\"background\"></circle>\n          <circle cx=\"8px\" cy=\"8px\" r=\"6.5px\" class=\"progress-ring-circle\"\n            stroke-dasharray=${`${((this.value ?? 0) / (this.max ?? 100)) * 44}px 44px`}>\n          </circle>\n        </svg>\n        <slot>\n          ${\n            this.status !== 'accent'\n              ? html`<nve-icon part=\"icon\" .name=${this.status ? statusIcons[this.status] : undefined} .status=${this.status as SupportStatus} aria-hidden=\"true\"></nve-icon>`\n              : ''\n          }\n        </slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'progressbar';\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this._internals.ariaValueNow = `${this.value === undefined ? '' : this.value}`;\n    this._internals.ariaValueMax = `${this.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"],"mappings":";;;;;;;;;;;AAoCO,IAAM,IAAN,cAA2B,EAAW;;EA8BR,aAXA,KAAA,MAAA,KAG6C,KAAA,SAAA,WAKxC,KAAA,KAAA,IAAI,EAAqB,IAAI,GAGlC,KAAA,OAAA,KAAK,GAAgB;;;EA7BxC,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAK,SAAS,MAAM,EACvB;;CAiBA;CAKA,SAAS;EACP,OAAO,CAAI,sCAC2B,KAAK,UAAU,KAAA,EAAU,oMAIpC,IAAK,KAAK,SAAS,MAAM,KAAK,OAAO,OAAQ,GAAG,SAAS,yBAK5E,KAAK,WAAW,WAEZ,KADA,CAAI,gCAA+B,KAAK,SAAS,EAAY,KAAK,UAAU,KAAA,EAAU,aAAW,KAAK,OAAwB,kCAEnI;CAIT;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAGnC,AAFA,MAAM,QAAQ,CAAK,GACnB,KAAK,WAAW,eAAe,GAAG,KAAK,UAAU,KAAA,IAAY,KAAK,KAAK,SACvE,KAAK,WAAW,eAAe,GAAG,KAAK;EACvC,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;AACF;AAnDG,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,QAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GA/B3B,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}

package/dist/progressive-filter-chip/progressive-filter-chip2.js

@@ -5,7 +5,7 @@ import { TypeClosableController as i } from "../internal/controllers/type-closab
 import { typeSSR as a } from "../internal/controllers/type-ssr.controller.js";
 import { scopedRegistry as o } from "../internal/decorators/scoped-registry.js";
 import { useStyles as s } from "../internal/styles/index.js";
-import c from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import c from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { IconButton as l } from "../icon-button/icon-button2.js";
 import { Input as u } from "../input/input2.js";
 import { Select as d } from "../select/select2.js";
@@ -23,7 +23,7 @@ var b = class extends h {
 	static {
 		this.metadata = {
 			tag: "nve-progressive-filter-chip",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {

package/dist/progressive-filter-chip/progressive-filter-chip2.js.map

@@ -1 +1 @@
-{"version":3,"file":"progressive-filter-chip2.js","names":["#i18nController","#removeItem","#getControlTemplate","#typeClosableController","#createItems","#resetItems"],"sources":["../../src/progressive-filter-chip/progressive-filter-chip.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport {\n  appendRootNodeStyle,\n  attachInternals,\n  generateId,\n  I18nController,\n  scopedRegistry,\n  TypeClosableController,\n  typeSSR,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Input } from '@nvidia-elements/core/input';\nimport { Select } from '@nvidia-elements/core/select';\nimport { Date } from '@nvidia-elements/core/date';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport globalStyles from './progressive-filter-chip.global.css?inline';\nimport styles from './progressive-filter-chip.css?inline';\n\n/**\n * @element nve-progressive-filter-chip\n * @description A filter chip is a control that enables users to select many options from a set of choices.\n * @documentation https://nvidia.github.io/elements/docs/elements/progressive-filter-chip/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/progressive-filter-chip\n * @slot - `input`, `select`, `nve-button`, or other `[nve-control]` elements used to build the filter.\n * @event close - Dispatched when the filter chip closes.\n * @cssprop --gap\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --background\n * @cssprop --font-weight\n * @cssprop --padding\n * @cssprop --width\n * @csspart select - The select element\n * @csspart date - The date input element\n * @csspart input - The input element\n * @csspart icon-button - The icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n */\n@typeSSR()\n@scopedRegistry()\nexport class ProgressiveFilterChip extends LitElement {\n  static readonly metadata = {\n    tag: 'nve-progressive-filter-chip',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Input.metadata.tag]: Input,\n    [Select.metadata.tag]: Select,\n    [Date.metadata.tag]: Date,\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** Determines if a close button should render within filter chip */\n  @property({ type: Boolean }) closable: boolean;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  @state() private inputs: Element[] = [];\n\n  static styles = useStyles([styles]);\n\n  #typeClosableController = new TypeClosableController(this);\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #getControlTemplate(el: Element) {\n    const slot = html`<slot name=${el.slot} @slotchange=${this.#removeItem}></slot>`;\n    if (el.tagName === 'SELECT') {\n      return html`<nve-select part=\"select\" multiple-overflow ?fit-text=${!(el as HTMLSelectElement).multiple}>${slot}</nve-select>`;\n    } else if (el.tagName === 'INPUT' && (el as HTMLInputElement).type === 'date') {\n      return html`<nve-date part=\"date\">${slot}</nve-date>`;\n    } else if (el.tagName === 'INPUT') {\n      return html`<nve-input part=\"input\">${slot}</nve-input>`;\n    } else {\n      return slot;\n    }\n  }\n\n  render() {\n    return html`\n    <div internal-host>\n      ${this.inputs.map(el => this.#getControlTemplate(el))}\n      ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${() => this.#typeClosableController.close()} .ariaLabel=${this.i18n.close} icon-name=\"cancel\"></nve-icon-button>` : nothing}\n    </div>\n    <slot hidden-slot @slotchange=${this.#createItems}></slot>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'toolbar';\n    this.setAttribute('nve-control', '');\n    appendRootNodeStyle(this, globalStyles);\n  }\n\n  #removeItem(e: Event) {\n    if (!(e.target as HTMLSlotElement).assignedElements().length) {\n      this.#resetItems();\n    }\n  }\n\n  #createItems(e: Event) {\n    if (e.target && (e.target as HTMLSlotElement).assignedElements().length) {\n      this.#resetItems();\n      const items = Array.from(\n        this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!.assignedElements()\n      ).filter(i => i.matches('input, select, nve-button, [nve-control]'));\n      items.forEach(i => (i.slot = generateId()));\n      this.inputs = items.length ? items : this.inputs;\n    }\n  }\n\n  #resetItems() {\n    Array.from(this.shadowRoot!.querySelectorAll('slot'))\n      .flatMap(i => i.assignedElements())\n      .forEach(i => (i.slot = ''));\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA8CO,IAAA,IAAA,cAAoC,EAAW;;yBAgBZ,IAAI,EAAqB,IAAI,eAGlC,KAAKA,GAAgB,oBAEnB,CAAC,aAIZ,IAAI,EAAuB,IAAI;;;kBAxB9B;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B;IACzB,EAAM,SAAS,MAAM;IACrB,EAAO,SAAS,MAAM;IACtB,EAAK,SAAS,MAAM;IACpB,EAAW,SAAS,MAAM;EAC7B;;CAKA;;gBAOgB,EAAU,CAAC,CAAM,CAAC;;CAElC;CAKA,GAAoB,GAAa;EAC/B,IAAM,IAAO,CAAI,eAAc,EAAG,KAAK,iBAAe,KAAKC,GAAY;EAQrE,OAPE,EAAG,YAAY,WACV,CAAI,0DAAyD,CAAE,EAAyB,SAAS,IAAG,EAAK,iBACvG,EAAG,YAAY,WAAY,EAAwB,SAAS,SAC9D,CAAI,yBAAyB,EAAK,eAChC,EAAG,YAAY,UACjB,CAAI,2BAA2B,EAAK,gBAEpC;CAEX;CAEA,SAAS;EACP,OAAO,CAAI,sBAEP,KAAK,OAAO,KAAI,MAAM,KAAKC,GAAoB,CAAE,CAAC,EAAE,GACpD,KAAK,WAAW,CAAI,yFAAwF,KAAKC,GAAwB,MAAM,EAAE,gBAAc,KAAK,KAAK,MAAM,2CAA0C,EAAQ,uCAErM,KAAKC,GAAa;CAEpD;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,WACvB,KAAK,aAAa,eAAe,EAAE,GACnC,EAAoB,MAAM,CAAY;CACxC;CAEA,GAAY,GAAU;EACpB,AAAM,EAAE,OAA2B,iBAAiB,CAAC,CAAC,UACpD,KAAKC,GAAY;CAErB;CAEA,GAAa,GAAU;EACrB,IAAI,EAAE,UAAW,EAAE,OAA2B,iBAAiB,CAAC,CAAC,QAAQ;GACvE,KAAKA,GAAY;GACjB,IAAM,IAAQ,MAAM,KAClB,KAAK,WAAY,cAA+B,kBAAkB,CAAC,CAAE,iBAAiB,CACxF,CAAC,CAAC,QAAO,MAAK,EAAE,QAAQ,0CAA0C,CAAC;GAEnE,AADA,EAAM,SAAQ,MAAM,EAAE,OAAO,EAAW,CAAE,GAC1C,KAAK,SAAS,EAAM,SAAS,IAAQ,KAAK;EAC5C;CACF;CAEA,KAAc;EACZ,MAAM,KAAK,KAAK,WAAY,iBAAiB,MAAM,CAAC,CAAC,CAClD,SAAQ,MAAK,EAAE,iBAAiB,CAAC,CAAC,CAClC,SAAQ,MAAM,EAAE,OAAO,EAAG;CAC/B;AACF;GArEG,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAK1B,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAEzB,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,UAvBR,EAAQ,GACR,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"progressive-filter-chip2.js","names":[],"sources":["../../src/progressive-filter-chip/progressive-filter-chip.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport {\n  appendRootNodeStyle,\n  attachInternals,\n  generateId,\n  I18nController,\n  scopedRegistry,\n  TypeClosableController,\n  typeSSR,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Input } from '@nvidia-elements/core/input';\nimport { Select } from '@nvidia-elements/core/select';\nimport { Date } from '@nvidia-elements/core/date';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport globalStyles from './progressive-filter-chip.global.css?inline';\nimport styles from './progressive-filter-chip.css?inline';\n\n/**\n * @element nve-progressive-filter-chip\n * @description A filter chip is a control that enables users to select many options from a set of choices.\n * @documentation https://nvidia.github.io/elements/docs/elements/progressive-filter-chip/\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/progressive-filter-chip\n * @slot - `input`, `select`, `nve-button`, or other `[nve-control]` elements used to build the filter.\n * @event close - Dispatched when the filter chip closes.\n * @cssprop --gap\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --background\n * @cssprop --font-weight\n * @cssprop --padding\n * @cssprop --width\n * @csspart select - The select element\n * @csspart date - The date input element\n * @csspart input - The input element\n * @csspart icon-button - The icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n */\n@typeSSR()\n@scopedRegistry()\nexport class ProgressiveFilterChip extends LitElement {\n  static readonly metadata = {\n    tag: 'nve-progressive-filter-chip',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Input.metadata.tag]: Input,\n    [Select.metadata.tag]: Select,\n    [Date.metadata.tag]: Date,\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** Determines if a close button should render within filter chip */\n  @property({ type: Boolean }) closable: boolean;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  @state() private inputs: Element[] = [];\n\n  static styles = useStyles([styles]);\n\n  #typeClosableController = new TypeClosableController(this);\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #getControlTemplate(el: Element) {\n    const slot = html`<slot name=${el.slot} @slotchange=${this.#removeItem}></slot>`;\n    if (el.tagName === 'SELECT') {\n      return html`<nve-select part=\"select\" multiple-overflow ?fit-text=${!(el as HTMLSelectElement).multiple}>${slot}</nve-select>`;\n    } else if (el.tagName === 'INPUT' && (el as HTMLInputElement).type === 'date') {\n      return html`<nve-date part=\"date\">${slot}</nve-date>`;\n    } else if (el.tagName === 'INPUT') {\n      return html`<nve-input part=\"input\">${slot}</nve-input>`;\n    } else {\n      return slot;\n    }\n  }\n\n  render() {\n    return html`\n    <div internal-host>\n      ${this.inputs.map(el => this.#getControlTemplate(el))}\n      ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${() => this.#typeClosableController.close()} .ariaLabel=${this.i18n.close} icon-name=\"cancel\"></nve-icon-button>` : nothing}\n    </div>\n    <slot hidden-slot @slotchange=${this.#createItems}></slot>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'toolbar';\n    this.setAttribute('nve-control', '');\n    appendRootNodeStyle(this, globalStyles);\n  }\n\n  #removeItem(e: Event) {\n    if (!(e.target as HTMLSlotElement).assignedElements().length) {\n      this.#resetItems();\n    }\n  }\n\n  #createItems(e: Event) {\n    if (e.target && (e.target as HTMLSlotElement).assignedElements().length) {\n      this.#resetItems();\n      const items = Array.from(\n        this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])')!.assignedElements()\n      ).filter(i => i.matches('input, select, nve-button, [nve-control]'));\n      items.forEach(i => (i.slot = generateId()));\n      this.inputs = items.length ? items : this.inputs;\n    }\n  }\n\n  #resetItems() {\n    Array.from(this.shadowRoot!.querySelectorAll('slot'))\n      .flatMap(i => i.assignedElements())\n      .forEach(i => (i.slot = ''));\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA8CO,IAAM,IAAN,cAAoC,EAAW;;EAyB1B,aATc,KAAA,KAAA,IAAI,EAAqB,IAAI,GAGlC,KAAA,OAAA,KAAK,GAAgB,MAEnB,KAAA,SAAA,CAAC,GAIZ,KAAA,KAAA,IAAI,EAAuB,IAAI;;;EAxB9B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA;IACzB,EAAM,SAAS,MAAM;IACrB,EAAO,SAAS,MAAM;IACtB,EAAK,SAAS,MAAM;IACpB,EAAW,SAAS,MAAM;EAC7B;;CAKA;;EAOgB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;CAElC;CAKA,GAAoB,GAAa;EAC/B,IAAM,IAAO,CAAI,eAAc,EAAG,KAAK,iBAAe,KAAK,GAAY;EAQrE,OAPE,EAAG,YAAY,WACV,CAAI,0DAAyD,CAAE,EAAyB,SAAS,IAAG,EAAK,iBACvG,EAAG,YAAY,WAAY,EAAwB,SAAS,SAC9D,CAAI,yBAAyB,EAAK,eAChC,EAAG,YAAY,UACjB,CAAI,2BAA2B,EAAK,gBAEpC;CAEX;CAEA,SAAS;EACP,OAAO,CAAI,sBAEP,KAAK,OAAO,KAAI,MAAM,KAAK,GAAoB,CAAE,CAAC,EAAE,GACpD,KAAK,WAAW,CAAI,yFAAwF,KAAK,GAAwB,MAAM,EAAE,gBAAc,KAAK,KAAK,MAAM,2CAA0C,EAAQ,uCAErM,KAAK,GAAa;CAEpD;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,WACvB,KAAK,aAAa,eAAe,EAAE,GACnC,EAAoB,MAAM,CAAY;CACxC;CAEA,GAAY,GAAU;EACpB,AAAM,EAAE,OAA2B,iBAAiB,CAAC,CAAC,UACpD,KAAK,GAAY;CAErB;CAEA,GAAa,GAAU;EACrB,IAAI,EAAE,UAAW,EAAE,OAA2B,iBAAiB,CAAC,CAAC,QAAQ;GACvE,KAAK,GAAY;GACjB,IAAM,IAAQ,MAAM,KAClB,KAAK,WAAY,cAA+B,kBAAkB,CAAC,CAAE,iBAAiB,CACxF,CAAC,CAAC,QAAO,MAAK,EAAE,QAAQ,0CAA0C,CAAC;GAEnE,AADA,EAAM,SAAQ,MAAM,EAAE,OAAO,EAAW,CAAE,GAC1C,KAAK,SAAS,EAAM,SAAS,IAAQ,KAAK;EAC5C;CACF;CAEA,KAAc;EACZ,MAAM,KAAK,KAAK,WAAY,iBAAiB,MAAM,CAAC,CAAC,CAClD,SAAQ,MAAK,EAAE,iBAAiB,CAAC,CAAC,CAClC,SAAQ,MAAM,EAAE,OAAO,EAAG;CAC/B;AACF;AArEG,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1B,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAEzB,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAvBR,IAAA,EAAA,CAAA,EAAQ,GACR,EAAe,CAAA,GAAA,CAAA"}

package/dist/pulse/pulse2.js

@@ -1,6 +1,6 @@
 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.139.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Icon as r } from "../icon/icon2.js";
 import i from "./pulse.js";
 import { LitElement as a, html as o } from "lit";
@@ -13,7 +13,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-pulse",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {

package/dist/pulse/pulse2.js.map

@@ -1 +1 @@
-{"version":3,"file":"pulse2.js","names":[],"sources":["../../src/pulse/pulse.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Size } from '@nvidia-elements/core/internal';\nimport { useStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './pulse.css?inline';\n\n/**\n * @element nve-pulse\n * @description Pulse component signals attention for a particular area of a UI. This helps with tutorial/getting started guides for new users.\n * @documentation https://nvidia.github.io/elements/docs/elements/pulse/\n * @since 1.16.3\n * @entrypoint \\@nvidia-elements/core/pulse\n * @cssprop --background\n * @cssprop --width\n * @cssprop --height\n * @cssprop --animation-duration\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n *\n */\nexport class Pulse extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-pulse',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'alert';\n  }\n\n  /** Sets size of the pulse component. You can also update size using the `width + height` css props. */\n  @property({ type: String, reflect: true }) size?: Size | 'xs';\n\n  /** These visual treatments represent the `status` of different tasks. When `status` changes to `accent`, `warning` or `danger`, the component embeds appropriate colors. */\n  @property({ type: String, reflect: true }) status?: 'accent' | 'warning' | 'danger';\n\n  render() {\n    return html`\n    <svg internal-host width=\"100%\" height=\"100%\" viewBox=\"0 0 200 200\">\n      <circle class=\"circle\" cx=\"100\" cy=\"100\" r=\"25\"></circle>\n      <circle class=\"circle c1\" cx=\"100\" cy=\"100\" r=\"25\"></circle>\n      <circle class=\"circle c2\" cx=\"100\" cy=\"100\" r=\"25\"></circle> \n      <circle class=\"circle c3\" cx=\"100\" cy=\"100\" r=\"25\"></circle>\n    </svg>\n  `;\n  }\n}\n"],"mappings":";;;;;;;;AAuBA,IAAa,IAAb,cAA2B,EAAW;;gBACpB,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B,GACzB,EAAK,SAAS,MAAM,EACvB;;CAKA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAQA,SAAS;EACP,OAAO,CAAI;CAQb;AACF;GAfG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA"}
+{"version":3,"file":"pulse2.js","names":[],"sources":["../../src/pulse/pulse.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Size } from '@nvidia-elements/core/internal';\nimport { useStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './pulse.css?inline';\n\n/**\n * @element nve-pulse\n * @description Pulse component signals attention for a particular area of a UI. This helps with tutorial/getting started guides for new users.\n * @documentation https://nvidia.github.io/elements/docs/elements/pulse/\n * @since 1.16.3\n * @entrypoint \\@nvidia-elements/core/pulse\n * @cssprop --background\n * @cssprop --width\n * @cssprop --height\n * @cssprop --animation-duration\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n *\n */\nexport class Pulse extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-pulse',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'alert';\n  }\n\n  /** Sets size of the pulse component. You can also update size using the `width + height` css props. */\n  @property({ type: String, reflect: true }) size?: Size | 'xs';\n\n  /** These visual treatments represent the `status` of different tasks. When `status` changes to `accent`, `warning` or `danger`, the component embeds appropriate colors. */\n  @property({ type: String, reflect: true }) status?: 'accent' | 'warning' | 'danger';\n\n  render() {\n    return html`\n    <svg internal-host width=\"100%\" height=\"100%\" viewBox=\"0 0 200 200\">\n      <circle class=\"circle\" cx=\"100\" cy=\"100\" r=\"25\"></circle>\n      <circle class=\"circle c1\" cx=\"100\" cy=\"100\" r=\"25\"></circle>\n      <circle class=\"circle c2\" cx=\"100\" cy=\"100\" r=\"25\"></circle> \n      <circle class=\"circle c3\" cx=\"100\" cy=\"100\" r=\"25\"></circle>\n    </svg>\n  `;\n  }\n}\n"],"mappings":";;;;;;;;AAuBA,IAAa,IAAb,cAA2B,EAAW;;EACpB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAK,SAAS,MAAM,EACvB;;CAKA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAQA,SAAS;EACP,OAAO,CAAI;CAQb;AACF;AAfG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA"}