@nvidia-elements/core 0.0.2 → 0.0.4

package/dist/format-relative-time/format-relative-time.examples.js

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

package/dist/format-relative-time/format-relative-time.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-relative-time.examples.js","names":[],"sources":["../../src/format-relative-time/format-relative-time.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/format-relative-time/define.js';\n\nexport default {\n  title: 'Elements/FormatRelativeTime',\n  component: 'nve-format-relative-time',\n};\n\n/**\n * @summary Basic relative time formatting with auto unit selection. Use for displaying human-readable relative timestamps in content areas, feeds, or metadata.\n */\nexport const Default = {\n  render: () => html`\n<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time>2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time>2024-06-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time>2025-12-01T12:00:00.000Z</nve-format-relative-time>\n</div>\n  `\n};\n\n/**\n * @summary Numeric formatting control for natural language output. Use 'auto' to display natural forms such as 'yesterday' instead of '1 day ago'.\n */\nexport const Numeric = {\n  render: () => html`\n<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time numeric=\"always\" unit=\"year\">2025-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time numeric=\"auto\" unit=\"year\">2025-01-15T12:00:00.000Z</nve-format-relative-time>\n</div>\n  `\n};\n\n/**\n * @summary Format style presets for controlling output verbosity. Use 'short' or 'narrow' for compact layouts such as data tables or timelines.\n */\nexport const FormatStyle = {\n  render: () => html`\n<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time format-style=\"long\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time format-style=\"short\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time format-style=\"narrow\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n</div>\n  `\n};\n\n/**\n * @summary Explicit time unit selection for keeping relative time in a fixed unit. Use when you always want output in days, months, or years instead of letting the component auto-select the unit.\n */\nexport const Unit = {\n  render: () => html`\n<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time unit=\"day\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time unit=\"month\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time unit=\"year\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n</div>\n  `\n};\n\n/**\n * @summary Explicit locale settings for internationalized relative time output. Use when the target audience locale differs from the document language or browser default.\n */\nexport const Locale = {\n  render: () => html`\n<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time locale=\"de-DE\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time locale=\"ja\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time locale=\"fr-FR\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n</div>\n  `\n};\n\n/**\n * @summary Date attribute input for values supplied by JavaScript or bound data. By default, the component formats text content, which also serves as the SSR fallback, and `date` wins when both are present.\n */\nexport const DateAttribute = {\n  render: () => html`\n  <nve-format-relative-time date=\"2020-01-15T12:00:00.000Z\"></nve-format-relative-time>\n  `\n};\n\n/**\n * @summary Auto-updating relative time with the sync attribute. Use for live feeds, notifications, or dashboards where freshness matters.\n */\nexport const Sync = {\n  render: () => html`\n  <nve-format-relative-time sync>2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/format-relative-time/format-relative-time.examples.json

@@ -0,0 +1,69 @@
+{
+  "element": "nve-format-relative-time",
+  "entrypoint": "@nvidia-elements/core/format-relative-time/format-relative-time.examples.json",
+  "items": [
+    {
+      "id": "core-format-relative-time_default",
+      "name": "Default",
+      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time>2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time>2024-06-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time>2025-12-01T12:00:00.000Z</nve-format-relative-time>\n</div>\n",
+      "summary": "Basic relative time formatting with auto unit selection. Use for displaying human-readable relative timestamps in content areas, feeds, or metadata.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-format-relative-time_numeric",
+      "name": "Numeric",
+      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time numeric=\"always\" unit=\"year\">2025-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time numeric=\"auto\" unit=\"year\">2025-01-15T12:00:00.000Z</nve-format-relative-time>\n</div>\n",
+      "summary": "Numeric formatting control for natural language output. Use 'auto' to display natural forms such as 'yesterday' instead of '1 day ago'.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-format-relative-time_format-style",
+      "name": "FormatStyle",
+      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time format-style=\"long\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time format-style=\"short\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time format-style=\"narrow\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n</div>\n",
+      "summary": "Format style presets for controlling output verbosity. Use 'short' or 'narrow' for compact layouts such as data tables or timelines.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-format-relative-time_unit",
+      "name": "Unit",
+      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time unit=\"day\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time unit=\"month\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time unit=\"year\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n</div>\n",
+      "summary": "Explicit time unit selection for keeping relative time in a fixed unit. Use when you always want output in days, months, or years instead of letting the component auto-select the unit.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-format-relative-time_locale",
+      "name": "Locale",
+      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time locale=\"de-DE\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time locale=\"ja\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time locale=\"fr-FR\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n</div>\n",
+      "summary": "Explicit locale settings for internationalized relative time output. Use when the target audience locale differs from the document language or browser default.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-format-relative-time_date-attribute",
+      "name": "DateAttribute",
+      "template": "<nve-format-relative-time date=\"2020-01-15T12:00:00.000Z\"></nve-format-relative-time>\n",
+      "summary": "Date attribute input for values supplied by JavaScript or bound data. By default, the component formats text content, which also serves as the SSR fallback, and `date` wins when both are present.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-format-relative-time_sync",
+      "name": "Sync",
+      "template": "<nve-format-relative-time sync>2020-01-15T12:00:00.000Z</nve-format-relative-time>\n",
+      "summary": "Auto-updating relative time with the sync attribute. Use for live feeds, notifications, or dashboards where freshness matters.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    }
+  ]
+}

package/dist/format-relative-time/format-relative-time.js

@@ -0,0 +1,6 @@
+//#region src/format-relative-time/format-relative-time.css?inline
+var e = ":host{display:inline}[internal-host]{color:var(--nve-sys-text-color, inherit)}slot{display:none}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=format-relative-time.js.map

package/dist/format-relative-time/format-relative-time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-relative-time.js","names":[],"sources":["../../src/format-relative-time/format-relative-time.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  display: inline;\n}\n\n[internal-host] {\n  color: var(--nve-sys-text-color, inherit);\n}\n\nslot {\n  display: none;\n}\n"],"mappings":""}

package/dist/format-relative-time/format-relative-time2.js

