@nvidia-elements/core 0.0.1 → 0.0.3

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

@@ -0,0 +1,124 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { I18nController as t } from "../internal/controllers/i18n.controller.js";
+import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
+import { useStyles as r } from "../internal/styles/index.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";
+import { Menu as s } from "../menu/menu2.js";
+import { MenuItem as c } from "../menu/menu-item2.js";
+import { Divider as l } from "../divider/divider2.js";
+import u from "./preferences-input.js";
+import { LitElement as d, html as f, isServer as p } from "lit";
+import { property as m } from "lit/decorators/property.js";
+import { state as h } from "lit/decorators/state.js";
+import { FormControlMixin as g } from "@nvidia-elements/forms/mixin";
+//#region src/preferences-input/preferences-input.ts
+var _ = [
+	"auto",
+	"light",
+	"dark",
+	"high-contrast"
+], v = ["default", "compact"], y = {
+	auto: "computer",
+	light: "sun",
+	dark: "moon",
+	"high-contrast": "circle-half"
+};
+function b(e = globalThis.document.documentElement) {
+	let t = getComputedStyle(e);
+	return {
+		light: t.getPropertyValue("--nve-config-color-scheme-light") === "true",
+		dark: t.getPropertyValue("--nve-config-color-scheme-dark") === "true",
+		"high-contrast": t.getPropertyValue("--nve-config-color-scheme-high-contrast") === "true",
+		compact: t.getPropertyValue("--nve-config-scale-compact") === "true",
+		"reduced-motion": t.getPropertyValue("--nve-config-reduced-motion") === "true"
+	};
+}
+var x = class extends g(d) {
+	#e = new t(this);
+	static {
+		this.styles = r([u]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-preferences-input",
+			version: "0.0.3",
+			valueSchema: {
+				type: "object",
+				properties: {
+					"color-scheme": { type: "string" },
+					scale: { type: "string" },
+					"reduced-motion": { type: "boolean" }
+				}
+			}
+		};
+	}
+	static {
+		this.elementDefinitions = {
+			[a.metadata.tag]: a,
+			[l.metadata.tag]: l,
+			[i.metadata.tag]: i,
+			[s.metadata.tag]: s,
+			[c.metadata.tag]: c,
+			[o.metadata.tag]: o
+		};
+	}
+	render() {
+		return f`<div internal-host><nve-control part="control"><label>${this.i18n.colorScheme}</label><nve-menu part="menu" nve-control>${_.map((e) => f`<nve-menu-item part="menu-item" .selected="${this.value?.["color-scheme"] === e}" .value="${e}" @click="${() => this.#n(e)}"><nve-icon part="icon" name="${y[e]}"></nve-icon>${e}</nve-menu-item>`)}</nve-menu></nve-control>${this.activePreferences.compact ? f`<nve-divider part="divider"></nve-divider><nve-control part="control"><label>${this.i18n.scale}</label><nve-menu part="menu" nve-control>${v.map((e) => f`<nve-menu-item part="menu-item" .selected="${this.value?.scale === e}" .value="${e}" @click="${() => this.#r(e)}">${e}</nve-menu-item>`)}</nve-menu></nve-control>` : ""} ${this.activePreferences["reduced-motion"] ? f`<nve-divider part="divider"></nve-divider><nve-switch part="switch"><label>${this.i18n.reducedMotion}</label> <input type="checkbox" value="reduced-motion" .checked="${this.value?.["reduced-motion"]}" @change="${(e) => this.#i(e.target.checked)}"></nve-switch>` : ""}</div>`;
+	}
+	constructor() {
+		super(), this.i18n = this.#e.i18n, this.activePreferences = {
+			light: !1,
+			dark: !1,
+			"high-contrast": !1,
+			compact: !1,
+			"reduced-motion": !1
+		}, this.value = {
+			"color-scheme": "auto",
+			"reduced-motion": !1,
+			scale: "default"
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("nve-control", ""), this.#t();
+	}
+	updateValue(e) {
+		super.updateValue({
+			...this.value,
+			...e
+		}), this.#t();
+	}
+	#t() {
+		if (!p) {
+			let e = b();
+			JSON.stringify(this.activePreferences) !== JSON.stringify(e) && (this.activePreferences = e);
+		}
+	}
+	#n(e) {
+		this.value = {
+			...this.value,
+			"color-scheme": e
+		}, this.#a();
+	}
+	#r(e) {
+		this.value = {
+			...this.value,
+			scale: e
+		}, this.#a();
+	}
+	#i(e) {
+		this.value = {
+			...this.value,
+			"reduced-motion": e
+		}, this.#a();
+	}
+	#a() {
+		this.dispatchInputEvent(), this.dispatchChangeEvent();
+	}
+};
+e([m({ type: Object })], x.prototype, "i18n", void 0), e([h()], x.prototype, "activePreferences", void 0), x = e([n()], x);
+//#endregion
+export { x as PreferencesInput };
+
+//# sourceMappingURL=preferences-input2.js.map

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

