@nvidia-elements/core 2.23.4 → 2.23.6

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

@@ -1,11 +1,11 @@
 import { hostAttr as e } from "../../internal/decorators/host-attr.js";
-import { scopedRegistry as t } from "../../internal/decorators/scoped-registry.js";
-import { useStyles as n } from "../../internal/styles/index.js";
-import r from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
-import { Icon as i } from "../../icon/icon2.js";
-import a from "./control-message.js";
-import { LitElement as o, html as s } from "lit";
-import { property as c } from "lit/decorators/property.js";
+import t from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
+import { Icon as n } from "../../icon/icon2.js";
+import r from "./control-message.js";
+import { LitElement as i, html as a } from "lit";
+import { property as o } from "lit/decorators/property.js";
+import { scopedRegistry as s } from "@nvidia-elements/foundations/internal/decorators";
+import { useStyles as c } from "@nvidia-elements/foundations/internal/styles";
 // src/forms/control-message/control-message.ts
 var l = {
 	undefined: "information-circle",
@@ -13,33 +13,33 @@ var l = {
 	warning: "exclamation-triangle",
 	success: "checkmark-circle",
 	error: "exclamation-circle"
-}, u = class extends o {
+}, u = class extends i {
 	constructor(...e) {
 		super(...e), this.error = null, this.slot = "messages";
 	}
 	static {
-		this.styles = n([a]);
+		this.styles = c([r]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-control-message",
-			version: "2.23.4"
+			version: "2.23.6"
 		};
 	}
 	static {
-		this.elementDefinitions = { [i.metadata.tag]: i };
+		this.elementDefinitions = { [n.metadata.tag]: n };
 	}
 	render() {
-		return s`<div internal-host><slot name="icon"><nve-icon part="icon" name="${this.error ? l.error : l[this.status]}"></nve-icon></slot><slot></slot></div>`;
+		return a`<div internal-host><slot name="icon"><nve-icon part="icon" name="${this.error ? l.error : l[this.status]}"></nve-icon></slot><slot></slot></div>`;
 	}
 };
-r([c({
+t([o({
 	type: String,
 	reflect: !0
-})], u.prototype, "status", void 0), r([c({
+})], u.prototype, "status", void 0), t([o({
 	type: String,
 	reflect: !0
-})], u.prototype, "error", void 0), r([e()], u.prototype, "slot", void 0), u = r([t()], u);
+})], u.prototype, "error", void 0), t([e()], u.prototype, "slot", void 0), u = t([s()], u);
 export { u as ControlMessage };
 
 //# sourceMappingURL=control-message2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"control-message2.js","names":["styles","_decorate","__decorate","control_message_default","statusIcons","ControlMessage","LitElement","_args","useStyles","Icon","property","hostAttr","scopedRegistry"],"sources":["../../../src/forms/control-message/control-message.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 { hostAttr, scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { type ValidityStateError } from '../utils/types.js';\nimport styles from './control-message.css?inline';\n\nconst statusIcons = {\n  undefined: 'information-circle',\n  disabled: 'information-circle',\n  warning: 'exclamation-triangle',\n  success: 'checkmark-circle',\n  error: 'exclamation-circle'\n} as const;\n\n/**\n * @element nve-control-message\n * @description Defining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.\n * @documentation https://nvidia.github.io/elements/docs/elements/control/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Validation or supporting message text for the associated control.\n * @slot icon - override the icon with a custom icon\n * @cssprop --color\n * @cssprop --font-weight\n * @cssprop --font-size\n * @csspart icon - The icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\n@scopedRegistry()\nexport class ControlMessage extends LitElement {\n  /**\n   * Visual treatment for current form control validation status\n   */\n  @property({ type: String, reflect: true }) status?: 'warning' | 'error' | 'success' | 'disabled';\n\n  /**\n   * Validation error code for current form control\n   * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n   */\n  @property({ type: String, reflect: true }) error: ValidityStateError | null = null;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control-message',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** @private */\n  @hostAttr() slot = 'messages';\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"icon\"><nve-icon part=\"icon\" name=${this.error ? statusIcons.error : statusIcons[this.status!]}></nve-icon></slot>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;AAUA,IAAMI,IAAc;CAClB,WAAW;CACX,UAAU;CACV,SAAS;CACT,SAAS;CACT,OAAO;AACT,GAkBaC,IAAN,cAA6BC,EAAW;;EAwB1B,A,aAd2D,KAAA,QAAA,MAc3D,KAAA,OAAA;;;EAZH,KAAA,SAAAE,EAAU,CAACR,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBS,EAAK,SAAS,MAAMA,EACvB;;CAKA,SAAS;EACP,OAAO,CAAI,oEAEwC,KAAK,QAAQL,EAAY,QAAQA,EAAY,KAAK,QAAS;CAIhH;AACF;AA9BGH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,UAAA,KAAA,CAAA,GAMxCJ,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,SAAA,KAAA,CAAA,GAcxCJ,EAAA,CAAAU,EAAS,CAAA,GAAAN,EAAA,WAAA,QAAA,KAAA,CAAA,GAzBX,IAAAJ,EAAA,CAAAW,EAAe,CAAA,GAAAP,CAAA"}
+{"version":3,"file":"control-message2.js","names":["styles","_decorate","__decorate","control_message_default","statusIcons","ControlMessage","LitElement","_args","useStyles","Icon","property","hostAttr","scopedRegistry"],"sources":["../../../src/forms/control-message/control-message.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 { hostAttr } from '@nvidia-elements/core/internal';\nimport { scopedRegistry } from '@nvidia-elements/foundations/internal/decorators';\nimport { useStyles } from '@nvidia-elements/foundations/internal/styles';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { type ValidityStateError } from '../utils/types.js';\nimport styles from './control-message.css?inline';\n\nconst statusIcons = {\n  undefined: 'information-circle',\n  disabled: 'information-circle',\n  warning: 'exclamation-triangle',\n  success: 'checkmark-circle',\n  error: 'exclamation-circle'\n} as const;\n\n/**\n * @element nve-control-message\n * @description Defining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.\n * @documentation https://nvidia.github.io/elements/docs/elements/control/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Validation or supporting message text for the associated control.\n * @slot icon - override the icon with a custom icon\n * @cssprop --color\n * @cssprop --font-weight\n * @cssprop --font-size\n * @csspart icon - The icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\n@scopedRegistry()\nexport class ControlMessage extends LitElement {\n  /**\n   * Visual treatment for current form control validation status\n   */\n  @property({ type: String, reflect: true }) status?: 'warning' | 'error' | 'success' | 'disabled';\n\n  /**\n   * Validation error code for current form control\n   * https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n   */\n  @property({ type: String, reflect: true }) error: ValidityStateError | null = null;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control-message',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** @private */\n  @hostAttr() slot = 'messages';\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"icon\"><nve-icon part=\"icon\" name=${this.error ? statusIcons.error : statusIcons[this.status!]}></nve-icon></slot>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;AAYA,IAAMI,IAAc;CAClB,WAAW;CACX,UAAU;CACV,SAAS;CACT,SAAS;CACT,OAAO;AACT,GAkBaC,IAAN,cAA6BC,EAAW;;EAwB1B,A,aAd2D,KAAA,QAAA,MAc3D,KAAA,OAAA;;;EAZH,KAAA,SAAAE,EAAU,CAACR,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBS,EAAK,SAAS,MAAMA,EACvB;;CAKA,SAAS;EACP,OAAO,CAAI,oEAEwC,KAAK,QAAQL,EAAY,QAAQA,EAAY,KAAK,QAAS;CAIhH;AACF;AA9BGH,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,UAAA,KAAA,CAAA,GAMxCJ,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,SAAA,KAAA,CAAA,GAcxCJ,EAAA,CAAAU,EAAS,CAAA,GAAAN,EAAA,WAAA,QAAA,KAAA,CAAA,GAzBX,IAAAJ,EAAA,CAAAW,EAAe,CAAA,GAAAP,CAAA"}

package/dist/gauge/gauge2.js

@@ -1,11 +1,11 @@
-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.155.0/helpers/esm/decorate.js";
-import r from "./gauge.js";
-import { LitElement as i, html as a } from "lit";
-import { property as o } from "lit/decorators/property.js";
-import { I18nController as s } from "@nvidia-elements/foundations/internal/i18n";
-import { styleMap as c } from "lit/directives/style-map.js";
+import e from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
+import t from "./gauge.js";
+import { attachInternals as n } from "@nvidia-elements/foundations/internal/a11y";
+import { LitElement as r, html as i } from "lit";
+import { property as a } from "lit/decorators/property.js";
+import { I18nController as o } from "@nvidia-elements/foundations/internal/i18n";
+import { styleMap as s } from "lit/directives/style-map.js";
+import { useStyles as c } from "@nvidia-elements/foundations/internal/styles";
 // src/gauge/gauge.ts
 var l = {
 	default: {
@@ -35,17 +35,17 @@ var l = {
 	information: "information",
 	success: "success",
 	warning: "warning"
-}, f = class extends i {
+}, f = class extends r {
 	constructor(...e) {
-		super(...e), this.value = 0, this.max = 100, this.status = "neutral", this.thumb = "fill", this.#e = new s(this, d), this.i18n = this.#e.i18n, this.#t = 0, this.#r = 0;
+		super(...e), this.value = 0, this.max = 100, this.status = "neutral", this.thumb = "fill", this.#e = new o(this, d), this.i18n = this.#e.i18n, this.#t = 0, this.#r = 0;
 	}
 	static {
-		this.styles = t([r]);
+		this.styles = c([t]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-gauge",
-			version: "2.23.4"
+			version: "2.23.6"
 		};
 	}
 	#e;
@@ -60,11 +60,11 @@ var l = {
 		};
 	}
 	render() {
-		let e = this.#f(), t = this.#t, n = this.#p(), r = this.#l(e, t), i = this.#u(e, t), o = n === "fill", s = t > 0 && (n === "fill" || n === "dot");
-		return a`<div internal-host><svg viewBox="${e.viewBox}" role="presentation" aria-hidden="true"><defs><mask id="background-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="128" height="${e.surfaceHeight}"><path d="${e.path}" class="background"></path></mask><mask id="fill-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="128" height="${e.surfaceHeight}"><path d="${i}" class="gauge" ?empty="${t <= 0}"></path></mask></defs><foreignObject width="128" height="${e.surfaceHeight}" mask="url(#background-mask)"><div xmlns="http://www.w3.org/1999/xhtml" class="background-surface"></div></foreignObject><foreignObject class="fill-layer" width="128" height="${e.surfaceHeight}" mask="url(#fill-mask)" ?hidden="${!o || t <= 0}"><div xmlns="http://www.w3.org/1999/xhtml" class="fill-surface"></div></foreignObject><circle class="fill-dot-end" cx="${e.center + e.radius}" cy="${e.center}" ?hidden="${!s}" style="${c(u("dot", r, e))}"></circle><g class="needle" ?hidden="${n !== "needle"}" style="${c(u("needle", r, e))}"><line class="needle-line" x1="${e.center}" y1="${e.center}" x2="${e.center + 40}" y2="${e.center}"></line><circle class="needle-hub" cx="${e.center}" cy="${e.center}"></circle></g></svg><slot></slot></div>`;
+		let e = this.#f(), t = this.#t, n = this.#p(), r = this.#l(e, t), a = this.#u(e, t), o = n === "fill", c = t > 0 && (n === "fill" || n === "dot");
+		return i`<div internal-host><svg viewBox="${e.viewBox}" role="presentation" aria-hidden="true"><defs><mask id="background-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="128" height="${e.surfaceHeight}"><path d="${e.path}" class="background"></path></mask><mask id="fill-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="128" height="${e.surfaceHeight}"><path d="${a}" class="gauge" ?empty="${t <= 0}"></path></mask></defs><foreignObject width="128" height="${e.surfaceHeight}" mask="url(#background-mask)"><div xmlns="http://www.w3.org/1999/xhtml" class="background-surface"></div></foreignObject><foreignObject class="fill-layer" width="128" height="${e.surfaceHeight}" mask="url(#fill-mask)" ?hidden="${!o || t <= 0}"><div xmlns="http://www.w3.org/1999/xhtml" class="fill-surface"></div></foreignObject><circle class="fill-dot-end" cx="${e.center + e.radius}" cy="${e.center}" ?hidden="${!c}" style="${s(u("dot", r, e))}"></circle><g class="needle" ?hidden="${n !== "needle"}" style="${s(u("needle", r, e))}"><line class="needle-line" x1="${e.center}" y1="${e.center}" x2="${e.center + 40}" y2="${e.center}"></line><circle class="needle-hub" cx="${e.center}" cy="${e.center}"></circle></g></svg><slot></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), e(this), this._internals.role = "progressbar";
+		super.connectedCallback(), n(this), this._internals.role = "progressbar";
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.#n && (this.#s(), this.#t = this.#a(), this.requestUpdate());
@@ -129,19 +129,19 @@ var l = {
 		return this.thumb === "dot" || this.thumb === "needle" ? this.thumb : "fill";
 	}
 };
-n([o({ type: Number })], f.prototype, "value", void 0), n([o({ type: Number })], f.prototype, "max", void 0), n([o({
+e([a({ type: Number })], f.prototype, "value", void 0), e([a({ type: Number })], f.prototype, "max", void 0), e([a({
 	type: String,
 	reflect: !0
-})], f.prototype, "status", void 0), n([o({
+})], f.prototype, "status", void 0), e([a({
 	type: String,
 	reflect: !0
-})], f.prototype, "shape", void 0), n([o({
+})], f.prototype, "shape", void 0), e([a({
 	type: String,
 	reflect: !0
-})], f.prototype, "thumb", void 0), n([o({
+})], f.prototype, "thumb", void 0), e([a({
 	type: String,
 	reflect: !0
-})], f.prototype, "size", void 0), n([o({ type: Object })], f.prototype, "i18n", void 0);
+})], f.prototype, "size", void 0), e([a({ type: Object })], f.prototype, "i18n", void 0);
 export { f as Gauge };
 
 //# sourceMappingURL=gauge2.js.map

package/dist/gauge/gauge2.js.map

@@ -1 +1 @@
-{"version":3,"file":"gauge2.js","names":["styles","_decorate","__decorate","gauge_default","GAUGE_GEOMETRY","thumbStyle","thumb","progressAngle","geometry","i18nDefaults","Gauge","LitElement","_args","#i18nController","I18nController","#paintedProgress","#progressFrame","useStyles","sourceMax","max","#geometry","progress","#normalizedThumb","#angleAtProgress","fillPath","#pathAtProgress","showFill","showDot","styleMap","attachInternals","#progressAnimation","#stopProgressAnimation","#targetProgress","props","#animateProgress","#normalizedValues","value","statusLabel","status","target","timing","#animationTiming","from","animation","paint","paintFrame","gaugeStyles","duration","milliseconds","easing","start","#pointAtAngle","sweepAngle","end","largeArcFlag","radians","angle","property"],"sources":["../../src/gauge/gauge.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type { Size, SupportStatus } from '@nvidia-elements/core/internal';\nimport { attachInternals, useStyles } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './gauge.css?inline';\n\nconst GAUGE_GEOMETRY = {\n  default: {\n    center: 64,\n    path: 'M 27.23 100.77 A 52 52 0 1 1 100.77 100.77',\n    radius: 52,\n    startAngle: 135,\n    sweepAngle: 270,\n    surfaceHeight: 128,\n    viewBox: '8.53 8.53 110.93 95.7'\n  },\n  half: {\n    center: 64,\n    path: 'M 12 64 A 52 52 0 0 1 116 64',\n    radius: 52,\n    startAngle: 180,\n    sweepAngle: 180,\n    surfaceHeight: 64,\n    viewBox: '8.53 8.53 110.93 58.93'\n  }\n} as const;\n\ntype GaugeGeometry = (typeof GAUGE_GEOMETRY)[keyof typeof GAUGE_GEOMETRY];\n\nconst thumbStyle = (thumb: 'dot' | 'needle', progressAngle: number, geometry: GaugeGeometry) => ({\n  [`--_${thumb}-angle`]: `${progressAngle}deg`,\n  [`--_${thumb}-origin`]: `${geometry.center}px ${geometry.center}px`,\n  [`--_${thumb}-start-angle`]: `${geometry.startAngle}deg`\n});\n\nconst i18nDefaults = {\n  danger: 'danger',\n  information: 'information',\n  success: 'success',\n  warning: 'warning'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-gauge\n * @description Use a gauge to show system resource usage.\n * @documentation https://nvidia.github.io/elements/docs/elements/gauge/\n * @since 2.0.4\n * @entrypoint \\@nvidia-elements/core/gauge\n * @slot - Content to display in the gauge center.\n * @cssprop --track-width\n * @cssprop --accent-color\n * @cssprop --background\n * @cssprop --needle-background\n * @cssprop --track-background\n * @cssprop --thumb-background\n * @cssprop --color\n * @cssprop --width\n * @cssprop --height\n * @cssprop --font-size\n * @cssprop --gap\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n * @stable false\n */\nexport class Gauge extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-gauge',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** The current `value` of the gauge. */\n  @property({ type: Number }) value = 0;\n\n  /** The `max` value of the gauge that the `value` is proportionally scaled to. */\n  @property({ type: Number }) max? = 100;\n\n  /** Four visual treatments represent the `status` of tasks. */\n  @property({ type: String, reflect: true }) status?: SupportStatus | 'neutral' = 'neutral';\n\n  /** Determines the gauge shape. Set `half` for a compact semi-circular arc. */\n  @property({ type: String, reflect: true }) shape?: 'half';\n\n  /** Controls the value indicator. Set `dot` for only the end dot or `needle` for a pointer. */\n  @property({ type: String, reflect: true }) thumb: 'fill' | 'dot' | 'needle' = 'fill';\n\n  /** T-shirt `size` of the gauge. */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** Progress the gauge paints, which eases toward the value instead of jumping to it. */\n  #paintedProgress = 0;\n\n  #progressAnimation?: Animation;\n\n  #progressFrame = 0;\n\n  #normalizedValues() {\n    const sourceMax = this.max;\n    const max = sourceMax !== undefined && Number.isFinite(sourceMax) && sourceMax > 0 ? sourceMax : 100;\n    const value = Number.isFinite(this.value) ? Math.min(Math.max(this.value, 0), max) : 0;\n    return { value, max };\n  }\n\n  render() {\n    const geometry = this.#geometry();\n    const progress = this.#paintedProgress;\n    const thumb = this.#normalizedThumb();\n    const progressAngle = this.#angleAtProgress(geometry, progress);\n    const fillPath = this.#pathAtProgress(geometry, progress);\n    const showFill = thumb === 'fill';\n    const showDot = progress > 0 && (thumb === 'fill' || thumb === 'dot');\n\n    return html`\n      <div internal-host>\n        <svg viewBox=${geometry.viewBox} role=\"presentation\" aria-hidden=\"true\">\n          <defs>\n            <mask id=\"background-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n              <path d=${geometry.path} class=\"background\"></path>\n            </mask>\n            <mask id=\"fill-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n              <path d=${fillPath} class=\"gauge\" ?empty=${progress <= 0}></path>\n            </mask>\n          </defs>\n          <foreignObject width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#background-mask)\">\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"background-surface\"></div>\n          </foreignObject>\n          <foreignObject class=\"fill-layer\" width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#fill-mask)\"\n            ?hidden=${!showFill || progress <= 0}>\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"fill-surface\"></div>\n          </foreignObject>\n          <circle class=\"fill-dot-end\" cx=${geometry.center + geometry.radius} cy=${geometry.center}\n            ?hidden=${!showDot}\n            style=${styleMap(thumbStyle('dot', progressAngle, geometry))}>\n          </circle>\n          <g class=\"needle\"\n            ?hidden=${thumb !== 'needle'}\n            style=${styleMap(thumbStyle('needle', progressAngle, geometry))}>\n            <line class=\"needle-line\" x1=${geometry.center} y1=${geometry.center} x2=${geometry.center + 40} y2=${geometry.center}></line>\n            <circle class=\"needle-hub\" cx=${geometry.center} cy=${geometry.center}></circle>\n          </g>\n        </svg>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'progressbar';\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    // settle the value, otherwise reattaching paints the frame where the animation stopped\n    if (this.#progressAnimation) {\n      this.#stopProgressAnimation();\n      this.#paintedProgress = this.#targetProgress();\n      this.requestUpdate();\n    }\n  }\n\n  willUpdate(props: PropertyValues<this>) {\n    super.willUpdate(props);\n\n    if (props.has('value') || props.has('max')) {\n      this.#animateProgress();\n    }\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    const { value, max } = this.#normalizedValues();\n    this._internals.ariaValueNow = `${value}`;\n    this._internals.ariaValueMax = `${max}`;\n    const { status } = this;\n    const statusLabel =\n      status !== undefined && status !== 'neutral' && status !== 'accent' ? this.i18n[status] : undefined;\n    this._internals.ariaLabel = statusLabel ?? this.i18n.information ?? null;\n  }\n\n  #targetProgress() {\n    const { value, max } = this.#normalizedValues();\n    return (value / max) * 100;\n  }\n\n  /**\n   * Eases the painted progress toward the value with the duration and easing declared in css, so\n   * that `prefers-reduced-motion` and a `--_animation-duration` override both settle immediately.\n   */\n  #animateProgress() {\n    const target = this.#targetProgress();\n    const timing = this.hasUpdated ? this.#animationTiming() : undefined;\n\n    this.#stopProgressAnimation();\n\n    if (!timing || target === this.#paintedProgress) {\n      this.#paintedProgress = target;\n      return;\n    }\n\n    const from = this.#paintedProgress;\n    // keyframeless animations only keep time, leaving every painted frame to `render`\n    const animation = this.animate(null, timing);\n    const paint = (progress: number) => {\n      this.#paintedProgress = from + (target - from) * progress;\n      this.requestUpdate();\n    };\n    const paintFrame = () => {\n      paint(animation.effect?.getComputedTiming().progress ?? 0);\n\n      if (animation.playState === 'running') {\n        this.#progressFrame = requestAnimationFrame(paintFrame);\n      }\n    };\n\n    animation.finished.then(\n      () => {\n        // a value that changes on the frame this settles already started the next animation\n        if (this.#progressAnimation === animation) {\n          this.#stopProgressAnimation();\n          paint(1);\n        }\n      },\n      () => undefined\n    );\n\n    this.#progressAnimation = animation;\n    this.#progressFrame = requestAnimationFrame(paintFrame);\n  }\n\n  #stopProgressAnimation() {\n    // only a browser render starts an animation, so server rendering never reaches these apis\n    if (this.#progressAnimation) {\n      cancelAnimationFrame(this.#progressFrame);\n      this.#progressAnimation.cancel();\n      this.#progressAnimation = undefined;\n    }\n  }\n\n  #animationTiming() {\n    const gaugeStyles = getComputedStyle(this);\n    const duration = gaugeStyles.getPropertyValue('--_animation-duration').trim();\n    const milliseconds = parseFloat(duration) * (duration.endsWith('ms') ? 1 : 1000);\n    const easing = gaugeStyles.getPropertyValue('--nve-ref-animation-easing-100').trim();\n\n    return milliseconds > 0 ? { duration: milliseconds, easing: easing || 'linear' } : undefined;\n  }\n\n  #angleAtProgress(geometry: GaugeGeometry, progress: number) {\n    return geometry.startAngle + geometry.sweepAngle * (progress / 100);\n  }\n\n  #pathAtProgress(geometry: GaugeGeometry, progress: number) {\n    const start = this.#pointAtAngle(geometry, geometry.startAngle);\n    const sweepAngle = geometry.sweepAngle * (progress / 100);\n    const end = this.#pointAtAngle(geometry, geometry.startAngle + sweepAngle);\n    const largeArcFlag = sweepAngle > 180 ? 1 : 0;\n    return `M ${start.x} ${start.y} A ${geometry.radius} ${geometry.radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;\n  }\n\n  #pointAtAngle(geometry: GaugeGeometry, angle: number) {\n    const radians = (angle * Math.PI) / 180;\n    return {\n      x: geometry.center + geometry.radius * Math.cos(radians),\n      y: geometry.center + geometry.radius * Math.sin(radians)\n    };\n  }\n\n  #geometry() {\n    return this.shape === 'half' ? GAUGE_GEOMETRY.half : GAUGE_GEOMETRY.default;\n  }\n\n  #normalizedThumb() {\n    return this.thumb === 'dot' || this.thumb === 'needle' ? this.thumb : 'fill';\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"gauge2.js","names":["styles","_decorate","__decorate","gauge_default","GAUGE_GEOMETRY","thumbStyle","thumb","progressAngle","geometry","i18nDefaults","Gauge","LitElement","_args","#i18nController","I18nController","#paintedProgress","#progressFrame","useStyles","sourceMax","max","#geometry","progress","#normalizedThumb","#angleAtProgress","fillPath","#pathAtProgress","showFill","showDot","styleMap","attachInternals","#progressAnimation","#stopProgressAnimation","#targetProgress","props","#animateProgress","#normalizedValues","value","statusLabel","status","target","timing","#animationTiming","from","animation","paint","paintFrame","gaugeStyles","duration","milliseconds","easing","start","#pointAtAngle","sweepAngle","end","largeArcFlag","radians","angle","property"],"sources":["../../src/gauge/gauge.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport type { Size, SupportStatus } from '@nvidia-elements/core/internal';\nimport { attachInternals } from '@nvidia-elements/foundations/internal/a11y';\nimport { useStyles } from '@nvidia-elements/foundations/internal/styles';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './gauge.css?inline';\n\nconst GAUGE_GEOMETRY = {\n  default: {\n    center: 64,\n    path: 'M 27.23 100.77 A 52 52 0 1 1 100.77 100.77',\n    radius: 52,\n    startAngle: 135,\n    sweepAngle: 270,\n    surfaceHeight: 128,\n    viewBox: '8.53 8.53 110.93 95.7'\n  },\n  half: {\n    center: 64,\n    path: 'M 12 64 A 52 52 0 0 1 116 64',\n    radius: 52,\n    startAngle: 180,\n    sweepAngle: 180,\n    surfaceHeight: 64,\n    viewBox: '8.53 8.53 110.93 58.93'\n  }\n} as const;\n\ntype GaugeGeometry = (typeof GAUGE_GEOMETRY)[keyof typeof GAUGE_GEOMETRY];\n\nconst thumbStyle = (thumb: 'dot' | 'needle', progressAngle: number, geometry: GaugeGeometry) => ({\n  [`--_${thumb}-angle`]: `${progressAngle}deg`,\n  [`--_${thumb}-origin`]: `${geometry.center}px ${geometry.center}px`,\n  [`--_${thumb}-start-angle`]: `${geometry.startAngle}deg`\n});\n\nconst i18nDefaults = {\n  danger: 'danger',\n  information: 'information',\n  success: 'success',\n  warning: 'warning'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-gauge\n * @description Use a gauge to show system resource usage.\n * @documentation https://nvidia.github.io/elements/docs/elements/gauge/\n * @since 2.0.4\n * @entrypoint \\@nvidia-elements/core/gauge\n * @slot - Content to display in the gauge center.\n * @cssprop --track-width\n * @cssprop --accent-color\n * @cssprop --background\n * @cssprop --needle-background\n * @cssprop --track-background\n * @cssprop --thumb-background\n * @cssprop --color\n * @cssprop --width\n * @cssprop --height\n * @cssprop --font-size\n * @cssprop --gap\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role\n * @stable false\n */\nexport class Gauge extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-gauge',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** The current `value` of the gauge. */\n  @property({ type: Number }) value = 0;\n\n  /** The `max` value of the gauge that the `value` is proportionally scaled to. */\n  @property({ type: Number }) max? = 100;\n\n  /** Four visual treatments represent the `status` of tasks. */\n  @property({ type: String, reflect: true }) status?: SupportStatus | 'neutral' = 'neutral';\n\n  /** Determines the gauge shape. Set `half` for a compact semi-circular arc. */\n  @property({ type: String, reflect: true }) shape?: 'half';\n\n  /** Controls the value indicator. Set `dot` for only the end dot or `needle` for a pointer. */\n  @property({ type: String, reflect: true }) thumb: 'fill' | 'dot' | 'needle' = 'fill';\n\n  /** T-shirt `size` of the gauge. */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** Progress the gauge paints, which eases toward the value instead of jumping to it. */\n  #paintedProgress = 0;\n\n  #progressAnimation?: Animation;\n\n  #progressFrame = 0;\n\n  #normalizedValues() {\n    const sourceMax = this.max;\n    const max = sourceMax !== undefined && Number.isFinite(sourceMax) && sourceMax > 0 ? sourceMax : 100;\n    const value = Number.isFinite(this.value) ? Math.min(Math.max(this.value, 0), max) : 0;\n    return { value, max };\n  }\n\n  render() {\n    const geometry = this.#geometry();\n    const progress = this.#paintedProgress;\n    const thumb = this.#normalizedThumb();\n    const progressAngle = this.#angleAtProgress(geometry, progress);\n    const fillPath = this.#pathAtProgress(geometry, progress);\n    const showFill = thumb === 'fill';\n    const showDot = progress > 0 && (thumb === 'fill' || thumb === 'dot');\n\n    return html`\n      <div internal-host>\n        <svg viewBox=${geometry.viewBox} role=\"presentation\" aria-hidden=\"true\">\n          <defs>\n            <mask id=\"background-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n              <path d=${geometry.path} class=\"background\"></path>\n            </mask>\n            <mask id=\"fill-mask\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"128\" height=${geometry.surfaceHeight}>\n              <path d=${fillPath} class=\"gauge\" ?empty=${progress <= 0}></path>\n            </mask>\n          </defs>\n          <foreignObject width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#background-mask)\">\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"background-surface\"></div>\n          </foreignObject>\n          <foreignObject class=\"fill-layer\" width=\"128\" height=${geometry.surfaceHeight} mask=\"url(#fill-mask)\"\n            ?hidden=${!showFill || progress <= 0}>\n            <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"fill-surface\"></div>\n          </foreignObject>\n          <circle class=\"fill-dot-end\" cx=${geometry.center + geometry.radius} cy=${geometry.center}\n            ?hidden=${!showDot}\n            style=${styleMap(thumbStyle('dot', progressAngle, geometry))}>\n          </circle>\n          <g class=\"needle\"\n            ?hidden=${thumb !== 'needle'}\n            style=${styleMap(thumbStyle('needle', progressAngle, geometry))}>\n            <line class=\"needle-line\" x1=${geometry.center} y1=${geometry.center} x2=${geometry.center + 40} y2=${geometry.center}></line>\n            <circle class=\"needle-hub\" cx=${geometry.center} cy=${geometry.center}></circle>\n          </g>\n        </svg>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'progressbar';\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    // settle the value, otherwise reattaching paints the frame where the animation stopped\n    if (this.#progressAnimation) {\n      this.#stopProgressAnimation();\n      this.#paintedProgress = this.#targetProgress();\n      this.requestUpdate();\n    }\n  }\n\n  willUpdate(props: PropertyValues<this>) {\n    super.willUpdate(props);\n\n    if (props.has('value') || props.has('max')) {\n      this.#animateProgress();\n    }\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    const { value, max } = this.#normalizedValues();\n    this._internals.ariaValueNow = `${value}`;\n    this._internals.ariaValueMax = `${max}`;\n    const { status } = this;\n    const statusLabel =\n      status !== undefined && status !== 'neutral' && status !== 'accent' ? this.i18n[status] : undefined;\n    this._internals.ariaLabel = statusLabel ?? this.i18n.information ?? null;\n  }\n\n  #targetProgress() {\n    const { value, max } = this.#normalizedValues();\n    return (value / max) * 100;\n  }\n\n  /**\n   * Eases the painted progress toward the value with the duration and easing declared in css, so\n   * that `prefers-reduced-motion` and a `--_animation-duration` override both settle immediately.\n   */\n  #animateProgress() {\n    const target = this.#targetProgress();\n    const timing = this.hasUpdated ? this.#animationTiming() : undefined;\n\n    this.#stopProgressAnimation();\n\n    if (!timing || target === this.#paintedProgress) {\n      this.#paintedProgress = target;\n      return;\n    }\n\n    const from = this.#paintedProgress;\n    // keyframeless animations only keep time, leaving every painted frame to `render`\n    const animation = this.animate(null, timing);\n    const paint = (progress: number) => {\n      this.#paintedProgress = from + (target - from) * progress;\n      this.requestUpdate();\n    };\n    const paintFrame = () => {\n      paint(animation.effect?.getComputedTiming().progress ?? 0);\n\n      if (animation.playState === 'running') {\n        this.#progressFrame = requestAnimationFrame(paintFrame);\n      }\n    };\n\n    animation.finished.then(\n      () => {\n        // a value that changes on the frame this settles already started the next animation\n        if (this.#progressAnimation === animation) {\n          this.#stopProgressAnimation();\n          paint(1);\n        }\n      },\n      () => undefined\n    );\n\n    this.#progressAnimation = animation;\n    this.#progressFrame = requestAnimationFrame(paintFrame);\n  }\n\n  #stopProgressAnimation() {\n    // only a browser render starts an animation, so server rendering never reaches these apis\n    if (this.#progressAnimation) {\n      cancelAnimationFrame(this.#progressFrame);\n      this.#progressAnimation.cancel();\n      this.#progressAnimation = undefined;\n    }\n  }\n\n  #animationTiming() {\n    const gaugeStyles = getComputedStyle(this);\n    const duration = gaugeStyles.getPropertyValue('--_animation-duration').trim();\n    const milliseconds = parseFloat(duration) * (duration.endsWith('ms') ? 1 : 1000);\n    const easing = gaugeStyles.getPropertyValue('--nve-ref-animation-easing-100').trim();\n\n    return milliseconds > 0 ? { duration: milliseconds, easing: easing || 'linear' } : undefined;\n  }\n\n  #angleAtProgress(geometry: GaugeGeometry, progress: number) {\n    return geometry.startAngle + geometry.sweepAngle * (progress / 100);\n  }\n\n  #pathAtProgress(geometry: GaugeGeometry, progress: number) {\n    const start = this.#pointAtAngle(geometry, geometry.startAngle);\n    const sweepAngle = geometry.sweepAngle * (progress / 100);\n    const end = this.#pointAtAngle(geometry, geometry.startAngle + sweepAngle);\n    const largeArcFlag = sweepAngle > 180 ? 1 : 0;\n    return `M ${start.x} ${start.y} A ${geometry.radius} ${geometry.radius} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`;\n  }\n\n  #pointAtAngle(geometry: GaugeGeometry, angle: number) {\n    const radians = (angle * Math.PI) / 180;\n    return {\n      x: geometry.center + geometry.radius * Math.cos(radians),\n      y: geometry.center + geometry.radius * Math.sin(radians)\n    };\n  }\n\n  #geometry() {\n    return this.shape === 'half' ? GAUGE_GEOMETRY.half : GAUGE_GEOMETRY.default;\n  }\n\n  #normalizedThumb() {\n    return this.thumb === 'dot' || this.thumb === 'needle' ? this.thumb : 'fill';\n  }\n}\n"],"mappings":"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"}

package/dist/ghost/ghost2.js

@@ -1,28 +1,28 @@
-import { useStyles as e } from "../internal/styles/index.js";
-import t from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
-import n from "./ghost.js";
-import { LitElement as r, html as i } from "lit";
-import { property as a } from "lit/decorators/property.js";
+import e from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
+import t from "./ghost.js";
+import { LitElement as n, html as r } from "lit";
+import { property as i } from "lit/decorators/property.js";
+import { useStyles as a } from "@nvidia-elements/foundations/internal/styles";
 // src/ghost/ghost.ts
-var o = class extends r {
+var o = class extends n {
 	constructor(...e) {
 		super(...e), this.layers = 1;
 	}
 	static {
-		this.styles = e([n]);
+		this.styles = a([t]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-ghost",
-			version: "2.23.4"
+			version: "2.23.6"
 		};
 	}
 	render() {
 		let e = Number.isFinite(this.layers) ? Math.min(3, Math.max(1, Math.trunc(this.layers))) : 1;
-		return i`<div internal-host inert aria-hidden="true" style="${`--_back-layers:${e - 1}`}">${Array.from({ length: e - 1 }, (t, n) => i`<div class="surface rear" style="${`--_layer:${e - n - 1}`}"></div>`)}<div class="surface front"><slot></slot></div></div>`;
+		return r`<div internal-host inert aria-hidden="true" style="${`--_back-layers:${e - 1}`}">${Array.from({ length: e - 1 }, (t, n) => r`<div class="surface rear" style="${`--_layer:${e - n - 1}`}"></div>`)}<div class="surface front"><slot></slot></div></div>`;
 	}
 };
-t([a({ type: Number })], o.prototype, "layers", void 0);
+e([i({ type: Number })], o.prototype, "layers", void 0);
 export { o as Ghost };
 
 //# sourceMappingURL=ghost2.js.map

package/dist/ghost/ghost2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ghost2.js","names":["styles","_decorate","__decorate","ghost_default","Ghost","LitElement","_args","useStyles","layers","index","property"],"sources":["../../src/ghost/ghost.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 { useStyles } from '@nvidia-elements/core/internal';\nimport styles from './ghost.css?inline';\n\n/**\n * @element nve-ghost\n * @description An inert visual preview of content or its prospective placement. Applications control its geometry, movement, and accessible feedback.\n * @documentation https://nvidia.github.io/elements/docs/elements/ghost/\n * @since 0.0.0\n * @stable false\n * @entrypoint \\@nvidia-elements/core/ghost\n * @slot - Presentation content for the preview.\n * @cssprop --background\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --stack-offset-x - Nonnegative horizontal distance between layers. Defaults to 4px.\n * @cssprop --stack-offset-y - Nonnegative vertical distance between layers. Defaults to 4px.\n * @cssprop --padding\n */\nexport class Ghost extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = { tag: 'nve-ghost', version: '0.0.0' };\n\n  /** Number of visual surfaces. Rendering truncates fractions and clamps to one through three; nonfinite values use one. */\n  @property({ type: Number }) layers = 1;\n\n  render() {\n    const layers = Number.isFinite(this.layers) ? Math.min(3, Math.max(1, Math.trunc(this.layers))) : 1;\n    return html`\n      <div internal-host inert aria-hidden=\"true\" style=${`--_back-layers:${layers - 1}`}>\n        ${Array.from(\n          { length: layers - 1 },\n          (_, index) => html`<div class=\"surface rear\" style=${`--_layer:${layers - index - 1}`}></div>`\n        )}\n        <div class=\"surface front\"><slot></slot></div>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;AAwBA,IAAaI,IAAb,cAA2BC,EAAW;;EAMC,A,aAAA,KAAA,SAAA;;;EALrB,KAAA,SAAAE,EAAU,CAACP,CAAM,CAAC;;;EAEP,KAAA,WAAA;GAAE,KAAK;GAAa,SAAS;EAAQ;;CAKhE,SAAS;EACP,IAAMQ,IAAS,OAAO,SAAS,KAAK,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,MAAM,CAAC,CAAC,IAAI;EAClG,OAAO,CAAI,sDAC2C,kBAAkBA,IAAS,IAAI,IAC/E,MAAM,KACN,EAAE,QAAQA,IAAS,EAAE,IACpB,GAAG,MAAU,CAAI,oCAAmC,YAAYA,IAASC,IAAQ,IAAI,SACxF,EAAE;CAIR;AACF;AAdGR,EAAA,CAAAS,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAN,EAAA,WAAA,UAAA,KAAA,CAAA"}
+{"version":3,"file":"ghost2.js","names":["styles","_decorate","__decorate","ghost_default","Ghost","LitElement","_args","useStyles","layers","index","property"],"sources":["../../src/ghost/ghost.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 { useStyles } from '@nvidia-elements/foundations/internal/styles';\nimport styles from './ghost.css?inline';\n\n/**\n * @element nve-ghost\n * @description An inert visual preview of content or its prospective placement. Applications control its geometry, movement, and accessible feedback.\n * @documentation https://nvidia.github.io/elements/docs/elements/ghost/\n * @since 0.0.0\n * @stable false\n * @entrypoint \\@nvidia-elements/core/ghost\n * @slot - Presentation content for the preview.\n * @cssprop --background\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --stack-offset-x - Nonnegative horizontal distance between layers. Defaults to 4px.\n * @cssprop --stack-offset-y - Nonnegative vertical distance between layers. Defaults to 4px.\n * @cssprop --padding\n */\nexport class Ghost extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = { tag: 'nve-ghost', version: '0.0.0' };\n\n  /** Number of visual surfaces. Rendering truncates fractions and clamps to one through three; nonfinite values use one. */\n  @property({ type: Number }) layers = 1;\n\n  render() {\n    const layers = Number.isFinite(this.layers) ? Math.min(3, Math.max(1, Math.trunc(this.layers))) : 1;\n    return html`\n      <div internal-host inert aria-hidden=\"true\" style=${`--_back-layers:${layers - 1}`}>\n        ${Array.from(\n          { length: layers - 1 },\n          (_, index) => html`<div class=\"surface rear\" style=${`--_layer:${layers - index - 1}`}></div>`\n        )}\n        <div class=\"surface front\"><slot></slot></div>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;AAwBA,IAAaI,IAAb,cAA2BC,EAAW;;EAMC,A,aAAA,KAAA,SAAA;;;EALrB,KAAA,SAAAE,EAAU,CAACP,CAAM,CAAC;;;EAEP,KAAA,WAAA;GAAE,KAAK;GAAa,SAAS;EAAQ;;CAKhE,SAAS;EACP,IAAMQ,IAAS,OAAO,SAAS,KAAK,MAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,MAAM,CAAC,CAAC,IAAI;EAClG,OAAO,CAAI,sDAC2C,kBAAkBA,IAAS,IAAI,IAC/E,MAAM,KACN,EAAE,QAAQA,IAAS,EAAE,IACpB,GAAG,MAAU,CAAI,oCAAmC,YAAYA,IAASC,IAAQ,IAAI,SACxF,EAAE;CAIR;AACF;AAdGR,EAAA,CAAAS,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAN,EAAA,WAAA,UAAA,KAAA,CAAA"}

package/dist/grid/cell/cell2.js

@@ -1,23 +1,23 @@
-import { attachInternals as e } from "../../internal/utils/a11y.js";
-import { useStyles as t } from "../../internal/styles/index.js";
-import n from "./cell.js";
-import { LitElement as r, html as i } from "lit";
+import e from "./cell.js";
+import { attachInternals as t } from "@nvidia-elements/foundations/internal/a11y";
+import { LitElement as n, html as r } from "lit";
+import { useStyles as i } from "@nvidia-elements/foundations/internal/styles";
 // src/grid/cell/cell.ts
-var a = class extends r {
+var a = class extends n {
 	static {
-		this.styles = t([n]);
+		this.styles = i([e]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-grid-cell",
-			version: "2.23.4"
+			version: "2.23.6"
 		};
 	}
 	render() {
-		return i`<div internal-host focusable="active"><slot></slot></div>`;
+		return r`<div internal-host focusable="active"><slot></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), e(this), this._internals.role = "gridcell";
+		super.connectedCallback(), t(this), this._internals.role = "gridcell";
 	}
 };
 export { a as GridCell };

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

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

package/dist/grid/column/column2.js

@@ -1,29 +1,29 @@
 import { appendRootNodeStyle as e } from "../../internal/utils/dom.js";
-import { attachInternals as t } from "../../internal/utils/a11y.js";
-import { useStyles as n } from "../../internal/styles/index.js";
-import r from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
-import i from "./column.js";
-import { LitElement as a, html as o } from "lit";
-import { property as s } from "lit/decorators/property.js";
+import t from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
+import n from "./column.js";
+import { attachInternals as r } from "@nvidia-elements/foundations/internal/a11y";
+import { LitElement as i, html as a } from "lit";
+import { property as o } from "lit/decorators/property.js";
+import { useStyles as s } from "@nvidia-elements/foundations/internal/styles";
 // src/grid/column/column.ts
-var c = class r extends a {
+var c = class t extends i {
 	static {
-		this.styles = n([i]);
+		this.styles = s([n]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-grid-column",
-			version: "2.23.4"
+			version: "2.23.6"
 		};
 	}
 	get #e() {
 		return this.parentElement.parentElement;
 	}
 	render() {
-		return o`<div internal-host focusable="active"><slot></slot><slot name="actions"></slot></div>`;
+		return a`<div internal-host focusable="active"><slot></slot><slot name="actions"></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), t(this), this._internals.role = "columnheader", this.addEventListener("sort", this.#t);
+		super.connectedCallback(), r(this), this._internals.role = "columnheader", this.addEventListener("sort", this.#t);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.removeEventListener("sort", this.#t);
@@ -50,7 +50,7 @@ var c = class r extends a {
 		this.#n ? this.#n.replaceSync(i) : this.#n = e(this.#e, i), this.setAttribute(t, "");
 	}
 	#i() {
-		let e = Array.from(this.parentElement.querySelectorAll(r.metadata.tag)), t = e.slice(e.indexOf(this) + 1, e.length), n = this.getBoundingClientRect(), i = this.#e.getBoundingClientRect(), a = this.offsetLeft < i.width / 2 ? "left" : "right", o = n.left - i.left, s = t.reduce((e, t) => e + t.getBoundingClientRect().width, 0), c = `[id='${this.#e.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),
+		let e = Array.from(this.parentElement.querySelectorAll(t.metadata.tag)), n = e.slice(e.indexOf(this) + 1, e.length), r = this.getBoundingClientRect(), i = this.#e.getBoundingClientRect(), a = this.offsetLeft < i.width / 2 ? "left" : "right", o = r.left - i.left, s = n.reduce((e, t) => e + t.getBoundingClientRect().width, 0), c = `[id='${this.#e.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),
         [id='${this.#e.id}'] nve-grid-cell:nth-of-type(${this.ariaColIndex})`;
 		return {
 			side: a,
@@ -81,17 +81,17 @@ var c = class r extends a {
         }`);
 	}
 };
-r([s({
+t([o({
 	type: String,
 	reflect: !0
-})], c.prototype, "width", void 0), r([s({
+})], c.prototype, "width", void 0), t([o({
 	type: String,
 	reflect: !0
-})], c.prototype, "position", void 0), r([s({
+})], c.prototype, "position", void 0), t([o({
 	type: String,
 	reflect: !0,
 	attribute: "column-align"
-})], c.prototype, "columnAlign", void 0), r([s({
+})], c.prototype, "columnAlign", void 0), t([o({
 	type: String,
 	reflect: !0,
 	attribute: "aria-colindex"

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

@@ -1 +1 @@
-{"version":3,"file":"column2.js","names":["styles","_decorate","__decorate","column_default","GridColumn","LitElement","useStyles","#grid","attachInternals","#onSort","props","#computeColumnAlignment","#computeColumnPositions","#positionStylesheet","#buildFixedStyles","combinedStyle","positionStyle","borderStyle","appendRootNodeStyle","side","columns","rightColumns","position","gridPosition","leftStyle","rightStyle","width","c","selector","#buildBorderStyle","isLastLeft","isLastRight","property"],"sources":["../../../src/grid/column/column.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { useStyles, attachInternals, appendRootNodeStyle } from '@nvidia-elements/core/internal';\nimport type { Grid } from '@nvidia-elements/core/grid';\nimport styles from './column.css?inline';\n\n/**\n * @element nve-grid-column\n * @description Defines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it.\n * @documentation https://nvidia.github.io/elements/docs/elements/data-grid/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - Column heading text or controls.\n * @slot actions - slot for column actions\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --min-width\n * @cssprop --justify-content\n * @cssprop --border-left\n * @cssprop --border-right\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\nexport class GridColumn extends LitElement {\n  /**\n   * Only set a fixed px width when you know the grid width. Most cases this should remain unset.\n   * If the total width of all columns is less than the grid width then the last column fills the remaining space.\n   * By default column widths are evenly divided unless width is explicitly provided.\n   */\n  @property({ type: String, reflect: true }) width: string;\n\n  /**\n   * Set the `position` property or attribute to `fixed` or `sticky` to make the column fixed or sticky.\n   * Fixed columns do not scroll horizontally with the grid. Sticky columns scroll horizontally with the grid\n   * until the column reaches the edge of the grid.\n   */\n  @property({ type: String, reflect: true }) position: 'fixed' | 'sticky' | '';\n\n  /**\n   * Control the content alignment within a given column.\n   */\n  @property({ type: String, reflect: true, attribute: 'column-align' }) columnAlign: 'start' | 'center' | 'end';\n\n  /**\n   * @private\n   */\n  @property({ type: String, reflect: true, attribute: 'aria-colindex' }) ariaColIndex: string; // eslint-disable-line local/reserved-property-names\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-column',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  get #grid() {\n    return this.parentElement!.parentElement as Grid;\n  }\n\n  render() {\n    return html`\n      <div internal-host focusable=\"active\">\n        <slot></slot>\n        <slot name=\"actions\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'columnheader';\n    this.addEventListener('sort', this.#onSort);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('sort', this.#onSort);\n  }\n\n  #onSort = (e: Event) => {\n    this.ariaSort = (e as CustomEvent<{ next: string }>).detail.next;\n  };\n\n  willUpdate(props: PropertyValues<this>) {\n    if (props.has('width') && this.width && Number.isFinite(Number(this.width))) {\n      this.width = `${this.width}px`; // eslint-disable-line local/stateless-property\n    }\n  }\n\n  async updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    if (props.get('columnAlign') !== this.columnAlign) {\n      this.#computeColumnAlignment();\n    }\n\n    if (props.get('position') !== this.position) {\n      this.#computeColumnPositions();\n    }\n\n    if (props.get('ariaColIndex') !== this.ariaColIndex) {\n      this.#computeColumnPositions();\n      this.#computeColumnAlignment();\n    }\n\n    if (props.get('width') !== this.width) {\n      this.dispatchEvent(new CustomEvent('nve-grid-column-resize', { bubbles: true, composed: true }));\n    }\n  }\n\n  #positionStylesheet: CSSStyleSheet;\n\n  #computeColumnPositions() {\n    if (this.position !== 'fixed') {\n      this.removeAttribute('left');\n      this.removeAttribute('right');\n      this.#positionStylesheet?.replaceSync('');\n      return;\n    }\n\n    const { side, positionStyle, borderStyle } = this.#buildFixedStyles();\n    const combinedStyle = `${positionStyle}\\n${borderStyle}`;\n\n    if (this.#positionStylesheet) {\n      this.#positionStylesheet.replaceSync(combinedStyle);\n    } else {\n      this.#positionStylesheet = appendRootNodeStyle(this.#grid, combinedStyle);\n    }\n\n    this.setAttribute(side, '');\n  }\n\n  #buildFixedStyles() {\n    const columns = Array.from(this.parentElement!.querySelectorAll<GridColumn>(GridColumn.metadata.tag));\n    const rightColumns = columns.slice(columns.indexOf(this) + 1, columns.length);\n    const position = this.getBoundingClientRect();\n    const gridPosition = this.#grid.getBoundingClientRect();\n    const side = this.offsetLeft < gridPosition.width / 2 ? 'left' : 'right';\n    const leftStyle = position.left - gridPosition.left;\n    const rightStyle = rightColumns.reduce((width, c) => width + c.getBoundingClientRect().width, 0);\n    const selector = `[id='${this.#grid.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),\n        [id='${this.#grid.id}'] nve-grid-cell:nth-of-type(${this.ariaColIndex})`;\n\n    const positionStyle = `\n        ${selector} {\n          position: sticky;\n          z-index: 99;\n          ${side === 'left' ? `left: ${leftStyle}px;` : `right: ${rightStyle}px;`}\n        }\n      `;\n\n    const borderStyle = this.#buildBorderStyle(selector, side);\n    return { side, positionStyle, borderStyle };\n  }\n\n  #buildBorderStyle(selector: string, side: 'left' | 'right') {\n    const isLastLeft = side === 'left' && (this.nextElementSibling as GridColumn)?.position !== this.position;\n    const isLastRight = side === 'right' && (this.previousElementSibling as GridColumn)?.position !== this.position;\n\n    if (!isLastLeft && !isLastRight) {\n      return '';\n    }\n\n    return `\n        ${selector} {\n          box-shadow: var(--scroll-shadow);\n          clip-path: inset(0px ${isLastLeft ? '-4px' : '0'} 0px ${isLastRight ? '-4px' : '0'});\n          --border-${side === 'right' ? 'left' : 'right'}: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n        }\n      `;\n  }\n\n  #computeColumnAlignment() {\n    if (this.columnAlign !== undefined) {\n      appendRootNodeStyle(\n        this.#grid,\n        `[id='${this.#grid.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),\n        [id='${this.#grid.id}'] nve-grid-cell:nth-of-type(${this.ariaColIndex}) {\n          --justify-content: ${this.columnAlign}\n        }`\n      );\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"column2.js","names":["styles","_decorate","__decorate","column_default","GridColumn","LitElement","useStyles","#grid","attachInternals","#onSort","props","#computeColumnAlignment","#computeColumnPositions","#positionStylesheet","#buildFixedStyles","combinedStyle","positionStyle","borderStyle","appendRootNodeStyle","side","columns","rightColumns","position","gridPosition","leftStyle","rightStyle","width","c","selector","#buildBorderStyle","isLastLeft","isLastRight","property"],"sources":["../../../src/grid/column/column.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { appendRootNodeStyle } from '@nvidia-elements/core/internal';\nimport { attachInternals } from '@nvidia-elements/foundations/internal/a11y';\nimport { useStyles } from '@nvidia-elements/foundations/internal/styles';\nimport type { Grid } from '@nvidia-elements/core/grid';\nimport styles from './column.css?inline';\n\n/**\n * @element nve-grid-column\n * @description Defines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it.\n * @documentation https://nvidia.github.io/elements/docs/elements/data-grid/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - Column heading text or controls.\n * @slot actions - slot for column actions\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --min-width\n * @cssprop --justify-content\n * @cssprop --border-left\n * @cssprop --border-right\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\nexport class GridColumn extends LitElement {\n  /**\n   * Only set a fixed px width when you know the grid width. Most cases this should remain unset.\n   * If the total width of all columns is less than the grid width then the last column fills the remaining space.\n   * By default column widths are evenly divided unless width is explicitly provided.\n   */\n  @property({ type: String, reflect: true }) width: string;\n\n  /**\n   * Set the `position` property or attribute to `fixed` or `sticky` to make the column fixed or sticky.\n   * Fixed columns do not scroll horizontally with the grid. Sticky columns scroll horizontally with the grid\n   * until the column reaches the edge of the grid.\n   */\n  @property({ type: String, reflect: true }) position: 'fixed' | 'sticky' | '';\n\n  /**\n   * Control the content alignment within a given column.\n   */\n  @property({ type: String, reflect: true, attribute: 'column-align' }) columnAlign: 'start' | 'center' | 'end';\n\n  /**\n   * @private\n   */\n  @property({ type: String, reflect: true, attribute: 'aria-colindex' }) ariaColIndex: string; // eslint-disable-line local/reserved-property-names\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-column',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  get #grid() {\n    return this.parentElement!.parentElement as Grid;\n  }\n\n  render() {\n    return html`\n      <div internal-host focusable=\"active\">\n        <slot></slot>\n        <slot name=\"actions\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'columnheader';\n    this.addEventListener('sort', this.#onSort);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('sort', this.#onSort);\n  }\n\n  #onSort = (e: Event) => {\n    this.ariaSort = (e as CustomEvent<{ next: string }>).detail.next;\n  };\n\n  willUpdate(props: PropertyValues<this>) {\n    if (props.has('width') && this.width && Number.isFinite(Number(this.width))) {\n      this.width = `${this.width}px`; // eslint-disable-line local/stateless-property\n    }\n  }\n\n  async updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    if (props.get('columnAlign') !== this.columnAlign) {\n      this.#computeColumnAlignment();\n    }\n\n    if (props.get('position') !== this.position) {\n      this.#computeColumnPositions();\n    }\n\n    if (props.get('ariaColIndex') !== this.ariaColIndex) {\n      this.#computeColumnPositions();\n      this.#computeColumnAlignment();\n    }\n\n    if (props.get('width') !== this.width) {\n      this.dispatchEvent(new CustomEvent('nve-grid-column-resize', { bubbles: true, composed: true }));\n    }\n  }\n\n  #positionStylesheet: CSSStyleSheet;\n\n  #computeColumnPositions() {\n    if (this.position !== 'fixed') {\n      this.removeAttribute('left');\n      this.removeAttribute('right');\n      this.#positionStylesheet?.replaceSync('');\n      return;\n    }\n\n    const { side, positionStyle, borderStyle } = this.#buildFixedStyles();\n    const combinedStyle = `${positionStyle}\\n${borderStyle}`;\n\n    if (this.#positionStylesheet) {\n      this.#positionStylesheet.replaceSync(combinedStyle);\n    } else {\n      this.#positionStylesheet = appendRootNodeStyle(this.#grid, combinedStyle);\n    }\n\n    this.setAttribute(side, '');\n  }\n\n  #buildFixedStyles() {\n    const columns = Array.from(this.parentElement!.querySelectorAll<GridColumn>(GridColumn.metadata.tag));\n    const rightColumns = columns.slice(columns.indexOf(this) + 1, columns.length);\n    const position = this.getBoundingClientRect();\n    const gridPosition = this.#grid.getBoundingClientRect();\n    const side = this.offsetLeft < gridPosition.width / 2 ? 'left' : 'right';\n    const leftStyle = position.left - gridPosition.left;\n    const rightStyle = rightColumns.reduce((width, c) => width + c.getBoundingClientRect().width, 0);\n    const selector = `[id='${this.#grid.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),\n        [id='${this.#grid.id}'] nve-grid-cell:nth-of-type(${this.ariaColIndex})`;\n\n    const positionStyle = `\n        ${selector} {\n          position: sticky;\n          z-index: 99;\n          ${side === 'left' ? `left: ${leftStyle}px;` : `right: ${rightStyle}px;`}\n        }\n      `;\n\n    const borderStyle = this.#buildBorderStyle(selector, side);\n    return { side, positionStyle, borderStyle };\n  }\n\n  #buildBorderStyle(selector: string, side: 'left' | 'right') {\n    const isLastLeft = side === 'left' && (this.nextElementSibling as GridColumn)?.position !== this.position;\n    const isLastRight = side === 'right' && (this.previousElementSibling as GridColumn)?.position !== this.position;\n\n    if (!isLastLeft && !isLastRight) {\n      return '';\n    }\n\n    return `\n        ${selector} {\n          box-shadow: var(--scroll-shadow);\n          clip-path: inset(0px ${isLastLeft ? '-4px' : '0'} 0px ${isLastRight ? '-4px' : '0'});\n          --border-${side === 'right' ? 'left' : 'right'}: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n        }\n      `;\n  }\n\n  #computeColumnAlignment() {\n    if (this.columnAlign !== undefined) {\n      appendRootNodeStyle(\n        this.#grid,\n        `[id='${this.#grid.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),\n        [id='${this.#grid.id}'] nve-grid-cell:nth-of-type(${this.ariaColIndex}) {\n          --justify-content: ${this.columnAlign}\n        }`\n      );\n    }\n  }\n}\n"],"mappings":";;;;;;;;AA+BA,IAAaI,IAAb,MAAaA,UAAmBC,EAAW;;EAyBzB,KAAA,SAAAC,EAAU,CAACN,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,IAAIO,KAAQ;EACV,OAAO,KAAK,cAAe;CAC7B;CAEA,SAAS;EACP,OAAO,CAAI;CAMb;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxBC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,gBACvB,KAAK,iBAAiB,QAAQ,KAAKC,EAAO;CAC5C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,QAAQ,KAAKA,EAAO;CAC/C;CAEA,MAAW,MAAa;EACtB,KAAK,WAAY,EAAoC,OAAO;CAC9D;CAEA,WAAW,GAA6B;EACtC,AAAIC,EAAM,IAAI,OAAO,KAAK,KAAK,SAAS,OAAO,SAAS,OAAO,KAAK,KAAK,CAAC,MACxE,KAAK,QAAQ,GAAG,KAAK,MAAM;CAE/B;CAEA,MAAM,QAAQ,GAA6B;EAgBzC,AAfA,MAAM,QAAQA,CAAK,GAEfA,EAAM,IAAI,aAAa,MAAM,KAAK,eACpC,KAAKC,GAAwB,GAG3BD,EAAM,IAAI,UAAU,MAAM,KAAK,YACjC,KAAKE,GAAwB,GAG3BF,EAAM,IAAI,cAAc,MAAM,KAAK,iBACrC,KAAKE,GAAwB,GAC7B,KAAKD,GAAwB,IAG3BD,EAAM,IAAI,OAAO,MAAM,KAAK,SAC9B,KAAK,cAAc,IAAI,YAAY,0BAA0B;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAEnG;CAEA;CAEA,KAA0B;EACxB,IAAI,KAAK,aAAa,SAAS;GAG7B,AAFA,KAAK,gBAAgB,MAAM,GAC3B,KAAK,gBAAgB,OAAO,GAC5B,KAAKG,IAAqB,YAAY,EAAE;GACxC;EACF;EAEA,IAAM,EAAE,SAAM,kBAAe,mBAAgB,KAAKC,GAAkB,GAC9DC,IAAgB,GAAGC,EAAc,IAAIC;EAQ3C,AANI,KAAKJ,KACP,KAAKA,GAAoB,YAAYE,CAAa,IAElD,KAAKF,KAAsBK,EAAoB,KAAKX,IAAOQ,CAAa,GAG1E,KAAK,aAAaI,GAAM,EAAE;CAC5B;CAEA,KAAoB;EAClB,IAAMC,IAAU,MAAM,KAAK,KAAK,cAAe,iBAA6BhB,EAAW,SAAS,GAAG,CAAC,GAC9FiB,IAAeD,EAAQ,MAAMA,EAAQ,QAAQ,IAAI,IAAI,GAAGA,EAAQ,MAAM,GACtEE,IAAW,KAAK,sBAAsB,GACtCC,IAAe,KAAKhB,GAAM,sBAAsB,GAChDY,IAAO,KAAK,aAAaI,EAAa,QAAQ,IAAI,SAAS,SAC3DC,IAAYF,EAAS,OAAOC,EAAa,MACzCE,IAAaJ,EAAa,QAAQ,GAAO,MAAMK,IAAQC,EAAE,sBAAsB,CAAC,CAAC,OAAO,CAAC,GACzFC,IAAW,QAAQ,KAAKrB,GAAM,GAAG,iCAAiC,KAAK,aAAa;eAC/E,KAAKA,GAAM,GAAG,+BAA+B,KAAK,aAAa;EAW1E,OAAO;GAAE;GAAM,eAAA;UARTqB,EAAS;;;YAGPT,MAAS,SAAS,SAASK,EAAU,OAAO,UAAUC,EAAW,KAAA;;;GAK3C,aADV,KAAKI,GAAkBD,GAAUT,CACvB;EAAY;CAC5C;CAEA,GAAkB,GAAkB,GAAwB;EAC1D,IAAMW,IAAaX,MAAS,UAAW,KAAK,oBAAmC,aAAa,KAAK,UAC3FY,IAAcZ,MAAS,WAAY,KAAK,wBAAuC,aAAa,KAAK;EAMvG,OAJI,CAACW,KAAc,CAACC,IACX,KAGF;UACDH,EAAS;;iCAEcE,IAAa,SAAS,IAAI,OAAOC,IAAc,SAAS,IAAI;qBACxEZ,MAAS,UAAU,SAAS,QAAQ;;;CAGvD;CAEA,KAA0B;EACxB,AAAI,KAAK,gBAAgB,KAAA,KACvBD,EACE,KAAKX,IACL,QAAQ,KAAKA,GAAM,GAAG,iCAAiC,KAAK,aAAa;eAClE,KAAKA,GAAM,GAAG,+BAA+B,KAAK,aAAa;+BAC/C,KAAK,YAAA;UAE9B;CAEJ;AACF;AA9JGN,EAAA,CAAA+B,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA5B,EAAA,WAAA,SAAA,KAAA,CAAA,GAOxCH,EAAA,CAAA+B,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA5B,EAAA,WAAA,YAAA,KAAA,CAAA,GAKxCH,EAAA,CAAA+B,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAe,CAAC,CAAA,GAAA5B,EAAA,WAAA,eAAA,KAAA,CAAA,GAKnEH,EAAA,CAAA+B,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAgB,CAAC,CAAA,GAAA5B,EAAA,WAAA,gBAAA,KAAA,CAAA"}

package/dist/grid/footer/footer2.js

@@ -1,34 +1,34 @@
-import { attachInternals as e } from "../../internal/utils/a11y.js";
-import { hostAttr as t } from "../../internal/decorators/host-attr.js";
-import { useStyles as n } from "../../internal/styles/index.js";
-import r from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
-import i from "./footer.js";
-import { LitElement as a, html as o } from "lit";
+import { hostAttr as e } from "../../internal/decorators/host-attr.js";
+import t from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
+import n from "./footer.js";
+import { attachInternals as r } from "@nvidia-elements/foundations/internal/a11y";
+import { LitElement as i, html as a } from "lit";
+import { useStyles as o } from "@nvidia-elements/foundations/internal/styles";
 // src/grid/footer/footer.ts
-var s = class extends a {
+var s = class extends i {
 	constructor(...e) {
 		super(...e), this.slot = "footer";
 	}
 	static {
-		this.styles = n([i]);
+		this.styles = o([n]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-grid-footer",
-			version: "2.23.4"
+			version: "2.23.6"
 		};
 	}
 	static {
 		this.elementDefinitions = {};
 	}
 	render() {
-		return o`<div internal-host role="gridcell"><slot></slot></div>`;
+		return a`<div internal-host role="gridcell"><slot></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), e(this), this._internals.role = "row";
+		super.connectedCallback(), r(this), this._internals.role = "row";
 	}
 };
-r([t()], s.prototype, "slot", void 0);
+t([e()], s.prototype, "slot", void 0);
 export { s as GridFooter };
 
 //# sourceMappingURL=footer2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"footer2.js","names":["styles","_decorate","__decorate","footer_default","GridFooter","LitElement","_args","useStyles","attachInternals","hostAttr"],"sources":["../../../src/grid/footer/footer.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { useStyles, attachInternals, hostAttr } from '@nvidia-elements/core/internal';\nimport styles from './footer.css?inline';\n\n/**\n * @element nve-grid-footer\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @description Grid footer displays contextual information or user actions such as pagination.\n * @slot - Grid summary, pagination, or other footer controls.\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --height\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\nexport class GridFooter extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-footer',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {};\n\n  /** @private */\n  _internals: ElementInternals;\n\n  /** @private */\n  @hostAttr() slot = 'footer';\n\n  render() {\n    return html`\n      <div internal-host role=\"gridcell\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'row';\n  }\n}\n"],"mappings":";;;;;;;AAmBA,IAAaI,IAAb,cAAgCC,EAAW;;EActB,A,aAAA,KAAA,OAAA;;;EAbH,KAAA,SAAAE,EAAU,CAACP,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,CAAC;;CAQ7B,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxBQ,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;AAfGP,EAAA,CAAAQ,EAAS,CAAA,GAAAL,EAAA,WAAA,QAAA,KAAA,CAAA"}
+{"version":3,"file":"footer2.js","names":["styles","_decorate","__decorate","footer_default","GridFooter","LitElement","_args","useStyles","attachInternals","hostAttr"],"sources":["../../../src/grid/footer/footer.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 { hostAttr } from '@nvidia-elements/core/internal';\nimport { attachInternals } from '@nvidia-elements/foundations/internal/a11y';\nimport { useStyles } from '@nvidia-elements/foundations/internal/styles';\nimport styles from './footer.css?inline';\n\n/**\n * @element nve-grid-footer\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @description Grid footer displays contextual information or user actions such as pagination.\n * @slot - Grid summary, pagination, or other footer controls.\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --height\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\nexport class GridFooter extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-footer',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {};\n\n  /** @private */\n  _internals: ElementInternals;\n\n  /** @private */\n  @hostAttr() slot = 'footer';\n\n  render() {\n    return html`\n      <div internal-host role=\"gridcell\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'row';\n  }\n}\n"],"mappings":";;;;;;;AAqBA,IAAaI,IAAb,cAAgCC,EAAW;;EActB,A,aAAA,KAAA,OAAA;;;EAbH,KAAA,SAAAE,EAAU,CAACP,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,CAAC;;CAQ7B,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxBQ,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;AAfGP,EAAA,CAAAQ,EAAS,CAAA,GAAAL,EAAA,WAAA,QAAA,KAAA,CAAA"}