@@ -0,0 +1,118 @@
+import { LogService as e } from "../internal/services/log.service.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { typeSSR as n } from "../internal/controllers/type-ssr.controller.js";
+import { useStyles as r } from "../internal/styles/index.js";
+import i from "./format-relative-time.js";
+import { LitElement as a, html as o } from "lit";
+import { property as s } from "lit/decorators/property.js";
+//#region src/format-relative-time/format-relative-time.ts
+var c = class extends a {
+	constructor(...e) {
+		super(...e), this.numeric = "always", this.formatStyle = "long", this.unit = "auto", this.sync = !1;
+	}
+	static {
+		this.styles = r([i]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-format-relative-time",
+			version: "0.0.4"
+		};
+	}
+	#e;
+	get #t() {
+		return this.date ?? this.textContent?.trim() ?? "";
+	}
+	get #n() {
+		return this.locale ?? (globalThis.document?.documentElement?.lang || void 0);
+	}
+	#r(e) {
+		let t = Math.abs(e), n = e < 0 ? -1 : 1, r = Math.round(t / 1e3), i = Math.round(t / 6e4), a = Math.round(t / 36e5), o = Math.round(t / 864e5), s = Math.round(t / 6048e5), c = Math.round(t / 2592e6), l = Math.round(t / 31536e6);
+		return r < 60 ? {
+			value: n * r,
+			unit: "second"
+		} : i < 60 ? {
+			value: n * i,
+			unit: "minute"
+		} : a < 24 ? {
+			value: n * a,
+			unit: "hour"
+		} : o < 7 ? {
+			value: n * o,
+			unit: "day"
+		} : s < 4 ? {
+			value: n * s,
+			unit: "week"
+		} : c < 12 ? {
+			value: n * c,
+			unit: "month"
+		} : {
+			value: n * l,
+			unit: "year"
+		};
+	}
+	#i(e, t) {
+		return Math.round(e / ({
+			second: 1e3,
+			minute: 6e4,
+			hour: 36e5,
+			day: 864e5,
+			week: 6048e5,
+			month: 2592e6,
+			year: 31536e6
+		}[t] ?? 1));
+	}
+	get #a() {
+		let t = this.#t;
+		if (!t) return "";
+		let n = new Date(t);
+		if (isNaN(n.getTime())) return e.warn(`format-relative-time: invalid date value "${t}"`), t;
+		let r = n.getTime() - Date.now(), i, a;
+		this.unit === "auto" ? {value: i, unit: a} = this.#r(r) : (a = this.unit, i = this.#i(r, a));
+		try {
+			return new Intl.RelativeTimeFormat(this.#n, {
+				numeric: this.numeric,
+				style: this.formatStyle
+			}).format(i, a);
+		} catch (n) {
+			return e.warn(`format-relative-time: ${n.message}`), t;
+		}
+	}
+	#o() {
+		let e = this.#t;
+		if (!e) return 6e4;
+		let t = Math.abs(new Date(e).getTime() - Date.now());
+		return t < 6e4 ? 1e4 : t < 36e5 ? 3e4 : t < 864e5 ? 3e5 : 36e5;
+	}
+	#s() {
+		this.#c(), this.sync && (this.#e = setTimeout(() => {
+			this.requestUpdate(), this.#s();
+		}, this.#o()));
+	}
+	#c() {
+		this.#e !== void 0 && (clearTimeout(this.#e), this.#e = void 0);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.sync && this.#s();
+	}
+	disconnectedCallback() {
+		this.#c(), super.disconnectedCallback();
+	}
+	updated(e) {
+		e.has("sync") && (this.sync ? this.#s() : this.#c());
+	}
+	render() {
+		return o`<time internal-host datetime="${this.#t}">${this.#a}<slot @slotchange="${this.#l}" hidden></slot></time>`;
+	}
+	#l() {
+		this.requestUpdate();
+	}
+};
+t([s({ type: String })], c.prototype, "date", void 0), t([s({ type: String })], c.prototype, "locale", void 0), t([s({ type: String })], c.prototype, "numeric", void 0), t([s({
+	type: String,
+	attribute: "format-style"
+})], c.prototype, "formatStyle", void 0), t([s({ type: String })], c.prototype, "unit", void 0), t([s({ type: Boolean })], c.prototype, "sync", void 0), c = t([n()], c);
+//#endregion
+export { c as FormatRelativeTime };
+
+//# sourceMappingURL=format-relative-time2.js.map