@@ -0,0 +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/mixin';\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\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 * @since 1.23.7\n * @entrypoint \\@nvidia-elements/core/preferences-input\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  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    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":";;;;;;;;;;;;;;;;AAmBA,IAAM,IAA8B;CAAC;CAAQ;CAAS;CAAQ;CAAgB,EACxE,IAAkB,CAAC,WAAW,UAAU,EACxC,IAAoB;CACxB,MAAM;CACN,OAAO;CACP,MAAM;CACN,iBAAiB;CAClB;AAED,SAAS,EAAqB,IAAU,WAAW,SAAS,iBAAiB;CAC3E,IAAM,IAAgB,iBAAiB,EAAQ;AAE/C,QAAO;EACL,OAAO,EAAc,iBAAiB,kCAAkC,KAAK;EAC7E,MAAM,EAAc,iBAAiB,iCAAiC,KAAK;EAC3E,iBAAiB,EAAc,iBAAiB,0CAA0C,KAAK;EAC/F,SAAS,EAAc,iBAAiB,6BAA6B,KAAK;EAC1E,kBAAkB,EAAc,iBAAiB,8BAA8B,KAAK;EACrF;;AA6BI,IAAA,IAAA,cAA+B,EAA2D,EAAW,CAAC;CAC3G,KAAwC,IAAI,EAAqB,KAAK;;gBAOtD,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,aAAa;IACX,MAAM;IACN,YAAY;KACV,gBAAgB,EAAE,MAAM,UAAmB;KAC3C,OAAO,EAAE,MAAM,UAAmB;KAClC,kBAAkB,EAAE,MAAM,WAAA;;;GAG/B;;;4BAE2B;IACzB,EAAQ,SAAS,MAAM;IACvB,EAAQ,SAAS,MAAM;IACvB,EAAK,SAAS,MAAM;IACpB,EAAK,SAAS,MAAM;IACpB,EAAS,SAAS,MAAM;IACxB,EAAO,SAAS,MAAM;GACxB;;CAUD,SAAS;AACP,SAAO,CAAI,yDAGI,KAAK,KAAK,YAAY,4CAE7B,EAAa,KACb,MAAS,CAAI,8CAEC,KAAK,QAAQ,oBAAoB,EAAM,YAC1C,EAAM,kBACA,MAAA,EAAqB,EAAM,CAAC,gCAEd,EAAkB,GAAO,eAAe,EAAM,kBAG9E,CAAC,2BAIF,KAAK,kBAAkB,UACnB,CAAI,gFAGC,KAAK,KAAK,MAAM,4CAEvB,EAAO,KACP,MAAS,CAAI,8CAEC,KAAK,OAAQ,UAAa,EAAM,YACnC,EAAM,kBACA,MAAA,EAAe,EAAM,CAAC,IAEnC,EAAM,kBAGX,CAAC,6BAIE,GACL,GAEC,KAAK,kBAAkB,oBACnB,CAAI,8EAGC,KAAK,KAAK,cAAc,mEAIpB,KAAK,QAAQ,kBAAkB,cAC/B,MAAoC,MAAA,EAAuB,EAAE,OAAO,QAAQ,CAAC,mBAGtF,GACL;;CAKP,cAAc;AAEZ,EADA,OAAO,cAhG0B,MAAA,EAAqB,+BA0BsB;GAC5E,OAAO;GACP,MAAM;GACN,iBAAiB;GACjB,SAAS;GACT,kBAAkB;GACnB,EAiEC,KAAK,QAAQ;GACX,gBAAgB;GAChB,kBAAkB;GAClB,OAAO;GACR;;CAGH,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,KAAK,aAAa,eAAe,GAAG,EACpC,MAAA,GAAyB;;CAI3B,YAAY,GAA8B;AAExC,EADA,MAAM,YAAY;GAAE,GAAG,KAAK;GAAO,GAAG;GAAO,CAAC,EAC9C,MAAA,GAAyB;;CAG3B,KAAqB;AACnB,MAAI,CAAC,GAAU;GACb,IAAM,IAAc,GAAsB;AAC1C,GAAI,KAAK,UAAU,KAAK,kBAAkB,KAAK,KAAK,UAAU,EAAY,KACxE,KAAK,oBAAoB;;;CAK/B,GAAgB,GAAoB;AAElC,EADA,KAAK,QAAQ;GAAE,GAAG,KAAK;GAAO,gBAAgB;GAAO,EACrD,MAAA,GAAc;;CAGhB,GAAU,GAAc;AAEtB,EADA,KAAK,QAAQ;GAAE,GAAG,KAAK;GAAO,OAAO;GAAO,EAC5C,MAAA,GAAc;;CAGhB,GAAkB,GAAgB;AAEhC,EADA,KAAK,QAAQ;GAAE,GAAG,KAAK;GAAO,kBAAkB;GAAO,EACvD,MAAA,GAAc;;CAGhB,KAAU;AAER,EADA,KAAK,oBAAoB,EACzB,KAAK,qBAAqB;;;GA9I3B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KA0B1B,GAAO,CAAA,EAAA,EAAA,WAAA,qBAAA,KAAA,EAAA,SAjCT,GAAgB,CAAA,EAAA,EAAA"}

package/dist/progress-bar/define.d.ts

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

package/dist/progress-bar/define.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/progress-bar/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { ProgressBar } from '@nvidia-elements/core/progress-bar';\n\ndefine(ProgressBar);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-progress-bar': ProgressBar;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,EAAY"}

package/dist/progress-bar/index.d.ts

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

package/dist/progress-bar/index.js

@@ -0,0 +1,2 @@
+import { ProgressBar as e } from "./progress-bar2.js";
+export { e as ProgressBar };

