@nvidia-elements/core 0.0.7 → 0.0.8

package/dist/grid/cell/cell2.js

@@ -10,7 +10,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-grid-cell",
-			version: "0.0.7"
+			version: "0.0.8"
 		};
 	}
 	render() {

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

@@ -1 +1 @@
-{"version":3,"file":"column.js","names":[],"sources":["../../../src/grid/column/column.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --color: var(--nve-sys-text-muted-color);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-500);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: var(--nve-ref-size-1000);\n  --min-width: var(--nve-ref-size-1000);\n  --justify-content: start;\n  --border-left: 0;\n  --border-right: 0;\n  transition: box-shadow 300ms ease-in-out;\n}\n\n[internal-host] {\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  height: var(--height);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  min-width: var(--min-width);\n  border-left: var(--border-left);\n  border-right: var(--border-right);\n  justify-content: var(--justify-content);\n  display: flex;\n  align-items: center;\n  outline-offset: -5px;\n  white-space: nowrap;\n}\n\n:host([width='max-content']) {\n  --padding: var(--nve-ref-size-300);\n}\n\n::slotted(nve-sort-button),\n::slotted(nve-icon-button),\n::slotted(nve-sort-button),\n::slotted(nve-icon-button) {\n  margin-inline-start: auto;\n}\n\n@media (hover: hover) {\n  ::slotted(nve-sort-button),\n  ::slotted(nve-sort-button) {\n    opacity: 0;\n  }\n\n  ::slotted(nve-sort-button[sort='ascending']),\n  ::slotted(nve-sort-button[sort='descending']),\n  ::slotted(nve-sort-button[sort='ascending']),\n  ::slotted(nve-sort-button[sort='descending']),\n  :host(:focus-within) ::slotted(nve-sort-button),\n  :host(:hover) ::slotted(nve-sort-button),\n  :host(:focus-within) ::slotted(nve-sort-button),\n  :host(:hover) ::slotted(nve-sort-button) {\n    opacity: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"column.js","names":[],"sources":["../../../src/grid/column/column.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --color: var(--nve-sys-text-muted-color);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-500);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: var(--nve-ref-size-1000);\n  --min-width: var(--nve-ref-size-1000);\n  --justify-content: start;\n  --border-left: 0;\n  --border-right: 0;\n  transition: box-shadow 300ms ease-in-out;\n}\n\n[internal-host] {\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  height: var(--height);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  min-width: var(--min-width);\n  border-left: var(--border-left);\n  border-right: var(--border-right);\n  justify-content: var(--justify-content);\n  display: flex;\n  align-items: center;\n  outline-offset: -5px;\n  white-space: nowrap;\n}\n\n:host([width='max-content']) {\n  --padding: var(--nve-ref-size-300);\n}\n\n::slotted(nve-sort-button),\n::slotted(nve-icon-button) {\n  margin-inline-start: auto;\n}\n\n@media (hover: hover) {\n  ::slotted(nve-sort-button) {\n    opacity: 0;\n  }\n\n  ::slotted(nve-sort-button[sort='ascending']),\n  ::slotted(nve-sort-button[sort='descending']),\n  :host(:focus-within) ::slotted(nve-sort-button),\n  :host(:hover) ::slotted(nve-sort-button) {\n    opacity: 1;\n  }\n}\n"],"mappings":""}

package/dist/grid/column/column2.js

@@ -1,29 +1,29 @@
-import { appendRootNodeStyle as e, tagSelector as t } from "../../internal/utils/dom.js";
-import { attachInternals as n } from "../../internal/utils/a11y.js";
-import { __decorate as r } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
-import { useStyles as i } from "../../internal/styles/index.js";
-import a from "./column.js";
-import { LitElement as o, html as s } from "lit";
-import { property as c } from "lit/decorators/property.js";
+import { appendRootNodeStyle as e } from "../../internal/utils/dom.js";
+import { attachInternals as t } from "../../internal/utils/a11y.js";
+import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { useStyles as r } from "../../internal/styles/index.js";
+import i from "./column.js";
+import { LitElement as a, html as o } from "lit";
+import { property as s } from "lit/decorators/property.js";
 //#region src/grid/column/column.ts
-var l = class r extends o {
+var c = class n extends a {
 	static {
-		this.styles = i([a]);
+		this.styles = r([i]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-grid-column",
-			version: "0.0.7"
+			version: "0.0.8"
 		};
 	}
 	get #e() {
 		return this.parentElement.parentElement;
 	}
 	render() {
-		return s`<div internal-host focusable="active"><slot></slot><slot name="actions"></slot></div>`;
+		return o`<div internal-host focusable="active"><slot></slot><slot name="actions"></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), n(this), this._internals.role = "columnheader", this.addEventListener("sort", this.#t);
+		super.connectedCallback(), t(this), this._internals.role = "columnheader", this.addEventListener("sort", this.#t);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.removeEventListener("sort", this.#t);
@@ -50,18 +50,18 @@ var l = class r extends o {
 		this.#n ? this.#n.replaceSync(i) : this.#n = e(this.#e, i), this.setAttribute(t, "");
 	}
 	#i() {
-		let e = Array.from(this.parentElement.querySelectorAll(t(r.metadata.tag))), n = e.slice(e.indexOf(this) + 1, e.length), i = this.getBoundingClientRect(), a = this.#e.getBoundingClientRect(), o = this.offsetLeft < a.width / 2 ? "left" : "right", s = i.left - a.left, c = n.reduce((e, t) => e + t.getBoundingClientRect().width, 0), l = `[id='${this.#e.id}'] nve-grid-column:nth-of-type(${this.ariaColIndex}),
+		let e = Array.from(this.parentElement.querySelectorAll(n.metadata.tag)), t = 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 = t.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: o,
+			side: a,
 			positionStyle: `
-        ${l} {
+        ${c} {
           position: sticky;
           z-index: 99;
-          ${o === "left" ? `left: ${s}px;` : `right: ${c}px;`}
+          ${a === "left" ? `left: ${o}px;` : `right: ${s}px;`}
         }
       `,
-			borderStyle: this.#a(l, o)
+			borderStyle: this.#a(c, a)
 		};
 	}
 	#a(e, t) {
@@ -81,22 +81,22 @@ var l = class r extends o {
         }`);
 	}
 };
-r([c({
+n([s({
 	type: String,
 	reflect: !0
-})], l.prototype, "width", void 0), r([c({
+})], c.prototype, "width", void 0), n([s({
 	type: String,
 	reflect: !0
-})], l.prototype, "position", void 0), r([c({
+})], c.prototype, "position", void 0), n([s({
 	type: String,
 	reflect: !0,
 	attribute: "column-align"
-})], l.prototype, "columnAlign", void 0), r([c({
+})], c.prototype, "columnAlign", void 0), n([s({
 	type: String,
 	reflect: !0,
 	attribute: "aria-colindex"
-})], l.prototype, "ariaColIndex", void 0);
+})], c.prototype, "ariaColIndex", void 0);
 //#endregion
-export { l as GridColumn };
+export { c as GridColumn };
 
 //# sourceMappingURL=column2.js.map

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

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

package/dist/grid/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/grid/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { Grid, GridColumn, GridRow, GridCell, GridFooter, GridHeader, GridPlaceholder } from '@nvidia-elements/core/grid';\n\ndefine(Grid);\ndefine(GridColumn);\ndefine(GridRow);\ndefine(GridCell);\ndefine(GridFooter);\ndefine(GridHeader);\ndefine(GridPlaceholder);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-grid': Grid;\n    'nve-grid-column': GridColumn;\n    'nve-grid-row': GridRow;\n    'nve-grid-cell': GridCell;\n    'nve-grid-footer': GridFooter;\n    'nve-grid-header': GridHeader;\n    'nve-grid-placeholder': GridPlaceholder;\n  }\n}\n"],"mappings":";;;;;;;;AAMA,EAAO,EAAK,EACZ,EAAO,EAAW,EAClB,EAAO,EAAQ,EACf,EAAO,EAAS,EAChB,EAAO,EAAW,EAClB,EAAO,EAAW,EAClB,EAAO,EAAgB"}
+{"version":3,"file":"define.js","names":[],"sources":["../../src/grid/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport {\n  Grid,\n  GridColumn,\n  GridRow,\n  GridCell,\n  GridFooter,\n  GridHeader,\n  GridPlaceholder\n} from '@nvidia-elements/core/grid';\n\ndefine(Grid);\ndefine(GridColumn);\ndefine(GridRow);\ndefine(GridCell);\ndefine(GridFooter);\ndefine(GridHeader);\ndefine(GridPlaceholder);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-grid': Grid;\n    'nve-grid-column': GridColumn;\n    'nve-grid-row': GridRow;\n    'nve-grid-cell': GridCell;\n    'nve-grid-footer': GridFooter;\n    'nve-grid-header': GridHeader;\n    'nve-grid-placeholder': GridPlaceholder;\n  }\n}\n"],"mappings":";;;;;;;;AAcA,EAAO,EAAK,EACZ,EAAO,EAAW,EAClB,EAAO,EAAQ,EACf,EAAO,EAAS,EAChB,EAAO,EAAW,EAClB,EAAO,EAAW,EAClB,EAAO,EAAgB"}

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

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

package/dist/grid/footer/footer2.js

@@ -15,7 +15,7 @@ var s = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-grid-footer",
-			version: "0.0.7"
+			version: "0.0.8"
 		};
 	}
 	static {

package/dist/grid/grid.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.global.js","names":[],"sources":["../../src/grid/grid.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-grid-row:has(nve-grid-cell:first-child [nve-control] > input:checked) nve-grid-cell,\nnve-grid-row:has(nve-grid-cell:first-child [nve-control] > input:checked) nve-grid-cell {\n  --background: var(--nve-sys-interaction-highlighted-muted-background);\n  --interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n\nnve-grid:has(nve-grid-cell:first-child nve-radio),\nnve-grid:has(nve-grid-cell:first-child nve-checkbox),\nnve-grid:has(nve-grid-cell:first-child nve-radio),\nnve-grid:has(nve-grid-cell:first-child nve-checkbox) {\n  --grid-auto-columns: 36px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);\n}\n\nnve-grid[container='flat'] nve-grid-header,\nnve-grid[container='flat'] nve-grid-header {\n  --background: var(--nve-sys-layer-canvas-background);\n}\n\nnve-card,\nnve-panel,\nnve-dialog,\nnve-drawer,\nnve-accordion,\nnve-card,\nnve-panel,\nnve-dialog,\nnve-drawer,\nnve-accordion {\n  nve-grid[container='flat'],\n  nve-grid[container='flat'] {\n    nve-grid-header,\n    nve-grid-header {\n      --background: var(--nve-sys-layer-container-background);\n    }\n  }\n}\n\nnve-grid-cell:has(> nve-icon-button),\nnve-grid-cell:has(> nve-icon-button) {\n  --padding: 0 var(--nve-ref-size-100);\n}\n\nnve-grid-cell:has(> nve-checkbox),\nnve-grid-cell:has(> nve-radio),\nnve-grid-cell:has(> nve-checkbox),\nnve-grid-cell:has(> nve-radio) {\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-300);\n}\n\nnve-grid:has(nve-toolbar:not([hidden]))::part(_scrollbox),\nnve-grid:has(nve-toolbar:not([hidden]))::part(_scrollbox) {\n  padding-block-end: var(--nve-ref-size-1000);\n}\n\nnve-grid:has(nve-toolbar:not([hidden])),\nnve-grid:has(nve-toolbar:not([hidden])) {\n  contain: content;\n}\n\nnve-grid-column > nve-sort-button + nve-icon-button,\nnve-grid-column > nve-sort-button + nve-icon-button {\n  margin-inline-start: initial;\n}\n\nnve-grid-cell:focus-within > a,\nnve-grid-cell:focus-within > a {\n  box-shadow: 0 0 0 2px Highlight; /* programmatic focus does not trigger standard outline style */\n}\n\nnve-grid,\nnve-grid {\n  &:has([scroller]) nve-grid-header,\n  &:has([scroller]) nve-grid-header {\n    --padding: 0 16px 0 0;\n  }\n\n  & [scroller] {\n    scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n    scrollbar-width: var(--nve-sys-scrollbar-width);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"grid.global.js","names":[],"sources":["../../src/grid/grid.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-grid-row:has(nve-grid-cell:first-child [nve-control] > input:checked) nve-grid-cell {\n  --background: var(--nve-sys-interaction-highlighted-muted-background);\n  --interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n\nnve-grid:has(nve-grid-cell:first-child nve-radio),\nnve-grid:has(nve-grid-cell:first-child nve-checkbox) {\n  --grid-auto-columns: 36px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);\n}\n\nnve-grid[container='flat'] nve-grid-header {\n  --background: var(--nve-sys-layer-canvas-background);\n}\n\nnve-card,\nnve-panel,\nnve-dialog,\nnve-drawer,\nnve-accordion {\n  nve-grid[container='flat'] {\n    nve-grid-header {\n      --background: var(--nve-sys-layer-container-background);\n    }\n  }\n}\n\nnve-grid-cell:has(> nve-icon-button) {\n  --padding: 0 var(--nve-ref-size-100);\n}\n\nnve-grid-cell:has(> nve-checkbox),\nnve-grid-cell:has(> nve-radio) {\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-300);\n}\n\nnve-grid:has(nve-toolbar:not([hidden]))::part(_scrollbox) {\n  padding-block-end: var(--nve-ref-size-1000);\n}\n\nnve-grid:has(nve-toolbar:not([hidden])) {\n  contain: content;\n}\n\nnve-grid-column > nve-sort-button + nve-icon-button {\n  margin-inline-start: initial;\n}\n\nnve-grid-cell:focus-within > a {\n  box-shadow: 0 0 0 2px Highlight; /* programmatic focus does not trigger standard outline style */\n}\n\nnve-grid {\n  &:has([scroller]) nve-grid-header {\n    --padding: 0 16px 0 0;\n  }\n\n  & [scroller] {\n    scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n    scrollbar-width: var(--nve-sys-scrollbar-width);\n  }\n}\n"],"mappings":""}

package/dist/grid/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","names":[],"sources":["../../src/grid/grid.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --background: var(--nve-sys-layer-container-background);\n  --color: var(--nve-sys-layer-canvas-color);\n  --border-radius: var(--nve-ref-border-radius-lg);\n  --box-shadow: var(--nve-ref-shadow-100);\n  --font-size: var(--nve-ref-font-size-100);\n  --row-height: var(--nve-ref-size-900);\n  --scroll-height: initial;\n  --grid-auto-columns: minmax(0, 1fr);\n  --scroll-width: 0;\n  --grid-template-column: initial;\n  --grid-auto-flow: column;\n  display: grid;\n  contain: none;\n  width: 100%; /* fallback safari */\n  width: stretch;\n}\n\n[internal-host] {\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\n  background: var(--background);\n  color: var(--color);\n  font-size: var(--font-size);\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: start;\n  overflow: hidden;\n  color-scheme: inherit;\n  position: relative;\n  height: 100%;\n  width: 100%;\n}\n\n:host(:state(scrolling)) {\n  --scroll-shadow: 0 0 4px hsl(0 0% 0% / 0.4);\n}\n\n[name='columns'] {\n  min-width: fit-content;\n  display: grid;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n}\n\n[part='_scrollbox'] {\n  height: 100%;\n  width: 100%;\n  max-height: var(--scroll-height);\n  min-height: var(--scroll-height);\n  contain: layout;\n  overflow: auto;\n  position: relative;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\n:host([container*='full']) {\n  --border-radius: 0;\n  --box-shadow: none;\n}\n\n:host([container*='flat']) {\n  --border-radius: 0;\n  --box-shadow: none;\n  --background: inherit;\n}\n\n:host([container*='flat']) ::slotted(nve-grid-header),\n:host([container*='flat']) ::slotted(nve-grid-header) {\n  --background: inherit;\n}\n\n:host([stripe]) ::slotted(nve-grid-row:nth-child(odd)),\n:host([stripe]) ::slotted(nve-grid-row:nth-child(odd)) {\n  --background: var(--nve-sys-layer-container-accent-background);\n}\n\n::slotted(nve-grid-row:last-child),\n::slotted(nve-grid-row:last-child) {\n  --border-bottom: 0;\n}\n\n::slotted(nve-toolbar),\n::slotted(nve-toolbar) {\n  position: fixed;\n  z-index: 99;\n  left: var(--nve-ref-size-300);\n  bottom: var(--nve-ref-size-300);\n  width: calc(100% - 24px);\n}\n"],"mappings":""}
+{"version":3,"file":"grid.js","names":[],"sources":["../../src/grid/grid.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --background: var(--nve-sys-layer-container-background);\n  --color: var(--nve-sys-layer-canvas-color);\n  --border-radius: var(--nve-ref-border-radius-lg);\n  --box-shadow: var(--nve-ref-shadow-100);\n  --font-size: var(--nve-ref-font-size-100);\n  --row-height: var(--nve-ref-size-900);\n  --scroll-height: initial;\n  --grid-auto-columns: minmax(0, 1fr);\n  --scroll-width: 0;\n  --grid-template-column: initial;\n  --grid-auto-flow: column;\n  display: grid;\n  contain: none;\n  width: 100%; /* fallback safari */\n  width: stretch;\n}\n\n[internal-host] {\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\n  background: var(--background);\n  color: var(--color);\n  font-size: var(--font-size);\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: start;\n  overflow: hidden;\n  color-scheme: inherit;\n  position: relative;\n  height: 100%;\n  width: 100%;\n}\n\n:host(:state(scrolling)) {\n  --scroll-shadow: 0 0 4px hsl(0 0% 0% / 0.4);\n}\n\n[name='columns'] {\n  min-width: fit-content;\n  display: grid;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n}\n\n[part='_scrollbox'] {\n  height: 100%;\n  width: 100%;\n  max-height: var(--scroll-height);\n  min-height: var(--scroll-height);\n  contain: layout;\n  overflow: auto;\n  position: relative;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\n:host([container*='full']) {\n  --border-radius: 0;\n  --box-shadow: none;\n}\n\n:host([container*='flat']) {\n  --border-radius: 0;\n  --box-shadow: none;\n  --background: inherit;\n}\n\n:host([container*='flat']) ::slotted(nve-grid-header) {\n  --background: inherit;\n}\n\n:host([stripe]) ::slotted(nve-grid-row:nth-child(odd)) {\n  --background: var(--nve-sys-layer-container-accent-background);\n}\n\n::slotted(nve-grid-row:last-child) {\n  --border-bottom: 0;\n}\n\n::slotted(nve-toolbar) {\n  position: fixed;\n  z-index: 99;\n  left: var(--nve-ref-size-300);\n  bottom: var(--nve-ref-size-300);\n  width: calc(100% - 24px);\n}\n"],"mappings":""}

package/dist/grid/grid2.js

@@ -1,33 +1,33 @@
-import { appendRootNodeStyle as e, generateId as t, tagSelector as n } from "../internal/utils/dom.js";
-import { attachInternals as r } from "../internal/utils/a11y.js";
-import { __decorate as i } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
-import { audit as a } from "../internal/controllers/audit.controller.js";
-import { keyNavigationGrid as o } from "../internal/controllers/keynav-grid.controller.js";
-import { useStyles as s } from "../internal/styles/index.js";
-import { GridPlaceholder as c } from "./placeholder/placeholder2.js";
-import { GridColumn as l } from "./column/column2.js";
-import { GridCell as u } from "./cell/cell2.js";
-import { GridRow as d } from "./row/row2.js";
-import { GridHeader as f } from "./header/header2.js";
-import { GridFooter as p } from "./footer/footer2.js";
-import m from "./grid.js";
-import h from "./grid.global.js";
-import { LitElement as g, html as _ } from "lit";
-import { property as v } from "lit/decorators/property.js";
+import { appendRootNodeStyle as e, generateId as t } from "../internal/utils/dom.js";
+import { attachInternals as n } from "../internal/utils/a11y.js";
+import { __decorate as r } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { audit as i } from "../internal/controllers/audit.controller.js";
+import { keyNavigationGrid as a } from "../internal/controllers/keynav-grid.controller.js";
+import { useStyles as o } from "../internal/styles/index.js";
+import { GridPlaceholder as s } from "./placeholder/placeholder2.js";
+import { GridColumn as c } from "./column/column2.js";
+import { GridCell as l } from "./cell/cell2.js";
+import { GridRow as u } from "./row/row2.js";
+import { GridHeader as d } from "./header/header2.js";
+import { GridFooter as f } from "./footer/footer2.js";
+import p from "./grid.js";
+import m from "./grid.global.js";
+import { LitElement as h, html as g } from "lit";
+import { property as _ } from "lit/decorators/property.js";
 //#region src/grid/grid.ts
-var y = class extends g {
+var v = class extends h {
 	static {
-		this.styles = s([m]);
+		this.styles = o([p]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-grid",
-			version: "0.0.7",
+			version: "0.0.8",
 			children: [
+				u.metadata.tag,
 				d.metadata.tag,
 				f.metadata.tag,
-				p.metadata.tag,
-				c.metadata.tag
+				s.metadata.tag
 			]
 		};
 	}
@@ -42,35 +42,35 @@ var y = class extends g {
 		};
 	}
 	get #e() {
-		return Array.from(this.querySelectorAll(n(d.metadata.tag)));
+		return Array.from(this.querySelectorAll(u.metadata.tag));
 	}
 	get #t() {
-		return this.querySelector(n(f.metadata.tag));
+		return this.querySelector(d.metadata.tag);
 	}
 	get #n() {
-		return Array.from(this.querySelectorAll(n(l.metadata.tag)));
+		return Array.from(this.querySelectorAll(c.metadata.tag));
 	}
 	get #r() {
-		return Array.from(this.querySelectorAll(n(u.metadata.tag)));
+		return Array.from(this.querySelectorAll(l.metadata.tag));
 	}
 	render() {
-		return _`<div internal-host><div part="_scrollbox"><slot></slot></div><slot name="footer"></slot></div>`;
+		return g`<div internal-host><div part="_scrollbox"><slot></slot></div><slot name="footer"></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), r(this), this._internals.role = "grid", this.id ||= t(), e(this, h);
+		super.connectedCallback(), n(this), this._internals.role = "grid", this.id ||= t(), e(this, m);
 	}
 	async scrollTo(...e) {
 		await this.shadowRoot.querySelector("[part=\"_scrollbox\"]")?.scrollTo(...e);
 	}
 };
