@nvidia-elements/core 0.0.3 → 0.0.5

package/dist/dropzone/dropzone.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropzone.examples.js","names":[],"sources":["../../src/dropzone/dropzone.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/dropzone/define.js';\n\nexport default {\n  title: 'Elements/Dropzone',\n  component: 'nve-dropzone'\n};\n\n/**\n * @summary Basic file dropzone with drag-and-drop area for file upload interactions.\n */\nexport const Default = {\n  render: () => html`\n<nve-dropzone name=\"files\" style=\"--min-height: 200px;\"></nve-dropzone>`\n};\n\n/**\n * @summary Dropzone with custom icon slot showing visual feedback on hover and highlight states.\n */\nexport const Icon = {\n  render: () => html`\n<style>\n  nve-dropzone nve-icon {\n    --color: red;\n    background: var(--nve-sys-layer-canvas-accent-background);\n  }\n\n  nve-dropzone[highlighted] nve-icon,\n  nve-dropzone:hover nve-icon {\n    --color: var(--nve-sys-text-white-color);\n    background: var(--nve-sys-accent-primary-background);\n  }\n</style>\n<nve-dropzone name=\"files\">\n  <nve-icon slot=\"icon\" name=\"document\"></nve-icon>\n</nve-dropzone>\n`\n};\n\n/**\n * @summary Dropzone integrated with form validation showing file type and size constraint errors.\n */\nexport const Form = {\n  render: () => html`\n<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section>\n    <nve-control>\n      <nve-dropzone name=\"files\" accept=\"image/gif, image/jpeg, image/png\" max-file-size=\"1048576\"></nve-dropzone>\n      <nve-control-message error=\"typeMismatch\">Unsupported file type — this upload only accepts images</nve-control-message>\n      <nve-control-message error=\"rangeOverflow\">File too big - maximum 1.00 MB allowed</nve-control-message>\n    </nve-control>\n  </section>\n  <nve-button type=\"submit\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#form-demo');\n  const dropzone = document.querySelector('#form-demo nve-dropzone');\n\n  dropzone.addEventListener('change', e => {\n    console.log('change', e.target.value);\n    const files = e.target.value;\n    console.log('Validity:', e.target.validity);\n    console.log('Validation Message:', e.target.validationMessage);\n  });\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    const formData = new FormData(e.target);\n    const files = formData.getAll('files');\n\n    if (form.checkValidity()) {\n      console.log('Form submitted successfully!');\n    } else {\n      console.log('Form validation failed');\n    }\n  });\n</script>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"dropzone.examples.js","names":[],"sources":["../../src/dropzone/dropzone.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/dropzone/define.js';\n\nexport default {\n  title: 'Elements/Dropzone',\n  component: 'nve-dropzone'\n};\n\n/**\n * @summary Basic file dropzone with drag-and-drop area for file upload interactions.\n */\nexport const Default = {\n  render: () => html`\n<nve-dropzone name=\"files\" style=\"--min-height: 200px;\"></nve-dropzone>`\n};\n\n/**\n * @summary Dropzone with custom icon slot showing visual feedback on hover and highlight states.\n * @tags theme\n */\nexport const Icon = {\n  render: () => html`\n<style>\n  nve-dropzone nve-icon {\n    --color: red;\n    background: var(--nve-sys-layer-canvas-accent-background);\n  }\n\n  nve-dropzone[highlighted] nve-icon,\n  nve-dropzone:hover nve-icon {\n    --color: var(--nve-sys-text-white-color);\n    background: var(--nve-sys-accent-primary-background);\n  }\n</style>\n<nve-dropzone name=\"files\">\n  <nve-icon slot=\"icon\" name=\"document\"></nve-icon>\n</nve-dropzone>\n`\n};\n\n/**\n * @summary Dropzone integrated with form validation showing file type and size constraint errors.\n */\nexport const Form = {\n  render: () => html`\n<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section>\n    <nve-control>\n      <nve-dropzone name=\"files\" accept=\"image/gif, image/jpeg, image/png\" max-file-size=\"1048576\"></nve-dropzone>\n      <nve-control-message error=\"typeMismatch\">Unsupported file type — this upload only accepts images</nve-control-message>\n      <nve-control-message error=\"rangeOverflow\">File too big - maximum 1.00 MB allowed</nve-control-message>\n    </nve-control>\n  </section>\n  <nve-button type=\"submit\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#form-demo');\n  const dropzone = document.querySelector('#form-demo nve-dropzone');\n\n  dropzone.addEventListener('change', e => {\n    console.log('change', e.target.value);\n    const files = e.target.value;\n    console.log('Validity:', e.target.validity);\n    console.log('Validation Message:', e.target.validationMessage);\n  });\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    const formData = new FormData(e.target);\n    const files = formData.getAll('files');\n\n    if (form.checkValidity()) {\n      console.log('Form submitted successfully!');\n    } else {\n      console.log('Form validation failed');\n    }\n  });\n</script>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/dropzone/dropzone.examples.json

@@ -18,7 +18,9 @@
       "summary": "Dropzone with custom icon slot showing visual feedback on hover and highlight states.",
       "description": "",
       "composition": false,
-      "tags": []
+      "tags": [
+        "theme"
+      ]
     },
     {
       "id": "core-dropzone_form",

package/dist/dropzone/dropzone2.js

@@ -20,7 +20,7 @@ var g = class extends h(d) {
 	static {
 		this.metadata = {
 			tag: "nve-dropzone",
-			version: "0.0.3",
+			version: "0.0.5",
 			validators: [l, c],
 			valueSchema: {
 				type: "array",

package/dist/file/file2.js

@@ -11,7 +11,7 @@ var a = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-file",
-			version: "0.0.3"
+			version: "0.0.5"
 		};
 	}
 	connectedCallback() {

package/dist/format-datetime/define.d.ts

@@ -0,0 +1,6 @@
+import { FormatDatetime } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-format-datetime': FormatDatetime;
+    }
+}

package/dist/format-datetime/define.js

@@ -0,0 +1,7 @@
+import { define as e } from "../internal/utils/dom.js";
+import { FormatDatetime as t } from "./format-datetime2.js";
+//#region src/format-datetime/define.ts
+e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/format-datetime/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { FormatDatetime } from '@nvidia-elements/core/format-datetime';\n\ndefine(FormatDatetime);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-format-datetime': FormatDatetime;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,EAAe"}

package/dist/format-datetime/format-datetime.d.ts

@@ -0,0 +1,74 @@
+import { LitElement } from 'lit';
+/**
+ * @element nve-format-datetime
+ * @description Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element.
+ * Granular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.
+ * @since 0.0.0
+ * @entrypoint \@nvidia-elements/core/format-datetime
+ * @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.
+ */
+export declare class FormatDatetime extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    /**
+     * Optional date string for values supplied by JavaScript or bound data.
+     * By default, the component formats the element's text content, which also serves as the SSR fallback.
+     * When both are present, this property takes precedence.
+     */
+    date?: string;
+    /**
+     * Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.
+     */
+    locale?: string;
+    /**
+     * Weekday representation: 'long' | 'short' | 'narrow'.
+     */
+    weekday?: 'long' | 'short' | 'narrow';
+    /**
+     * Year representation: 'numeric' | '2-digit'.
+     */
+    year?: 'numeric' | '2-digit';
+    /**
+     * Month representation: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'.
+     */
+    month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';
+    /**
+     * Day representation: 'numeric' | '2-digit'.
+     */
+    day?: 'numeric' | '2-digit';
+    /**
+     * Hour representation: 'numeric' | '2-digit'.
+     */
+    hour?: 'numeric' | '2-digit';
+    /**
+     * Minute representation: 'numeric' | '2-digit'.
+     */
+    minute?: 'numeric' | '2-digit';
+    /**
+     * Second representation: 'numeric' | '2-digit'.
+     */
+    second?: 'numeric' | '2-digit';
+    /**
+     * Preset date formatting style: 'full' | 'long' | 'medium' | 'short'.
+     * Preset styles take precedence over granular date and time part options.
+     */
+    dateStyle?: 'full' | 'long' | 'medium' | 'short';
+    /**
+     * Preset time formatting style: 'full' | 'long' | 'medium' | 'short'.
+     * Preset styles take precedence over granular date and time part options.
+     */
+    timeStyle?: 'full' | 'long' | 'medium' | 'short';
+    /**
+     * Time zone name display: 'long' | 'short'. Use it with granular options only; preset styles ignore it.
+     */
+    timeZoneName?: 'long' | 'short';
+    /**
+     * IANA time zone identifier (such as 'America/New_York', 'UTC').
+     */
+    timeZone?: string;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"format-datetime.examples.js","names":[],"sources":["../../src/format-datetime/format-datetime.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-datetime/define.js';\n\nexport default {\n  title: 'Elements/FormatDatetime',\n  component: 'nve-format-datetime',\n};\n\n/**\n * @summary Basic date formatting with the long date style preset. Use for displaying human-readable dates in content areas, tables, or metadata.\n */\nexport const Default = {\n  render: () => html`\n  <nve-format-datetime date-style=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  `\n};\n\n/**\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.\n */\nexport const DateStyle = {\n  render: () => html`\n<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  `\n};\n\n/**\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.\n * Preset styles take precedence over granular formatting options when both appear.\n */\nexport const TimeStyle = {\n  render: () => html`\n<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  `\n};\n\n/**\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.\n */\nexport const Granular = {\n  render: () => html`\n<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime weekday=\"long\" month=\"short\" day=\"numeric\" year=\"numeric\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime month=\"long\" year=\"numeric\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n  `\n};\n\n/**\n * @summary Time-only formatting with granular hour, minute, and second options. Use for clocks, time labels, or timestamps where the date is unnecessary.\n */\nexport const TimeOnly = {\n  render: () => html`\n<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  `\n};\n\n/**\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.\n */\nexport const Locale = {\n  render: () => html`\n<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  `\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-datetime date=\"2023-07-28T04:20:17.434Z\" date-style=\"long\"></nve-format-datetime>\n  `\n};\n\n/**\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.\n */\nexport const TimeZone = {\n  render: () => html`\n<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime date-style=\"long\" time-style=\"long\" time-zone=\"America/New_York\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime date-style=\"long\" time-style=\"long\" time-zone=\"Asia/Tokyo\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n  `\n};\n\n/**\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.\n */\nexport const TimeZoneName = {\n  render: () => html`\n<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime locale=\"en-US\" month=\"long\" day=\"numeric\" year=\"numeric\" hour=\"numeric\" minute=\"2-digit\" time-zone=\"America/New_York\" time-zone-name=\"short\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime locale=\"en-US\" month=\"long\" day=\"numeric\" year=\"numeric\" hour=\"numeric\" minute=\"2-digit\" time-zone=\"America/New_York\" time-zone-name=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

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

@@ -0,0 +1,87 @@
+{
+  "element": "nve-format-datetime",
+  "entrypoint": "@nvidia-elements/core/format-datetime/format-datetime.examples.json",
+  "items": [
+    {
+      "id": "core-format-datetime_default",
+      "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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    }
+  ]
+}

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

@@ -0,0 +1,6 @@
+//#region src/format-datetime/format-datetime.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-datetime.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"format-datetime.js","names":[],"sources":["../../src/format-datetime/format-datetime.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-datetime/format-datetime2.js

@@ -0,0 +1,77 @@
+import { LogService as e } from "../internal/services/log.service.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { typeSSR as n } from "../internal/controllers/type-ssr.controller.js";
+import { useStyles as r } from "../internal/styles/index.js";
+import i from "./format-datetime.js";
+import { LitElement as a, html as o } from "lit";
+import { property as s } from "lit/decorators/property.js";
+//#region src/format-datetime/format-datetime.ts
+var c = class extends a {
+	static {
+		this.styles = r([i]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-format-datetime",
+			version: "0.0.5"
+		};
+	}
+	get #e() {
+		return this.date ?? this.textContent?.trim() ?? "";
+	}
+	get #t() {
+		return this.locale ?? (globalThis.document?.documentElement?.lang || void 0);
+	}
+	get #n() {
+		let t = this.#e;
+		if (!t) return "";
+		let n = this.#s(t);
+		if (!n) return t;
+		try {
+			return new Intl.DateTimeFormat(this.#t, this.#r).format(n);
+		} catch (n) {
+			return e.warn(`format-datetime: ${n.message}`), t;
+		}
+	}
+	get #r() {
+		return this.#i ? this.#a : this.#o;
+	}
+	get #i() {
+		return this.dateStyle !== void 0 || this.timeStyle !== void 0;
+	}
+	get #a() {
+		let e = {};
+		return this.dateStyle && (e.dateStyle = this.dateStyle), this.timeStyle && (e.timeStyle = this.timeStyle), this.timeZone && (e.timeZone = this.timeZone), e;
+	}
+	get #o() {
+		let e = {};
+		return this.weekday && (e.weekday = this.weekday), this.year && (e.year = this.year), this.month && (e.month = this.month), this.day && (e.day = this.day), this.hour && (e.hour = this.hour), this.minute && (e.minute = this.minute), this.second && (e.second = this.second), this.timeZoneName && (e.timeZoneName = this.timeZoneName), this.timeZone && (e.timeZone = this.timeZone), e;
+	}
+	#s(t) {
+		let n = new Date(t);
+		return isNaN(n.getTime()) ? (e.warn(`format-datetime: invalid date value "${t}"`), null) : n;
+	}
+	render() {
+		return o`<time internal-host datetime="${this.#e}">${this.#n}<slot @slotchange="${this.#c}" hidden></slot></time>`;
+	}
+	#c() {
+		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, "weekday", void 0), t([s({ type: String })], c.prototype, "year", void 0), t([s({ type: String })], c.prototype, "month", void 0), t([s({ type: String })], c.prototype, "day", void 0), t([s({ type: String })], c.prototype, "hour", void 0), t([s({ type: String })], c.prototype, "minute", void 0), t([s({ type: String })], c.prototype, "second", void 0), t([s({
+	type: String,
+	attribute: "date-style"
+})], c.prototype, "dateStyle", void 0), t([s({
+	type: String,
+	attribute: "time-style"
+})], c.prototype, "timeStyle", void 0), t([s({
+	type: String,
+	attribute: "time-zone-name"
+})], c.prototype, "timeZoneName", void 0), t([s({
+	type: String,
+	attribute: "time-zone"
+})], c.prototype, "timeZone", void 0), c = t([n()], c);
+//#endregion
+export { c as FormatDatetime };
+
+//# sourceMappingURL=format-datetime2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"format-datetime2.js","names":["#dateValue","#resolvedLocale","#formattedDate","#parseDate","#formatOptions","#hasPresetStyle","#presetFormatOptions","#granularFormatOptions","#onSlotChange"],"sources":["../../src/format-datetime/format-datetime.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-datetime.css?inline';\n\n/**\n * @element nve-format-datetime\n * @description Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element.\n * Granular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/format-datetime\n * @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.\n */\n@typeSSR()\nexport class FormatDatetime extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-format-datetime',\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   * Weekday representation: 'long' | 'short' | 'narrow'.\n   */\n  @property({ type: String }) weekday?: 'long' | 'short' | 'narrow';\n\n  /**\n   * Year representation: 'numeric' | '2-digit'.\n   */\n  @property({ type: String }) year?: 'numeric' | '2-digit';\n\n  /**\n   * Month representation: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'.\n   */\n  @property({ type: String }) month?: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow';\n\n  /**\n   * Day representation: 'numeric' | '2-digit'.\n   */\n  @property({ type: String }) day?: 'numeric' | '2-digit';\n\n  /**\n   * Hour representation: 'numeric' | '2-digit'.\n   */\n  @property({ type: String }) hour?: 'numeric' | '2-digit';\n\n  /**\n   * Minute representation: 'numeric' | '2-digit'.\n   */\n  @property({ type: String }) minute?: 'numeric' | '2-digit';\n\n  /**\n   * Second representation: 'numeric' | '2-digit'.\n   */\n  @property({ type: String }) second?: 'numeric' | '2-digit';\n\n  /**\n   * Preset date formatting style: 'full' | 'long' | 'medium' | 'short'.\n   * Preset styles take precedence over granular date and time part options.\n   */\n  @property({ type: String, attribute: 'date-style' }) dateStyle?: 'full' | 'long' | 'medium' | 'short';\n\n  /**\n   * Preset time formatting style: 'full' | 'long' | 'medium' | 'short'.\n   * Preset styles take precedence over granular date and time part options.\n   */\n  @property({ type: String, attribute: 'time-style' }) timeStyle?: 'full' | 'long' | 'medium' | 'short';\n\n  /**\n   * Time zone name display: 'long' | 'short'. Use it with granular options only; preset styles ignore it.\n   */\n  @property({ type: String, attribute: 'time-zone-name' }) timeZoneName?: 'long' | 'short';\n\n  /**\n   * IANA time zone identifier (such as 'America/New_York', 'UTC').\n   */\n  @property({ type: String, attribute: 'time-zone' }) timeZone?: string;\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  get #formattedDate(): string {\n    const iso = this.#dateValue;\n    if (!iso) return '';\n\n    const date = this.#parseDate(iso);\n    if (!date) return iso;\n\n    try {\n      return new Intl.DateTimeFormat(this.#resolvedLocale, this.#formatOptions).format(date);\n    } catch (e) {\n      LogService.warn(`format-datetime: ${(e as Error).message}`);\n      return iso;\n    }\n  }\n\n  get #formatOptions(): Intl.DateTimeFormatOptions {\n    return this.#hasPresetStyle ? this.#presetFormatOptions : this.#granularFormatOptions;\n  }\n\n  get #hasPresetStyle(): boolean {\n    return this.dateStyle !== undefined || this.timeStyle !== undefined;\n  }\n\n  get #presetFormatOptions(): Intl.DateTimeFormatOptions {\n    const options: Intl.DateTimeFormatOptions = {};\n\n    if (this.dateStyle) options.dateStyle = this.dateStyle;\n    if (this.timeStyle) options.timeStyle = this.timeStyle;\n    if (this.timeZone) options.timeZone = this.timeZone;\n\n    return options;\n  }\n\n  get #granularFormatOptions(): Intl.DateTimeFormatOptions {\n    const options: Intl.DateTimeFormatOptions = {};\n\n    if (this.weekday) options.weekday = this.weekday;\n    if (this.year) options.year = this.year;\n    if (this.month) options.month = this.month;\n    if (this.day) options.day = this.day;\n    if (this.hour) options.hour = this.hour;\n    if (this.minute) options.minute = this.minute;\n    if (this.second) options.second = this.second;\n    if (this.timeZoneName) options.timeZoneName = this.timeZoneName;\n    if (this.timeZone) options.timeZone = this.timeZone;\n\n    return options;\n  }\n\n  #parseDate(iso: string): Date | null {\n    const date = new Date(iso);\n    if (!isNaN(date.getTime())) return date;\n\n    LogService.warn(`format-datetime: invalid date value \"${iso}\"`);\n    return null;\n  }\n\n  render() {\n    return html`<time internal-host datetime=${this.#dateValue}>${this.#formattedDate}<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-datetime/index.d.ts

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