package/dist/progress-bar/progress-bar.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import { SupportStatus } from '../internal';
+/**
+ * @element nve-progress-bar
+ * @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.
+ * @since 0.16.0
+ * @entrypoint \@nvidia-elements/core/progress-bar
+ * @cssprop --height
+ * @cssprop --opacity
+ * @cssprop --background
+ * @cssprop --accent-color
+ * @cssprop --indeterminate-gradient - Gradient used for indeterminate state animation
+ * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role
+ */
+export declare class ProgressBar extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    /** The current `value` of the progress indicator, set to the native HTML progress element. */
+    value?: number;
+    /** The `max` property sets the highest value that `value` scales to. */
+    max?: number | undefined;
+    /** Defines visual treatment to represent a ongoing task or support status. */
+    status: SupportStatus;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.examples.js","names":[],"sources":["../../src/progress-bar/progress-bar.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/progress-bar/define.js';\n\nexport default {\n  title: 'Elements/Progress Bar',\n  component: 'nve-progress-bar',\n};\n\n/**\n * @summary Standard progress bar for representing completion levels from 0% to 100% for task tracking.\n */\nexport const Default = {\n  render: () => html`\n<nve-progress-bar value=\"50\"></nve-progress-bar>`\n};\n\n/**\n * @summary Progress bars with different status colors showing completion levels from 0% to 100% for task tracking.\n * @tags test-case\n */\nexport const Status = {\n  render: () => html`\n<div nve-layout=\"column gap:md pad:lg full\">\n  <nve-progress-bar value=\"0\"></nve-progress-bar>\n  <nve-progress-bar value=\"10\"></nve-progress-bar>\n  <nve-progress-bar status=\"accent\" value=\"25\"></nve-progress-bar>\n  <nve-progress-bar status=\"success\" value=\"50\"></nve-progress-bar>\n  <nve-progress-bar status=\"warning\" value=\"75\"></nve-progress-bar>\n  <nve-progress-bar status=\"danger\" value=\"100\"></nve-progress-bar>\n</div>`\n};\n\n/**\n * @summary Progress bars with custom max values for representing non-percentage based progress like file counts or steps.\n * @tags test-case\n */\nexport const Max = {\n  render: () => html`\n<div nve-layout=\"column gap:md pad:lg full\">\n  <nve-progress-bar status=\"accent\" value=\"25\" max=\"50\"></nve-progress-bar>\n  <nve-progress-bar status=\"accent\" value=\"45\" max=\"50\"></nve-progress-bar>\n</div>\n  `\n};\n\n/**\n * @summary Use a labeled progress bar with percentage display to communicate upload or task status.\n * @tags pattern\n */\nexport const Labeled = {\n  render: () => html`\n<div nve-layout=\"column gap:xxxs pad:lg align:horizontal-stretch grow\">\n  <div nve-layout=\"row align:space-between\">\n    <p nve-text=\"label sm\">Upload Status</p>\n    <p nve-text=\"label emphasis sm\">80%</p>\n  </div>\n  <nve-progress-bar status=\"accent\" value=\"80\"></nve-progress-bar>\n</div>\n  `\n};\n\n/**\n * @summary Indeterminate progress bar for showing activity when completion time is unknown, like loading or processing.\n */\nexport const Indeterminate = {\n  render: () => html`\n<nve-progress-bar></nve-progress-bar>`\n};\n\n/**\n * @summary Progress bars display as an animated loading indicator when no `value` attribute exists.\n * @tags test-case\n */\nexport const IndeterminateStatusColors = {\n  render: () => html`\n<div nve-layout=\"column gap:md full\">\n  <nve-progress-bar status=\"accent\"></nve-progress-bar>\n  <nve-progress-bar status=\"warning\"></nve-progress-bar>\n  <nve-progress-bar status=\"danger\"></nve-progress-bar>\n</div>`\n};\n\n/**\n * @summary Indeterminate progress bar with custom color, height, and opacity for brand-specific styling and visual emphasis.\n * @tags test-case\n */\nexport const IndeterminateCustomColor = {\n  render: () => html`\n<nve-progress-bar style=\"--accent-color: var(--nve-sys-accent-primary-background); --height: var(--nve-ref-size-150); --opacity: 1;\"></nve-progress-bar>`\n};\n\n/**\n * @summary Progress bars with custom heights for different visual prominence levels and layout requirements.\n * @tags test-case\n * @description The progress bar's height accepts customization through the `--height` CSS custom property. This allows you to create progress bars that match your application's visual hierarchy and emphasis needs. For consistency and theming, use design system tokens, but any value that suits your layout also works.\n */\nexport const CustomHeights = {\n  render: () => html`\n<div nve-layout=\"column gap:md full\">\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-100);\"></nve-progress-bar>\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-200);\"></nve-progress-bar>\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-300);\"></nve-progress-bar>\n</div>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

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