package/dist/format-relative-time/format-relative-time2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-relative-time2.js","names":["#dateValue","#resolvedLocale","#formattedRelativeTime","#computeUnit","#computeExplicitUnit","#stopSync","#timer","#startSync","#getSyncInterval","#onSlotChange"],"sources":["../../src/format-relative-time/format-relative-time.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, typeSSR, LogService } from '@nvidia-elements/core/internal';\nimport styles from './format-relative-time.css?inline';\n\ntype TimeUnitOption = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';\n\n/**\n * @element nve-format-relative-time\n * @description Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element.\n * Options mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/format-relative-time\n * @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.\n */\n@typeSSR()\nexport class FormatRelativeTime extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-format-relative-time',\n    version: '0.0.0'\n  };\n\n  /**\n   * Optional date string for values supplied by JavaScript or bound data.\n   * By default, the component formats the element's text content, which also serves as the SSR fallback.\n   * When both are present, this property takes precedence.\n   */\n  @property({ type: String }) date?: string;\n\n  /**\n   * Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.\n   */\n  @property({ type: String }) locale?: string;\n\n  /**\n   * Numeric formatting: 'always' | 'auto'. When 'auto', enables natural language forms such as 'yesterday' instead of '1 day ago'.\n   */\n  @property({ type: String }) numeric: 'always' | 'auto' = 'always';\n\n  /**\n   * Formatting length: 'long' | 'short' | 'narrow'. Controls verbosity (such as '3 days ago' vs '3d ago'). Maps to Intl.RelativeTimeFormat style option.\n   */\n  @property({ type: String, attribute: 'format-style' }) formatStyle: 'long' | 'short' | 'narrow' = 'long';\n\n  /**\n   * Time unit: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' | 'auto'. Use 'auto' to let the component select the most appropriate unit based on the time difference.\n   */\n  @property({ type: String }) unit: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' | 'auto' = 'auto';\n\n  /**\n   * When present, auto-updates the displayed relative time at appropriate intervals.\n   */\n  @property({ type: Boolean }) sync = false;\n\n  #timer?: ReturnType<typeof setTimeout>;\n\n  get #dateValue(): string {\n    return this.date ?? this.textContent?.trim() ?? '';\n  }\n\n  get #resolvedLocale(): string | undefined {\n    return this.locale ?? (globalThis.document?.documentElement?.lang || undefined);\n  }\n\n  #computeUnit(diffMs: number): { value: number; unit: Intl.RelativeTimeFormatUnit } {\n    const absDiff = Math.abs(diffMs);\n    const sign = diffMs < 0 ? -1 : 1;\n\n    const seconds = Math.round(absDiff / 1000);\n    const minutes = Math.round(absDiff / 60000);\n    const hours = Math.round(absDiff / 3600000);\n    const days = Math.round(absDiff / 86400000);\n    const weeks = Math.round(absDiff / 604800000);\n    const months = Math.round(absDiff / 2592000000);\n    const years = Math.round(absDiff / 31536000000);\n\n    if (seconds < 60) return { value: sign * seconds, unit: 'second' };\n    if (minutes < 60) return { value: sign * minutes, unit: 'minute' };\n    if (hours < 24) return { value: sign * hours, unit: 'hour' };\n    if (days < 7) return { value: sign * days, unit: 'day' };\n    if (weeks < 4) return { value: sign * weeks, unit: 'week' };\n    if (months < 12) return { value: sign * months, unit: 'month' };\n    return { value: sign * years, unit: 'year' };\n  }\n\n  #computeExplicitUnit(diffMs: number, unit: TimeUnitOption): number {\n    const divisors: Record<string, number> = {\n      second: 1000,\n      minute: 60000,\n      hour: 3600000,\n      day: 86400000,\n      week: 604800000,\n      month: 2592000000,\n      year: 31536000000\n    };\n    return Math.round(diffMs / (divisors[unit] ?? 1));\n  }\n\n  get #formattedRelativeTime(): string {\n    const iso = this.#dateValue;\n    if (!iso) return '';\n\n    const target = new Date(iso);\n    if (isNaN(target.getTime())) {\n      LogService.warn(`format-relative-time: invalid date value \"${iso}\"`);\n      return iso;\n    }\n\n    const diffMs = target.getTime() - Date.now();\n    let value: number;\n    let resolvedUnit: Intl.RelativeTimeFormatUnit;\n\n    if (this.unit === 'auto') {\n      ({ value, unit: resolvedUnit } = this.#computeUnit(diffMs));\n    } else {\n      resolvedUnit = this.unit;\n      value = this.#computeExplicitUnit(diffMs, resolvedUnit);\n    }\n\n    try {\n      return new Intl.RelativeTimeFormat(this.#resolvedLocale, {\n        numeric: this.numeric,\n        style: this.formatStyle\n      }).format(value, resolvedUnit);\n    } catch (e) {\n      LogService.warn(`format-relative-time: ${(e as Error).message}`);\n      return iso;\n    }\n  }\n\n  #getSyncInterval(): number {\n    const iso = this.#dateValue;\n    if (!iso) return 60000;\n\n    const absDiff = Math.abs(new Date(iso).getTime() - Date.now());\n    if (absDiff < 60000) return 10000;\n    if (absDiff < 3600000) return 30000;\n    if (absDiff < 86400000) return 300000;\n    return 3600000;\n  }\n\n  #startSync() {\n    this.#stopSync();\n    if (!this.sync) return;\n\n    this.#timer = setTimeout(() => {\n      this.requestUpdate();\n      this.#startSync();\n    }, this.#getSyncInterval());\n  }\n\n  #stopSync() {\n    if (this.#timer !== undefined) {\n      clearTimeout(this.#timer);\n      this.#timer = undefined;\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.sync) this.#startSync();\n  }\n\n  disconnectedCallback() {\n    this.#stopSync();\n    super.disconnectedCallback();\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has('sync')) {\n      if (this.sync) {\n        this.#startSync();\n      } else {\n        this.#stopSync();\n      }\n    }\n  }\n\n  render() {\n    return html`<time internal-host datetime=${this.#dateValue}>${this.#formattedRelativeTime}<slot @slotchange=${this.#onSlotChange} hidden></slot></time>`;\n  }\n\n  #onSlotChange() {\n    this.requestUpdate();\n  }\n}\n"],"mappings":";;;;;;;;AAmBO,IAAA,IAAA,cAAiC,EAAW;;8BAuBQ,6BAKyC,oBAKY,oBAK1E;;;gBArCpB,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;CAkCD;CAEA,KAAA,IAAyB;AACvB,SAAO,KAAK,QAAQ,KAAK,aAAa,MAAM,IAAI;;CAGlD,KAAA,IAA0C;AACxC,SAAO,KAAK,WAAW,WAAW,UAAU,iBAAiB,QAAQ,KAAA;;CAGvE,GAAa,GAAsE;EACjF,IAAM,IAAU,KAAK,IAAI,EAAO,EAC1B,IAAO,IAAS,IAAI,KAAK,GAEzB,IAAU,KAAK,MAAM,IAAU,IAAK,EACpC,IAAU,KAAK,MAAM,IAAU,IAAM,EACrC,IAAQ,KAAK,MAAM,IAAU,KAAQ,EACrC,IAAO,KAAK,MAAM,IAAU,MAAS,EACrC,IAAQ,KAAK,MAAM,IAAU,OAAU,EACvC,IAAS,KAAK,MAAM,IAAU,OAAW,EACzC,IAAQ,KAAK,MAAM,IAAU,QAAY;AAQ/C,SANI,IAAU,KAAW;GAAE,OAAO,IAAO;GAAS,MAAM;GAAU,GAC9D,IAAU,KAAW;GAAE,OAAO,IAAO;GAAS,MAAM;GAAU,GAC9D,IAAQ,KAAW;GAAE,OAAO,IAAO;GAAO,MAAM;GAAQ,GACxD,IAAO,IAAU;GAAE,OAAO,IAAO;GAAM,MAAM;GAAO,GACpD,IAAQ,IAAU;GAAE,OAAO,IAAO;GAAO,MAAM;GAAQ,GACvD,IAAS,KAAW;GAAE,OAAO,IAAO;GAAQ,MAAM;GAAS,GACxD;GAAE,OAAO,IAAO;GAAO,MAAM;GAAQ;;CAG9C,GAAqB,GAAgB,GAA8B;AAUjE,SAAO,KAAK,MAAM,KATuB;GACvC,QAAQ;GACR,QAAQ;GACR,MAAM;GACN,KAAK;GACL,MAAM;GACN,OAAO;GACP,MAAM;GACP,CACoC,MAAS,GAAG;;CAGnD,KAAA,IAAqC;EACnC,IAAM,IAAM,MAAA;AACZ,MAAI,CAAC,EAAK,QAAO;EAEjB,IAAM,IAAS,IAAI,KAAK,EAAI;AAC5B,MAAI,MAAM,EAAO,SAAS,CAAC,CAEzB,QADA,EAAW,KAAK,6CAA6C,EAAI,GAAG,EAC7D;EAGT,IAAM,IAAS,EAAO,SAAS,GAAG,KAAK,KAAK,EACxC,GACA;AAEJ,EAAI,KAAK,SAAS,SACf,WAAS,MAAM,KAAiB,MAAA,EAAkB,EAAO,IAE1D,IAAe,KAAK,MACpB,IAAQ,MAAA,EAA0B,GAAQ,EAAa;AAGzD,MAAI;AACF,UAAO,IAAI,KAAK,mBAAmB,MAAA,GAAsB;IACvD,SAAS,KAAK;IACd,OAAO,KAAK;IACb,CAAC,CAAC,OAAO,GAAO,EAAa;WACvB,GAAG;AAEV,UADA,EAAW,KAAK,yBAA0B,EAAY,UAAU,EACzD;;;CAIX,KAA2B;EACzB,IAAM,IAAM,MAAA;AACZ,MAAI,CAAC,EAAK,QAAO;EAEjB,IAAM,IAAU,KAAK,IAAI,IAAI,KAAK,EAAI,CAAC,SAAS,GAAG,KAAK,KAAK,CAAC;AAI9D,SAHI,IAAU,MAAc,MACxB,IAAU,OAAgB,MAC1B,IAAU,QAAiB,MACxB;;CAGT,KAAa;AACX,QAAA,GAAgB,EACX,KAAK,SAEV,MAAA,IAAc,iBAAiB;AAE7B,GADA,KAAK,eAAe,EACpB,MAAA,GAAiB;KAChB,MAAA,GAAuB,CAAC;;CAG7B,KAAY;AACV,EAAI,MAAA,MAAgB,KAAA,MAClB,aAAa,MAAA,EAAY,EACzB,MAAA,IAAc,KAAA;;CAIlB,oBAAoB;AAElB,EADA,MAAM,mBAAmB,EACrB,KAAK,QAAM,MAAA,GAAiB;;CAGlC,uBAAuB;AAErB,EADA,MAAA,GAAgB,EAChB,MAAM,sBAAsB;;CAG9B,QAAQ,GAA+B;AACrC,EAAI,EAAQ,IAAI,OAAO,KACjB,KAAK,OACP,MAAA,GAAiB,GAEjB,MAAA,GAAgB;;CAKtB,SAAS;AACP,SAAO,CAAI,iCAAgC,MAAA,EAAgB,IAAG,MAAA,EAA4B,qBAAoB,MAAA,EAAmB;;CAGnI,KAAgB;AACd,OAAK,eAAe;;;GA5JrB,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAK1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAK1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,KAK1B,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAgB,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAKrD,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAK1B,EAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,SAvC7B,GAAS,CAAA,EAAA,EAAA"}