package/dist/format-datetime/index.js

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

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

@@ -0,0 +1,6 @@
+import { FormatRelativeTime } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-format-relative-time': FormatRelativeTime;
+    }
+}

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

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

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

@@ -0,0 +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/core/internal';\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,EAAmB"}

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

@@ -0,0 +1,47 @@
+import { LitElement } from 'lit';
+/**
+ * @element nve-format-relative-time
+ * @description Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element.
+ * Options mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.
+ * @since 0.0.0
+ * @entrypoint \@nvidia-elements/core/format-relative-time
+ * @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.
+ */
+export declare class FormatRelativeTime extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    /**
+     * Optional date string for values supplied by JavaScript or bound data.
+     * By default, the component formats the element's text content, which also serves as the SSR fallback.
+     * When both are present, this property takes precedence.
+     */
+    date?: string;
+    /**
+     * Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.
+     */
+    locale?: string;
+    /**
+     * Numeric formatting: 'always' | 'auto'. When 'auto', enables natural language forms such as 'yesterday' instead of '1 day ago'.
+     */
+    numeric: 'always' | 'auto';
+    /**
+     * Formatting length: 'long' | 'short' | 'narrow'. Controls verbosity (such as '3 days ago' vs '3d ago'). Maps to Intl.RelativeTimeFormat style option.
+     */
+    formatStyle: 'long' | 'short' | 'narrow';
+    /**
+     * 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.
+     */
+    unit: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' | 'auto';
+    /**
+     * When present, auto-updates the displayed relative time at appropriate intervals.
+     */
+    sync: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

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

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

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

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

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

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

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

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

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

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