@@ -0,0 +1,90 @@
+{
+  "element": "nve-progress-bar",
+  "entrypoint": "@nvidia-elements/core/progress-bar/progress-bar.examples.json",
+  "items": [
+    {
+      "id": "core-progress-bar_default",
+      "name": "Default",
+      "template": "<nve-progress-bar value=\"50\"></nve-progress-bar>\n",
+      "summary": "Standard progress bar for representing completion levels from 0% to 100% for task tracking.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-progress-bar_status",
+      "name": "Status",
+      "template": "<div nve-layout=\"column gap:md pad:lg full\">\n  <nve-progress-bar value=\"0\"></nve-progress-bar>\n  <nve-progress-bar value=\"10\"></nve-progress-bar>\n  <nve-progress-bar status=\"accent\" value=\"25\"></nve-progress-bar>\n  <nve-progress-bar status=\"success\" value=\"50\"></nve-progress-bar>\n  <nve-progress-bar status=\"warning\" value=\"75\"></nve-progress-bar>\n  <nve-progress-bar status=\"danger\" value=\"100\"></nve-progress-bar>\n</div>\n",
+      "summary": "Progress bars with different status colors showing completion levels from 0% to 100% for task tracking.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-progress-bar_max",
+      "name": "Max",
+      "template": "<div nve-layout=\"column gap:md pad:lg full\">\n  <nve-progress-bar status=\"accent\" value=\"25\" max=\"50\"></nve-progress-bar>\n  <nve-progress-bar status=\"accent\" value=\"45\" max=\"50\"></nve-progress-bar>\n</div>\n",
+      "summary": "Progress bars with custom max values for representing non-percentage based progress like file counts or steps.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-progress-bar_labeled",
+      "name": "Labeled",
+      "template": "<div nve-layout=\"column gap:xxxs pad:lg align:horizontal-stretch grow\">\n  <div nve-layout=\"row align:space-between\">\n    <p nve-text=\"label sm\">Upload Status</p>\n    <p nve-text=\"label emphasis sm\">80%</p>\n  </div>\n  <nve-progress-bar status=\"accent\" value=\"80\"></nve-progress-bar>\n</div>\n",
+      "summary": "Use a labeled progress bar with percentage display to communicate upload or task status.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "pattern"
+      ]
+    },
+    {
+      "id": "core-progress-bar_indeterminate",
+      "name": "Indeterminate",
+      "template": "<nve-progress-bar></nve-progress-bar>\n",
+      "summary": "Indeterminate progress bar for showing activity when completion time is unknown, like loading or processing.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-progress-bar_indeterminate-status-colors",
+      "name": "IndeterminateStatusColors",
+      "template": "<div nve-layout=\"column gap:md full\">\n  <nve-progress-bar status=\"accent\"></nve-progress-bar>\n  <nve-progress-bar status=\"warning\"></nve-progress-bar>\n  <nve-progress-bar status=\"danger\"></nve-progress-bar>\n</div>\n",
+      "summary": "Progress bars display as an animated loading indicator when no `value` attribute exists.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-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",
+      "summary": "Indeterminate progress bar with custom color, height, and opacity for brand-specific styling and visual emphasis.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-progress-bar_custom-heights",
+      "name": "CustomHeights",
+      "template": "<div nve-layout=\"column gap:md full\">\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-100)\"></nve-progress-bar>\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-200)\"></nve-progress-bar>\n  <nve-progress-bar style=\"--height: var(--nve-ref-size-300)\"></nve-progress-bar>\n</div>\n",
+      "summary": "Progress bars with custom heights for different visual prominence levels and layout requirements.",
+      "description": "The progress bar's height accepts customization through the `--height` CSS custom property. This allows you to create progress bars that match your application's visual hierarchy and emphasis needs. For consistency and theming, use design system tokens, but any value that suits your layout also works.",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,6 @@
+//#region src/progress-bar/progress-bar.css?inline
+var e = ":host{display:flex;width:100%;line-height:0;--height: var(--nve-ref-size-200);--opacity: 1;--accent-color: var(--nve-sys-interaction-color);--background: var(--nve-sys-interaction-background)}:host([status=\"accent\"]){--accent-color: var(--nve-sys-accent-secondary-background)}:host([status=\"success\"]){--accent-color: var(--nve-sys-support-success-color)}:host([status=\"warning\"]){--accent-color: var(--nve-sys-support-warning-color)}:host([status=\"danger\"]){--accent-color: var(--nve-sys-support-danger-color)}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--background);border-radius:var(--nve-ref-border-radius-full);height:var(--height);opacity:var(--opacity);width:100%}progress[value]::-webkit-progress-bar{background-color:inherit;border-radius:var(--nve-ref-border-radius-full)}progress[value]::-webkit-progress-value{border-radius:var(--nve-ref-border-radius-full);border-top-right-radius:0;border-bottom-right-radius:0;background-color:var(--accent-color)}progress[value].full::-webkit-progress-value{border-top-right-radius:var(--nve-ref-border-radius-full);border-bottom-right-radius:var(--nve-ref-border-radius-full)}progress[value].min-width::-webkit-progress-value{min-width:5px}progress[value]::-moz-progress-bar{border-radius:var(--nve-ref-border-radius-full);border-top-right-radius:0;border-bottom-right-radius:0;background-color:var(--accent-color)}:host(:not([value])){--height: var(--nve-ref-size-100);--opacity: .75}progress.indeterminate{--accent-color-faded: color-mix(in srgb, var(--accent-color), transparent 90%);--indeterminate-gradient: linear-gradient(to right, var(--accent-color-faded) 10%, var(--accent-color));--indeterminate-gradient-reverse: linear-gradient(to left, var(--accent-color-faded) 10%, var(--accent-color));will-change:transform;background-image:var(--indeterminate-gradient);animation:indeterminate-animation 2.4s infinite cubic-bezier(.645,.045,.355,1)}progress[value].indeterminate::-webkit-progress-value{border-radius:var(--nve-ref-border-radius-none);background-color:transparent!important}@keyframes indeterminate-animation{0%{transform:scaleX(.015);transform-origin:0% 0%}25%{transform:scaleX(.4)}50%{transform:scaleX(.015);transform-origin:100% 0%;background-image:var(--indeterminate-gradient)}50.1%{transform:scaleX(.015);transform-origin:100% 0%;background-image:var(--indeterminate-gradient-reverse)}75%{transform:scaleX(.4)}to{transform:scaleX(.015);transform-origin:0% 0%;background-image:var(--indeterminate-gradient-reverse)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=progress-bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.js","names":[],"sources":["../../src/progress-bar/progress-bar.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  display: flex;\n  width: 100%;\n  line-height: 0;\n  --height: var(--nve-ref-size-200);\n  --opacity: 1;\n  --accent-color: var(--nve-sys-interaction-color);\n  --background: var(--nve-sys-interaction-background);\n}\n\n:host([status='accent']) {\n  --accent-color: var(--nve-sys-accent-secondary-background);\n}\n\n:host([status='success']) {\n  --accent-color: var(--nve-sys-support-success-color);\n}\n\n:host([status='warning']) {\n  --accent-color: var(--nve-sys-support-warning-color);\n}\n\n:host([status='danger']) {\n  --accent-color: var(--nve-sys-support-danger-color);\n}\n\nprogress {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  background: var(--background);\n  border-radius: var(--nve-ref-border-radius-full);\n  height: var(--height);\n  opacity: var(--opacity);\n  width: 100%;\n}\n\nprogress[value]::-webkit-progress-bar {\n  background-color: inherit;\n  border-radius: var(--nve-ref-border-radius-full);\n}\n\nprogress[value]::-webkit-progress-value {\n  border-radius: var(--nve-ref-border-radius-full);\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  background-color: var(--accent-color);\n}\n\nprogress[value].full::-webkit-progress-value {\n  border-top-right-radius: var(--nve-ref-border-radius-full);\n  border-bottom-right-radius: var(--nve-ref-border-radius-full);\n}\n\nprogress[value].min-width::-webkit-progress-value {\n  min-width: 5px;\n}\n\nprogress[value]::-moz-progress-bar {\n  border-radius: var(--nve-ref-border-radius-full);\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n  background-color: var(--accent-color);\n}\n\n:host(:not([value])) {\n  --height: var(--nve-ref-size-100);\n  --opacity: 0.75;\n}\n\nprogress.indeterminate {\n  --accent-color-faded: color-mix(in srgb, var(--accent-color), transparent 90%);\n  --indeterminate-gradient: linear-gradient(to right, var(--accent-color-faded) 10%, var(--accent-color));\n  --indeterminate-gradient-reverse: linear-gradient(to left, var(--accent-color-faded) 10%, var(--accent-color));\n  will-change: transform;\n  background-image: var(--indeterminate-gradient);\n  animation: indeterminate-animation 2.4s infinite cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n\nprogress[value].indeterminate::-webkit-progress-value {\n  border-radius: var(--nve-ref-border-radius-none);\n  background-color: transparent !important;\n}\n\n@keyframes indeterminate-animation {\n  0% {\n    transform: scaleX(0.015);\n    transform-origin: 0% 0%;\n  }\n\n  25% {\n    transform: scaleX(0.4);\n  }\n\n  50% {\n    transform: scaleX(0.015);\n    transform-origin: 100% 0%;\n    background-image: var(--indeterminate-gradient);\n  }\n\n  50.1% {\n    transform: scaleX(0.015);\n    transform-origin: 100% 0%;\n    background-image: var(--indeterminate-gradient-reverse);\n  }\n\n  75% {\n    transform: scaleX(0.4);\n  }\n\n  100% {\n    transform: scaleX(0.015);\n    transform-origin: 0% 0%;\n    background-image: var(--indeterminate-gradient-reverse);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,41 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
+import { useStyles as n } from "../internal/styles/index.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";
+import { classMap as s } from "lit/directives/class-map.js";
+//#region src/progress-bar/progress-bar.ts
+var c = class extends i {
+	constructor(...e) {
+		super(...e), this.max = 100;
+	}
+	static {
+		this.styles = n([r]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-progress-bar",
+			version: "0.0.3"
+		};
+	}
+	render() {
+		let e = {
+			full: this.value === this.max,
+			"min-width": this.value !== void 0 && this.value > 0,
+			indeterminate: this.value === void 0
+		};
+		return a`<progress internal-host .max="${this.max}" .value="${this.value === void 0 ? 100 : this.value}" class="${s(e)}"></progress>`;
+	}
+};
+e([o({
+	type: Number,
+	reflect: !0
+})], c.prototype, "value", void 0), e([o({ type: Number })], c.prototype, "max", void 0), e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "status", void 0), c = e([t()], c);
+//#endregion
+export { c as ProgressBar };
+
+//# sourceMappingURL=progress-bar2.js.map

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

@@ -0,0 +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 * @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":";;;;;;;;AAuBO,IAAA,IAAA,cAA0B,EAAW;;0BAYP;;;gBAXnB,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;CAWD,SAAS;EACP,IAAM,IAAU;GACd,MAAM,KAAK,UAAU,KAAK;GAC1B,aAAa,KAAK,UAAU,KAAA,KAAa,KAAK,QAAQ;GACtD,eAAe,KAAK,UAAU,KAAA;GAC/B;AAED,SAAO,CAAI,iCACsB,KAAK,IAAc,YAAU,KAAK,UAAU,KAAA,IAAa,MAAkB,KAAK,MAAiB,WAAS,EAAS,EAAQ,CAAC;;;GAhB9J,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA,KAGzC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,OAAA,KAAA,EAAA,KAG1B,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,SAhB3C,GAAgB,CAAA,EAAA,EAAA"}

package/dist/progress-ring/define.d.ts

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

package/dist/progress-ring/define.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/progress-ring/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { ProgressRing } from '@nvidia-elements/core/progress-ring';\n\ndefine(ProgressRing);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-progress-ring': ProgressRing;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,EAAa"}

package/dist/progress-ring/index.d.ts

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

package/dist/progress-ring/index.js

@@ -0,0 +1,2 @@
+import { ProgressRing as e } from "./progress-ring2.js";
+export { e as ProgressRing };

package/dist/progress-ring/progress-ring.d.ts

@@ -0,0 +1,50 @@
+import { PropertyValues, LitElement } from 'lit';
+import { Size, SupportStatus } from '../internal';
+import { Icon } from '../icon';
+/**
+ * @element nve-progress-ring
+ * @description The `progress-ring` component shows the status of a pending task. It also serves the basis of the page loading element.
+ * @since 0.17.0
+ * @entrypoint \@nvidia-elements/core/progress-ring
+ * @slot - Content to display in the ring center. Defaults to a status icon.
+ * @slot status-icon - (deprecated) Use the default slot instead.
+ * @cssprop --background-color
+ * @cssprop --ring-color
+ * @cssprop --ring-background-opacity
+ * @cssprop --ring-width
+ * @cssprop --width
+ * @cssprop --height
+ * @cssprop --animation-duration
+ * @cssprop --color
+ * @csspart icon - The icon element
+ * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role
+ */
+export declare class ProgressRing extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [Icon.metadata.tag]: typeof Icon;
+    };
+    /** @private */
+    _internals: ElementInternals;
+    /** The current `value` of the progress ring. When not set, an indeterminate animation will show. */
+    value?: number;
+    /** The `max` value of the progress ring that the `value` is proportionally scaled to. */
+    max?: number | undefined;
+    /** Four visual treatments represent the `status` of tasks. When `status` changes to `warning`, `success`, or `danger`, the component embeds appropriate icons. */
+    status?: SupportStatus | 'neutral';
+    /** T-shirt `size` of the progress indicator, used to scale the ring. */
+    size?: Size | 'xxs' | 'xs' | 'xl';
+    /** Enables updating internal string values for internationalization. */
+    i18n: Partial<import('../internal').I18nStrings & {
+        __set: boolean;
+    }>;
+    private _deprecatedStatusIconSlot;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+    updated(props: PropertyValues<this>): void;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-ring.examples.js","names":[],"sources":["../../src/progress-ring/progress-ring.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n  title: 'Elements/Progress Ring',\n  component: 'nve-progress-ring',\n};\n\n/**\n * @summary Circular progress indicators showing indeterminate loading state and determinate completion progress.\n */\nexport const Default = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-progress-ring status=\"accent\"></nve-progress-ring>\n  \n      <nve-progress-ring status=\"accent\" value=\"66\"></nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress rings displaying completion percentages from indeterminate to 0%, 33%, 66%, and 100%.\n * @tags test-case\n */\nexport const Values = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-progress-ring status=\"accent\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"accent\" value=\"0\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"accent\" value=\"33\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"accent\" value=\"66\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"accent\" value=\"100\"></nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress rings with custom max values for proportional progress within a defined scale.\n * @tags test-case\n */\nexport const Max = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-progress-ring status=\"accent\" max=\"20\" value=\"5\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"accent\" max=\"20\" value=\"10\"></nve-progress-ring>\n      \n      <nve-progress-ring status=\"accent\" max=\"20\" value=\"15\"></nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress rings with warning and danger status colors for indicating critical or cautionary states.\n */\nexport const Status = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-progress-ring status=\"warning\" value=\"75\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"danger\" value=\"75\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"warning\"></nve-progress-ring>\n\n      <nve-progress-ring status=\"danger\"></nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress ring paired inline with descriptive text label for communicating loading state.\n */\nexport const WithText = {\n  render: () => html`\n    <div nve-layout=\"row gap:xs align:vertical-center\" nve-text=\"medium\">\n      <nve-progress-ring status=\"accent\" size=\"xs\" aria-labelledby=\"processing-label\"></nve-progress-ring>\n      <span id=\"processing-label\">Processing...</span>\n    </div>\n`};\n\n/**\n * @summary Progress ring with custom status icon slotted in the center for enhanced visual communication.\n * @tags test-case\n */\nexport const SlottedIcon = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-progress-ring status=\"accent\">\n        <nve-icon name=\"pause\" status=\"accent\"></nve-icon>\n      </nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress rings in many sizes from extra-extra-small to extra-large for different UI contexts.\n * @tags test-case\n */\nexport const Sizing = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm pad:md\">\n      <nve-progress-ring status=\"accent\" size=\"xxs\"></nve-progress-ring>\n      <nve-progress-ring status=\"accent\" size=\"xs\"></nve-progress-ring>\n      <nve-progress-ring status=\"accent\" size=\"sm\"></nve-progress-ring>\n      <nve-progress-ring status=\"accent\" size=\"md\"></nve-progress-ring>\n      <nve-progress-ring status=\"accent\" size=\"lg\"></nve-progress-ring>\n      <nve-progress-ring status=\"accent\" size=\"xl\"></nve-progress-ring>\n    </div>\n\n    <div nve-layout=\"row gap:sm pad:md\">\n      <nve-progress-ring status=\"danger\" size=\"xxs\"></nve-progress-ring>\n      <nve-progress-ring status=\"danger\" size=\"xs\"></nve-progress-ring>\n      <nve-progress-ring status=\"danger\" size=\"sm\"></nve-progress-ring>\n      <nve-progress-ring status=\"danger\" size=\"md\"></nve-progress-ring>\n      <nve-progress-ring status=\"danger\" size=\"lg\"></nve-progress-ring>\n    </div>\n`};\n\n/**\n * @summary Progress rings integrated within buttons to show loading states during actions and operations.\n */\nexport const WithButton = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\">\n      <nve-button>\n        <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n        Button\n      </nve-button>\n\n      <nve-button interaction=\"emphasis\">\n        <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n        Button\n      </nve-button>\n\n      <nve-button interaction=\"destructive\">\n        <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n        Button\n      </nve-button>\n\n      <nve-button>\n        <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n        Button\n      </nve-button>\n\n      <nve-button interaction=\"emphasis\">\n        <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n        Button\n      </nve-button>\n\n      <nve-button interaction=\"destructive\">\n        <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n        Button\n      </nve-button>\n    </div>\n`};"],"mappings":";AAGA,IAAA,IAAS"}

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

