@nova-design-system/nova-webcomponents 3.26.0 → 3.28.0

package/dist/collection/components/nv-stack/nv-stack.js

@@ -18,7 +18,7 @@ export class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '1fe102ad734149231a7058af441e5ee77ef97ca3', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: 'f7ed597dabd90182887096441ff1258812dfe9fc' })));
+        return (h(Host, { key: '861c5eed0b6dc7cdd5bf3a2d07af92127e2025bf', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: '4cf3d3fb15fa6c4ed2d7d6bb70334965b0cca457' })));
     }
     static get is() { return "nv-stack"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-table/nv-table.docs.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 const NvTableDocs = {
     component: 'nv-table',
+    parentGroup: 'Table/nv-table',
     subcomponents: ['nv-tableheader'],
     composedComponents: ['nv-tableheader'],
     stories: [

package/dist/collection/components/nv-table/nv-table.js

@@ -58,7 +58,7 @@ export class NvTable {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '0d5518a54b41c67bdd7c73d5147fd954fb53d388' }, h("slot", { key: '8ab65d5dd1ce751fd357b275b84db042b1d9ce2e' })));
+        return (h(Host, { key: 'a6882cbcf9b0b12776f6d4be6d9cbfb42aff6833' }, h("slot", { key: 'd4d47a2eb77c50ff30109e217ceecd2677b9d28d' })));
     }
     static get is() { return "nv-table"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-tableheader/nv-tableheader.docs.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvTableheaderDocs = {
     component: 'nv-tableheader',
+    parentGroup: 'Table/nv-table',
     badge: 'beta',
     stories: [
         // Default

package/dist/collection/components/nv-tableheader/nv-tableheader.js

@@ -55,7 +55,7 @@ export class NvTableheader {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '95447cd8ccde74d09226bcdbf645eed309be0fa8', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, h("slot", { key: '4e26aa21f080cf23ce42fb72d6777463bd079991' }), this.sortable && (h("span", { key: '666254c197e97226d2f1c6830d1216b9457c4acc', class: "sort-icon-wrap", "aria-hidden": "true" }, h("nv-iconbutton", { key: '11b2de5c4c270740857094ec8a39f1d392d7246a', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+        return (h(Host, { key: '962f555a02b3035148c5915ae7493c68c0202cc7', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, h("slot", { key: '0e69da3d4e2eb8ad01060f51d5043ffc14380415' }), this.sortable && (h("span", { key: 'a9b5ff97552d142cc3e1becc14a34ebab1f3092d', class: "sort-icon-wrap", "aria-hidden": "true" }, h("nv-iconbutton", { key: '76f832eba2b57f244dbce597668f493a918cf599', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
             // prevent mousedown from selecting text
             onMouseDown: (e) => e.preventDefault(), class: {
                 'is-none': this.sortDirection === 'none',

package/dist/collection/components/nv-timetest/nv-timetest.css

@@ -0,0 +1,15 @@
+nv-timetest {
+  display: flex;
+}
+nv-timetest label {
+  display: flex;
+  flex-direction: column;
+  margin-right: 10px;
+  font-weight: bold;
+}
+nv-timetest input {
+  font-weight: normal;
+  padding: var(--spacing-2);
+  border-radius: var(--spacing-1);
+  border: 1px solid #ccc;
+}

package/dist/collection/components/nv-timetest/nv-timetest.docs.js

@@ -0,0 +1,5 @@
+const NvTimetestDocs = {
+    component: 'nv-timetest',
+    skip: true,
+};
+export default NvTimetestDocs;

package/dist/collection/components/nv-timetest/nv-timetest.js

@@ -0,0 +1,248 @@
+/* eslint-disable jsdoc/require-jsdoc */
+import { Host, h } from "@stencil/core";
+import { parseTimeOnly, formatTimeOnly, LocalDate, } from "../../utils/nova-datetime";
+/**
+ * This is a test component for the new TimeOnly type
+ * @slot default - Child content of the component.
+ *
+ * @deprecated [EXPERIMENTAL]
+ * @experimental This component is still in development and subject to change in future releases.
+ */
+export class NvTimetest {
+    constructor() {
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        this.handleStartChange = (event) => {
+            const input = event.target;
+            const parsed = parseTimeOnly(input.value);
+            if (!parsed)
+                return;
+            const newStart = formatTimeOnly(parsed);
+            this.value = { start: newStart, end: this.value?.end };
+            this.lastChange = newStart;
+            this.history = [...(this.history ?? []), newStart];
+            this.valueChanged.emit(this.value);
+            this.lastChanged.emit({ time: this.lastChange });
+            this.historyChanged.emit({ times: this.history });
+            const todayDate = LocalDate.now().toString();
+            this.valueDateChanged.emit({
+                start: this.value?.start
+                    ? new Date(todayDate + 'T' + this.value.start)
+                    : undefined,
+                end: this.value?.end
+                    ? new Date(todayDate + 'T' + this.value.end)
+                    : undefined,
+            });
+        };
+        this.handleEndChange = (event) => {
+            const input = event.target;
+            const parsed = parseTimeOnly(input.value);
+            if (!parsed)
+                return;
+            const newEnd = formatTimeOnly(parsed);
+            this.value = { start: this.value?.start, end: newEnd };
+            this.lastChange = newEnd;
+            this.history = [...(this.history ?? []), newEnd];
+            this.valueChanged.emit(this.value);
+            this.lastChanged.emit({ time: this.lastChange });
+            this.historyChanged.emit({ times: this.history });
+            const todayDate = LocalDate.now().toString();
+            this.valueDateChanged.emit({
+                start: this.value?.start
+                    ? new Date(todayDate + 'T' + this.value.start)
+                    : undefined,
+                end: this.value?.end
+                    ? new Date(todayDate + 'T' + this.value.end)
+                    : undefined,
+            });
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '85d3773d49a180e5bc9b5bc0962cc3b709a474b0' }, h("label", { key: 'c0d5c262578e6aa1555ded8c542e2eef7e42d491' }, "Start:", h("input", { key: '31fe9447be14efd87aab1161dbc01593a30328dc', type: "time", step: "1", value: this.value?.start ?? '', onInput: this.handleStartChange })), h("label", { key: '0959b432f53169c425765b94c098ca5ecc8d6ede' }, "End:", h("input", { key: 'ccc50a80dfea2ab7eb627d11840dd5626ca25f88', type: "time", step: "1", value: this.value?.end ?? '', onInput: this.handleEndChange })), h("slot", { key: 'd4c6a017d41102a245e1f8472d676bc866382c00' })));
+    }
+    static get is() { return "nv-timetest"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-timetest.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-timetest.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "{ start?: TimeOnly; end?: TimeOnly }",
+                    "resolved": "{ start?: `${number}:${number}:${number}`; end?: `${number}:${number}:${number}`; }",
+                    "references": {
+                        "TimeOnly": {
+                            "location": "import",
+                            "path": "../../interfaces/dates",
+                            "id": "src/interfaces/dates.ts::TimeOnly",
+                            "referenceLocation": "TimeOnly"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The time range value with start and end times."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "history": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "TimeOnly[]",
+                    "resolved": "`${number}:${number}:${number}`[]",
+                    "references": {
+                        "TimeOnly": {
+                            "location": "import",
+                            "path": "../../interfaces/dates",
+                            "id": "src/interfaces/dates.ts::TimeOnly",
+                            "referenceLocation": "TimeOnly"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of historical time changes."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "lastChange": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "TimeOnly",
+                    "resolved": "`${number}:${number}:${number}`",
+                    "references": {
+                        "TimeOnly": {
+                            "location": "import",
+                            "path": "../../interfaces/dates",
+                            "id": "src/interfaces/dates.ts::TimeOnly",
+                            "referenceLocation": "TimeOnly"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The last change."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "last-change"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "value"
+                        }],
+                    "text": "Emitted when the time range value changes."
+                },
+                "complexType": {
+                    "original": "{ start?: TimeOnly; end?: TimeOnly }",
+                    "resolved": "{ start?: `${number}:${number}:${number}`; end?: `${number}:${number}:${number}`; }",
+                    "references": {
+                        "TimeOnly": {
+                            "location": "import",
+                            "path": "../../interfaces/dates",
+                            "id": "src/interfaces/dates.ts::TimeOnly",
+                            "referenceLocation": "TimeOnly"
+                        }
+                    }
+                }
+            }, {
+                "method": "lastChanged",
+                "name": "lastChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the last change timestamp updates."
+                },
+                "complexType": {
+                    "original": "{ time: TimeOnly }",
+                    "resolved": "{ time: `${number}:${number}:${number}`; }",
+                    "references": {
+                        "TimeOnly": {
+                            "location": "import",
+                            "path": "../../interfaces/dates",
+                            "id": "src/interfaces/dates.ts::TimeOnly",
+                            "referenceLocation": "TimeOnly"
+                        }
+                    }
+                }
+            }, {
+                "method": "historyChanged",
+                "name": "historyChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the history array changes."
+                },
+                "complexType": {
+                    "original": "{ times: TimeOnly[] }",
+                    "resolved": "{ times: `${number}:${number}:${number}`[]; }",
+                    "references": {
+                        "TimeOnly": {
+                            "location": "import",
+                            "path": "../../interfaces/dates",
+                            "id": "src/interfaces/dates.ts::TimeOnly",
+                            "referenceLocation": "TimeOnly"
+                        }
+                    }
+                }
+            }, {
+                "method": "valueDateChanged",
+                "name": "valueDateChanged",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the time range value changes as Date objects (local time)."
+                },
+                "complexType": {
+                    "original": "{ start?: Date; end?: Date }",
+                    "resolved": "{ start?: Date; end?: Date; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/nv-toggle/nv-toggle.docs.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvToggleDocs = {
     component: 'nv-toggle',
+    parentGroup: 'Toggle',
     stories: [
         // Default
         {

package/dist/collection/components/nv-toggle/nv-toggle.js

@@ -60,8 +60,8 @@ export class NvToggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '38dd2a460c82599e2c2bfd6b039eafff0dc6fc67', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: '4d6bf742f548cc5f92ae84497f12569d9680dcef', class: "input-container" }, h("input", { key: '97f54363c17cde48ec226680ee58da012e590b69', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: 'e4576a0884f02731a3e6d2d20537cfabf411a8fe', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '4744036b0d1e73f350bbc4b6f6e7664bb9361d1e', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '44a2aeb86c840246473bc47e0ba01269af77ef06', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '6e5c3d1721c9db3cffd019c9274294c40793daf0', class: "description" }, h("slot", { key: '87c3d35c78ded085cd1ddb5b2874dfae7bd99842', name: "description" }, this.description))))));
+        return (h(Host, { key: '39ad1374bbf8cd5393a99dc4c18fa28091dc5e90', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: '3a8be2405404975398f1a0dae05c0855b913245f', class: "input-container" }, h("input", { key: 'b589b9faa5801f99e698d0e664e0a35779a1271f', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: 'a3308782b02b1c0eca3d6a1b87509674b9bc5c13', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '854b2ffe7bf61423512154ffe8b3b0351a2950a4', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '933bf88b7841f3b2ed24c3bb86fb24159eaac900', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '5a04358d1be3b935239bb23e1466cc22ed2f3b48', class: "description" }, h("slot", { key: 'f5c1513eff6ee42bc171b0088baec634f8458197', name: "description" }, this.description))))));
     }
     static get is() { return "nv-toggle"; }
     static get formAssociated() { return true; }

package/dist/collection/components/nv-togglebutton/nv-togglebutton.docs.js

@@ -1,5 +1,52 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvTogglebuttonDocs = {
     component: 'nv-togglebutton',
-    skip: true,
+    parentGroup: 'Toggle',
+    subcomponents: ['nv-togglebuttongroup', 'nv-icon'],
+    stories: [
+        // Default
+        {
+            name: 'Default',
+            description: 'Basic toggle button within a toggle button group',
+            template: (h("nv-togglebuttongroup", null, h("nv-togglebutton", { "data-storybook-args": true, value: "option1" }, "Option 1"), h("nv-togglebutton", { value: "option2" }, "Option 2"), h("nv-togglebutton", { value: "option3" }, "Option 3"))),
+        },
+        // value
+        {
+            name: nameof(x => x.value),
+            description: 'Toggle button with specific value',
+            template: (h("nv-togglebuttongroup", null, h("nv-togglebutton", { value: "left" }, "Left"), h("nv-togglebutton", { "data-storybook-args": true, value: "center" }, "Center"), h("nv-togglebutton", { value: "right" }, "Right"))),
+        },
+        // disabled
+        {
+            name: nameof(x => x.disabled),
+            description: 'Disabled toggle button',
+            args: {
+                disabled: true,
+            },
+            template: (h("nv-togglebuttongroup", null, h("nv-togglebutton", { value: "option1" }, "Option 1"), h("nv-togglebutton", { "data-storybook-args": true, value: "option2", disabled: true }, "Option 2 (Disabled)"), h("nv-togglebutton", { value: "option3" }, "Option 3"))),
+        },
+        // active
+        {
+            name: nameof(x => x.active),
+            description: 'Pre-selected toggle button',
+            args: {
+                active: true,
+            },
+            template: (h("nv-togglebuttongroup", null, h("nv-togglebutton", { "data-storybook-args": true, value: "option1", active: true }, "Option 1 (Selected)"), h("nv-togglebutton", { value: "option2" }, "Option 2"), h("nv-togglebutton", { value: "option3" }, "Option 3"))),
+        },
+        // WithIcon
+        {
+            name: 'WithIcon',
+            description: 'Toggle button with icon',
+            template: (h("nv-togglebuttongroup", null, h("nv-togglebutton", { value: "bold" }, h("nv-icon", { name: "bold" })), h("nv-togglebutton", { value: "italic" }, h("nv-icon", { name: "italic" })), h("nv-togglebutton", { value: "underline" }, h("nv-icon", { name: "underline" })))),
+        },
+        // WithIconAndText
+        {
+            name: 'WithIconAndText',
+            description: 'Toggle button with icon and text',
+            template: (h("nv-togglebuttongroup", null, h("nv-togglebutton", { value: "list" }, h("nv-icon", { slot: "leading-icon", name: "list" }), "List"), h("nv-togglebutton", { value: "grid" }, h("nv-icon", { slot: "leading-icon", name: "grid" }), "Grid"))),
+        },
+    ],
 };
 export default NvTogglebuttonDocs;

package/dist/collection/components/nv-togglebutton/nv-togglebutton.js

@@ -50,7 +50,7 @@ export class NvTogglebutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '4af1293d9eb69a3a20d8f30c6b2876c6c29ddc03', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, h("slot", { key: '783fad27c525553cd404c1ffed0ae1305d330de8' })));
+        return (h(Host, { key: '8e700d38ba155b977d4efa0d9e01b41e73fc4413', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, h("slot", { key: '92427015839f98b0d9238b8df6af8e08ee511153' })));
     }
     static get is() { return "nv-togglebutton"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-togglebuttongroup/nv-togglebuttongroup.docs.js

@@ -3,6 +3,7 @@ import { nameof } from "../../utils/class.utils";
 const NvTogglebuttongroupDocs = {
     component: 'nv-togglebuttongroup',
     composedComponents: ['nv-togglebutton'],
+    parentGroup: 'Toggle',
     subcomponents: ['nv-togglebutton', 'nv-icon'],
     badge: 'new',
     stories: [

package/dist/collection/components/nv-togglebuttongroup/nv-togglebuttongroup.js

@@ -149,7 +149,7 @@ export class NvTogglebuttongroup {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '1116872815229d09e1e286dd1f12a9787218e207' }, h("slot", { key: 'fa5363ec707f38830065718b2423dd8493acdd4e' })));
+        return (h(Host, { key: '2026cb95db8b57f2a1cd4ea53608f336843b63fe' }, h("slot", { key: '5c06ab59d6c99e789c3a1c3a8a4842a0772ca3a2' })));
     }
     static get is() { return "nv-togglebuttongroup"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-tooltip/nv-tooltip.docs.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvTooltipDocs = {
     component: 'nv-tooltip',
+    parentGroup: 'Tooltip',
     subcomponents: ['nv-button'],
     stories: [
         // Default

package/dist/collection/components/nv-tooltip/nv-tooltip.js

@@ -33,15 +33,20 @@ export class NvTooltip {
     /****************************************************************************/
     //#region LIFECYCLE
     componentDidRender() {
-        if (this.triggerElement || !this.defaultSlot)
+        if (!this.popoverElement)
             return;
-        this.popoverElement.triggerElement = this.defaultSlot?.nextSibling;
+        const trigger = this.triggerElement ??
+            this.defaultSlot?.nextElementSibling ??
+            this.el.querySelector(':scope > :not(nv-popover):not(slot):not([slot])');
+        if (trigger && this.popoverElement.triggerElement !== trigger) {
+            this.popoverElement.triggerElement = trigger;
+        }
     }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'bda9ba58186add585457f8fdf4a8e1d6389da01a' }, h("nv-popover", { key: 'ac67ea44cebbc8abb9ff4e190668093bb7179222', ref: el => (this.popoverElement = el), triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, h("p", { key: 'b677689d4a73462b7d16ff7d9f31bfd61e7f47eb', slot: "content" }, this.message), h("slot", { key: 'bd1540db065fdeceb89d09d69e1dbf7ad4de728d', name: "content" })), h("slot", { key: '648d3c3125b0528cd8e88675122d775ad7cc40d9', ref: el => (this.defaultSlot = el) })));
+        return (h(Host, { key: '8285fbb412cb45cc7baf2936f0405c0438395c8d' }, h("nv-popover", { key: '29d70e9baa826de35d2cdca88f48610d70ec55e4', ref: el => (this.popoverElement = el), triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, groupName: 'tooltip', enterDelay: this.enterDelay, onOpenChanged: e => this.openChanged.emit(e.detail) }, h("p", { key: 'a9c907fa96f9c4108a8d84cec53981218c060811', slot: "content" }, this.message), h("slot", { key: 'af1b7ac8069071fe2d41e925f1c0090f8b6aaab5', name: "content" })), h("slot", { key: 'e5d3c6d16fb7e4a682b66e0016d9e4e30e5647e0', ref: el => (this.defaultSlot = el) })));
     }
     static get is() { return "nv-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/index.js

@@ -16,8 +16,11 @@ import * as stringUtils_1 from "./utils/string.utils";
 export { stringUtils_1 as stringUtils };
 import * as uriUtils_1 from "./utils/uri.utils";
 export { uriUtils_1 as uriUtils };
+import * as dateTimeUtils_1 from "./utils/nova-datetime";
+export { dateTimeUtils_1 as dateTimeUtils };
 import * as animations_1 from "./animations";
 export { animations_1 as animations };
 import * as searchEngine_1 from "./utils/search-engine";
 export { searchEngine_1 as searchEngine };
 export { iconNames } from './components/nv-icon/nv-icons';
+export * from './interfaces/dates';

package/dist/collection/interfaces/dates.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/nova-datetime.js

@@ -0,0 +1,144 @@
+/* cSpell:words joda */
+import { LocalTime, LocalDate, LocalDateTime, DateTimeFormatter, } from "@js-joda/core";
+// ─── Parsing (string → js-joda) ─────────────────────────────────────────────
+/**
+ * Parse a TimeOnly string (HH:mm or HH:mm:ss) into a LocalTime.
+ * @param {string} value - The time string to parse.
+ * @returns {LocalTime | null} The parsed LocalTime, or null if invalid.
+ */
+export function parseTimeOnly(value) {
+    try {
+        return LocalTime.parse(value);
+    }
+    catch {
+        console.warn(`[nova] Invalid TimeOnly value: "${value}"`);
+        return null;
+    }
+}
+/**
+ * Parse a DateOnly string (YYYY-MM-DD) into a LocalDate.
+ * @param {string} value - The date string to parse.
+ * @returns {LocalDate | null} The parsed LocalDate, or null if invalid.
+ */
+export function parseDateOnly(value) {
+    try {
+        return LocalDate.parse(value);
+    }
+    catch {
+        console.warn(`[nova] Invalid DateOnly value: "${value}"`);
+        return null;
+    }
+}
+/**
+ * Parse an ISO-8601 date-time string into a LocalDateTime.
+ * @param {string} value - The date-time string to parse.
+ * @returns {LocalDateTime | null} The parsed LocalDateTime, or null if invalid.
+ */
+export function parseLocalDateTime(value) {
+    try {
+        return LocalDateTime.parse(value);
+    }
+    catch {
+        console.warn(`[nova] Invalid LocalDateTime value: "${value}"`);
+        return null;
+    }
+}
+// ─── Formatting (js-joda → branded string) ──────────────────────────────────
+const TIME_FORMATTER = DateTimeFormatter.ofPattern('HH:mm:ss');
+const DATE_FORMATTER = DateTimeFormatter.ofPattern('yyyy-MM-dd');
+/**
+ * Format a LocalTime as a TimeOnly string (always HH:mm:ss).
+ * @param {LocalTime} time - The LocalTime to format.
+ * @returns {TimeOnly} The formatted TimeOnly string.
+ */
+export function formatTimeOnly(time) {
+    return time.format(TIME_FORMATTER);
+}
+/**
+ * Format a LocalDate as a DateOnly string (YYYY-MM-DD).
+ * @param {LocalDate} date - The LocalDate to format.
+ * @returns {DateOnly} The formatted DateOnly string.
+ */
+export function formatDateOnly(date) {
+    return date.format(DATE_FORMATTER);
+}
+/**
+ * Format a LocalDateTime as an ISO-8601 string.
+ * @param {LocalDateTime} dt - The LocalDateTime to format.
+ * @returns {string} The formatted ISO-8601 string.
+ */
+export function formatLocalDateTime(dt) {
+    return dt.toString();
+}
+// ─── Validation (type guards) ───────────────────────────────────────────────
+/**
+ * Returns true if the string is a valid TimeOnly value.
+ * @param {string} value - The string to validate.
+ * @returns {boolean} Whether the string is a valid TimeOnly.
+ */
+export function isValidTimeOnly(value) {
+    return parseTimeOnly(value) !== null;
+}
+/**
+ * Returns true if the string is a valid DateOnly value.
+ * @param {string} value - The string to validate.
+ * @returns {boolean} Whether the string is a valid DateOnly.
+ */
+export function isValidDateOnly(value) {
+    return parseDateOnly(value) !== null;
+}
+// ─── Comparison helpers ─────────────────────────────────────────────────────
+/**
+ * Returns true if time `a` is before time `b`.
+ * @param {TimeOnly} a - The first time to compare.
+ * @param {TimeOnly} b - The second time to compare.
+ * @returns {boolean} Whether `a` is before `b`.
+ */
+export function isTimeBefore(a, b) {
+    const pa = parseTimeOnly(a);
+    const pb = parseTimeOnly(b);
+    if (!pa || !pb)
+        return false;
+    return pa.isBefore(pb);
+}
+/**
+ * Returns true if time `a` is after time `b`.
+ * @param {TimeOnly} a - The first time to compare.
+ * @param {TimeOnly} b - The second time to compare.
+ * @returns {boolean} Whether `a` is after `b`.
+ */
+export function isTimeAfter(a, b) {
+    const pa = parseTimeOnly(a);
+    const pb = parseTimeOnly(b);
+    if (!pa || !pb)
+        return false;
+    return pa.isAfter(pb);
+}
+/**
+ * Returns true if date `a` is before date `b`.
+ * @param {DateOnly} a - The first date to compare.
+ * @param {DateOnly} b - The second date to compare.
+ * @returns {boolean} Whether `a` is before `b`.
+ */
+export function isDateBefore(a, b) {
+    const pa = parseDateOnly(a);
+    const pb = parseDateOnly(b);
+    if (!pa || !pb)
+        return false;
+    return pa.isBefore(pb);
+}
+/**
+ * Returns true if date `a` is after date `b`.
+ * @param {DateOnly} a - The first date to compare.
+ * @param {DateOnly} b - The second date to compare.
+ * @returns {boolean} Whether `a` is after `b`.
+ */
+export function isDateAfter(a, b) {
+    const pa = parseDateOnly(a);
+    const pb = parseDateOnly(b);
+    if (!pa || !pb)
+        return false;
+    return pa.isAfter(pb);
+}
+// ─── Re-exports for advanced consumers ──────────────────────────────────────
+export { LocalTime, LocalDate, LocalDateTime } from '@js-joda/core';