@nvidia-elements/core 0.0.10 → 0.0.12

package/dist/format-datetime/format-datetime.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/format-datetime/format-datetime.examples.json",
   "items": [
     {
-      "id": "core-format-datetime_default",
+      "id": "format-datetime",
       "name": "Default",
       "template": "<nve-format-datetime date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n",
       "summary": "Basic date formatting with the long date style preset. Use for displaying human-readable dates in content areas, tables, or metadata.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-format-datetime_date-style",
+      "id": "format-datetime-date-style",
       "name": "DateStyle",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime date-style=\"full\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime date-style=\"medium\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime date-style=\"short\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
       "summary": "Date style presets for controlling output density. Use full or long for detail-rich contexts and medium or short for compact layouts like data tables or cards.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-format-datetime_time-style",
+      "id": "format-datetime-time-style",
       "name": "TimeStyle",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime date-style=\"long\" time-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime date-style=\"short\" time-style=\"short\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
       "summary": "Combined date and time style presets for full timestamps. Use for audit logs, event schedules, or activity feeds that need both date and time. Preset styles take precedence over granular formatting options when both appear.",
@@ -30,7 +30,7 @@
       "tags": []
     },
     {
-      "id": "core-format-datetime_granular",
+      "id": "format-datetime-granular",
       "name": "Granular",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime weekday=\"long\" month=\"short\" day=\"numeric\" year=\"numeric\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n  <nve-format-datetime month=\"long\" year=\"numeric\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
       "summary": "Granular date part options for precise formatting control. Use when presets don't match your layout, such as weekday and month only. Do not combine with date-style or time-style; style presets take priority if both appear.",
@@ -39,7 +39,7 @@
       "tags": []
     },
     {
-      "id": "core-format-datetime_time-only",
+      "id": "format-datetime-time-only",
       "name": "TimeOnly",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime hour=\"numeric\" minute=\"2-digit\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime hour=\"2-digit\" minute=\"2-digit\" second=\"2-digit\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
       "summary": "Time-only formatting with granular hour, minute, and second options. Use for clocks, time labels, or timestamps where the date is unnecessary.",
@@ -48,7 +48,7 @@
       "tags": []
     },
     {
-      "id": "core-format-datetime_locale",
+      "id": "format-datetime-locale",
       "name": "Locale",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime locale=\"de-DE\" date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime locale=\"ja\" date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime locale=\"fr-FR\" date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
       "summary": "Explicit locale settings for internationalized date output. Use when the target audience locale differs from the browser default, such as multilingual dashboards or region-specific reports.",
@@ -57,7 +57,7 @@
       "tags": []
     },
     {
-      "id": "core-format-datetime_date-attribute",
+      "id": "format-datetime-date-attribute",
       "name": "DateAttribute",
       "template": "<nve-format-datetime date=\"2023-07-28T04:20:17.434Z\" date-style=\"long\"></nve-format-datetime>\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.",
@@ -66,7 +66,7 @@
       "tags": []
     },
     {
-      "id": "core-format-datetime_time-zone",
+      "id": "format-datetime-time-zone",
       "name": "TimeZone",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime date-style=\"long\" time-style=\"long\" time-zone=\"America/New_York\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n  <nve-format-datetime date-style=\"long\" time-style=\"long\" time-zone=\"Asia/Tokyo\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n</div>\n",
       "summary": "Time zone conversion for displaying dates in a specific region. Use for global teams, scheduling interfaces, or when UTC or server timestamps need a fixed time zone.",
@@ -75,7 +75,7 @@
       "tags": []
     },
     {
-      "id": "core-format-datetime_time-zone-name",
+      "id": "format-datetime-time-zone-name",
       "name": "TimeZoneName",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime\n    locale=\"en-US\"\n    month=\"long\"\n    day=\"numeric\"\n    year=\"numeric\"\n    hour=\"numeric\"\n    minute=\"2-digit\"\n    time-zone=\"America/New_York\"\n    time-zone-name=\"short\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n  <nve-format-datetime\n    locale=\"en-US\"\n    month=\"long\"\n    day=\"numeric\"\n    year=\"numeric\"\n    hour=\"numeric\"\n    minute=\"2-digit\"\n    time-zone=\"America/New_York\"\n    time-zone-name=\"long\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n</div>\n",
       "summary": "Time zone name labels in short and long form alongside the formatted date. Use with granular options when the viewer needs to know which time zone applies, such as meeting schedulers or cross-region dashboards.",

package/dist/format-datetime/format-datetime2.js

@@ -13,7 +13,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-format-datetime",
-			version: "0.0.10"
+			version: "0.0.12"
 		};
 	}
 	get #e() {

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

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

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

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