@@ -0,0 +1,86 @@
+{
+  "element": "nve-progress-ring",
+  "entrypoint": "@nvidia-elements/core/progress-ring/progress-ring.examples.json",
+  "items": [
+    {
+      "id": "core-progress-ring_default",
+      "name": "Default",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"accent\" value=\"66\"></nve-progress-ring>\n</div>\n",
+      "summary": "Circular progress indicators showing indeterminate loading state and determinate completion progress.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-progress-ring_values",
+      "name": "Values",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" value=\"0\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" value=\"33\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" value=\"66\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" value=\"100\"></nve-progress-ring>\n</div>\n",
+      "summary": "Progress rings displaying completion percentages from indeterminate to 0%, 33%, 66%, and 100%.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-progress-ring_max",
+      "name": "Max",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\" max=\"20\" value=\"5\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" max=\"20\" value=\"10\"></nve-progress-ring>\n\n  <nve-progress-ring status=\"accent\" max=\"20\" value=\"15\"></nve-progress-ring>\n</div>\n",
+      "summary": "Progress rings with custom max values for proportional progress within a defined scale.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-progress-ring_status",
+      "name": "Status",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"warning\" value=\"75\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" value=\"75\"></nve-progress-ring>\n  <nve-progress-ring status=\"warning\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\"></nve-progress-ring>\n</div>\n",
+      "summary": "Progress rings with warning and danger status colors for indicating critical or cautionary states.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-progress-ring_with-text",
+      "name": "WithText",
+      "template": "<div nve-layout=\"row gap:xs align:vertical-center\" nve-text=\"medium\">\n  <nve-progress-ring status=\"accent\" size=\"xs\" aria-labelledby=\"processing-label\"></nve-progress-ring>\n  <span id=\"processing-label\">Processing...</span>\n</div>\n",
+      "summary": "Progress ring paired inline with descriptive text label for communicating loading state.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-progress-ring_slotted-icon",
+      "name": "SlottedIcon",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-progress-ring status=\"accent\">\n    <nve-icon name=\"pause\" status=\"accent\"></nve-icon>\n  </nve-progress-ring>\n</div>\n",
+      "summary": "Progress ring with custom status icon slotted in the center for enhanced visual communication.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-progress-ring_sizing",
+      "name": "Sizing",
+      "template": "<div nve-layout=\"row gap:sm pad:md\">\n  <nve-progress-ring status=\"accent\" size=\"xxs\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"xs\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"sm\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"md\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"lg\"></nve-progress-ring>\n  <nve-progress-ring status=\"accent\" size=\"xl\"></nve-progress-ring>\n</div>\n<div nve-layout=\"row gap:sm pad:md\">\n  <nve-progress-ring status=\"danger\" size=\"xxs\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"xs\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"sm\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"md\"></nve-progress-ring>\n  <nve-progress-ring status=\"danger\" size=\"lg\"></nve-progress-ring>\n</div>\n",
+      "summary": "Progress rings in many sizes from extra-extra-small to extra-large for different UI contexts.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-progress-ring_with-button",
+      "name": "WithButton",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-button>\n    <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button interaction=\"emphasis\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button interaction=\"destructive\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button>\n    <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button interaction=\"emphasis\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n    Button\n  </nve-button>\n  <nve-button interaction=\"destructive\">\n    <nve-progress-ring status=\"neutral\" size=\"xxs\" value=\"33\"></nve-progress-ring>\n    Button\n  </nve-button>\n</div>\n",
+      "summary": "Progress rings integrated within buttons to show loading states during actions and operations.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    }
+  ]
+}

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

@@ -0,0 +1,6 @@
+//#region src/progress-ring/progress-ring.css?inline
+var e = ":host{--background-color: var(--nve-sys-interaction-background);--ring-color: var(--nve-sys-accent-secondary-background);--ring-background-opacity: 1;--ring-width: 2px;--width: var(--nve-ref-size-800);--height: var(--nve-ref-size-800);--animation-duration: calc(var(--nve-ref-animation-duration-400) * 2.5);width:var(--width);height:var(--height);container-type:size}:host([size=\"xxs\"]){--ring-width: 3px;--width: var(--nve-ref-size-300);--height: var(--nve-ref-size-300)}:host([size=\"xs\"]){--ring-width: 3px;--width: var(--nve-ref-size-400);--height: var(--nve-ref-size-400)}:host([size=\"sm\"]){--ring-width: 2.5px;--width: var(--nve-ref-size-600);--height: var(--nve-ref-size-600)}:host([size=\"lg\"]){--width: var(--nve-ref-size-1000);--height: var(--nve-ref-size-1000)}:host([size=\"xl\"]){--ring-width: 1px;--width: calc(2 * var(--nve-ref-space-xxxl));--height: calc(2 * var(--nve-ref-space-xxxl))}[internal-host]{display:flex;place-items:center;place-content:center;height:100%}svg{position:absolute;top:0;left:0;width:100%;height:100%}circle.background{fill:var(--background-color);opacity:var(--ring-background-opacity);stroke:none}circle.ring{fill:none;stroke:var(--ring-color);stroke-width:var(--ring-width);stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg);transition:all .2s ease-in-out 0s}:host([status=\"success\"]){--ring-color: var(--nve-sys-support-success-emphasis-color);--background-color: var(--nve-sys-support-success-muted-color)}:host([status=\"warning\"]){--ring-color: var(--nve-sys-support-warning-emphasis-color);--background-color: var(--nve-sys-support-warning-muted-color)}:host([status=\"danger\"]){--ring-color: var(--nve-sys-support-danger-emphasis-color);--background-color: var(--nve-sys-support-danger-muted-color)}:host([status=\"neutral\"]){--ring-background-opacity: .5;--ring-color: var(--color, var(--nve-sys-interaction-color));--background-color: var(--color, var(--nve-sys-interaction-color))}:host([status=\"accent\"]) [internal-host]:not([indeterminate]) circle.background{stroke:var(--background-color);fill:none;stroke-width:var(--ring-width)}:host([status=\"accent\"]) [internal-host][indeterminate] circle.background{display:none}:host([status=\"neutral\"]) [internal-host]:not([indeterminate]) circle.background{stroke:var(--background-color);fill:none;stroke-width:var(--ring-width)}:host([status=\"neutral\"]) [internal-host][indeterminate] circle.background{display:none}[internal-host][indeterminate] circle.ring{animation:var(--animation-duration) linear 0s infinite normal none running spin-infinite}::slotted(nve-icon),nve-icon{--width: 50cqw;--height: 50cqh;--color: var(--ring-color)}@keyframes spin-infinite{0%{stroke-dasharray:.01px,43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px,21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px,43.97px;transform:rotate(1080deg)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=progress-ring.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-ring.js","names":[],"sources":["../../src/progress-ring/progress-ring.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background-color: var(--nve-sys-interaction-background);\n  --ring-color: var(--nve-sys-accent-secondary-background);\n  --ring-background-opacity: 1;\n  --ring-width: 2px;\n  --width: var(--nve-ref-size-800);\n  --height: var(--nve-ref-size-800);\n  --animation-duration: calc(var(--nve-ref-animation-duration-400) * 2.5);\n\n  width: var(--width);\n  height: var(--height);\n  container-type: size;\n}\n\n:host([size='xxs']) {\n  --ring-width: 3px;\n  --width: var(--nve-ref-size-300);\n  --height: var(--nve-ref-size-300);\n}\n\n:host([size='xs']) {\n  --ring-width: 3px;\n  --width: var(--nve-ref-size-400);\n  --height: var(--nve-ref-size-400);\n}\n\n:host([size='sm']) {\n  --ring-width: 2.5px;\n  --width: var(--nve-ref-size-600);\n  --height: var(--nve-ref-size-600);\n}\n\n:host([size='lg']) {\n  --width: var(--nve-ref-size-1000);\n  --height: var(--nve-ref-size-1000);\n}\n\n:host([size='xl']) {\n  --ring-width: 1px;\n  --width: calc(2 * var(--nve-ref-space-xxxl));\n  --height: calc(2 * var(--nve-ref-space-xxxl));\n}\n\n[internal-host] {\n  display: flex;\n  place-items: center;\n  place-content: center;\n  height: 100%;\n}\n\nsvg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\ncircle.background {\n  fill: var(--background-color);\n  opacity: var(--ring-background-opacity);\n  stroke: none;\n}\n\ncircle.ring {\n  fill: none;\n  stroke: var(--ring-color);\n  stroke-width: var(--ring-width);\n  stroke-linecap: round;\n  transform-origin: 50% 50%;\n  transform: rotate(-90deg);\n  transition: all 0.2s ease-in-out 0s;\n}\n\n:host([status='success']) {\n  --ring-color: var(--nve-sys-support-success-emphasis-color);\n  --background-color: var(--nve-sys-support-success-muted-color);\n}\n\n:host([status='warning']) {\n  --ring-color: var(--nve-sys-support-warning-emphasis-color);\n  --background-color: var(--nve-sys-support-warning-muted-color);\n}\n\n:host([status='danger']) {\n  --ring-color: var(--nve-sys-support-danger-emphasis-color);\n  --background-color: var(--nve-sys-support-danger-muted-color);\n}\n\n:host([status='neutral']) {\n  --ring-background-opacity: 0.5;\n  --ring-color: var(--color, var(--nve-sys-interaction-color));\n  --background-color: var(--color, var(--nve-sys-interaction-color));\n}\n\n:host([status='accent']) [internal-host]:not([indeterminate]) circle.background {\n  stroke: var(--background-color);\n  fill: none;\n  stroke-width: var(--ring-width);\n}\n\n:host([status='accent']) [internal-host][indeterminate] circle.background {\n  display: none;\n}\n\n:host([status='neutral']) [internal-host]:not([indeterminate]) circle.background {\n  stroke: var(--background-color);\n  fill: none;\n  stroke-width: var(--ring-width);\n}\n\n:host([status='neutral']) [internal-host][indeterminate] circle.background {\n  display: none;\n}\n\n[internal-host][indeterminate] circle.ring {\n  animation: var(--animation-duration) linear 0s infinite normal none running spin-infinite;\n}\n\n::slotted(nve-icon),\n::slotted(nve-icon),\nnve-icon {\n  --width: 50cqw;\n  --height: 50cqh;\n  --color: var(--ring-color);\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px, 43.97px;\n    transform: rotate(0deg);\n  }\n\n  50% {\n    stroke-dasharray: 21.99px, 21.99px;\n    transform: rotate(450deg);\n  }\n\n  100% {\n    stroke-dasharray: 0.01px, 43.97px;\n    transform: rotate(1080deg);\n  }\n}\n"],"mappings":""}