@nvidia-elements/core 2.20.1 → 2.20.3

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

@@ -1,7 +1,6 @@
 import { FormatRelativeTime as e } from "./format-relative-time2.js";
 import { define as t } from "@nvidia-elements/foundations/internal/define";
-//#region src/format-relative-time/define.ts
+// src/format-relative-time/define.ts
 t(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/format-relative-time/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/foundations/internal/define';\nimport { FormatRelativeTime } from '@nvidia-elements/core/format-relative-time';\n\ndefine(FormatRelativeTime);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-format-relative-time': FormatRelativeTime;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAkB"}
+{"version":3,"file":"define.js","names":["define","FormatRelativeTime"],"sources":["../../src/format-relative-time/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/foundations/internal/define';\nimport { FormatRelativeTime } from '@nvidia-elements/core/format-relative-time';\n\ndefine(FormatRelativeTime);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-format-relative-time': FormatRelativeTime;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAkB"}

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

@@ -1,6 +1,5 @@
-//#region src/format-relative-time/format-relative-time.examples.ts
+// 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

@@ -1 +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"}
+{"version":3,"file":"format-relative-time.examples.js","names":["format_relative_time_examples_default"],"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,IAAAA,IAAS"}

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

@@ -1,6 +1,5 @@
-//#region src/format-relative-time/format-relative-time.css?inline
+// 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

@@ -1 +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":""}
+{"version":3,"file":"format-relative-time.js","names":["format_relative_time_default"],"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

@@ -1,10 +1,10 @@
 import { typeSSR as e } from "../internal/controllers/type-ssr.controller.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import r from "./format-relative-time.js";
 import { LitElement as i, html as a } from "lit";
 import { property as o } from "lit/decorators/property.js";
-//#region src/format-relative-time/format-relative-time.ts
+// src/format-relative-time/format-relative-time.ts
 var s = {
 	second: 1e3,
 	minute: 6e4,
@@ -52,7 +52,7 @@ var s = {
 	static {
 		this.metadata = {
 			tag: "nve-format-relative-time",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	#e;
@@ -134,7 +134,6 @@ n([o({ type: String })], l.prototype, "date", void 0), n([o({ type: String })],
 	type: String,
 	attribute: "format-style"
 })], l.prototype, "formatStyle", void 0), n([o({ type: String })], l.prototype, "unit", void 0), n([o({ type: Boolean })], l.prototype, "sync", void 0), l = n([e()], l);
-//#endregion
 export { l as FormatRelativeTime };
 
 //# sourceMappingURL=format-relative-time2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"format-relative-time2.js","names":[],"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 } from '@nvidia-elements/core/internal';\nimport styles from './format-relative-time.css?inline';\n\ntype TimeUnitOption = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';\n\nconst UNIT_DIVISORS: Record<TimeUnitOption, number> = {\n  second: 1000,\n  minute: 60000,\n  hour: 3600000,\n  day: 86400000,\n  week: 604800000,\n  month: 2592000000,\n  year: 31536000000\n};\n\nconst THRESHOLDS: { unit: TimeUnitOption; max: number }[] = [\n  { unit: 'second', max: 60 },\n  { unit: 'minute', max: 60 },\n  { unit: 'hour', max: 24 },\n  { unit: 'day', max: 7 },\n  { unit: 'week', max: 4 },\n  { unit: 'month', max: 12 },\n  { unit: 'year', max: Number.POSITIVE_INFINITY }\n];\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 * @documentation https://nvidia.github.io/elements/docs/elements/format-relative-time/\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 * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time\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    for (const { unit, max } of THRESHOLDS) {\n      const value = Math.round(absDiff / UNIT_DIVISORS[unit]);\n      if (value < max) return { value: sign * value, unit };\n    }\n    return { value: sign * Math.round(absDiff / UNIT_DIVISORS.year), unit: 'year' };\n  }\n\n  #computeExplicitUnit(diffMs: number, unit: TimeUnitOption): number {\n    return Math.round(diffMs / UNIT_DIVISORS[unit]);\n  }\n\n  #resolveValueAndUnit(diffMs: number): { value: number; unit: Intl.RelativeTimeFormatUnit } {\n    if (this.unit === 'auto') {\n      return this.#computeUnit(diffMs);\n    }\n    return { unit: this.unit, value: this.#computeExplicitUnit(diffMs, this.unit) };\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      return iso;\n    }\n\n    const { value, unit: resolvedUnit } = this.#resolveValueAndUnit(target.getTime() - Date.now());\n\n    try {\n      return new Intl.RelativeTimeFormat(this.#resolvedLocale, {\n        numeric: this.numeric,\n        style: this.formatStyle\n      }).format(value, resolvedUnit);\n    } catch {\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":"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"}
+{"version":3,"file":"format-relative-time2.js","names":["styles","_decorate","__decorate","format_relative_time_default","UNIT_DIVISORS","THRESHOLDS","FormatRelativeTime","LitElement","_args","useStyles","#dateValue","#resolvedLocale","absDiff","diffMs","sign","value","unit","max","#computeUnit","#computeExplicitUnit","#formattedRelativeTime","iso","target","resolvedUnit","#resolveValueAndUnit","#stopSync","#timer","#startSync","#getSyncInterval","changed","#onSlotChange","property","typeSSR"],"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 } from '@nvidia-elements/core/internal';\nimport styles from './format-relative-time.css?inline';\n\ntype TimeUnitOption = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';\n\nconst UNIT_DIVISORS: Record<TimeUnitOption, number> = {\n  second: 1000,\n  minute: 60000,\n  hour: 3600000,\n  day: 86400000,\n  week: 604800000,\n  month: 2592000000,\n  year: 31536000000\n};\n\nconst THRESHOLDS: { unit: TimeUnitOption; max: number }[] = [\n  { unit: 'second', max: 60 },\n  { unit: 'minute', max: 60 },\n  { unit: 'hour', max: 24 },\n  { unit: 'day', max: 7 },\n  { unit: 'week', max: 4 },\n  { unit: 'month', max: 12 },\n  { unit: 'year', max: Number.POSITIVE_INFINITY }\n];\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 * @documentation https://nvidia.github.io/elements/docs/elements/format-relative-time/\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 * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time\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    for (const { unit, max } of THRESHOLDS) {\n      const value = Math.round(absDiff / UNIT_DIVISORS[unit]);\n      if (value < max) return { value: sign * value, unit };\n    }\n    return { value: sign * Math.round(absDiff / UNIT_DIVISORS.year), unit: 'year' };\n  }\n\n  #computeExplicitUnit(diffMs: number, unit: TimeUnitOption): number {\n    return Math.round(diffMs / UNIT_DIVISORS[unit]);\n  }\n\n  #resolveValueAndUnit(diffMs: number): { value: number; unit: Intl.RelativeTimeFormatUnit } {\n    if (this.unit === 'auto') {\n      return this.#computeUnit(diffMs);\n    }\n    return { unit: this.unit, value: this.#computeExplicitUnit(diffMs, this.unit) };\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      return iso;\n    }\n\n    const { value, unit: resolvedUnit } = this.#resolveValueAndUnit(target.getTime() - Date.now());\n\n    try {\n      return new Intl.RelativeTimeFormat(this.#resolvedLocale, {\n        numeric: this.numeric,\n        style: this.formatStyle\n      }).format(value, resolvedUnit);\n    } catch {\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":"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"}

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

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

package/dist/format-truncate/define.js

@@ -1,7 +1,6 @@
 import { FormatTruncate as e } from "./format-truncate2.js";
 import { define as t } from "@nvidia-elements/foundations/internal/define";
-//#region src/format-truncate/define.ts
+// src/format-truncate/define.ts
 t(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/format-truncate/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/format-truncate/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/foundations/internal/define';\nimport { FormatTruncate } from '@nvidia-elements/core/format-truncate';\n\ndefine(FormatTruncate);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-format-truncate': FormatTruncate;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAc"}
+{"version":3,"file":"define.js","names":["define","FormatTruncate"],"sources":["../../src/format-truncate/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/foundations/internal/define';\nimport { FormatTruncate } from '@nvidia-elements/core/format-truncate';\n\ndefine(FormatTruncate);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-format-truncate': FormatTruncate;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAc"}

package/dist/format-truncate/format-truncate.examples.js

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

package/dist/format-truncate/format-truncate.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"format-truncate.examples.js","names":[],"sources":["../../src/format-truncate/format-truncate.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-truncate/define.js';\n\nexport default {\n  title: 'Elements/FormatTruncate',\n  component: 'nve-format-truncate'\n};\n\n/**\n * @summary Start, center, and end positions keep the most useful part of constrained text. Choose the position that matches how users distinguish each value.\n */\nexport const Default = {\n  render: () => html`\n    <div nve-layout=\"column gap:sm\" style=\"max-width: 16rem\">\n      <nve-format-truncate position=\"start\">training-pipeline-2026-08-05-production</nve-format-truncate>\n      <nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate>\n      <nve-format-truncate position=\"end\">training-pipeline-2026-08-05-production</nve-format-truncate>\n    </div>\n  `\n};\n\n/**\n * @summary Inherited heading, body, and code styles keep truncated text aligned with surrounding typography. Place the component inside semantic text elements to preserve their visual hierarchy.\n * @tags test-case\n */\nexport const Typography = {\n  render: () => html`\n    <div nve-layout=\"column gap:lg align:stretch\" style=\"max-width: 16rem\">\n      <h2 nve-text=\"heading lg\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></h2>\n      <p nve-text=\"body\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></p>\n      <code nve-text=\"code sm muted\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></code>\n    </div>\n  `\n};\n\n/**\n * @summary Center truncation bias keeps units from either the start or end. Use end bias for shared suffixes and start bias for identifiers with meaningful endings.\n * @tags test-case\n */\nexport const Bias = {\n  render: () => html`\n    <div nve-layout=\"column gap:sm\" style=\"max-width: 16rem\">\n      <nve-format-truncate position=\"center\" bias=\"start\" preserve=\"10\">sha256:1234567890abcdef1234567890abcdef</nve-format-truncate>\n      <nve-format-truncate position=\"center\" bias=\"end\" preserve=\"10\">sha256:1234567890abcdef1234567890abcdef</nve-format-truncate>\n    </div>\n  `\n};\n\n/**\n * @summary Character, word, and path strategies preserve complete graphemes or meaningful text units. Match the strategy to identifiers, labels, or file paths.\n * @tags test-case\n */\nexport const Strategy = {\n  render: () => html`\n    <div nve-layout=\"column gap:sm\" style=\"max-width: 16rem\">\n      <nve-format-truncate position=\"center\" strategy=\"character\" preserve=\"8\">experiment-👩🏽‍💻-0123456789abcdef</nve-format-truncate>\n      <nve-format-truncate position=\"center\" strategy=\"word\" preserve=\"3\">NVIDIA autonomous vehicle training pipeline production run</nve-format-truncate>\n      <nve-format-truncate position=\"center\" strategy=\"path\" preserve=\"2\">/models/checkpoints/production/model.bin</nve-format-truncate>\n    </div>\n  `\n};\n\n\n/**\n * @summary Truncate applies inline to adjacent text nodes.\n * @tags test-case\n */\nexport const Inline = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\" style=\"max-width: 16rem\">\n      <nve-format-truncate position=\"start\">training-pipeline-2026-08-05-production</nve-format-truncate>\n      <nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate>\n      <nve-format-truncate position=\"end\">training-pipeline-2026-08-05-production</nve-format-truncate>\n    </div>\n  `\n};\n\n/**\n * @summary Truncate applies inline to heading text nodes.\n * @tags test-case\n */\nexport const Headings = {\n  render: () => html`\n    <div nve-layout=\"column gap:sm\">\n      <h2 nve-text=\"heading lg\" style=\"width: 100%; max-width: 16rem\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></h2>\n      <h2 nve-text=\"heading\" style=\"width: 100%; max-width: 16rem\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></h2>\n      <h2 nve-text=\"heading sm\" style=\"width: 100%; max-width: 16rem\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></h2>\n    </div>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"format-truncate.examples.js","names":["format_truncate_examples_default"],"sources":["../../src/format-truncate/format-truncate.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-truncate/define.js';\n\nexport default {\n  title: 'Elements/FormatTruncate',\n  component: 'nve-format-truncate'\n};\n\n/**\n * @summary Start, center, and end positions keep the most useful part of constrained text. Choose the position that matches how users distinguish each value.\n */\nexport const Default = {\n  render: () => html`\n    <div nve-layout=\"column gap:sm\" style=\"max-width: 16rem\">\n      <nve-format-truncate position=\"start\">training-pipeline-2026-08-05-production</nve-format-truncate>\n      <nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate>\n      <nve-format-truncate position=\"end\">training-pipeline-2026-08-05-production</nve-format-truncate>\n    </div>\n  `\n};\n\n/**\n * @summary Inherited heading, body, and code styles keep truncated text aligned with surrounding typography. Place the component inside semantic text elements to preserve their visual hierarchy.\n * @tags test-case\n */\nexport const Typography = {\n  render: () => html`\n    <div nve-layout=\"column gap:lg align:stretch\" style=\"max-width: 16rem\">\n      <h2 nve-text=\"heading lg\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></h2>\n      <p nve-text=\"body\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></p>\n      <code nve-text=\"code sm muted\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></code>\n    </div>\n  `\n};\n\n/**\n * @summary Center truncation bias keeps units from either the start or end. Use end bias for shared suffixes and start bias for identifiers with meaningful endings.\n * @tags test-case\n */\nexport const Bias = {\n  render: () => html`\n    <div nve-layout=\"column gap:sm\" style=\"max-width: 16rem\">\n      <nve-format-truncate position=\"center\" bias=\"start\" preserve=\"10\">sha256:1234567890abcdef1234567890abcdef</nve-format-truncate>\n      <nve-format-truncate position=\"center\" bias=\"end\" preserve=\"10\">sha256:1234567890abcdef1234567890abcdef</nve-format-truncate>\n    </div>\n  `\n};\n\n/**\n * @summary Character, word, and path strategies preserve complete graphemes or meaningful text units. Match the strategy to identifiers, labels, or file paths.\n * @tags test-case\n */\nexport const Strategy = {\n  render: () => html`\n    <div nve-layout=\"column gap:sm\" style=\"max-width: 16rem\">\n      <nve-format-truncate position=\"center\" strategy=\"character\" preserve=\"8\">experiment-👩🏽‍💻-0123456789abcdef</nve-format-truncate>\n      <nve-format-truncate position=\"center\" strategy=\"word\" preserve=\"3\">NVIDIA autonomous vehicle training pipeline production run</nve-format-truncate>\n      <nve-format-truncate position=\"center\" strategy=\"path\" preserve=\"2\">/models/checkpoints/production/model.bin</nve-format-truncate>\n    </div>\n  `\n};\n\n\n/**\n * @summary Truncate applies inline to adjacent text nodes.\n * @tags test-case\n */\nexport const Inline = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm\" style=\"max-width: 16rem\">\n      <nve-format-truncate position=\"start\">training-pipeline-2026-08-05-production</nve-format-truncate>\n      <nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate>\n      <nve-format-truncate position=\"end\">training-pipeline-2026-08-05-production</nve-format-truncate>\n    </div>\n  `\n};\n\n/**\n * @summary Truncate applies inline to heading text nodes.\n * @tags test-case\n */\nexport const Headings = {\n  render: () => html`\n    <div nve-layout=\"column gap:sm\">\n      <h2 nve-text=\"heading lg\" style=\"width: 100%; max-width: 16rem\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></h2>\n      <h2 nve-text=\"heading\" style=\"width: 100%; max-width: 16rem\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></h2>\n      <h2 nve-text=\"heading sm\" style=\"width: 100%; max-width: 16rem\"><nve-format-truncate position=\"center\">training-pipeline-2026-08-05-production</nve-format-truncate></h2>\n    </div>\n  `\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/format-truncate/format-truncate.js

@@ -1,6 +1,5 @@
-//#region src/format-truncate/format-truncate.css?inline
+// src/format-truncate/format-truncate.css?inline
 var e = ":host{position:relative;display:inline-block;max-inline-size:100%;min-inline-size:0}span{text-wrap:nowrap}[sizing-host]{display:block;opacity:0}[internal-host]{position:absolute;inset:0;overflow:hidden}slot{display:initial;position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=format-truncate.js.map

package/dist/format-truncate/format-truncate.js.map

@@ -1 +1 @@
-{"version":3,"file":"format-truncate.js","names":[],"sources":["../../src/format-truncate/format-truncate.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  position: relative;\n  display: inline-block;\n  max-inline-size: 100%;\n  min-inline-size: 0;\n}\n\nspan {\n  text-wrap: nowrap;\n}\n\n[sizing-host] {\n  display: block;\n  opacity: 0;\n}\n\n[internal-host] {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\nslot {\n  display: initial;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n"],"mappings":""}
+{"version":3,"file":"format-truncate.js","names":["format_truncate_default"],"sources":["../../src/format-truncate/format-truncate.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  position: relative;\n  display: inline-block;\n  max-inline-size: 100%;\n  min-inline-size: 0;\n}\n\nspan {\n  text-wrap: nowrap;\n}\n\n[sizing-host] {\n  display: block;\n  opacity: 0;\n}\n\n[internal-host] {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\nslot {\n  display: initial;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n"],"mappings":""}

package/dist/format-truncate/format-truncate2.js

@@ -1,12 +1,12 @@
 import { attachInternals as e } from "../internal/utils/a11y.js";
 import { typeSSR as t } from "../internal/controllers/type-ssr.controller.js";
 import { useStyles as n } from "../internal/styles/index.js";
-import r from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import r from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { normalizeTruncateString as i, normalizeTruncateText as a, truncateText as o } from "./utils.js";
 import s from "./format-truncate.js";
 import { LitElement as c, html as l } from "lit";
 import { property as u } from "lit/decorators/property.js";
-//#region src/format-truncate/format-truncate.ts
+// src/format-truncate/format-truncate.ts
 var d = class extends c {
 	constructor(...e) {
 		super(...e), this.position = "start", this.strategy = "character", this.bias = "end", this.preserve = 6, this.#l = () => {
@@ -19,7 +19,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-format-truncate",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	#e;
@@ -79,7 +79,7 @@ var d = class extends c {
 		return this.#e === void 0 && (this.#e = this.ownerDocument?.createElement("canvas").getContext("2d") ?? null), this.#e;
 	}
 	#c() {
-		typeof ResizeObserver > "u" || (this.#t ??= new ResizeObserver(() => {
+		typeof ResizeObserver < "u" && (this.#t ??= new ResizeObserver(() => {
 			this.isConnected && this.requestUpdate();
 		}), this.#t.disconnect(), this.#t.observe(this));
 	}
@@ -112,7 +112,6 @@ function m(e) {
 function h(e) {
 	return e.nodeType === 1;
 }
-//#endregion
 export { d as FormatTruncate };
 
 //# sourceMappingURL=format-truncate2.js.map

package/dist/format-truncate/format-truncate2.js.map

@@ -1 +1 @@
-{"version":3,"file":"format-truncate2.js","names":[],"sources":["../../src/format-truncate/format-truncate.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { attachInternals, useStyles, typeSSR } from '@nvidia-elements/core/internal';\nimport { normalizeTruncateString, normalizeTruncateText, truncateText } from './utils.js';\nimport styles from './format-truncate.css?inline';\n\n/**\n * @element nve-format-truncate\n * @description Truncates text at its start, center, or end while preserving the full text for assistive technology.\n * @documentation https://nvidia.github.io/elements/docs/elements/format-truncate/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/format-truncate\n * @slot - Text to truncate. The component flattens, trims, and normalizes mixed text and element nodes.\n * @beta\n */\n@typeSSR()\nexport class FormatTruncate extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-format-truncate',\n    version: '0.0.0'\n  };\n\n  /**\n   * Location of the ellipsis. Use start or end to preserve one edge, or center to preserve both edges.\n   */\n  @property({ type: String, reflect: true }) position: 'start' | 'center' | 'end' = 'start';\n\n  /**\n   * Text unit used for center truncation. Character preserves graphemes, word preserves words, and path preserves path segments.\n   */\n  @property({ type: String, reflect: true }) strategy: 'character' | 'word' | 'path' = 'character';\n\n  /**\n   * Edge favored by center truncation. The favored edge keeps at least the configured number of units.\n   */\n  @property({ type: String, reflect: true }) bias: 'start' | 'end' = 'end';\n\n  /**\n   * Number of strategy units retained at the biased edge during center truncation.\n   */\n  @property({ type: Number, reflect: true }) preserve = 6;\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #measurementContext?: CanvasRenderingContext2D | null;\n  #resizeObserver?: ResizeObserver;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    attachInternals(this);\n    this.#observeAvailableWidth();\n    this.requestUpdate();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#resizeObserver?.disconnect();\n  }\n\n  connectedMoveCallback(): void {\n    this.#observeAvailableWidth();\n    this.requestUpdate();\n  }\n\n  override render(): TemplateResult {\n    const text = this.#slottedText;\n    const truncatedText = this.#renderText(text);\n\n    if (truncatedText !== text) this.title = text;\n    else this.removeAttribute('title');\n\n    return html`<span internal-host aria-hidden=\"true\">${truncatedText}</span><span sizing-host aria-hidden=\"true\">${text}</span><slot @slotchange=${this.#onSlotChange}></slot>`;\n  }\n\n  get #slottedText(): string {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (slot) return normalizeTruncateText(slot.assignedNodes({ flatten: true }));\n\n    const nodes = Array.from(this.childNodes ?? []).filter(isDefaultSlotNode);\n    return nodes.length ? normalizeTruncateText(nodes) : normalizeTruncateString(this.textContent ?? '');\n  }\n\n  #renderText(text: string): string {\n    const measureText = this.#createTextMeasurer();\n\n    return truncateText(text, {\n      position: this.position,\n      strategy: this.strategy,\n      bias: this.bias,\n      preserve: this.preserve,\n      availableWidth: this.#availableWidth,\n      measureText\n    });\n  }\n\n  get #availableWidth(): number {\n    const view = this.ownerDocument?.defaultView;\n    if (!view || !this.shadowRoot?.querySelector('[internal-host]')) return Number.POSITIVE_INFINITY;\n\n    return getContentWidth(this, view);\n  }\n\n  #createTextMeasurer(): (text: string) => number {\n    const view = this.ownerDocument?.defaultView;\n    const context = this.#textMeasurementContext;\n    if (!view || !context) return () => 0;\n\n    const computedStyles = view.getComputedStyle(this);\n    context.font = computedStyles.font;\n\n    const letterSpacing = cssPixelValue(computedStyles.letterSpacing);\n    const wordSpacing = cssPixelValue(computedStyles.wordSpacing);\n    const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });\n\n    return text => this.#measureText(text, { context, letterSpacing, wordSpacing, graphemeSegmenter });\n  }\n\n  #measureText(\n    text: string,\n    {\n      context,\n      letterSpacing,\n      wordSpacing,\n      graphemeSegmenter\n    }: {\n      context: CanvasRenderingContext2D;\n      letterSpacing: number;\n      wordSpacing: number;\n      graphemeSegmenter: Intl.Segmenter;\n    }\n  ): number {\n    const graphemeSegments = graphemeSegmenter.segment(text);\n    const whitespaceCount = Array.from(text.matchAll(/\\s/gu)).length;\n\n    return (\n      context.measureText(text).width +\n      Math.max(0, Array.from(graphemeSegments).length - 1) * letterSpacing +\n      whitespaceCount * wordSpacing\n    );\n  }\n\n  get #textMeasurementContext(): CanvasRenderingContext2D | null {\n    if (this.#measurementContext === undefined) {\n      this.#measurementContext = this.ownerDocument?.createElement('canvas').getContext('2d') ?? null;\n    }\n\n    return this.#measurementContext;\n  }\n\n  #observeAvailableWidth(): void {\n    if (typeof ResizeObserver === 'undefined') return;\n\n    this.#resizeObserver ??= new ResizeObserver(() => {\n      if (this.isConnected) this.requestUpdate();\n    });\n    this.#resizeObserver.disconnect();\n    this.#resizeObserver.observe(this);\n  }\n\n  #onSlotChange = (): void => {\n    this.requestUpdate();\n  };\n}\n\nfunction getContentWidth(element: HTMLElement, view: Window): number {\n  const computedStyles = view.getComputedStyle(element);\n  return Math.max(\n    0,\n    element.getBoundingClientRect().width -\n      cssPixelValue(computedStyles.borderInlineStartWidth) -\n      cssPixelValue(computedStyles.borderInlineEndWidth) -\n      cssPixelValue(computedStyles.paddingInlineStart) -\n      cssPixelValue(computedStyles.paddingInlineEnd)\n  );\n}\n\nfunction cssPixelValue(value: string): number {\n  const parsed = Number.parseFloat(value);\n  return Number.isFinite(parsed) ? parsed : 0;\n}\n\nfunction isDefaultSlotNode(node: Node): boolean {\n  return !isElementNode(node) || !node.getAttribute('slot');\n}\n\nfunction isElementNode(node: Node): node is Element {\n  return node.nodeType === 1;\n}\n"],"mappings":"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"}
+{"version":3,"file":"format-truncate2.js","names":["styles","_decorate","__decorate","format_truncate_default","FormatTruncate","LitElement","_args","#onSlotChange","useStyles","attachInternals","#observeAvailableWidth","#resizeObserver","text","#slottedText","truncatedText","#renderText","slot","normalizeTruncateText","nodes","isDefaultSlotNode","normalizeTruncateString","measureText","#createTextMeasurer","truncateText","#availableWidth","view","getContentWidth","context","#textMeasurementContext","computedStyles","letterSpacing","cssPixelValue","wordSpacing","graphemeSegmenter","#measureText","graphemeSegments","whitespaceCount","#measurementContext","property","typeSSR","element","parsed","value","isElementNode","node"],"sources":["../../src/format-truncate/format-truncate.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TemplateResult } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { attachInternals, useStyles, typeSSR } from '@nvidia-elements/core/internal';\nimport { normalizeTruncateString, normalizeTruncateText, truncateText } from './utils.js';\nimport styles from './format-truncate.css?inline';\n\n/**\n * @element nve-format-truncate\n * @description Truncates text at its start, center, or end while preserving the full text for assistive technology.\n * @documentation https://nvidia.github.io/elements/docs/elements/format-truncate/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/format-truncate\n * @slot - Text to truncate. The component flattens, trims, and normalizes mixed text and element nodes.\n * @beta\n */\n@typeSSR()\nexport class FormatTruncate extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-format-truncate',\n    version: '0.0.0'\n  };\n\n  /**\n   * Location of the ellipsis. Use start or end to preserve one edge, or center to preserve both edges.\n   */\n  @property({ type: String, reflect: true }) position: 'start' | 'center' | 'end' = 'start';\n\n  /**\n   * Text unit used for center truncation. Character preserves graphemes, word preserves words, and path preserves path segments.\n   */\n  @property({ type: String, reflect: true }) strategy: 'character' | 'word' | 'path' = 'character';\n\n  /**\n   * Edge favored by center truncation. The favored edge keeps at least the configured number of units.\n   */\n  @property({ type: String, reflect: true }) bias: 'start' | 'end' = 'end';\n\n  /**\n   * Number of strategy units retained at the biased edge during center truncation.\n   */\n  @property({ type: Number, reflect: true }) preserve = 6;\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #measurementContext?: CanvasRenderingContext2D | null;\n  #resizeObserver?: ResizeObserver;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    attachInternals(this);\n    this.#observeAvailableWidth();\n    this.requestUpdate();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#resizeObserver?.disconnect();\n  }\n\n  connectedMoveCallback(): void {\n    this.#observeAvailableWidth();\n    this.requestUpdate();\n  }\n\n  override render(): TemplateResult {\n    const text = this.#slottedText;\n    const truncatedText = this.#renderText(text);\n\n    if (truncatedText !== text) this.title = text;\n    else this.removeAttribute('title');\n\n    return html`<span internal-host aria-hidden=\"true\">${truncatedText}</span><span sizing-host aria-hidden=\"true\">${text}</span><slot @slotchange=${this.#onSlotChange}></slot>`;\n  }\n\n  get #slottedText(): string {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (slot) return normalizeTruncateText(slot.assignedNodes({ flatten: true }));\n\n    const nodes = Array.from(this.childNodes ?? []).filter(isDefaultSlotNode);\n    return nodes.length ? normalizeTruncateText(nodes) : normalizeTruncateString(this.textContent ?? '');\n  }\n\n  #renderText(text: string): string {\n    const measureText = this.#createTextMeasurer();\n\n    return truncateText(text, {\n      position: this.position,\n      strategy: this.strategy,\n      bias: this.bias,\n      preserve: this.preserve,\n      availableWidth: this.#availableWidth,\n      measureText\n    });\n  }\n\n  get #availableWidth(): number {\n    const view = this.ownerDocument?.defaultView;\n    if (!view || !this.shadowRoot?.querySelector('[internal-host]')) return Number.POSITIVE_INFINITY;\n\n    return getContentWidth(this, view);\n  }\n\n  #createTextMeasurer(): (text: string) => number {\n    const view = this.ownerDocument?.defaultView;\n    const context = this.#textMeasurementContext;\n    if (!view || !context) return () => 0;\n\n    const computedStyles = view.getComputedStyle(this);\n    context.font = computedStyles.font;\n\n    const letterSpacing = cssPixelValue(computedStyles.letterSpacing);\n    const wordSpacing = cssPixelValue(computedStyles.wordSpacing);\n    const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });\n\n    return text => this.#measureText(text, { context, letterSpacing, wordSpacing, graphemeSegmenter });\n  }\n\n  #measureText(\n    text: string,\n    {\n      context,\n      letterSpacing,\n      wordSpacing,\n      graphemeSegmenter\n    }: {\n      context: CanvasRenderingContext2D;\n      letterSpacing: number;\n      wordSpacing: number;\n      graphemeSegmenter: Intl.Segmenter;\n    }\n  ): number {\n    const graphemeSegments = graphemeSegmenter.segment(text);\n    const whitespaceCount = Array.from(text.matchAll(/\\s/gu)).length;\n\n    return (\n      context.measureText(text).width +\n      Math.max(0, Array.from(graphemeSegments).length - 1) * letterSpacing +\n      whitespaceCount * wordSpacing\n    );\n  }\n\n  get #textMeasurementContext(): CanvasRenderingContext2D | null {\n    if (this.#measurementContext === undefined) {\n      this.#measurementContext = this.ownerDocument?.createElement('canvas').getContext('2d') ?? null;\n    }\n\n    return this.#measurementContext;\n  }\n\n  #observeAvailableWidth(): void {\n    if (typeof ResizeObserver === 'undefined') return;\n\n    this.#resizeObserver ??= new ResizeObserver(() => {\n      if (this.isConnected) this.requestUpdate();\n    });\n    this.#resizeObserver.disconnect();\n    this.#resizeObserver.observe(this);\n  }\n\n  #onSlotChange = (): void => {\n    this.requestUpdate();\n  };\n}\n\nfunction getContentWidth(element: HTMLElement, view: Window): number {\n  const computedStyles = view.getComputedStyle(element);\n  return Math.max(\n    0,\n    element.getBoundingClientRect().width -\n      cssPixelValue(computedStyles.borderInlineStartWidth) -\n      cssPixelValue(computedStyles.borderInlineEndWidth) -\n      cssPixelValue(computedStyles.paddingInlineStart) -\n      cssPixelValue(computedStyles.paddingInlineEnd)\n  );\n}\n\nfunction cssPixelValue(value: string): number {\n  const parsed = Number.parseFloat(value);\n  return Number.isFinite(parsed) ? parsed : 0;\n}\n\nfunction isDefaultSlotNode(node: Node): boolean {\n  return !isElementNode(node) || !node.getAttribute('slot');\n}\n\nfunction isElementNode(node: Node): node is Element {\n  return node.nodeType === 1;\n}\n"],"mappings":"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"}

package/dist/format-truncate/index.js

@@ -1,2 +1 @@
-import { FormatTruncate as e } from "./format-truncate2.js";
-export { e as FormatTruncate };
+export { FormatTruncate } from "./format-truncate2.js";

package/dist/format-truncate/utils.js

@@ -108,7 +108,6 @@ function h(e, t, n) {
 		default: return l(e, "grapheme");
 	}
 }
-//#endregion
 export { t as normalizeTruncateString, e as normalizeTruncateText, n as truncateText };
 
 //# sourceMappingURL=utils.js.map

package/dist/format-truncate/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../src/format-truncate/utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nconst ELLIPSIS = '…';\n\ntype TruncatePosition = 'start' | 'center' | 'end';\ntype TruncateStrategy = 'character' | 'word' | 'path';\ntype TruncateBias = 'start' | 'end';\n\nexport function normalizeTruncateText(nodes: Iterable<Node>): string {\n  return normalizeTruncateString(Array.from(nodes, node => node.textContent ?? '').join(' '));\n}\n\nexport function normalizeTruncateString(text: string): string {\n  return text.replace(/\\s+/gu, ' ').trim();\n}\n\nexport function truncateText(\n  text: string,\n  {\n    position,\n    strategy,\n    bias,\n    preserve,\n    availableWidth,\n    measureText\n  }: {\n    position: TruncatePosition;\n    strategy: TruncateStrategy;\n    bias: TruncateBias;\n    preserve: number;\n    availableWidth: number;\n    measureText: (value: string) => number;\n  }\n): string {\n  if (!text || !Number.isFinite(availableWidth)) return text;\n  if (availableWidth <= 0) return '';\n  if (measureText(text) <= availableWidth) return text;\n  if (measureText(ELLIPSIS) > availableWidth) return ELLIPSIS;\n\n  switch (position) {\n    case 'start':\n      return truncateStart(segmentText(text, 'grapheme'), availableWidth, measureText);\n    case 'center':\n      return truncateMiddle(text, { strategy, bias, preserve, availableWidth, measureText });\n    case 'end':\n    default:\n      return truncateEnd(segmentText(text, 'grapheme'), availableWidth, measureText);\n  }\n}\n\nfunction truncateMiddle(\n  text: string,\n  {\n    strategy,\n    bias,\n    preserve,\n    availableWidth,\n    measureText\n  }: {\n    strategy: TruncateStrategy;\n    bias: TruncateBias;\n    preserve: number;\n    availableWidth: number;\n    measureText: (value: string) => number;\n  }\n): string {\n  const units = getUnits(text, strategy, bias);\n  const preserveCount = Math.min(units.length, normalizePreserve(preserve));\n\n  if (bias === 'start') {\n    const preservedUnits = units.slice(0, preserveCount);\n    const truncatableUnits = units.slice(preserveCount);\n    const candidate = (count: number) =>\n      joinWithEllipsis(preservedUnits.join(''), truncatableUnits.slice(-count || truncatableUnits.length).join(''));\n\n    if (measureText(candidate(0)) > availableWidth) {\n      return truncateEnd(preservedUnits, availableWidth, measureText);\n    }\n\n    return candidate(findLargestFittingCount(truncatableUnits.length, candidate, { availableWidth, measureText }));\n  }\n\n  const truncatableUnits = units.slice(0, units.length - preserveCount);\n  const preservedUnits = units.slice(units.length - preserveCount);\n  const candidate = (count: number) =>\n    joinWithEllipsis(truncatableUnits.slice(0, count).join(''), preservedUnits.join(''));\n\n  if (measureText(candidate(0)) > availableWidth) {\n    return truncateStart(preservedUnits, availableWidth, measureText);\n  }\n\n  return candidate(findLargestFittingCount(truncatableUnits.length, candidate, { availableWidth, measureText }));\n}\n\nfunction truncateStart(units: string[], availableWidth: number, measureText: (value: string) => number): string {\n  const candidate = (count: number) => `${ELLIPSIS}${units.slice(-count || units.length).join('')}`;\n  return candidate(findLargestFittingCount(units.length - 1, candidate, { availableWidth, measureText }));\n}\n\nfunction truncateEnd(units: string[], availableWidth: number, measureText: (value: string) => number): string {\n  const candidate = (count: number) => `${units.slice(0, count).join('')}${ELLIPSIS}`;\n  return candidate(findLargestFittingCount(units.length - 1, candidate, { availableWidth, measureText }));\n}\n\nfunction findLargestFittingCount(\n  maximum: number,\n  candidate: (count: number) => string,\n  {\n    availableWidth,\n    measureText\n  }: {\n    availableWidth: number;\n    measureText: (value: string) => number;\n  }\n): number {\n  let lower = 0;\n  let upper = maximum;\n  let fitting = 0;\n\n  while (lower <= upper) {\n    const count = Math.floor((lower + upper) / 2);\n\n    if (measureText(candidate(count)) <= availableWidth) {\n      fitting = count;\n      lower = count + 1;\n    } else {\n      upper = count - 1;\n    }\n  }\n\n  return fitting;\n}\n\nfunction joinWithEllipsis(start: string, end: string): string {\n  return `${start.trimEnd()}${ELLIPSIS}${end.trimStart()}`;\n}\n\nfunction normalizePreserve(value: number): number {\n  return Number.isFinite(value) ? Math.max(1, Math.floor(value)) : 1;\n}\n\nfunction segmentText(text: string, granularity: 'grapheme' | 'word'): string[] {\n  const segments = new Intl.Segmenter(undefined, { granularity }).segment(text);\n  return Array.from(segments, segment => segment.segment);\n}\n\nfunction mergeWhitespace(segments: string[], bias: TruncateBias): string[] {\n  return bias === 'start' ? mergeFollowingWhitespace(segments) : mergePrecedingWhitespace(segments);\n}\n\nfunction mergeFollowingWhitespace(segments: string[]): string[] {\n  const units: string[] = [];\n\n  for (const segment of segments) {\n    if (segment.trim()) units.push(segment);\n    else appendToLastUnit(units, segment);\n  }\n\n  return units;\n}\n\nfunction mergePrecedingWhitespace(segments: string[]): string[] {\n  const units: string[] = [];\n  let whitespace = '';\n\n  for (const segment of segments) {\n    if (segment.trim()) {\n      units.push(whitespace + segment);\n      whitespace = '';\n    } else {\n      whitespace += segment;\n    }\n  }\n\n  appendToLastUnit(units, whitespace);\n\n  return units;\n}\n\nfunction appendToLastUnit(units: string[], text: string): void {\n  const previous = units.at(-1);\n  if (previous !== undefined) units[units.length - 1] = previous + text;\n}\n\nfunction splitPathUnits(text: string, bias: TruncateBias): string[] {\n  const pathSegments = Array.from(text.matchAll(/[^/\\\\]+/gu));\n  if (pathSegments.length === 0) return [text];\n\n  if (bias === 'start') {\n    return pathSegments.map((segment, index) => {\n      const start = index === 0 ? 0 : segment.index;\n      const end = pathSegments[index + 1]?.index ?? text.length;\n      return text.slice(start, end);\n    });\n  }\n\n  return pathSegments.map((segment, index) => {\n    const previous = pathSegments[index - 1];\n    const start = previous ? previous.index + previous[0].length : 0;\n    const end = index === pathSegments.length - 1 ? text.length : segment.index + segment[0].length;\n    return text.slice(start, end);\n  });\n}\n\nfunction getUnits(text: string, strategy: TruncateStrategy, bias: TruncateBias): string[] {\n  switch (strategy) {\n    case 'word': {\n      const units = mergeWhitespace(segmentText(text, 'word'), bias);\n      return units.length ? units : [text];\n    }\n    case 'path': {\n      const units = splitPathUnits(text, bias);\n      return units.length ? units : [text];\n    }\n    case 'character':\n    default:\n      return segmentText(text, 'grapheme');\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"utils.js","names":["normalizeTruncateText","normalizeTruncateString","nodes","node","text","truncateText","availableWidth","measureText","position","truncateStart","segmentText","truncateMiddle","truncateEnd","units","getUnits","strategy","bias","preserveCount","normalizePreserve","preserve","preservedUnits","truncatableUnits","candidate","joinWithEllipsis","count","findLargestFittingCount","lower","upper","maximum","fitting","start","end","value","segments","segment","mergeWhitespace","mergeFollowingWhitespace","mergePrecedingWhitespace","appendToLastUnit","whitespace","previous","splitPathUnits","pathSegments","index"],"sources":["../../src/format-truncate/utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nconst ELLIPSIS = '…';\n\ntype TruncatePosition = 'start' | 'center' | 'end';\ntype TruncateStrategy = 'character' | 'word' | 'path';\ntype TruncateBias = 'start' | 'end';\n\nexport function normalizeTruncateText(nodes: Iterable<Node>): string {\n  return normalizeTruncateString(Array.from(nodes, node => node.textContent ?? '').join(' '));\n}\n\nexport function normalizeTruncateString(text: string): string {\n  return text.replace(/\\s+/gu, ' ').trim();\n}\n\nexport function truncateText(\n  text: string,\n  {\n    position,\n    strategy,\n    bias,\n    preserve,\n    availableWidth,\n    measureText\n  }: {\n    position: TruncatePosition;\n    strategy: TruncateStrategy;\n    bias: TruncateBias;\n    preserve: number;\n    availableWidth: number;\n    measureText: (value: string) => number;\n  }\n): string {\n  if (!text || !Number.isFinite(availableWidth)) return text;\n  if (availableWidth <= 0) return '';\n  if (measureText(text) <= availableWidth) return text;\n  if (measureText(ELLIPSIS) > availableWidth) return ELLIPSIS;\n\n  switch (position) {\n    case 'start':\n      return truncateStart(segmentText(text, 'grapheme'), availableWidth, measureText);\n    case 'center':\n      return truncateMiddle(text, { strategy, bias, preserve, availableWidth, measureText });\n    case 'end':\n    default:\n      return truncateEnd(segmentText(text, 'grapheme'), availableWidth, measureText);\n  }\n}\n\nfunction truncateMiddle(\n  text: string,\n  {\n    strategy,\n    bias,\n    preserve,\n    availableWidth,\n    measureText\n  }: {\n    strategy: TruncateStrategy;\n    bias: TruncateBias;\n    preserve: number;\n    availableWidth: number;\n    measureText: (value: string) => number;\n  }\n): string {\n  const units = getUnits(text, strategy, bias);\n  const preserveCount = Math.min(units.length, normalizePreserve(preserve));\n\n  if (bias === 'start') {\n    const preservedUnits = units.slice(0, preserveCount);\n    const truncatableUnits = units.slice(preserveCount);\n    const candidate = (count: number) =>\n      joinWithEllipsis(preservedUnits.join(''), truncatableUnits.slice(-count || truncatableUnits.length).join(''));\n\n    if (measureText(candidate(0)) > availableWidth) {\n      return truncateEnd(preservedUnits, availableWidth, measureText);\n    }\n\n    return candidate(findLargestFittingCount(truncatableUnits.length, candidate, { availableWidth, measureText }));\n  }\n\n  const truncatableUnits = units.slice(0, units.length - preserveCount);\n  const preservedUnits = units.slice(units.length - preserveCount);\n  const candidate = (count: number) =>\n    joinWithEllipsis(truncatableUnits.slice(0, count).join(''), preservedUnits.join(''));\n\n  if (measureText(candidate(0)) > availableWidth) {\n    return truncateStart(preservedUnits, availableWidth, measureText);\n  }\n\n  return candidate(findLargestFittingCount(truncatableUnits.length, candidate, { availableWidth, measureText }));\n}\n\nfunction truncateStart(units: string[], availableWidth: number, measureText: (value: string) => number): string {\n  const candidate = (count: number) => `${ELLIPSIS}${units.slice(-count || units.length).join('')}`;\n  return candidate(findLargestFittingCount(units.length - 1, candidate, { availableWidth, measureText }));\n}\n\nfunction truncateEnd(units: string[], availableWidth: number, measureText: (value: string) => number): string {\n  const candidate = (count: number) => `${units.slice(0, count).join('')}${ELLIPSIS}`;\n  return candidate(findLargestFittingCount(units.length - 1, candidate, { availableWidth, measureText }));\n}\n\nfunction findLargestFittingCount(\n  maximum: number,\n  candidate: (count: number) => string,\n  {\n    availableWidth,\n    measureText\n  }: {\n    availableWidth: number;\n    measureText: (value: string) => number;\n  }\n): number {\n  let lower = 0;\n  let upper = maximum;\n  let fitting = 0;\n\n  while (lower <= upper) {\n    const count = Math.floor((lower + upper) / 2);\n\n    if (measureText(candidate(count)) <= availableWidth) {\n      fitting = count;\n      lower = count + 1;\n    } else {\n      upper = count - 1;\n    }\n  }\n\n  return fitting;\n}\n\nfunction joinWithEllipsis(start: string, end: string): string {\n  return `${start.trimEnd()}${ELLIPSIS}${end.trimStart()}`;\n}\n\nfunction normalizePreserve(value: number): number {\n  return Number.isFinite(value) ? Math.max(1, Math.floor(value)) : 1;\n}\n\nfunction segmentText(text: string, granularity: 'grapheme' | 'word'): string[] {\n  const segments = new Intl.Segmenter(undefined, { granularity }).segment(text);\n  return Array.from(segments, segment => segment.segment);\n}\n\nfunction mergeWhitespace(segments: string[], bias: TruncateBias): string[] {\n  return bias === 'start' ? mergeFollowingWhitespace(segments) : mergePrecedingWhitespace(segments);\n}\n\nfunction mergeFollowingWhitespace(segments: string[]): string[] {\n  const units: string[] = [];\n\n  for (const segment of segments) {\n    if (segment.trim()) units.push(segment);\n    else appendToLastUnit(units, segment);\n  }\n\n  return units;\n}\n\nfunction mergePrecedingWhitespace(segments: string[]): string[] {\n  const units: string[] = [];\n  let whitespace = '';\n\n  for (const segment of segments) {\n    if (segment.trim()) {\n      units.push(whitespace + segment);\n      whitespace = '';\n    } else {\n      whitespace += segment;\n    }\n  }\n\n  appendToLastUnit(units, whitespace);\n\n  return units;\n}\n\nfunction appendToLastUnit(units: string[], text: string): void {\n  const previous = units.at(-1);\n  if (previous !== undefined) units[units.length - 1] = previous + text;\n}\n\nfunction splitPathUnits(text: string, bias: TruncateBias): string[] {\n  const pathSegments = Array.from(text.matchAll(/[^/\\\\]+/gu));\n  if (pathSegments.length === 0) return [text];\n\n  if (bias === 'start') {\n    return pathSegments.map((segment, index) => {\n      const start = index === 0 ? 0 : segment.index;\n      const end = pathSegments[index + 1]?.index ?? text.length;\n      return text.slice(start, end);\n    });\n  }\n\n  return pathSegments.map((segment, index) => {\n    const previous = pathSegments[index - 1];\n    const start = previous ? previous.index + previous[0].length : 0;\n    const end = index === pathSegments.length - 1 ? text.length : segment.index + segment[0].length;\n    return text.slice(start, end);\n  });\n}\n\nfunction getUnits(text: string, strategy: TruncateStrategy, bias: TruncateBias): string[] {\n  switch (strategy) {\n    case 'word': {\n      const units = mergeWhitespace(segmentText(text, 'word'), bias);\n      return units.length ? units : [text];\n    }\n    case 'path': {\n      const units = splitPathUnits(text, bias);\n      return units.length ? units : [text];\n    }\n    case 'character':\n    default:\n      return segmentText(text, 'grapheme');\n  }\n}\n"],"mappings":"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"}

package/dist/forms/actions.examples.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"actions.examples.js","names":[],"sources":["../../src/forms/actions.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/input/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Forms',\n  component: 'nve-input'\n};\n\n/**\n * @summary Input with action buttons for search and clear, providing quick access to common operations.\n */\nexport const SearchClear = {\n  render: () => {\n    return html`\n<nve-input>\n  <label>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}\n\n/**\n * @summary Label with an information button to provide contextual help or more details about the field.\n */\nexport const LabelAction = {\n  render: () => {\n    return html`\n<nve-input>\n  <label>label</label>\n  <nve-icon-button icon-name=\"information-circle\" container=\"flat\" aria-label=\"more details\" slot=\"label\"></nve-icon-button>\n  <input type=\"text\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>`\n  }\n}\n\n/**\n * @summary Input with prefix and suffix buttons to show fixed text elements like URL protocols and domains.\n */\nexport const PrefixSuffix = {\n  render: () => {\n    return html`\n<nve-input>\n  <label>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}"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"actions.examples.js","names":["actions_examples_default"],"sources":["../../src/forms/actions.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/input/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Forms',\n  component: 'nve-input'\n};\n\n/**\n * @summary Input with action buttons for search and clear, providing quick access to common operations.\n */\nexport const SearchClear = {\n  render: () => {\n    return html`\n<nve-input>\n  <label>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}\n\n/**\n * @summary Label with an information button to provide contextual help or more details about the field.\n */\nexport const LabelAction = {\n  render: () => {\n    return html`\n<nve-input>\n  <label>label</label>\n  <nve-icon-button icon-name=\"information-circle\" container=\"flat\" aria-label=\"more details\" slot=\"label\"></nve-icon-button>\n  <input type=\"text\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>`\n  }\n}\n\n/**\n * @summary Input with prefix and suffix buttons to show fixed text elements like URL protocols and domains.\n */\nexport const PrefixSuffix = {\n  render: () => {\n    return html`\n<nve-input>\n  <label>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}"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/forms/control/control.examples.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"control.examples.js","names":[],"sources":["../../../src/forms/control/control.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/input/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/range/define.js';\nimport '@nvidia-elements/core/textarea/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\n\nexport default {\n  title: 'Elements/Forms',\n  component: 'nve-control'\n}\n\n/**\n * @summary Basic form control wrapper with label, input, and validation message structure.\n * @tags test-case\n */\nexport const Default = {\n  render: () => html`\n<nve-control>\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-control>`\n};\n\n/**\n * @summary Responsive form controls with layout adaptation in resizable containers.\n * @tags test-case\n */\nexport const Responsive = {\n  render: () => html`\n  <div nve-layout=\"column gap:lg\" style=\"padding: 12px; border: 1px solid #ccc; overflow-y: auto; resize: horizontal; max-width: 600px;\">\n    <nve-input layout=\"horizontal\">\n      <label>text label</label>\n      <input />\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\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    <nve-search layout=\"horizontal-inline\">\n      <label>search label</label>\n      <input type=\"search\" placeholder=\"search\" />\n    </nve-search>\n    <nve-checkbox-group layout=\"horizontal-inline\">\n      <label>checkbox label</label>\n      <nve-checkbox>\n        <label>local</label>\n        <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>staging</label>\n        <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>production</label>\n        <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n      </nve-checkbox>\n      <nve-control-message>message</nve-control-message>\n    </nve-checkbox-group>\n    <nve-range layout=\"horizontal-inline\">\n      <label>label</label>\n      <input type=\"range\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-range>\n    <nve-textarea layout=\"horizontal-inline\">\n      <label>label</label>\n      <textarea></textarea>\n    </nve-textarea>\n  </div>\n  `\n};\n\n/**\n * @summary All control and control-group layout variations (vertical, horizontal, inline) with visual debugging.\n * @tags test-case\n */\nexport const Layout = {\n  render: () => html`\n<style>\n  #control-layout {\n    display: flex;\n    gap: 48px;\n    flex-direction: column;\n    min-width: 300px;\n\n    nve-control {\n      outline: 1px solid red;\n    }\n\n    nve-control-group {\n      outline: 1px solid blue;\n    }\n  }\n</style>\n<div id=\"control-layout\">\n  <nve-control>\n    <label>vertical</label>\n    <input />\n  </nve-control>\n\n  <nve-control>\n    <label>vertical</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n  </nve-control>\n\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n\n  <nve-control-group layout=\"vertical\">\n    <label>vertical</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n\n  <nve-control-group layout=\"vertical\">\n    <label>vertical</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n\n  <nve-control-group layout=\"vertical-inline\">\n    <label>vertical-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n\n  <nve-control-group layout=\"vertical-inline\">\n    <label>vertical-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n\n  <nve-control-group layout=\"horizontal\">\n    <label>horizontal</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n\n  <nve-control-group layout=\"horizontal\">\n    <label>horizontal</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n\n  <nve-control-group layout=\"horizontal-inline\">\n    <label>horizontal-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n\n  <nve-control-group layout=\"horizontal-inline\">\n    <label>horizontal-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n</div>`\n};\n\n/**\n * @summary Form control with HTML5 validation showing required field error messaging.\n * @tags test-case\n */\nexport const RequiredField = {\n  render: () => html`\n<nve-control>\n  <label>validation</label>\n  <input required />\n  <nve-control-message>message</nve-control-message>\n  <nve-control-message error=\"valueMissing\">required</nve-control-message>\n</nve-control>`\n};\n\n/**\n * @summary Form control without visible label using aria-label for accessibility in compact layouts.\n * @tags test-case\n */\nexport const NoLabelControl = {\n  render: () => html`\n<nve-control>\n  <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n</nve-control>`\n};\n\n/**\n * @summary Inline control layout with checkbox positioned before its label for toggle-style inputs.\n * @tags test-case\n */\nexport const InlineControl = {\n  render: () => html`\n<nve-control>\n  <label>enable logging</label>\n  <input type=\"checkbox\" checked />\n</nve-control>`\n};\n\n/**\n * @summary Control group organizing related radio buttons and checkboxes with shared label and messaging.\n * @tags test-case\n */\nexport const Group = {\n  render: () => html`\n<nve-control-group>\n  <label>environment</label>\n  <nve-control>\n    <label>local</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"1\" checked />\n  </nve-control>\n  <nve-control>\n    <label>staging</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"2\" />\n  </nve-control>\n  <nve-control>\n    <label>production</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"3\" />\n  </nve-control>\n  <nve-control-message>message</nve-control-message>\n</nve-control-group>\n\n<br />\n\n<nve-control-group>\n  <label>environment</label>\n  <nve-control>\n    <label>local</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n  </nve-control>\n  <nve-control>\n    <label>staging</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n  </nve-control>\n  <nve-control>\n    <label>production</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n  </nve-control>\n  <nve-control-message>message</nve-control-message>\n</nve-control-group>\n`\n};\n\n/**\n * @summary Form control wrapping a native date input with label and message support.\n * @tags test-case\n */\nexport const DateControl = {\n  render: () => html`\n<nve-control>\n  <label>date</label>\n  <input type=\"date\" />\n  <nve-control-message>message</nve-control-message>\n</nve-control>`\n};\n\n/**\n * @summary Form control wrapping a textarea element for multi-line text input.\n * @tags test-case\n */\nexport const TextareaControl = {\n  render: () => html`\n<nve-control>\n  <label>about</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-control>`\n};\n\n/**\n * @summary Form control with datalist providing autocomplete suggestions for search input.\n * @tags test-case\n */\nexport const Datalist = {\n  render: () => html`\n<nve-control>\n  <label>search</label>\n  <input type=\"search\" />\n  <datalist>\n    <option value=\"option 1\"></option>\n    <option value=\"option 2\"></option>\n    <option value=\"option 3\"></option>\n  </datalist>\n</nve-control>`\n};\n\n/**\n * @summary Form controls showing all status states (default, disabled, success, error) for validation feedback.\n * @tags test-case\n */\nexport const Status = {\n  render: () => html`\n<div nve-layout=\"column gap:md\">\n  <nve-control>\n    <label>label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n\n  <nve-control>\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n\n  <nve-control>\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-control>\n\n  <nve-control>\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-control>\n</div>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"control.examples.js","names":["control_examples_default"],"sources":["../../../src/forms/control/control.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/input/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/range/define.js';\nimport '@nvidia-elements/core/textarea/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\n\nexport default {\n  title: 'Elements/Forms',\n  component: 'nve-control'\n}\n\n/**\n * @summary Basic form control wrapper with label, input, and validation message structure.\n * @tags test-case\n */\nexport const Default = {\n  render: () => html`\n<nve-control>\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-control>`\n};\n\n/**\n * @summary Responsive form controls with layout adaptation in resizable containers.\n * @tags test-case\n */\nexport const Responsive = {\n  render: () => html`\n  <div nve-layout=\"column gap:lg\" style=\"padding: 12px; border: 1px solid #ccc; overflow-y: auto; resize: horizontal; max-width: 600px;\">\n    <nve-input layout=\"horizontal\">\n      <label>text label</label>\n      <input />\n      <nve-control-message>message</nve-control-message>\n    </nve-input>\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    <nve-search layout=\"horizontal-inline\">\n      <label>search label</label>\n      <input type=\"search\" placeholder=\"search\" />\n    </nve-search>\n    <nve-checkbox-group layout=\"horizontal-inline\">\n      <label>checkbox label</label>\n      <nve-checkbox>\n        <label>local</label>\n        <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>staging</label>\n        <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>production</label>\n        <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n      </nve-checkbox>\n      <nve-control-message>message</nve-control-message>\n    </nve-checkbox-group>\n    <nve-range layout=\"horizontal-inline\">\n      <label>label</label>\n      <input type=\"range\" />\n      <nve-control-message>message</nve-control-message>\n    </nve-range>\n    <nve-textarea layout=\"horizontal-inline\">\n      <label>label</label>\n      <textarea></textarea>\n    </nve-textarea>\n  </div>\n  `\n};\n\n/**\n * @summary All control and control-group layout variations (vertical, horizontal, inline) with visual debugging.\n * @tags test-case\n */\nexport const Layout = {\n  render: () => html`\n<style>\n  #control-layout {\n    display: flex;\n    gap: 48px;\n    flex-direction: column;\n    min-width: 300px;\n\n    nve-control {\n      outline: 1px solid red;\n    }\n\n    nve-control-group {\n      outline: 1px solid blue;\n    }\n  }\n</style>\n<div id=\"control-layout\">\n  <nve-control>\n    <label>vertical</label>\n    <input />\n  </nve-control>\n\n  <nve-control>\n    <label>vertical</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n  </nve-control>\n\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n\n  <nve-control-group layout=\"vertical\">\n    <label>vertical</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n\n  <nve-control-group layout=\"vertical\">\n    <label>vertical</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n\n  <nve-control-group layout=\"vertical-inline\">\n    <label>vertical-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n\n  <nve-control-group layout=\"vertical-inline\">\n    <label>vertical-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n\n  <nve-control-group layout=\"horizontal\">\n    <label>horizontal</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n\n  <nve-control-group layout=\"horizontal\">\n    <label>horizontal</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n\n  <nve-control-group layout=\"horizontal-inline\">\n    <label>horizontal-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n\n  <nve-control-group layout=\"horizontal-inline\">\n    <label>horizontal-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n</div>`\n};\n\n/**\n * @summary Form control with HTML5 validation showing required field error messaging.\n * @tags test-case\n */\nexport const RequiredField = {\n  render: () => html`\n<nve-control>\n  <label>validation</label>\n  <input required />\n  <nve-control-message>message</nve-control-message>\n  <nve-control-message error=\"valueMissing\">required</nve-control-message>\n</nve-control>`\n};\n\n/**\n * @summary Form control without visible label using aria-label for accessibility in compact layouts.\n * @tags test-case\n */\nexport const NoLabelControl = {\n  render: () => html`\n<nve-control>\n  <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n</nve-control>`\n};\n\n/**\n * @summary Inline control layout with checkbox positioned before its label for toggle-style inputs.\n * @tags test-case\n */\nexport const InlineControl = {\n  render: () => html`\n<nve-control>\n  <label>enable logging</label>\n  <input type=\"checkbox\" checked />\n</nve-control>`\n};\n\n/**\n * @summary Control group organizing related radio buttons and checkboxes with shared label and messaging.\n * @tags test-case\n */\nexport const Group = {\n  render: () => html`\n<nve-control-group>\n  <label>environment</label>\n  <nve-control>\n    <label>local</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"1\" checked />\n  </nve-control>\n  <nve-control>\n    <label>staging</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"2\" />\n  </nve-control>\n  <nve-control>\n    <label>production</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"3\" />\n  </nve-control>\n  <nve-control-message>message</nve-control-message>\n</nve-control-group>\n\n<br />\n\n<nve-control-group>\n  <label>environment</label>\n  <nve-control>\n    <label>local</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n  </nve-control>\n  <nve-control>\n    <label>staging</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n  </nve-control>\n  <nve-control>\n    <label>production</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n  </nve-control>\n  <nve-control-message>message</nve-control-message>\n</nve-control-group>\n`\n};\n\n/**\n * @summary Form control wrapping a native date input with label and message support.\n * @tags test-case\n */\nexport const DateControl = {\n  render: () => html`\n<nve-control>\n  <label>date</label>\n  <input type=\"date\" />\n  <nve-control-message>message</nve-control-message>\n</nve-control>`\n};\n\n/**\n * @summary Form control wrapping a textarea element for multi-line text input.\n * @tags test-case\n */\nexport const TextareaControl = {\n  render: () => html`\n<nve-control>\n  <label>about</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-control>`\n};\n\n/**\n * @summary Form control with datalist providing autocomplete suggestions for search input.\n * @tags test-case\n */\nexport const Datalist = {\n  render: () => html`\n<nve-control>\n  <label>search</label>\n  <input type=\"search\" />\n  <datalist>\n    <option value=\"option 1\"></option>\n    <option value=\"option 2\"></option>\n    <option value=\"option 3\"></option>\n  </datalist>\n</nve-control>`\n};\n\n/**\n * @summary Form controls showing all status states (default, disabled, success, error) for validation feedback.\n * @tags test-case\n */\nexport const Status = {\n  render: () => html`\n<div nve-layout=\"column gap:md\">\n  <nve-control>\n    <label>label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n\n  <nve-control>\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n\n  <nve-control>\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-control>\n\n  <nve-control>\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-control>\n</div>`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/forms/control/control.global.js

@@ -1,6 +1,5 @@
-//#region src/forms/control/control.global.css?inline
+// src/forms/control/control.global.css?inline
 var e = "[nve-control]:not([nofocus]):has(*:focus-visible)::part(_input){outline:Highlight solid 2px!important;outline:5px auto -webkit-focus-ring-color!important}[nve-control] input::placeholder,[nve-control] textarea::placeholder{color:var(--nve-sys-text-placeholder-color)!important}[nve-control] input::-webkit-search-cancel-button,[nve-control] input::-webkit-calendar-picker-indicator{opacity:0!important;display:none!important}[nve-control]:has([nve-control]){--control-type: custom}[nve-control]:not(:has(label))::part(_label){display:none!important}[nve-control]:not(:has(nve-control-message:not([hidden])))::part(_messages){display:none!important}[nve-control=\"\"]:has(label)::part(_internal-host){grid-template-areas:\"label label label\" \"input input input\"}[nve-control=\"\"]:has(nve-control-message:not([hidden]))::part(_internal-host){grid-template-areas:\"input input input\" \"messages messages messages\"}[nve-control=\"\"]:has(label):has(nve-control-message:not([hidden]))::part(_internal-host){grid-template-areas:\"label label label\" \"input input input\" \"messages messages messages\"}[nve-control=\"\"][layout=horizontal]:has(nve-control-message:not([hidden]))::part(_internal-host),[nve-control=\"\"][layout=horizontal-inline]:has(nve-control-message:not([hidden]))::part(_internal-host){grid-template-areas:\"label input input\" \". messages messages\"}[nve-control=\"\"][layout=horizontal]:not(:has(nve-control-message:not([hidden])))::part(_internal-host),[nve-control=\"\"][layout=horizontal-inline]:not(:has(nve-control-message:not([hidden])))::part(_internal-host){grid-template-areas:\"label input input\"}[nve-control=inline]:has(label)::part(_internal-host){grid-template-areas:\"input label label\"}[nve-control=inline]:has(nve-control-message:not([hidden]))::part(_internal-host){grid-template-areas:\"input input input\" \"messages messages messages\"}[nve-control=inline]:has(label):has(nve-control-message:not([hidden]))::part(_internal-host){grid-template-areas:\"input label label\" \"messages messages messages\"}[nve-control=inline]:not(:has(nve-control-message:not([hidden])))::part(_internal-host){grid-template-areas:\"input label label\"}[nve-control=inline]:not(:has(label),:has(nve-control-message:not([hidden])))::part(_internal-host){grid-template-areas:\"input input input\"}nve-control:has(nve-monaco-input),nve-control:has(nve-monaco-diff-input){contain:none}[prominence=muted]>[nve-control]:state(checked),[prominence=muted][nve-control]:state(checked){--filter: grayscale(90%)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=control.global.js.map

package/dist/forms/control/control.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"control.global.js","names":[],"sources":["../../../src/forms/control/control.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n/**\n * Majority of this CSS will be able to be removed once :has-slotted is widely supported\n * https://developer.mozilla.org/en-US/docs/Web/CSS/:has-slotted\n * https://chromestatus.com/feature/5134941143433216\n */\n\n[nve-control]:not([nofocus]):has(*:focus-visible)::part(_input) {\n  outline: Highlight solid 2px !important;\n  outline: 5px auto -webkit-focus-ring-color !important;\n}\n\n[nve-control] input::placeholder,\n[nve-control] textarea::placeholder {\n  color: var(--nve-sys-text-placeholder-color) !important;\n}\n\n[nve-control] input::-webkit-search-cancel-button,\n[nve-control] input::-webkit-calendar-picker-indicator {\n  opacity: 0 !important;\n  display: none !important;\n}\n\n[nve-control]:has([nve-control]) {\n  --control-type: custom;\n}\n\n[nve-control]:not(:has(label))::part(_label) {\n  display: none !important;\n}\n\n[nve-control]:not(:has(nve-control-message:not([hidden])))::part(_messages) {\n  display: none !important;\n}\n\n/** block controls */\n[nve-control='']:has(label)::part(_internal-host) {\n  grid-template-areas:\n    'label label label'\n    'input input input';\n}\n\n[nve-control='']:has(nve-control-message:not([hidden]))::part(_internal-host) {\n  grid-template-areas:\n    'input input input'\n    'messages messages messages';\n}\n\n[nve-control='']:has(label):has(nve-control-message:not([hidden]))::part(_internal-host) {\n  grid-template-areas:\n    'label label label'\n    'input input input'\n    'messages messages messages';\n}\n\n[nve-control=''][layout='horizontal']:has(nve-control-message:not([hidden]))::part(_internal-host),\n[nve-control=''][layout='horizontal-inline']:has(nve-control-message:not([hidden]))::part(_internal-host) {\n  grid-template-areas:\n    'label input input'\n    '. messages messages';\n}\n\n[nve-control=''][layout='horizontal']:not(:has(nve-control-message:not([hidden])))::part(_internal-host),\n[nve-control=''][layout='horizontal-inline']:not(:has(nve-control-message:not([hidden])))::part(_internal-host) {\n  grid-template-areas: 'label input input';\n}\n\n/** inline controls */\n[nve-control='inline']:has(label)::part(_internal-host) {\n  grid-template-areas: 'input label label';\n}\n\n[nve-control='inline']:has(nve-control-message:not([hidden]))::part(_internal-host) {\n  grid-template-areas:\n    'input input input'\n    'messages messages messages';\n}\n\n[nve-control='inline']:has(label):has(nve-control-message:not([hidden]))::part(_internal-host) {\n  grid-template-areas:\n    'input label label'\n    'messages messages messages';\n}\n\n[nve-control='inline']:not(:has(nve-control-message:not([hidden])))::part(_internal-host) {\n  grid-template-areas: 'input label label';\n}\n\n[nve-control='inline']:not(:has(label), :has(nve-control-message:not([hidden])))::part(_internal-host) {\n  grid-template-areas: 'input input input';\n}\n\n/* customizations for first-party elements */\nnve-control:has(nve-monaco-input),\nnve-control:has(nve-monaco-diff-input) {\n  contain: none;\n}\n\n[prominence='muted'] > [nve-control]:state(checked),\n[prominence='muted'][nve-control]:state(checked) {\n  --filter: grayscale(90%);\n}\n"],"mappings":""}
+{"version":3,"file":"control.global.js","names":["control_global_default"],"sources":["../../../src/forms/control/control.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n/**\n * Majority of this CSS will be able to be removed once :has-slotted is widely supported\n * https://developer.mozilla.org/en-US/docs/Web/CSS/:has-slotted\n * https://chromestatus.com/feature/5134941143433216\n */\n\n[nve-control]:not([nofocus]):has(*:focus-visible)::part(_input) {\n  outline: Highlight solid 2px !important;\n  outline: 5px auto -webkit-focus-ring-color !important;\n}\n\n[nve-control] input::placeholder,\n[nve-control] textarea::placeholder {\n  color: var(--nve-sys-text-placeholder-color) !important;\n}\n\n[nve-control] input::-webkit-search-cancel-button,\n[nve-control] input::-webkit-calendar-picker-indicator {\n  opacity: 0 !important;\n  display: none !important;\n}\n\n[nve-control]:has([nve-control]) {\n  --control-type: custom;\n}\n\n[nve-control]:not(:has(label))::part(_label) {\n  display: none !important;\n}\n\n[nve-control]:not(:has(nve-control-message:not([hidden])))::part(_messages) {\n  display: none !important;\n}\n\n/** block controls */\n[nve-control='']:has(label)::part(_internal-host) {\n  grid-template-areas:\n    'label label label'\n    'input input input';\n}\n\n[nve-control='']:has(nve-control-message:not([hidden]))::part(_internal-host) {\n  grid-template-areas:\n    'input input input'\n    'messages messages messages';\n}\n\n[nve-control='']:has(label):has(nve-control-message:not([hidden]))::part(_internal-host) {\n  grid-template-areas:\n    'label label label'\n    'input input input'\n    'messages messages messages';\n}\n\n[nve-control=''][layout='horizontal']:has(nve-control-message:not([hidden]))::part(_internal-host),\n[nve-control=''][layout='horizontal-inline']:has(nve-control-message:not([hidden]))::part(_internal-host) {\n  grid-template-areas:\n    'label input input'\n    '. messages messages';\n}\n\n[nve-control=''][layout='horizontal']:not(:has(nve-control-message:not([hidden])))::part(_internal-host),\n[nve-control=''][layout='horizontal-inline']:not(:has(nve-control-message:not([hidden])))::part(_internal-host) {\n  grid-template-areas: 'label input input';\n}\n\n/** inline controls */\n[nve-control='inline']:has(label)::part(_internal-host) {\n  grid-template-areas: 'input label label';\n}\n\n[nve-control='inline']:has(nve-control-message:not([hidden]))::part(_internal-host) {\n  grid-template-areas:\n    'input input input'\n    'messages messages messages';\n}\n\n[nve-control='inline']:has(label):has(nve-control-message:not([hidden]))::part(_internal-host) {\n  grid-template-areas:\n    'input label label'\n    'messages messages messages';\n}\n\n[nve-control='inline']:not(:has(nve-control-message:not([hidden])))::part(_internal-host) {\n  grid-template-areas: 'input label label';\n}\n\n[nve-control='inline']:not(:has(label), :has(nve-control-message:not([hidden])))::part(_internal-host) {\n  grid-template-areas: 'input input input';\n}\n\n/* customizations for first-party elements */\nnve-control:has(nve-monaco-input),\nnve-control:has(nve-monaco-diff-input) {\n  contain: none;\n}\n\n[prominence='muted'] > [nve-control]:state(checked),\n[prominence='muted'][nve-control]:state(checked) {\n  --filter: grayscale(90%);\n}\n"],"mappings":""}

package/dist/forms/control/control.js

@@ -1,6 +1,5 @@
-//#region src/forms/control/control.css?inline
+// src/forms/control/control.css?inline
 var e = ":host{--cursor: pointer;--accent-color: var(--nve-sys-accent-secondary-background);--color: var(--nve-sys-interaction-field-color);--label-color: var(--nve-sys-interaction-field-color);--label-text-transform: none;--label-font-weight: var(--nve-ref-font-weight-medium);--label-font-size: var(--nve-ref-font-size-100);--control-width: 100%;--control-height: var(--nve-sys-interaction-field-height);--_label-width: var(--label-width, 180px);--nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));--opacity: 1;--filter: none;contain:content}::slotted(*){color-scheme:var(--nve-sys-color-scheme);font-family:inherit}::slotted(label){font-weight:var(--label-font-weight)!important;font-size:var(--label-font-size)!important;color:var(--label-color)!important;cursor:var(--cursor)!important;text-transform:var(--label-text-transform)!important;display:inline-block!important;line-height:1em!important;align-self:center!important}:host(:state(disabled)),:host(:state(disabled)) ::slotted(nve-control-message:not([status])){--cursor: not-allowed}:host(:state(disabled)){--opacity: var(--nve-ref-opacity-500)}:host(:state(invalid)) ::slotted(nve-control-message:not([error],[status])){display:none}:host([fit-content]){--control-width: fit-content;--label-width: fit-content;--width: fit-content}:host([fit-text]){--max-width: fit-content;--width: fit-content;::slotted(input),::slotted(select){field-sizing:content}}:host([nve-control]) ::slotted(input:focus),:host([nve-control]) ::slotted(select:focus),:host([nve-control]) ::slotted(textarea:focus),:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],[internal-host]:has(nve-icon-button){outline:0!important}@container style(--control-type: custom){[input]{outline:0!important}}::slotted(nve-button[nve-control]){width:100%}[input]{cursor:var(--cursor);min-height:var(--control-height);opacity:var(--opacity);filter:var(--filter);grid-area:input;display:flex;line-height:1}:host([nve-control=\"inline\"]){[internal-host]{min-height:var(--control-height)}[input]{min-height:min-content}}slot{line-height:1;width:100%}slot[name=label]{grid-area:label;display:inline-flex;align-self:center}slot[name=messages]{grid-area:messages;display:inline-flex}[name=messages]:not(:has-slotted),[name=label]:not(:has-slotted){display:none!important}[internal-host]{display:grid;width:100%;gap:var(--nve-ref-space-xs);grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto;grid-template-areas:\"input input input\"}:host([nve-control=\"inline\"]) [internal-host]{align-items:center;grid-template-columns:auto 1fr 1fr;slot[name=label],slot[name=messages]{align-items:center}::slotted(label){font-weight:var(--nve-ref-font-weight-regular)!important;color:var(--color)!important;width:100%}slot[name=label]{line-height:1;width:100%}}:host([layout=\"horizontal\"]) [internal-host],:host([layout=\"horizontal-inline\"]) [internal-host]{grid-template-columns:var(--_label-width) 1fr minmax(0,var(--_label-width))}[internal-host]{&:has([name=label]:has-slotted){grid-template-areas:\"label label label\" \"input input input\"}&:has([name=messages]:has-slotted){grid-template-areas:\"input input input\" \"messages messages messages\"}&:has([name=label]:has-slotted):has([name=messages]:has-slotted){grid-template-areas:\"label label label\" \"input input input\" \"messages messages messages\"}}:host([layout=\"horizontal\"]),:host([layout=\"horizontal-inline\"]){[internal-host]{&:has([name=messages]:has-slotted){grid-template-areas:\"label input input\" \". messages messages\"}&:not(:has([name=messages]:has-slotted)){grid-template-areas:\"label input input\"}}}:host([nve-control=\"inline\"]){--control-height: auto;width:fit-content;[internal-host]{grid-template-areas:\"input input input\";&:has([name=label]:has-slotted){grid-template-areas:\"input label label\"}&:has([name=messages]:has-slotted){grid-template-areas:\"input input input\" \"messages messages messages\"}&:has([name=label]:has-slotted):has([name=messages]:has-slotted){grid-template-areas:\"input label label\" \"messages messages messages\"}}}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=control.js.map