package/dist/format-relative-time/index.d.ts

@@ -0,0 +1 @@
+export * from './format-relative-time.js';

package/dist/format-relative-time/index.js

@@ -0,0 +1,2 @@
+import { FormatRelativeTime as e } from "./format-relative-time2.js";
+export { e as FormatRelativeTime };

package/dist/forms/control/control2.js

@@ -1,6 +1,6 @@
 import { appendRootNodeStyle as e, getAttributeListChanges as t } from "../../internal/utils/dom.js";
 import { associateAriaDescribedBy as n, associateDataList as r, associateLabel as i, attachInternals as a } from "../../internal/utils/a11y.js";
-import { __decorate as o } from "../../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as o } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { I18nController as s } from "../../internal/controllers/i18n.controller.js";
 import { typeSSR as c } from "../../internal/controllers/type-ssr.controller.js";
 import { hostAttr as l } from "../../internal/decorators/host-attr.js";
@@ -40,7 +40,7 @@ var C = class extends v {
 	static {
 		this.metadata = {
 			tag: "nve-control",
-			version: "0.0.2"
+			version: "0.0.4"
 		};
 	}
 	render() {

package/dist/forms/control-group/control-group2.js

@@ -1,6 +1,6 @@
 import { tagSelector as e } from "../../internal/utils/dom.js";
 import { associateAriaDescribedBy as t, associateAriaLabel as n, associateControlGroup as r, attachInternals as i } from "../../internal/utils/a11y.js";
-import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { useStyles as o } from "../../internal/styles/index.js";
 import { inputQuery as s, setupControlGroupStates as c, setupControlStatusStates as l } from "../utils/states.js";
 import { setupControlLayoutStates as u } from "../utils/layout.js";
@@ -25,7 +25,7 @@ var h = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-control-group",
-			version: "0.0.2"
+			version: "0.0.4"
 		};
 	}
 	render() {

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

@@ -1,4 +1,4 @@
-import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { __decorate as e } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
 import { hostAttr as t } from "../../internal/decorators/host-attr.js";
 import { scopedRegistry as n } from "../../internal/decorators/scoped-registry.js";
 import { useStyles as r } from "../../internal/styles/index.js";
@@ -23,7 +23,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-control-message",
-			version: "0.0.2"
+			version: "0.0.4"
 		};
 	}
 	static {

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

@@ -1 +1 @@
-{"version":3,"file":"forms.examples.js","names":[],"sources":["../../src/forms/forms.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/password/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\nimport '@nvidia-elements/core/radio/define.js';\nimport '@nvidia-elements/core/range/define.js';\nimport '@nvidia-elements/core/time/define.js';\nimport '@nvidia-elements/core/date/define.js';\nimport '@nvidia-elements/core/color/define.js';\nimport '@nvidia-elements/core/datetime/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/switch/define.js';\nimport '@nvidia-elements/core/week/define.js';\nimport '@nvidia-elements/core/file/define.js';\nimport '@nvidia-elements/core/month/define.js';\nimport '@nvidia-elements/core/textarea/define.js';\n\nexport default {\n  title: 'Elements/Forms',\n  component: 'forms'\n}\n\n/**\n * @summary Comprehensive showcase of all form controls in a grid layout, including input types, states, and advanced patterns for complete form design reference.\n */\nexport const KitchenSink = {\n  render: () => html`\n<div style=\"display: grid; gap: 36px 48px; grid-template-columns: 1fr 1fr; max-width: 1400px;\">\n    <nve-input layout=\"vertical-inline\">\n      <label>text label</label>\n      <input />\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\n\n    <nve-search layout=\"vertical-inline\">\n      <label>search label</label>\n      <input type=\"search\" placeholder=\"search\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-search>\n\n    <nve-password layout=\"vertical-inline\">\n      <label>password label</label>\n      <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-password>\n\n    <nve-select layout=\"vertical-inline\">\n      <label>select label</label>\n      <select>\n        <option value=\"1\">Option 1</option>\n        <option value=\"2\">Option 2</option>\n        <option value=\"3\">Option 3</option>\n      </select>\n      <nve-control-message>message</nve-control-message>\n    </nve-select>\n\n    <nve-date layout=\"vertical-inline\">\n      <label>date label</label>\n      <input type=\"date\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-date>\n\n    <nve-datetime layout=\"vertical-inline\">\n      <label>datetime label</label>\n      <input type=\"datetime-local\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-datetime>\n\n    <nve-month layout=\"vertical-inline\">\n      <label>month label</label>\n      <input type=\"month\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-month>\n\n    <nve-week layout=\"vertical-inline\">\n      <label>week label</label>\n      <input type=\"week\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-week>\n\n    <nve-time layout=\"vertical-inline\">\n      <label>time label</label>\n      <input type=\"time\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-time>\n\n    <nve-color layout=\"vertical-inline\">\n      <label>color label</label>\n      <input type=\"color\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-color>\n\n    <nve-input layout=\"vertical-inline\">\n      <label>prefix/suffix label</label>\n      <nve-button container=\"flat\" readonly>https://</nve-button>\n      <input type=\"text\" />\n      <nve-button container=\"flat\" readonly>.com</nve-button>\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\n\n    <nve-input layout=\"vertical-inline\">\n      <label>actions label</label>\n      <nve-icon-button icon-name=\"search\" container=\"flat\" readonly></nve-icon-button>\n      <input type=\"text\" />\n      <nve-icon-button icon-name=\"cancel\" container=\"flat\" aria-label=\"clear\"></nve-icon-button>\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\n\n    <nve-input-group layout=\"vertical-inline\">\n      <label>date range</label>\n      <nve-date>\n        <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n      </nve-date>\n      <nve-date>\n        <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n      </nve-date>\n      <nve-control-message>message</nve-control-message>\n    </nve-input-group>\n\n    <nve-input-group layout=\"vertical-inline\">\n      <label>domain</label>\n      <nve-select style=\"width: 120px\">\n        <select aria-label=\"protocol\">\n          <option>https://</option>\n          <option>http://</option>\n        </select>\n      </nve-select>\n      <nve-input>\n        <input placeholder=\"example\" aria-label=\"host\" />\n        <nve-button container=\"flat\" readonly=\"\">.com</nve-button>\n      </nve-input>\n      <nve-control-message>Host ID: 123456</nve-control-message>\n    </nve-input-group>\n\n    <nve-range layout=\"vertical-inline\">\n      <label>range label</label>\n      <input type=\"range\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-range>\n\n    <nve-checkbox-group layout=\"vertical-inline\">\n      <label>checkbox group label</label>\n      <nve-checkbox>\n        <label>checkbox 1</label>\n        <input type=\"checkbox\" checked />\n      </nve-checkbox>\n\n      <nve-checkbox>\n        <label>checkbox 2</label>\n        <input type=\"checkbox\" />\n      </nve-checkbox>\n\n      <nve-checkbox>\n        <label>checkbox 3</label>\n        <input type=\"checkbox\" />\n      </nve-checkbox>\n      <nve-control-message>message</nve-control-message>\n    </nve-checkbox-group>\n\n    <nve-radio-group layout=\"vertical-inline\">\n      <label>radio group label</label>\n      <nve-radio>\n        <label>radio 1</label>\n        <input type=\"radio\" checked />\n      </nve-radio>\n\n      <nve-radio>\n        <label>radio 2</label>\n        <input type=\"radio\" />\n      </nve-radio>\n\n      <nve-radio>\n        <label>radio 3</label>\n        <input type=\"radio\" />\n      </nve-radio>\n      <nve-control-message>message</nve-control-message>\n    </nve-radio-group>\n\n    <nve-switch-group layout=\"vertical-inline\">\n      <label>switch group label</label>\n      <nve-switch>\n        <label>switch 1</label>\n        <input type=\"checkbox\" />\n      </nve-switch>\n\n      <nve-switch>\n        <label>switch 2</label>\n        <input type=\"checkbox\" checked />\n      </nve-switch>\n      <nve-control-message>message</nve-control-message>\n    </nve-switch-group>\n\n    <nve-select layout=\"vertical-inline\">\n      <label>select multiple label</label>\n      <select multiple>\n        <option value=\"1\">Option 1</option>\n        <option selected value=\"2\">Option 2</option>\n        <option selected value=\"3\">Option 3</option>\n        <option selected value=\"3\">Option 3</option>\n        <option value=\"4\">Option 4</option>\n        <option value=\"5\">Option 5</option>\n      </select>\n      <nve-control-message>message</nve-control-message>\n    </nve-select>\n\n    <nve-textarea layout=\"vertical-inline\">\n      <label>textarea label</label>\n      <textarea></textarea>\n      <nve-control-message>message</nve-control-message>\n    </nve-textarea>\n\n    <nve-file>\n      <label>file label</label>\n      <input type=\"file\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-file>\n\n    <nve-search rounded>\n      <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n      <datalist>\n        <option value=\"search result 1\"></option>\n        <option value=\"search result 2\"></option>\n        <option value=\"search result 3\"></option>\n      </datalist>\n    </nve-search>\n\n    <nve-input layout=\"vertical-inline\">\n      <label>disabled</label>\n      <input disabled />\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\n\n    <nve-input layout=\"vertical-inline\">\n      <label>success</label>\n      <input />\n      <nve-control-message status=\"success\">message</nve-control-message>\n    </nve-input>\n\n    <nve-input layout=\"vertical-inline\">\n      <label>error</label>\n      <input />\n      <nve-control-message status=\"error\">message</nve-control-message>\n    </nve-input>\n</div>\n  `\n}\n\n/**\n * @summary Traditional vertical form layout with labels above inputs, providing clear visual hierarchy and optimal readability for complex forms.\n */\nexport const Vertical = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-input>\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search>\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password>\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select>\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-range>\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group>\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group>\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group>\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select>\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea>\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n  `;\n};\n\n/**\n * @summary Compact vertical layout with inline labels and controls, maximizing space efficiency while maintaining form clarity and accessibility.\n */\nexport const VerticalInline = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"vertical-inline\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search layout=\"vertical-inline\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password layout=\"vertical-inline\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select layout=\"vertical-inline\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-range layout=\"vertical-inline\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select layout=\"vertical-inline\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea layout=\"vertical-inline\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n  `;\n};\n\n/**\n * @summary Horizontal form layout with labels beside inputs, creating efficient use of horizontal space and familiar desktop form patterns.\n */\nexport const Horizontal = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"horizontal\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search layout=\"horizontal\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password layout=\"horizontal\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select layout=\"horizontal\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-range layout=\"horizontal\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group layout=\"horizontal\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group layout=\"horizontal\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select layout=\"horizontal\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n  `;\n};\n\n/**\n * @summary Space-efficient horizontal layout with inline labels, ideal for dense forms with tight vertical space where quick scanning matters.\n */\nexport const HorizontalInline = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"horizontal-inline\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search layout=\"horizontal-inline\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password layout=\"horizontal-inline\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select layout=\"horizontal-inline\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-range layout=\"horizontal-inline\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select layout=\"horizontal-inline\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea layout=\"horizontal-inline\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n  `;\n};\n\n/**\n * @summary Form controls that automatically adjust their width to fit content, optimizing space usage for dynamic or variable-length inputs.\n * @tags test-case\n */\nexport const FitText = {\n  render: () => html`\n<section nve-layout=\"column gap:md full\">\n  <nve-date fit-text>\n    <label>date</label>\n    <input type=\"date\" value=\"2017-06-01\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-input fit-text>\n    <label>label</label>\n    <input value=\"123456789012345678901234567890\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-select fit-text>\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 1234</option>\n      <option value=\"3\">Option 1234567809</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</section>\n`\n};\n\n/**\n * @summary Hidden status icon on the control message in form controls.\n * @tags test-case\n */\nexport const HiddenMessageIcon = {\n  render: () => html`\n<style>\n  .hidden-icon::part(icon) {\n    display: none;\n  }\n</style>\n<nve-switch-group style=\"width: 200px\">\n  <nve-switch>\n    <label>default</label>\n    <input type=\"checkbox\" />\n    <nve-control-message class=\"hidden-icon\">hidden icon control message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message class=\"hidden-icon\" status=\"success\">hidden icon control message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message class=\"hidden-icon\" status=\"error\">hidden icon control message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>warning</label>\n    <input type=\"checkbox\" />\n    <nve-control-message class=\"hidden-icon\" status=\"warning\">hidden icon control message</nve-control-message>\n  </nve-switch>\n</nve-switch-group>\n`\n}\n\n/**\n * @summary Use the prominence muted state to lower visual weight of controls in forms.\n */\nexport const ProminenceMuted = {\n  render: () => html`\n<div nve-layout=\"row gap:lg\">\n  <div nve-layout=\"column gap:lg pad:lg\">\n    <nve-radio-group prominence=\"muted\">\n      <label>label</label>\n      <nve-radio>\n        <label>radio 1</label>\n        <input type=\"radio\" checked />\n      </nve-radio>\n      <nve-radio>\n        <label>radio 2</label>\n        <input type=\"radio\" />\n      </nve-radio>\n      <nve-radio>\n        <label>radio 3</label>\n        <input type=\"radio\" />\n      </nve-radio>\n    </nve-radio-group>\n\n    <nve-checkbox-group prominence=\"muted\">\n      <label>label</label>\n      <nve-checkbox>\n        <label>checkbox 1</label>\n        <input type=\"checkbox\" checked />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>checkbox 2</label>\n        <input type=\"checkbox\" />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>checkbox 3</label>\n        <input type=\"checkbox\" />\n      </nve-checkbox>\n    </nve-checkbox-group>\n\n    <nve-switch-group prominence=\"muted\">\n      <label>label</label>\n      <nve-switch>\n        <label>switch 1</label>\n        <input type=\"checkbox\" checked />\n      </nve-switch>\n      <nve-switch>\n        <label>switch 2</label>\n        <input type=\"checkbox\" />\n      </nve-switch>\n      <nve-switch>\n        <label>switch 3</label>\n        <input type=\"checkbox\" />\n      </nve-switch>\n    </nve-switch-group>\n\n    <nve-range prominence=\"muted\">\n      <label>label</label>\n      <input type=\"range\" />\n    </nve-range>\n  </div>\n  <nve-card>\n    <nve-card-content>\n      <div nve-layout=\"column gap:lg pad:lg\">\n        <nve-radio-group prominence=\"muted\">\n          <label>label</label>\n          <nve-radio>\n            <label>radio 1</label>\n            <input type=\"radio\" checked />\n          </nve-radio>\n          <nve-radio>\n            <label>radio 2</label>\n            <input type=\"radio\" />\n          </nve-radio>\n          <nve-radio>\n            <label>radio 3</label>\n            <input type=\"radio\" />\n          </nve-radio>\n        </nve-radio-group>\n\n        <nve-checkbox-group prominence=\"muted\">\n          <label>label</label>\n          <nve-checkbox>\n            <label>checkbox 1</label>\n            <input type=\"checkbox\" checked />\n          </nve-checkbox>\n          <nve-checkbox>\n            <label>checkbox 2</label>\n            <input type=\"checkbox\" />\n          </nve-checkbox>\n          <nve-checkbox>\n            <label>checkbox 3</label>\n            <input type=\"checkbox\" />\n          </nve-checkbox>\n        </nve-checkbox-group>\n\n        <nve-switch-group prominence=\"muted\">\n          <label>label</label>\n          <nve-switch>\n            <label>switch 1</label>\n            <input type=\"checkbox\" checked />\n          </nve-switch>\n          <nve-switch>\n            <label>switch 2</label>\n            <input type=\"checkbox\" />\n          </nve-switch>\n          <nve-switch>\n            <label>switch 3</label>\n            <input type=\"checkbox\" />\n          </nve-switch>\n        </nve-switch-group>\n\n        <nve-range prominence=\"muted\">\n        <label>label</label>\n          <input type=\"range\" />\n        </nve-range>\n      </div>\n    </nve-card-content>\n  </nve-card>\n</div>\n`\n}"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"forms.examples.js","names":[],"sources":["../../src/forms/forms.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/password/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\nimport '@nvidia-elements/core/radio/define.js';\nimport '@nvidia-elements/core/range/define.js';\nimport '@nvidia-elements/core/time/define.js';\nimport '@nvidia-elements/core/date/define.js';\nimport '@nvidia-elements/core/color/define.js';\nimport '@nvidia-elements/core/datetime/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/switch/define.js';\nimport '@nvidia-elements/core/week/define.js';\nimport '@nvidia-elements/core/file/define.js';\nimport '@nvidia-elements/core/month/define.js';\nimport '@nvidia-elements/core/textarea/define.js';\n\nexport default {\n  title: 'Elements/Forms',\n  component: 'forms'\n}\n\n/**\n * @summary Comprehensive showcase of all form controls in a grid layout, including input types, states, and advanced patterns use for a complete form design reference.\n * @tags pattern\n */\nexport const KitchenSink = {\n  render: () => html`\n<div style=\"display: grid; gap: 36px 48px; grid-template-columns: 1fr 1fr; max-width: 1400px;\">\n    <nve-input layout=\"vertical-inline\">\n      <label>text label</label>\n      <input />\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\n\n    <nve-search layout=\"vertical-inline\">\n      <label>search label</label>\n      <input type=\"search\" placeholder=\"search\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-search>\n\n    <nve-password layout=\"vertical-inline\">\n      <label>password label</label>\n      <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-password>\n\n    <nve-select layout=\"vertical-inline\">\n      <label>select label</label>\n      <select>\n        <option value=\"1\">Option 1</option>\n        <option value=\"2\">Option 2</option>\n        <option value=\"3\">Option 3</option>\n      </select>\n      <nve-control-message>message</nve-control-message>\n    </nve-select>\n\n    <nve-date layout=\"vertical-inline\">\n      <label>date label</label>\n      <input type=\"date\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-date>\n\n    <nve-datetime layout=\"vertical-inline\">\n      <label>datetime label</label>\n      <input type=\"datetime-local\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-datetime>\n\n    <nve-month layout=\"vertical-inline\">\n      <label>month label</label>\n      <input type=\"month\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-month>\n\n    <nve-week layout=\"vertical-inline\">\n      <label>week label</label>\n      <input type=\"week\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-week>\n\n    <nve-time layout=\"vertical-inline\">\n      <label>time label</label>\n      <input type=\"time\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-time>\n\n    <nve-color layout=\"vertical-inline\">\n      <label>color label</label>\n      <input type=\"color\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-color>\n\n    <nve-input layout=\"vertical-inline\">\n      <label>prefix/suffix label</label>\n      <nve-button container=\"flat\" readonly>https://</nve-button>\n      <input type=\"text\" />\n      <nve-button container=\"flat\" readonly>.com</nve-button>\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\n\n    <nve-input layout=\"vertical-inline\">\n      <label>actions label</label>\n      <nve-icon-button icon-name=\"search\" container=\"flat\" readonly></nve-icon-button>\n      <input type=\"text\" />\n      <nve-icon-button icon-name=\"cancel\" container=\"flat\" aria-label=\"clear\"></nve-icon-button>\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\n\n    <nve-input-group layout=\"vertical-inline\">\n      <label>date range</label>\n      <nve-date>\n        <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n      </nve-date>\n      <nve-date>\n        <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n      </nve-date>\n      <nve-control-message>message</nve-control-message>\n    </nve-input-group>\n\n    <nve-input-group layout=\"vertical-inline\">\n      <label>domain</label>\n      <nve-select style=\"width: 120px\">\n        <select aria-label=\"protocol\">\n          <option>https://</option>\n          <option>http://</option>\n        </select>\n      </nve-select>\n      <nve-input>\n        <input placeholder=\"example\" aria-label=\"host\" />\n        <nve-button container=\"flat\" readonly=\"\">.com</nve-button>\n      </nve-input>\n      <nve-control-message>Host ID: 123456</nve-control-message>\n    </nve-input-group>\n\n    <nve-range layout=\"vertical-inline\">\n      <label>range label</label>\n      <input type=\"range\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-range>\n\n    <nve-checkbox-group layout=\"vertical-inline\">\n      <label>checkbox group label</label>\n      <nve-checkbox>\n        <label>checkbox 1</label>\n        <input type=\"checkbox\" checked />\n      </nve-checkbox>\n\n      <nve-checkbox>\n        <label>checkbox 2</label>\n        <input type=\"checkbox\" />\n      </nve-checkbox>\n\n      <nve-checkbox>\n        <label>checkbox 3</label>\n        <input type=\"checkbox\" />\n      </nve-checkbox>\n      <nve-control-message>message</nve-control-message>\n    </nve-checkbox-group>\n\n    <nve-radio-group layout=\"vertical-inline\">\n      <label>radio group label</label>\n      <nve-radio>\n        <label>radio 1</label>\n        <input type=\"radio\" checked />\n      </nve-radio>\n\n      <nve-radio>\n        <label>radio 2</label>\n        <input type=\"radio\" />\n      </nve-radio>\n\n      <nve-radio>\n        <label>radio 3</label>\n        <input type=\"radio\" />\n      </nve-radio>\n      <nve-control-message>message</nve-control-message>\n    </nve-radio-group>\n\n    <nve-switch-group layout=\"vertical-inline\">\n      <label>switch group label</label>\n      <nve-switch>\n        <label>switch 1</label>\n        <input type=\"checkbox\" />\n      </nve-switch>\n\n      <nve-switch>\n        <label>switch 2</label>\n        <input type=\"checkbox\" checked />\n      </nve-switch>\n      <nve-control-message>message</nve-control-message>\n    </nve-switch-group>\n\n    <nve-select layout=\"vertical-inline\">\n      <label>select multiple label</label>\n      <select multiple>\n        <option value=\"1\">Option 1</option>\n        <option selected value=\"2\">Option 2</option>\n        <option selected value=\"3\">Option 3</option>\n        <option selected value=\"3\">Option 3</option>\n        <option value=\"4\">Option 4</option>\n        <option value=\"5\">Option 5</option>\n      </select>\n      <nve-control-message>message</nve-control-message>\n    </nve-select>\n\n    <nve-textarea layout=\"vertical-inline\">\n      <label>textarea label</label>\n      <textarea></textarea>\n      <nve-control-message>message</nve-control-message>\n    </nve-textarea>\n\n    <nve-file>\n      <label>file label</label>\n      <input type=\"file\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-file>\n\n    <nve-search rounded>\n      <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n      <datalist>\n        <option value=\"search result 1\"></option>\n        <option value=\"search result 2\"></option>\n        <option value=\"search result 3\"></option>\n      </datalist>\n    </nve-search>\n\n    <nve-input layout=\"vertical-inline\">\n      <label>disabled</label>\n      <input disabled />\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\n\n    <nve-input layout=\"vertical-inline\">\n      <label>success</label>\n      <input />\n      <nve-control-message status=\"success\">message</nve-control-message>\n    </nve-input>\n\n    <nve-input layout=\"vertical-inline\">\n      <label>error</label>\n      <input />\n      <nve-control-message status=\"error\">message</nve-control-message>\n    </nve-input>\n</div>\n  `\n}\n\n/**\n * @summary Traditional vertical form layout with labels above inputs, providing clear visual hierarchy and optimal readability for complex forms.\n */\nexport const Vertical = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-input>\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search>\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password>\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select>\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-range>\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group>\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group>\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group>\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select>\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea>\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n  `;\n};\n\n/**\n * @summary Compact vertical layout with inline labels and controls, maximizing space efficiency while maintaining form clarity and accessibility.\n */\nexport const VerticalInline = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"vertical-inline\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search layout=\"vertical-inline\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password layout=\"vertical-inline\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select layout=\"vertical-inline\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-range layout=\"vertical-inline\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select layout=\"vertical-inline\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea layout=\"vertical-inline\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n  `;\n};\n\n/**\n * @summary Horizontal form layout with labels beside inputs, creating efficient use of horizontal space and familiar desktop form patterns.\n */\nexport const Horizontal = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"horizontal\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search layout=\"horizontal\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password layout=\"horizontal\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select layout=\"horizontal\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-range layout=\"horizontal\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group layout=\"horizontal\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group layout=\"horizontal\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select layout=\"horizontal\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n  `;\n};\n\n/**\n * @summary Space-efficient horizontal layout with inline labels, ideal for dense forms with tight vertical space where quick scanning matters.\n */\nexport const HorizontalInline = () => {\n  return html`\n<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"horizontal-inline\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search layout=\"horizontal-inline\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password layout=\"horizontal-inline\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select layout=\"horizontal-inline\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-range layout=\"horizontal-inline\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select layout=\"horizontal-inline\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea layout=\"horizontal-inline\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n  `;\n};\n\n/**\n * @summary Form controls that automatically adjust their width to fit content, optimizing space usage for dynamic or variable-length inputs.\n * @tags test-case\n */\nexport const FitText = {\n  render: () => html`\n<section nve-layout=\"column gap:md full\">\n  <nve-date fit-text>\n    <label>date</label>\n    <input type=\"date\" value=\"2017-06-01\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-input fit-text>\n    <label>label</label>\n    <input value=\"123456789012345678901234567890\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-select fit-text>\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 1234</option>\n      <option value=\"3\">Option 1234567809</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</section>\n`\n};\n\n/**\n * @summary Hidden status icon on the control message in form controls.\n * @tags test-case\n */\nexport const HiddenMessageIcon = {\n  render: () => html`\n<style>\n  .hidden-icon::part(icon) {\n    display: none;\n  }\n</style>\n<nve-switch-group style=\"width: 200px\">\n  <nve-switch>\n    <label>default</label>\n    <input type=\"checkbox\" />\n    <nve-control-message class=\"hidden-icon\">hidden icon control message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message class=\"hidden-icon\" status=\"success\">hidden icon control message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message class=\"hidden-icon\" status=\"error\">hidden icon control message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>warning</label>\n    <input type=\"checkbox\" />\n    <nve-control-message class=\"hidden-icon\" status=\"warning\">hidden icon control message</nve-control-message>\n  </nve-switch>\n</nve-switch-group>\n`\n}\n\n/**\n * @summary Use the prominence muted state to lower visual weight of controls in forms.\n */\nexport const ProminenceMuted = {\n  render: () => html`\n<div nve-layout=\"row gap:lg\">\n  <div nve-layout=\"column gap:lg pad:lg\">\n    <nve-radio-group prominence=\"muted\">\n      <label>label</label>\n      <nve-radio>\n        <label>radio 1</label>\n        <input type=\"radio\" checked />\n      </nve-radio>\n      <nve-radio>\n        <label>radio 2</label>\n        <input type=\"radio\" />\n      </nve-radio>\n      <nve-radio>\n        <label>radio 3</label>\n        <input type=\"radio\" />\n      </nve-radio>\n    </nve-radio-group>\n\n    <nve-checkbox-group prominence=\"muted\">\n      <label>label</label>\n      <nve-checkbox>\n        <label>checkbox 1</label>\n        <input type=\"checkbox\" checked />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>checkbox 2</label>\n        <input type=\"checkbox\" />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>checkbox 3</label>\n        <input type=\"checkbox\" />\n      </nve-checkbox>\n    </nve-checkbox-group>\n\n    <nve-switch-group prominence=\"muted\">\n      <label>label</label>\n      <nve-switch>\n        <label>switch 1</label>\n        <input type=\"checkbox\" checked />\n      </nve-switch>\n      <nve-switch>\n        <label>switch 2</label>\n        <input type=\"checkbox\" />\n      </nve-switch>\n      <nve-switch>\n        <label>switch 3</label>\n        <input type=\"checkbox\" />\n      </nve-switch>\n    </nve-switch-group>\n\n    <nve-range prominence=\"muted\">\n      <label>label</label>\n      <input type=\"range\" />\n    </nve-range>\n  </div>\n  <nve-card>\n    <nve-card-content>\n      <div nve-layout=\"column gap:lg pad:lg\">\n        <nve-radio-group prominence=\"muted\">\n          <label>label</label>\n          <nve-radio>\n            <label>radio 1</label>\n            <input type=\"radio\" checked />\n          </nve-radio>\n          <nve-radio>\n            <label>radio 2</label>\n            <input type=\"radio\" />\n          </nve-radio>\n          <nve-radio>\n            <label>radio 3</label>\n            <input type=\"radio\" />\n          </nve-radio>\n        </nve-radio-group>\n\n        <nve-checkbox-group prominence=\"muted\">\n          <label>label</label>\n          <nve-checkbox>\n            <label>checkbox 1</label>\n            <input type=\"checkbox\" checked />\n          </nve-checkbox>\n          <nve-checkbox>\n            <label>checkbox 2</label>\n            <input type=\"checkbox\" />\n          </nve-checkbox>\n          <nve-checkbox>\n            <label>checkbox 3</label>\n            <input type=\"checkbox\" />\n          </nve-checkbox>\n        </nve-checkbox-group>\n\n        <nve-switch-group prominence=\"muted\">\n          <label>label</label>\n          <nve-switch>\n            <label>switch 1</label>\n            <input type=\"checkbox\" checked />\n          </nve-switch>\n          <nve-switch>\n            <label>switch 2</label>\n            <input type=\"checkbox\" />\n          </nve-switch>\n          <nve-switch>\n            <label>switch 3</label>\n            <input type=\"checkbox\" />\n          </nve-switch>\n        </nve-switch-group>\n\n        <nve-range prominence=\"muted\">\n        <label>label</label>\n          <input type=\"range\" />\n        </nve-range>\n      </div>\n    </nve-card-content>\n  </nve-card>\n</div>\n`\n}"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/forms/forms.examples.json

@@ -6,10 +6,12 @@
       "id": "core-forms_kitchen-sink",
       "name": "KitchenSink",
       "template": "<div style=\"display: grid; gap: 36px 48px; grid-template-columns: 1fr 1fr; max-width: 1400px\">\n  <nve-input layout=\"vertical-inline\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-search layout=\"vertical-inline\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n  <nve-password layout=\"vertical-inline\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n  <nve-select layout=\"vertical-inline\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-date layout=\"vertical-inline\">\n    <label>date label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-datetime layout=\"vertical-inline\">\n    <label>datetime label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n  <nve-month layout=\"vertical-inline\">\n    <label>month label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n  <nve-week layout=\"vertical-inline\">\n    <label>week label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n  <nve-time layout=\"vertical-inline\">\n    <label>time label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-color layout=\"vertical-inline\">\n    <label>color label</label>\n    <input type=\"color\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n  <nve-input layout=\"vertical-inline\">\n    <label>prefix/suffix label</label>\n    <nve-button container=\"flat\" readonly>https://</nve-button>\n    <input type=\"text\" />\n    <nve-button container=\"flat\" readonly>.com</nve-button>\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-input layout=\"vertical-inline\">\n    <label>actions label</label>\n    <nve-icon-button icon-name=\"search\" container=\"flat\" readonly></nve-icon-button>\n    <input type=\"text\" />\n    <nve-icon-button icon-name=\"cancel\" container=\"flat\" aria-label=\"clear\"></nve-icon-button>\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-input-group layout=\"vertical-inline\">\n    <label>date range</label>\n    <nve-date>\n      <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n    </nve-date>\n    <nve-date>\n      <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n    </nve-date>\n    <nve-control-message>message</nve-control-message>\n  </nve-input-group>\n  <nve-input-group layout=\"vertical-inline\">\n    <label>domain</label>\n    <nve-select style=\"width: 120px\">\n      <select aria-label=\"protocol\">\n        <option>https://</option>\n        <option>http://</option>\n      </select>\n    </nve-select>\n    <nve-input>\n      <input placeholder=\"example\" aria-label=\"host\" />\n      <nve-button container=\"flat\" readonly>.com</nve-button>\n    </nve-input>\n    <nve-control-message>Host ID: 123456</nve-control-message>\n  </nve-input-group>\n  <nve-range layout=\"vertical-inline\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-select layout=\"vertical-inline\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-textarea layout=\"vertical-inline\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-file>\n    <label>file label</label>\n    <input type=\"file\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n  <nve-search rounded>\n    <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n    <datalist>\n      <option value=\"search result 1\"></option>\n      <option value=\"search result 2\"></option>\n      <option value=\"search result 3\"></option>\n    </datalist>\n  </nve-search>\n  <nve-input layout=\"vertical-inline\">\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-input layout=\"vertical-inline\">\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-input>\n  <nve-input layout=\"vertical-inline\">\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-input>\n</div>\n",
-      "summary": "Comprehensive showcase of all form controls in a grid layout, including input types, states, and advanced patterns for complete form design reference.",
+      "summary": "Comprehensive showcase of all form controls in a grid layout, including input types, states, and advanced patterns use for a complete form design reference.",
       "description": "",
       "composition": true,
-      "tags": []
+      "tags": [
+        "pattern"
+      ]
     },
     {
       "id": "core-forms_vertical",

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.2"
+			version: "0.0.4"
 		};
 	}
 	render() {

package/dist/grid/column/column.d.ts

@@ -48,5 +48,6 @@ export declare class GridColumn extends LitElement {
     _internals: ElementInternals;
     render(): import('lit-html').TemplateResult<1>;
     connectedCallback(): void;
+    willUpdate(props: PropertyValues<this>): void;
     updated(props: PropertyValues<this>): Promise<void>;
 }

package/dist/grid/column/column2.js

@@ -1,6 +1,6 @@
 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.115.0/helpers/decorate.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";
@@ -13,7 +13,7 @@ var l = class r extends o {
 	static {
 		this.metadata = {
 			tag: "nve-grid-column",
-			version: "0.0.2"
+			version: "0.0.4"
 		};
 	}
 	get #e() {
@@ -25,6 +25,9 @@ var l = class r extends o {
 	connectedCallback() {
 		super.connectedCallback(), n(this), this._internals.role = "columnheader", this.addEventListener("sort", ((e) => this.ariaSort = e.detail.next));
 	}
+	willUpdate(e) {
+		e.has("width") && this.width && Number.isFinite(Number(this.width)) && (this.width = `${this.width}px`);
+	}
 	async updated(e) {
 		super.updated(e), e.get("columnAlign") !== this.columnAlign && this.#a(), e.get("position") !== this.position && this.#n(), e.get("ariaColIndex") !== this.ariaColIndex && (this.#n(), this.#a()), e.get("width") !== this.width && this.dispatchEvent(new CustomEvent("nve-grid-column-resize", {
 			bubbles: !0,