package/dist/forms/actions.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/forms/actions.examples.json",
   "items": [
     {
-      "id": "core-forms-actions_search-clear",
+      "id": "forms-actions-search-clear",
       "name": "SearchClear",
       "template": "<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",
       "summary": "Input with action buttons for search and clear, providing quick access to common operations.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-forms-actions_label-action",
+      "id": "forms-actions-label-action",
       "name": "LabelAction",
       "template": "<nve-input>\n  <label>label</label>\n  <nve-icon-button\n    icon-name=\"information-circle-stroke\"\n    container=\"flat\"\n    aria-label=\"more details\"\n    slot=\"label\"\n  ></nve-icon-button>\n  <input type=\"text\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
       "summary": "Label with an information button to provide contextual help or more details about the field.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-forms-actions_prefix-suffix",
+      "id": "forms-actions-prefix-suffix",
       "name": "PrefixSuffix",
       "template": "<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",
       "summary": "Input with prefix and suffix buttons to show fixed text elements like URL protocols and domains.",

package/dist/forms/control/control.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/forms/control/control.examples.json",
   "items": [
     {
-      "id": "core-forms-control_default",
+      "id": "forms-control",
       "name": "Default",
       "template": "<nve-control>\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-control>\n",
       "summary": "Basic form control wrapper with label, input, and validation message structure.",
@@ -14,7 +14,7 @@
       ]
     },
     {
-      "id": "core-forms-control_responsive",
+      "id": "forms-control-responsive",
       "name": "Responsive",
       "template": "<div\n  nve-layout=\"column gap:lg\"\n  style=\"padding: 12px; border: 1px solid #ccc; overflow-y: auto; resize: horizontal; max-width: 600px\"\n>\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",
       "summary": "Responsive form controls with layout adaptation in resizable containers.",
@@ -25,7 +25,7 @@
       ]
     },
     {
-      "id": "core-forms-control_layout",
+      "id": "forms-control-layout",
       "name": "Layout",
       "template": "<style>\n  #control-layout {\n    display: flex;\n    gap: 48px;\n    flex-direction: column;\n    min-width: 300px;\n    nve-control {\n      outline: 1px solid red;\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  <nve-control>\n    <label>vertical</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n  </nve-control>\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\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  <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  <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  <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  <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  <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  <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  <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",
       "summary": "All control and control-group layout variations (vertical, horizontal, inline) with visual debugging.",
@@ -36,7 +36,7 @@
       ]
     },
     {
-      "id": "core-forms-control_required-field",
+      "id": "forms-control-required-field",
       "name": "RequiredField",
       "template": "<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",
       "summary": "Form control with HTML5 validation showing required field error messaging.",
@@ -47,7 +47,7 @@
       ]
     },
     {
-      "id": "core-forms-control_no-label-control",
+      "id": "forms-control-no-label-control",
       "name": "NoLabelControl",
       "template": "<nve-control>\n  <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n</nve-control>\n",
       "summary": "Form control without visible label using aria-label for accessibility in compact layouts.",
@@ -58,7 +58,7 @@
       ]
     },
     {
-      "id": "core-forms-control_inline-control",
+      "id": "forms-control-inline-control",
       "name": "InlineControl",
       "template": "<nve-control>\n  <label>enable logging</label>\n  <input type=\"checkbox\" checked />\n</nve-control>\n",
       "summary": "Inline control layout with checkbox positioned before its label for toggle-style inputs.",
@@ -69,7 +69,7 @@
       ]
     },
     {
-      "id": "core-forms-control_group",
+      "id": "forms-control-group",
       "name": "Group",
       "template": "<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<br />\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",
       "summary": "Control group organizing related radio buttons and checkboxes with shared label and messaging.",
@@ -80,7 +80,7 @@
       ]
     },
     {
-      "id": "core-forms-control_date-control",
+      "id": "forms-control-date-control",
       "name": "DateControl",
       "template": "<nve-control>\n  <label>date</label>\n  <input type=\"date\" />\n  <nve-control-message>message</nve-control-message>\n</nve-control>\n",
       "summary": "Form control wrapping a native date input with label and message support.",
@@ -91,7 +91,7 @@
       ]
     },
     {
-      "id": "core-forms-control_textarea-control",
+      "id": "forms-control-textarea-control",
       "name": "TextareaControl",
       "template": "<nve-control>\n  <label>about</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-control>\n",
       "summary": "Form control wrapping a textarea element for multi-line text input.",
@@ -102,7 +102,7 @@
       ]
     },
     {
-      "id": "core-forms-control_datalist",
+      "id": "forms-control-datalist",
       "name": "Datalist",
       "template": "<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",
       "summary": "Form control with datalist providing autocomplete suggestions for search input.",
@@ -113,7 +113,7 @@
       ]
     },
     {
-      "id": "core-forms-control_status",
+      "id": "forms-control-status",
       "name": "Status",
       "template": "<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  <nve-control>\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control>\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-control>\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",
       "summary": "Form controls showing all status states (default, disabled, success, error) for validation feedback.",

package/dist/forms/control/control2.js

@@ -40,7 +40,7 @@ var C = class extends v {
 	static {
 		this.metadata = {
 			tag: "nve-control",
-			version: "0.0.10"
+			version: "0.0.12"
 		};
 	}
 	render() {

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

@@ -24,7 +24,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-control-group",
-			version: "0.0.10"
+			version: "0.0.12"
 		};
 	}
 	render() {

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

@@ -23,7 +23,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-control-message",
-			version: "0.0.10"
+			version: "0.0.12"
 		};
 	}
 	static {