-i([v({
+r([_({
 	type: String,
 	reflect: !0
-})], y.prototype, "container", void 0), i([v({
+})], v.prototype, "container", void 0), r([_({
 	type: Boolean,
 	reflect: !0
-})], y.prototype, "stripe", void 0), y = i([a(), o()], y);
+})], v.prototype, "stripe", void 0), v = r([i(), a()], v);
 //#endregion
-export { y as Grid };
+export { v as Grid };
 
 //# sourceMappingURL=grid2.js.map

package/dist/grid/grid2.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid2.js","names":["#columns","#header","#rows","#cells"],"sources":["../../src/grid/grid.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 type { ContainerElement } from '@nvidia-elements/core/internal';\nimport {\n  keyNavigationGrid,\n  useStyles,\n  attachInternals,\n  appendRootNodeStyle,\n  generateId,\n  tagSelector,\n  audit\n} from '@nvidia-elements/core/internal';\nimport { GridPlaceholder } from './placeholder/placeholder.js';\nimport { GridHeader } from './header/header.js';\nimport { GridColumn } from './column/column.js';\nimport { GridFooter } from './footer/footer.js';\nimport { GridRow } from './row/row.js';\nimport { GridCell } from './cell/cell.js';\nimport styles from './grid.css?inline';\nimport globalStyles from './grid.global.css?inline';\n\n/**\n * @element nve-grid\n * @description A versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data. Use it for anything from simple read-only tables to fully interactive, spreadsheet experiences.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - default slot for content\n * @slot footer - slot for grid-footer or toolbar\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --box-shadow\n * @cssprop --font-size\n * @cssprop --row-height - fixed height of each row\n * @cssprop --scroll-height - height of the scrollable area\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\n@audit()\n@keyNavigationGrid<Grid>()\nexport class Grid extends LitElement implements ContainerElement {\n  /**\n   * Determines the container styles of component. Flat nests the grid within other containers. Full spans the full edge-to-edge viewport width.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'full';\n\n  /**\n   * Determine style variant stripe rows\n   */\n  @property({ type: Boolean, reflect: true }) stripe: boolean;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid',\n    version: '0.0.0',\n    children: [GridRow.metadata.tag, GridHeader.metadata.tag, GridFooter.metadata.tag, GridPlaceholder.metadata.tag]\n  };\n\n  static elementDefinitions = {};\n\n  get keynavGridConfig() {\n    return {\n      columns: this.#columns,\n      rows: [this.#header!, ...this.#rows],\n      cells: [...this.#columns, ...this.#cells]\n    };\n  }\n\n  get #rows() {\n    return Array.from(this.querySelectorAll<GridRow>(tagSelector(GridRow.metadata.tag)));\n  }\n\n  get #header() {\n    return this.querySelector<GridHeader>(tagSelector(GridHeader.metadata.tag));\n  }\n\n  get #columns() {\n    return Array.from(this.querySelectorAll<GridColumn>(tagSelector(GridColumn.metadata.tag)));\n  }\n\n  get #cells() {\n    return Array.from(this.querySelectorAll<GridCell>(tagSelector(GridCell.metadata.tag)));\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <div part=\"_scrollbox\">\n          <slot></slot>\n        </div>\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'grid';\n    this.id ||= generateId();\n    appendRootNodeStyle(this, globalStyles);\n  }\n\n  /**\n   * Scroll to a specific position in the grid.\n   */\n  scrollTo(options?: ScrollToOptions): Promise<void>;\n  scrollTo(x: number, y: number): Promise<void>;\n  async scrollTo(...args: [options?: ScrollToOptions] | [x: number, y: number]): Promise<void> {\n    await this.shadowRoot!.querySelector('[part=\"_scrollbox\"]')?.scrollTo(...(args as [ScrollToOptions]));\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA2CO,IAAA,IAAA,cAAmB,EAAuC;;gBAW/C,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC,EAAQ,SAAS;IAAK,EAAW,SAAS;IAAK,EAAW,SAAS;IAAK,EAAgB,SAAS;;GAC7G;;;4BAE2B,EAAE;;CAE9B,IAAI,mBAAmB;AACrB,SAAO;GACL,SAAS,MAAA;GACT,MAAM,CAAC,MAAA,GAAe,GAAG,MAAA,EAAW;GACpC,OAAO,CAAC,GAAG,MAAA,GAAe,GAAG,MAAA,EAAKG;GACnC;;CAGH,KAAA,IAAY;AACV,SAAO,MAAM,KAAK,KAAK,iBAA0B,EAAY,EAAQ,SAAS,IAAI,CAAC,CAAC;;CAGtF,KAAA,IAAc;AACZ,SAAO,KAAK,cAA0B,EAAY,EAAW,SAAS,IAAI,CAAC;;CAG7E,KAAA,IAAe;AACb,SAAO,MAAM,KAAK,KAAK,iBAA6B,EAAY,EAAW,SAAS,IAAI,CAAC,CAAC;;CAG5F,KAAA,IAAa;AACX,SAAO,MAAM,KAAK,KAAK,iBAA2B,EAAY,EAAS,SAAS,IAAI,CAAC,CAAC;;CAMxF,SAAS;AACP,SAAO,CAAI;;CAUb,oBAAoB;AAKlB,EAJA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO,QACvB,KAAK,OAAO,GAAY,EACxB,EAAoB,MAAM,EAAa;;CAQzC,MAAM,SAAS,GAAG,GAA2E;AAC3F,QAAM,KAAK,WAAY,cAAc,wBAAsB,EAAE,SAAS,GAAI,EAA2B;;;GArEtG,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,SAX5C,GAAO,EACP,GAAyB,CAAA,EAAA,EAAA"}
+{"version":3,"file":"grid2.js","names":["#columns","#header","#rows","#cells"],"sources":["../../src/grid/grid.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 type { ContainerElement } from '@nvidia-elements/core/internal';\nimport {\n  keyNavigationGrid,\n  useStyles,\n  attachInternals,\n  appendRootNodeStyle,\n  generateId,\n  audit\n} from '@nvidia-elements/core/internal';\nimport { GridPlaceholder } from './placeholder/placeholder.js';\nimport { GridHeader } from './header/header.js';\nimport { GridColumn } from './column/column.js';\nimport { GridFooter } from './footer/footer.js';\nimport { GridRow } from './row/row.js';\nimport { GridCell } from './cell/cell.js';\nimport styles from './grid.css?inline';\nimport globalStyles from './grid.global.css?inline';\n\n/**\n * @element nve-grid\n * @description A versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data. Use it for anything from simple read-only tables to fully interactive, spreadsheet experiences.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - default slot for content\n * @slot footer - slot for grid-footer or toolbar\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --box-shadow\n * @cssprop --font-size\n * @cssprop --row-height - fixed height of each row\n * @cssprop --scroll-height - height of the scrollable area\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\n@audit()\n@keyNavigationGrid<Grid>()\nexport class Grid extends LitElement implements ContainerElement {\n  /**\n   * Determines the container styles of component. Flat nests the grid within other containers. Full spans the full edge-to-edge viewport width.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'full';\n\n  /**\n   * Determine style variant stripe rows\n   */\n  @property({ type: Boolean, reflect: true }) stripe: boolean;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid',\n    version: '0.0.0',\n    children: [GridRow.metadata.tag, GridHeader.metadata.tag, GridFooter.metadata.tag, GridPlaceholder.metadata.tag]\n  };\n\n  static elementDefinitions = {};\n\n  get keynavGridConfig() {\n    return {\n      columns: this.#columns,\n      rows: [this.#header!, ...this.#rows],\n      cells: [...this.#columns, ...this.#cells]\n    };\n  }\n\n  get #rows() {\n    return Array.from(this.querySelectorAll<GridRow>(GridRow.metadata.tag));\n  }\n\n  get #header() {\n    return this.querySelector<GridHeader>(GridHeader.metadata.tag);\n  }\n\n  get #columns() {\n    return Array.from(this.querySelectorAll<GridColumn>(GridColumn.metadata.tag));\n  }\n\n  get #cells() {\n    return Array.from(this.querySelectorAll<GridCell>(GridCell.metadata.tag));\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <div part=\"_scrollbox\">\n          <slot></slot>\n        </div>\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'grid';\n    this.id ||= generateId();\n    appendRootNodeStyle(this, globalStyles);\n  }\n\n  /**\n   * Scroll to a specific position in the grid.\n   */\n  scrollTo(options?: ScrollToOptions): Promise<void>;\n  scrollTo(x: number, y: number): Promise<void>;\n  async scrollTo(...args: [options?: ScrollToOptions] | [x: number, y: number]): Promise<void> {\n    await this.shadowRoot!.querySelector('[part=\"_scrollbox\"]')?.scrollTo(...(args as [ScrollToOptions]));\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA0CO,IAAA,IAAA,cAAmB,EAAuC;;gBAW/C,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC,EAAQ,SAAS;IAAK,EAAW,SAAS;IAAK,EAAW,SAAS;IAAK,EAAgB,SAAS;;GAC7G;;;4BAE2B,EAAE;;CAE9B,IAAI,mBAAmB;AACrB,SAAO;GACL,SAAS,MAAA;GACT,MAAM,CAAC,MAAA,GAAe,GAAG,MAAA,EAAW;GACpC,OAAO,CAAC,GAAG,MAAA,GAAe,GAAG,MAAA,EAAKG;GACnC;;CAGH,KAAA,IAAY;AACV,SAAO,MAAM,KAAK,KAAK,iBAA0B,EAAQ,SAAS,IAAI,CAAC;;CAGzE,KAAA,IAAc;AACZ,SAAO,KAAK,cAA0B,EAAW,SAAS,IAAI;;CAGhE,KAAA,IAAe;AACb,SAAO,MAAM,KAAK,KAAK,iBAA6B,EAAW,SAAS,IAAI,CAAC;;CAG/E,KAAA,IAAa;AACX,SAAO,MAAM,KAAK,KAAK,iBAA2B,EAAS,SAAS,IAAI,CAAC;;CAM3E,SAAS;AACP,SAAO,CAAI;;CAUb,oBAAoB;AAKlB,EAJA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO,QACvB,KAAK,OAAO,GAAY,EACxB,EAAoB,MAAM,EAAa;;CAQzC,MAAM,SAAS,GAAG,GAA2E;AAC3F,QAAM,KAAK,WAAY,cAAc,wBAAsB,EAAE,SAAS,GAAI,EAA2B;;;GArEtG,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,SAX5C,GAAO,EACP,GAAyB,CAAA,EAAA,EAAA"}

package/dist/grid/header/header2.js

@@ -1,37 +1,36 @@
 import { GlobalStateService as e } from "../../internal/services/global.service.js";
-import { tagSelector as t } from "../../internal/utils/dom.js";
-import { attachInternals as n } from "../../internal/utils/a11y.js";
-import { debounce as r } from "../../internal/utils/events.js";
-import { LogService as i } from "../../internal/services/log.service.js";
-import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
-import { audit as o } from "../../internal/controllers/audit.controller.js";
-import { useStyles as s } from "../../internal/styles/index.js";
-import c from "./header.js";
-import { GridColumn as l } from "../column/column2.js";
-import { GridCell as u } from "../cell/cell2.js";
-import { GridRow as d } from "../row/row2.js";
-import { LitElement as f, html as p } from "lit";
-import { queryAssignedElements as m } from "lit/decorators/query-assigned-elements.js";
+import { attachInternals as t } from "../../internal/utils/a11y.js";
+import { debounce as n } from "../../internal/utils/events.js";
+import { LogService as r } from "../../internal/services/log.service.js";
+import { __decorate as i } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { audit as a } from "../../internal/controllers/audit.controller.js";
+import { useStyles as o } from "../../internal/styles/index.js";
+import s from "./header.js";
+import { GridColumn as c } from "../column/column2.js";
+import { GridCell as l } from "../cell/cell2.js";
+import { GridRow as u } from "../row/row2.js";
+import { LitElement as d, html as f } from "lit";
+import { queryAssignedElements as p } from "lit/decorators/query-assigned-elements.js";
 //#region src/grid/header/header.ts
-var h = class extends f {
+var m = class extends d {
 	static {
-		this.styles = s([c]);
+		this.styles = o([s]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-grid-header",
-			version: "0.0.7",
-			children: [l.metadata.tag]
+			version: "0.0.8",
+			children: [c.metadata.tag]
 		};
 	}
 	get #e() {
 		return this.parentElement;
 	}
 	render() {
-		return p`<div internal-host><slot @slotchange="${() => this.#r()}"></slot></div>`;
+		return f`<div internal-host><slot @slotchange="${() => this.#r()}"></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), n(this), this._internals.role = "row", this.addEventListener("nve-grid-column-resize", this.#t), this.#n ??= new ResizeObserver(r(() => this.#r(), 100)), this.#n.observe(this);
+		super.connectedCallback(), t(this), this._internals.role = "row", this.addEventListener("nve-grid-column-resize", this.#t), this.#n ??= new ResizeObserver(n(() => this.#r(), 100)), this.#n.observe(this);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.removeEventListener("nve-grid-column-resize", this.#t), this.#n?.disconnect();
@@ -48,16 +47,16 @@ var h = class extends f {
 	}
 	#i() {
 		if (e.state.env !== "production") {
-			let e = this.#e.querySelector(t(d.metadata.tag))?.querySelectorAll(t(u.metadata.tag));
-			this.columns && e && this.columns.length !== e.length && i.error(`grid-column (${this.columns.length}) and grid-cell (${e.length}) count mismatch`);
+			let e = this.#e.querySelector(u.metadata.tag)?.querySelectorAll(l.metadata.tag);
+			this.columns && e && this.columns.length !== e.length && r.error(`grid-column (${this.columns.length}) and grid-cell (${e.length}) count mismatch`);
 		}
 	}
 };
-a([m({
-	selector: `${l.metadata.tag}, ${l.metadata.tag.replace("nve-", "nve-")}`,
+i([p({
+	selector: c.metadata.tag,
 	flatten: !0
-})], h.prototype, "columns", void 0), h = a([o()], h);
+})], m.prototype, "columns", void 0), m = i([a()], m);
 //#endregion
-export { h as GridHeader };
+export { m as GridHeader };
 
 //# sourceMappingURL=header2.js.map

package/dist/grid/header/header2.js.map

@@ -1 +1 @@
-{"version":3,"file":"header2.js","names":["#grid","#computeColumnWidths","#onColumnResize","#resizeObserver","#validateColumns"],"sources":["../../../src/grid/header/header.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 { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport {\n  useStyles,\n  attachInternals,\n  debounce,\n  LogService,\n  tagSelector,\n  audit,\n  GlobalStateService\n} from '@nvidia-elements/core/internal';\nimport styles from './header.css?inline';\nimport { GridColumn } from '../column/column.js';\nimport type { Grid } from '../grid.js';\nimport { GridRow } from '../row/row.js';\nimport { GridCell } from '../cell/cell.js';\n\n/**\n * @element nve-grid-header\n * @description Contains the column headers of a grid, managing column widths and providing structural context for the data rows below.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - default slot for `nve-grid-column`\n * @cssprop --background\n * @cssprop --border-bottom\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\n@audit()\nexport class GridHeader extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-header',\n    version: '0.0.0',\n    children: [GridColumn.metadata.tag]\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** @private */\n  @queryAssignedElements({\n    selector: `${GridColumn.metadata.tag}, ${GridColumn.metadata.tag.replace('nve-', 'nve-')}`,\n    flatten: true\n  })\n  columns!: GridColumn[];\n\n  get #grid() {\n    return this.parentElement as Grid;\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${() => this.#computeColumnWidths()}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'row';\n    this.addEventListener('nve-grid-column-resize', this.#onColumnResize);\n    this.#resizeObserver ??= new ResizeObserver(debounce(() => this.#computeColumnWidths(), 100));\n    this.#resizeObserver.observe(this);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('nve-grid-column-resize', this.#onColumnResize);\n    this.#resizeObserver?.disconnect();\n  }\n\n  #onColumnResize = () => {\n    void this.#computeColumnWidths();\n  };\n\n  #resizeObserver?: ResizeObserver;\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    await this.updateComplete;\n    this.#validateColumns();\n  }\n\n  async #computeColumnWidths() {\n    await this.updateComplete;\n    this.columns.forEach((c, i) => (c.ariaColIndex = `${i + 1}`));\n    this.#grid.style.setProperty('--grid-auto-flow', 'initial');\n    this.#grid.style.setProperty('--grid-template-column', this.columns.map((_, i) => `var(--c${i})`).join(' '));\n\n    // compute initial column width\n    this.columns.forEach((c, i) => this.#grid.style.setProperty(`--c${i}`, c.width ? c.width : `1fr`));\n\n    // compute column width based on content\n    await this.updateComplete;\n    this.columns.forEach((c, i) =>\n      this.#grid.style.setProperty(`--c${i}`, c.width ? c.width : `minmax(auto, ${c.getBoundingClientRect().width}px)`)\n    );\n  }\n\n  #validateColumns() {\n    if (GlobalStateService.state.env !== 'production') {\n      const cells = this.#grid\n        .querySelector(tagSelector(GridRow.metadata.tag))\n        ?.querySelectorAll(tagSelector(GridCell.metadata.tag));\n      if (this.columns && cells && this.columns.length !== cells.length) {\n        LogService.error(`grid-column (${this.columns.length}) and grid-cell (${cells.length}) count mismatch`);\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiCO,IAAA,IAAA,cAAyB,EAAW;;gBACzB,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,EAAW,SAAS,IAAA;GAChC;;CAYD,KAAA,IAAY;AACV,SAAO,KAAK;;CAGd,SAAS;AACP,SAAO,CAAI,+CAEmB,MAAA,GAA2B,CAAC;;CAK5D,oBAAoB;AAMlB,EALA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO,OACvB,KAAK,iBAAiB,0BAA0B,MAAA,EAAqB,EACrE,MAAA,MAAyB,IAAI,eAAe,QAAe,MAAA,GAA2B,EAAE,IAAI,CAAC,EAC7F,MAAA,EAAqB,QAAQ,KAAK;;CAGpC,uBAAuB;AAGrB,EAFA,MAAM,sBAAsB,EAC5B,KAAK,oBAAoB,0BAA0B,MAAA,EAAqB,EACxE,MAAA,GAAsB,YAAY;;CAGpC,WAAwB;AACjB,QAAA,GAA2B;;CAGlC;CAEA,MAAM,aAAa,GAA6B;AAG9C,EAFA,MAAM,aAAa,EAAM,EACzB,MAAM,KAAK,gBACX,MAAA,GAAuB;;CAGzB,OAAA,IAA6B;AAW3B,EAVA,MAAM,KAAK,gBACX,KAAK,QAAQ,SAAS,GAAG,MAAO,EAAE,eAAe,GAAG,IAAI,IAAK,EAC7D,MAAA,EAAW,MAAM,YAAY,oBAAoB,UAAU,EAC3D,MAAA,EAAW,MAAM,YAAY,0BAA0B,KAAK,QAAQ,KAAK,GAAG,MAAM,UAAU,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC,EAG5G,KAAK,QAAQ,SAAS,GAAG,MAAM,MAAA,EAAW,MAAM,YAAY,MAAM,KAAK,EAAE,QAAQ,EAAE,QAAQ,MAAM,CAAC,EAGlG,MAAM,KAAK,gBACX,KAAK,QAAQ,SAAS,GAAG,MACvB,MAAA,EAAW,MAAM,YAAY,MAAM,KAAK,EAAE,QAAQ,EAAE,QAAQ,gBAAgB,EAAE,uBAAuB,CAAC,MAAM,KAAK,CAClH;;CAGH,KAAmB;AACjB,MAAI,EAAmB,MAAM,QAAQ,cAAc;GACjD,IAAM,IAAQ,MAAA,EACX,cAAc,EAAY,EAAQ,SAAS,IAAI,CAAC,EAC/C,iBAAiB,EAAY,EAAS,SAAS,IAAI,CAAC;AACxD,GAAI,KAAK,WAAW,KAAS,KAAK,QAAQ,WAAW,EAAM,UACzD,EAAW,MAAM,gBAAgB,KAAK,QAAQ,OAAO,mBAAmB,EAAM,OAAO,kBAAkB;;;;GAnE5G,EAAsB;CACrB,UAAU,GAAG,EAAW,SAAS,IAAI,IAAI,EAAW,SAAS,IAAI,QAAQ,QAAQ,OAAO;CACxF,SAAS;CACV,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,SAjBH,GAAO,CAAA,EAAA,EAAA"}
+{"version":3,"file":"header2.js","names":["#grid","#computeColumnWidths","#onColumnResize","#resizeObserver","#validateColumns"],"sources":["../../../src/grid/header/header.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 { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport {\n  useStyles,\n  attachInternals,\n  debounce,\n  LogService,\n  audit,\n  GlobalStateService\n} from '@nvidia-elements/core/internal';\nimport styles from './header.css?inline';\nimport { GridColumn } from '../column/column.js';\nimport type { Grid } from '../grid.js';\nimport { GridRow } from '../row/row.js';\nimport { GridCell } from '../cell/cell.js';\n\n/**\n * @element nve-grid-header\n * @description Contains the column headers of a grid, managing column widths and providing structural context for the data rows below.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - default slot for `nve-grid-column`\n * @cssprop --background\n * @cssprop --border-bottom\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\n@audit()\nexport class GridHeader extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-header',\n    version: '0.0.0',\n    children: [GridColumn.metadata.tag]\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** @private */\n  @queryAssignedElements({\n    selector: GridColumn.metadata.tag,\n    flatten: true\n  })\n  columns!: GridColumn[];\n\n  get #grid() {\n    return this.parentElement as Grid;\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${() => this.#computeColumnWidths()}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'row';\n    this.addEventListener('nve-grid-column-resize', this.#onColumnResize);\n    this.#resizeObserver ??= new ResizeObserver(debounce(() => this.#computeColumnWidths(), 100));\n    this.#resizeObserver.observe(this);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('nve-grid-column-resize', this.#onColumnResize);\n    this.#resizeObserver?.disconnect();\n  }\n\n  #onColumnResize = () => {\n    void this.#computeColumnWidths();\n  };\n\n  #resizeObserver?: ResizeObserver;\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    await this.updateComplete;\n    this.#validateColumns();\n  }\n\n  async #computeColumnWidths() {\n    await this.updateComplete;\n    this.columns.forEach((c, i) => (c.ariaColIndex = `${i + 1}`));\n    this.#grid.style.setProperty('--grid-auto-flow', 'initial');\n    this.#grid.style.setProperty('--grid-template-column', this.columns.map((_, i) => `var(--c${i})`).join(' '));\n\n    // compute initial column width\n    this.columns.forEach((c, i) => this.#grid.style.setProperty(`--c${i}`, c.width ? c.width : `1fr`));\n\n    // compute column width based on content\n    await this.updateComplete;\n    this.columns.forEach((c, i) =>\n      this.#grid.style.setProperty(`--c${i}`, c.width ? c.width : `minmax(auto, ${c.getBoundingClientRect().width}px)`)\n    );\n  }\n\n  #validateColumns() {\n    if (GlobalStateService.state.env !== 'production') {\n      const cells = this.#grid.querySelector(GridRow.metadata.tag)?.querySelectorAll(GridCell.metadata.tag);\n      if (this.columns && cells && this.columns.length !== cells.length) {\n        LogService.error(`grid-column (${this.columns.length}) and grid-cell (${cells.length}) count mismatch`);\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAgCO,IAAA,IAAA,cAAyB,EAAW;;gBACzB,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,EAAW,SAAS,IAAA;GAChC;;CAYD,KAAA,IAAY;AACV,SAAO,KAAK;;CAGd,SAAS;AACP,SAAO,CAAI,+CAEmB,MAAA,GAA2B,CAAC;;CAK5D,oBAAoB;AAMlB,EALA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO,OACvB,KAAK,iBAAiB,0BAA0B,MAAA,EAAqB,EACrE,MAAA,MAAyB,IAAI,eAAe,QAAe,MAAA,GAA2B,EAAE,IAAI,CAAC,EAC7F,MAAA,EAAqB,QAAQ,KAAK;;CAGpC,uBAAuB;AAGrB,EAFA,MAAM,sBAAsB,EAC5B,KAAK,oBAAoB,0BAA0B,MAAA,EAAqB,EACxE,MAAA,GAAsB,YAAY;;CAGpC,WAAwB;AACjB,QAAA,GAA2B;;CAGlC;CAEA,MAAM,aAAa,GAA6B;AAG9C,EAFA,MAAM,aAAa,EAAM,EACzB,MAAM,KAAK,gBACX,MAAA,GAAuB;;CAGzB,OAAA,IAA6B;AAW3B,EAVA,MAAM,KAAK,gBACX,KAAK,QAAQ,SAAS,GAAG,MAAO,EAAE,eAAe,GAAG,IAAI,IAAK,EAC7D,MAAA,EAAW,MAAM,YAAY,oBAAoB,UAAU,EAC3D,MAAA,EAAW,MAAM,YAAY,0BAA0B,KAAK,QAAQ,KAAK,GAAG,MAAM,UAAU,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC,EAG5G,KAAK,QAAQ,SAAS,GAAG,MAAM,MAAA,EAAW,MAAM,YAAY,MAAM,KAAK,EAAE,QAAQ,EAAE,QAAQ,MAAM,CAAC,EAGlG,MAAM,KAAK,gBACX,KAAK,QAAQ,SAAS,GAAG,MACvB,MAAA,EAAW,MAAM,YAAY,MAAM,KAAK,EAAE,QAAQ,EAAE,QAAQ,gBAAgB,EAAE,uBAAuB,CAAC,MAAM,KAAK,CAClH;;CAGH,KAAmB;AACjB,MAAI,EAAmB,MAAM,QAAQ,cAAc;GACjD,IAAM,IAAQ,MAAA,EAAW,cAAc,EAAQ,SAAS,IAAI,EAAE,iBAAiB,EAAS,SAAS,IAAI;AACrG,GAAI,KAAK,WAAW,KAAS,KAAK,QAAQ,WAAW,EAAM,UACzD,EAAW,MAAM,gBAAgB,KAAK,QAAQ,OAAO,mBAAmB,EAAM,OAAO,kBAAkB;;;;GAjE5G,EAAsB;CACrB,UAAU,EAAW,SAAS;CAC9B,SAAS;CACV,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,SAjBH,GAAO,CAAA,EAAA,EAAA"}

package/dist/grid/placeholder/placeholder2.js

@@ -10,7 +10,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-grid-placeholder",
-			version: "0.0.7"
+			version: "0.0.8"
 		};
 	}
 	render() {

package/dist/grid/row/row.js.map

@@ -1 +1 @@
-{"version":3,"file":"row.js","names":[],"sources":["../../../src/grid/row/row.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  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  contain: layout;\n  display: block;\n  min-width: max-content;\n  content-visibility: auto;\n  contain-intrinsic-size: auto var(--row-height, var(--nve-ref-size-900));\n}\n\n[internal-host] {\n  grid-auto-columns: var(--grid-auto-columns);\n  border-bottom: var(--border-bottom);\n  display: grid;\n  grid-auto-flow: var(--grid-auto-flow);\n  grid-template-columns: var(--grid-template-column);\n}\n\n:host(:hover) ::slotted(nve-grid-cell),\n:host(:hover) ::slotted(nve-grid-cell) {\n  --interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host(:state(selected)) ::slotted(nve-grid-cell),\n:host(:state(selected)) ::slotted(nve-grid-cell) {\n  --background: var(--nve-sys-interaction-highlighted-muted-background);\n  --interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n"],"mappings":""}
+{"version":3,"file":"row.js","names":[],"sources":["../../../src/grid/row/row.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  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  contain: layout;\n  display: block;\n  min-width: max-content;\n  content-visibility: auto;\n  contain-intrinsic-size: auto var(--row-height, var(--nve-ref-size-900));\n}\n\n[internal-host] {\n  grid-auto-columns: var(--grid-auto-columns);\n  border-bottom: var(--border-bottom);\n  display: grid;\n  grid-auto-flow: var(--grid-auto-flow);\n  grid-template-columns: var(--grid-template-column);\n}\n\n:host(:hover) ::slotted(nve-grid-cell) {\n  --interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host(:state(selected)) ::slotted(nve-grid-cell) {\n  --background: var(--nve-sys-interaction-highlighted-muted-background);\n  --interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n"],"mappings":""}

package/dist/grid/row/row2.js

@@ -15,7 +15,7 @@ var u = class extends s {
 	static {
 		this.metadata = {
 			tag: "nve-grid-row",
-			version: "0.0.7",
+			version: "0.0.8",
 			children: [a.metadata.tag]
 		};
 	}

package/dist/icon/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/icon/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 { Icon, mergeIcons } from '@nvidia-elements/core/icon';\n\ndefine(Icon);\nif (customElements.get(Icon.metadata.tag)) {\n  mergeIcons(customElements.get(Icon.metadata.tag) as typeof Icon);\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-icon': Icon;\n  }\n}\n"],"mappings":";;AAMA,EAAO,EAAK,EACR,eAAe,IAAI,EAAK,SAAS,IAAI,IACvC,EAAW,eAAe,IAAI,EAAK,SAAS,IAAI,CAAgB"}
+{"version":3,"file":"define.js","names":[],"sources":["../../src/icon/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 { Icon, mergeIcons } from '@nvidia-elements/core/icon';\n\ndefine(Icon);\nif (customElements.get(Icon.metadata.tag)) {\n  mergeIcons(customElements.get(Icon.metadata.tag) as typeof Icon);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-icon': Icon;\n  }\n}\n"],"mappings":";;AAMA,EAAO,EAAK,EACR,eAAe,IAAI,EAAK,SAAS,IAAI,IACvC,EAAW,eAAe,IAAI,EAAK,SAAS,IAAI,CAAgB"}

package/dist/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","names":[],"sources":["../../src/icon/icon.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: var(--nve-sys-text-muted-color);\n  --width: var(--nve-ref-size-400);\n  --height: var(--nve-ref-size-400);\n  display: inline-flex;\n  contain: layout;\n}\n\n[internal-host] {\n  --_width: calc(var(--width) * var(--nve-ref-scale-size, 1));\n  --_height: calc(var(--height) * var(--nve-ref-scale-size, 1));\n  color: var(--color);\n  width: var(--_width);\n  height: var(--_height);\n  place-self: center;\n  display: flex;\n  place-items: center;\n}\n\nsvg {\n  width: var(--_width);\n  height: var(--_height);\n}\n\n:host([outline]) {\n  outline: 1px dashed var(--color);\n}\n\n:host([size='xs']) {\n  --width: var(--nve-ref-size-200);\n  --height: var(--nve-ref-size-200);\n}\n\n:host([size='sm']) {\n  --width: var(--nve-ref-size-300);\n  --height: var(--nve-ref-size-300);\n}\n\n:host([size='lg']) {\n  --width: var(--nve-ref-size-500);\n  --height: var(--nve-ref-size-500);\n}\n\n:host([size='xl']) {\n  --width: var(--nve-ref-size-600);\n  --height: var(--nve-ref-size-600);\n}\n\n/* icons scaled down by 20% to match misalignment export bug in figma icon */\n:host([name='arrow']),\n:host([name='arrow-angle']),\n:host([name='cancel']),\n:host([name='caret']),\n:host([name='chevron']),\n:host([name='double-chevron']) {\n  --nve-ref-scale-size: 0.8;\n}\n\n:host([direction='up']) {\n  transform: rotate(0deg);\n}\n\n:host([direction='down']) {\n  transform: rotate(180deg);\n}\n\n:host([direction='left']) {\n  transform: rotate(270deg);\n}\n\n:host([direction='right']) {\n  transform: rotate(90deg);\n}\n\n:host([status='success']) {\n  --color: var(--nve-sys-support-success-color);\n}\n\n:host([status='warning']) {\n  --color: var(--nve-sys-support-warning-color);\n}\n\n:host([status='danger']) {\n  --color: var(--nve-sys-support-danger-color);\n}\n\n:host([status='accent']) {\n  --color: var(--nve-sys-support-accent-color);\n}\n\n"],"mappings":""}
+{"version":3,"file":"icon.js","names":[],"sources":["../../src/icon/icon.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: var(--nve-sys-text-muted-color);\n  --width: var(--nve-ref-size-400);\n  --height: var(--nve-ref-size-400);\n  display: inline-flex;\n  contain: layout;\n}\n\n[internal-host] {\n  --_width: calc(var(--width) * var(--nve-ref-scale-size, 1));\n  --_height: calc(var(--height) * var(--nve-ref-scale-size, 1));\n  color: var(--color);\n  width: var(--_width);\n  height: var(--_height);\n  place-self: center;\n  display: flex;\n  place-items: center;\n}\n\nsvg {\n  width: var(--_width);\n  height: var(--_height);\n}\n\n:host([outline]) {\n  outline: 1px dashed var(--color);\n}\n\n:host([size='xs']) {\n  --width: var(--nve-ref-size-200);\n  --height: var(--nve-ref-size-200);\n}\n\n:host([size='sm']) {\n  --width: var(--nve-ref-size-300);\n  --height: var(--nve-ref-size-300);\n}\n\n:host([size='lg']) {\n  --width: var(--nve-ref-size-500);\n  --height: var(--nve-ref-size-500);\n}\n\n:host([size='xl']) {\n  --width: var(--nve-ref-size-600);\n  --height: var(--nve-ref-size-600);\n}\n\n/* icons scaled down by 20% to match misalignment export bug in figma icon */\n:host([name='arrow']),\n:host([name='arrow-angle']),\n:host([name='cancel']),\n:host([name='caret']),\n:host([name='chevron']),\n:host([name='double-chevron']) {\n  --nve-ref-scale-size: 0.8;\n}\n\n:host([direction='up']) {\n  transform: rotate(0deg);\n}\n\n:host([direction='down']) {\n  transform: rotate(180deg);\n}\n\n:host([direction='left']) {\n  transform: rotate(270deg);\n}\n\n:host([direction='right']) {\n  transform: rotate(90deg);\n}\n\n:host([status='success']) {\n  --color: var(--nve-sys-support-success-color);\n}\n\n:host([status='warning']) {\n  --color: var(--nve-sys-support-warning-color);\n}\n\n:host([status='danger']) {\n  --color: var(--nve-sys-support-danger-color);\n}\n\n:host([status='accent']) {\n  --color: var(--nve-sys-support-accent-color);\n}\n"],"mappings":""}

package/dist/icon/icon2.js

@@ -16,7 +16,7 @@ var f = class e extends o {
 	static {
 		this.metadata = {
 			tag: "nve-icon",
-			version: "0.0.7"
+			version: "0.0.8"
 		};
 	}
 	static {
@@ -86,7 +86,7 @@ n([l({
 })], f.prototype, "name", void 0), n([d()], f.prototype, "svg", void 0);
 function p(t) {
 	if (typeof globalThis.customElements?.get == "function") {
-		let n = e(t.metadata.version), r = e("0.0.7");
+		let n = e(t.metadata.version), r = e("0.0.8");
 		n.minor <= r.minor && n.major <= r.major && (t._icons = {
 			...t._icons,
 			...i

package/dist/icon-button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","names":[],"sources":["../../src/icon-button/icon-button.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: var(--nve-sys-text-muted-color);\n  --border-radius: var(--nve-ref-border-radius-full);\n  --padding: 0;\n  --line-height: 0;\n  --gap: 0;\n  --height: var(--nve-ref-size-800);\n  --width: var(--nve-ref-size-800);\n  --font-size: calc(var(--width) / 2.3);\n}\n\n/* override base button inline style */\n:host([container*='inline']) {\n  --height: var(--nve-ref-size-800);\n  --line-height: 0;\n}\n\n:host([size='sm']) {\n  --padding: 0;\n  --height: var(--nve-ref-size-700);\n  --width: var(--nve-ref-size-700);\n}\n\n:host([size='lg']) {\n  --width: var(--nve-ref-size-1000);\n  --height: var(--nve-ref-size-1000);\n  --padding: 0;\n}\n\n[internal-host] {\n  font-size: var(--font-size);\n}\n\n/* disable pseudo element on base button */\n[internal-host]::after {\n  display: none !important;\n}\n\nnve-icon {\n  --color: var(--_icon-color);\n  pointer-events: none;\n}\n\n::slotted(a) {\n  text-decoration: none !important;\n  color: var(--color) !important;\n  outline: 0;\n}\n\n::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n}\n\n/* deprecated */\n:host([interaction*='flat']) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0 !important;\n}\n\n/* deprecated */\n:host([interaction*='flat']:state(pressed)) {\n  --color: var(--nve-sys-text-emphasis-color) !important;\n  --background: none !important;\n}\n\n"],"mappings":""}
+{"version":3,"file":"icon-button.js","names":[],"sources":["../../src/icon-button/icon-button.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: var(--nve-sys-text-muted-color);\n  --border-radius: var(--nve-ref-border-radius-full);\n  --padding: 0;\n  --line-height: 0;\n  --gap: 0;\n  --height: var(--nve-ref-size-800);\n  --width: var(--nve-ref-size-800);\n  --font-size: calc(var(--width) / 2.3);\n}\n\n/* override base button inline style */\n:host([container*='inline']) {\n  --height: var(--nve-ref-size-800);\n  --line-height: 0;\n}\n\n:host([size='sm']) {\n  --padding: 0;\n  --height: var(--nve-ref-size-700);\n  --width: var(--nve-ref-size-700);\n}\n\n:host([size='lg']) {\n  --width: var(--nve-ref-size-1000);\n  --height: var(--nve-ref-size-1000);\n  --padding: 0;\n}\n\n[internal-host] {\n  font-size: var(--font-size);\n}\n\n/* disable pseudo element on base button */\n[internal-host]::after {\n  display: none !important;\n}\n\nnve-icon {\n  --color: var(--_icon-color);\n  pointer-events: none;\n}\n\n::slotted(a) {\n  text-decoration: none !important;\n  color: var(--color) !important;\n  outline: 0;\n}\n\n::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n}\n\n/* deprecated */\n:host([interaction*='flat']) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0 !important;\n}\n\n/* deprecated */\n:host([interaction*='flat']:state(pressed)) {\n  --color: var(--nve-sys-text-emphasis-color) !important;\n  --background: none !important;\n}\n"],"mappings":""}

package/dist/icon-button/icon-button2.js

@@ -15,7 +15,7 @@ var l = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-icon-button",
-			version: "0.0.7"
+			version: "0.0.8"
 		};
 	}
 	static {

package/dist/index.js

@@ -2,7 +2,7 @@ import { getThemeTokens as e } from "./internal/utils/dom.js";
 import { I18nService as t } from "./internal/services/i18n.service.js";
 import { statusIcons as n } from "./internal/types/index.js";
 //#region src/index.ts
-var r = "0.0.7", i = "@nvidia-elements";
+var r = "0.0.8", i = "@nvidia-elements";
 //#endregion
 export { t as I18nService, i as SCOPE, r as VERSION, e as getThemeTokens, n as statusIcons };
 

package/dist/input/input-group.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.global.js","names":[],"sources":["../../src/input/input-group.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-input-group[type='filter'] > nve-select::part(_caret),\nnve-input-group[type='filter'] > nve-select::part(_caret) {\n  display: none !important;\n}\n\nnve-input-group > [nve-control],\nnve-input-group > nve-button,\nnve-input-group > [nve-control],\nnve-input-group > nve-button {\n  --border-radius: 0;\n}\n\nnve-input-group[type='filter'] [nve-control]:nth-child(odd),\nnve-input-group[type='filter'] nve-button:nth-child(odd),\nnve-input-group[type='filter'] [nve-control]:nth-child(odd),\nnve-input-group[type='filter'] nve-button:nth-child(odd) {\n  --font-weight: var(--nve-ref-font-weight-medium);\n  --text-align: center;\n}\n"],"mappings":""}
+{"version":3,"file":"input-group.global.js","names":[],"sources":["../../src/input/input-group.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-input-group[type='filter'] > nve-select::part(_caret) {\n  display: none !important;\n}\n\nnve-input-group > [nve-control],\nnve-input-group > nve-button {\n  --border-radius: 0;\n}\n\nnve-input-group[type='filter'] [nve-control]:nth-child(odd),\nnve-input-group[type='filter'] nve-button:nth-child(odd) {\n  --font-weight: var(--nve-ref-font-weight-medium);\n  --text-align: center;\n}\n"],"mappings":""}

package/dist/input/input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","names":[],"sources":["../../src/input/input-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: var(--nve-ref-border-color);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --gap: calc(var(--nve-ref-space-xxxs) / 2);\n  --border: none;\n  width: fit-content;\n  contain: none;\n}\n\n[internal-host] {\n  border-radius: var(--border-radius);\n  overflow: hidden;\n  width: max-content;\n  border: var(--border);\n}\n\n.input-slot {\n  background: var(--background);\n  border-radius: var(--border-radius);\n  flex-flow: row nowrap;\n  gap: var(--gap);\n}\n\nslot[name='label'] {\n  align-self: center;\n}\n\n::slotted(nve-icon-button),\n::slotted(nve-icon-button) {\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-support-emphasis-color);\n  --border-radius: 0;\n}\n\n::slotted(nve-select),\n::slotted(nve-select) {\n  --padding: 0 var(--nve-ref-size-200);\n  width: fit-content;\n}\n\n::slotted([nve-control]),\n::slotted([nve-control]) {\n  --border-radius: 0 !important;\n}\n\n::slotted([first-control]) {\n  --border-radius: var(--nve-ref-border-radius-sm) 0 0 var(--nve-ref-border-radius-sm) !important;\n}\n\n::slotted([last-control]) {\n  --border-radius: 0 var(--nve-ref-border-radius-sm) var(--nve-ref-border-radius-sm) 0 !important;\n}\n"],"mappings":""}
+{"version":3,"file":"input-group.js","names":[],"sources":["../../src/input/input-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: var(--nve-ref-border-color);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --gap: calc(var(--nve-ref-space-xxxs) / 2);\n  --border: none;\n  width: fit-content;\n  contain: none;\n}\n\n[internal-host] {\n  border-radius: var(--border-radius);\n  overflow: hidden;\n  width: max-content;\n  border: var(--border);\n}\n\n.input-slot {\n  background: var(--background);\n  border-radius: var(--border-radius);\n  flex-flow: row nowrap;\n  gap: var(--gap);\n}\n\nslot[name='label'] {\n  align-self: center;\n}\n\n::slotted(nve-icon-button) {\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-support-emphasis-color);\n  --border-radius: 0;\n}\n\n::slotted(nve-select) {\n  --padding: 0 var(--nve-ref-size-200);\n  width: fit-content;\n}\n\n::slotted([nve-control]) {\n  --border-radius: 0 !important;\n}\n\n::slotted([first-control]) {\n  --border-radius: var(--nve-ref-border-radius-sm) 0 0 var(--nve-ref-border-radius-sm) !important;\n}\n\n::slotted([last-control]) {\n  --border-radius: 0 var(--nve-ref-border-radius-sm) var(--nve-ref-border-radius-sm) 0 !important;\n}\n"],"mappings":""}

package/dist/input/input-group2.js

@@ -11,7 +11,7 @@ var a = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-input-group",
-			version: "0.0.7"
+			version: "0.0.8"
 		};
 	}
 	async connectedCallback() {