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

package/dist/cjs/nv-sidebarnavsubitem.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQjqJTJB.js');
+var index = require('./index-Cfkoz1kc.js');
 
 const nvSidebarnavsubitemCss = () => `nv-sidebarnavsubitem{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--sidebar-item-padding-y) var(--sidebar-item-padding-x) var(--sidebar-item-padding-y) calc(var(--sidebar-sub-item-padding-left) + var(--sidebar-item-padding-x));cursor:pointer;transition:all 0.15s ease;position:relative;min-height:var(--spacing-10);background-color:var(--color-interaction-container-neutral-background);border-radius:var(--sidebar-item-radius);--nv-component-background:var(--color-interaction-container-neutral-background)}nv-sidebarnavsubitem:hover{background-color:var(--color-interaction-container-neutral-background-hover);--nv-component-background:var(--color-interaction-container-neutral-background-hover)}nv-sidebarnavsubitem:focus,nv-sidebarnavsubitem:focus-within{outline:none}nv-sidebarnavsubitem:focus-visible,nv-sidebarnavsubitem:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-indicator{display:none}nv-sidebarnavsubitem .nv-sidebarnavsubitem-content{flex:1;display:flex;align-items:center;gap:var(--spacing-2);font-size:var(--font-size-sm);color:var(--color-content-medium-text);text-decoration:none;font-weight:var(--font-weight-medium-emphasis)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-content a{color:inherit !important;text-decoration:none !important;font-weight:var(--font-weight-medium-emphasis) !important;flex:1}nv-sidebarnavsubitem:hover .nv-sidebarnavsubitem-content{color:var(--color-content-medium-text)}nv-sidebarnavsubitem[active]{background-color:var(--color-interaction-container-neutral-background-active);--nv-component-background:var(--color-interaction-container-neutral-background-active)}nv-sidebarnavsubitem[active] .nv-sidebarnavsubitem-content{color:var(--color-interaction-container-neutral-text-active);font-weight:var(--font-weight-high-emphasis)}nv-sidebarnavsubitem .nv-sidebarnavsubitem-trailing{display:flex;align-items:center}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-content{max-width:0;opacity:0;margin:0;overflow:hidden;transition:opacity 0.2s ease, max-width 0.2s ease}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-indicator{margin-right:0;width:var(--spacing-6);justify-content:center}nv-sidebar[collapsed] nv-sidebarnavsubitem .nv-sidebarnavsubitem-trailing{display:none}`;
 
@@ -24,7 +24,7 @@ const NvSidebarnavsubitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e5b353c32937bbf45c455593693b58d7177879f9', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: 'ebe7894659ae59538adc96043621b37a3145ef1a', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: '2054d9f16623e2611652274f4872b6bcdc78c44c', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: 'fa1db84fbb2fcbc3cd6729146b6962445bbba2be' })), index.h("div", { key: 'd3399e26472f48809c2b4fd824402827330b9b11', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: '5ee8b8b8198854ed658272032855e3cf18f21a25', name: "trailing" }))));
+        return (index.h(index.Host, { key: '05f74ef3cf6f93804e4446fe23977d8773deb7e2', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: 'f1f2db51fbff9c2f58ba317cb5fcbe1805cd189b', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: 'c476dfbda77ee7bcca1338ef8d8b103806e6e3a7', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: 'b80cb20a4f13b691cbd31c344d442f8a23585a26' })), index.h("div", { key: '383dc01158c4752506a6069be9abe2e20b83b9e4', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: '2c63f696dd64ef8f680f3b85959d756952fd8db4', name: "trailing" }))));
     }
 };
 NvSidebarnavsubitem.style = nvSidebarnavsubitemCss();

package/dist/cjs/nv-split.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQjqJTJB.js');
+var index = require('./index-Cfkoz1kc.js');
 
 const nvSplitCss = () => `nv-split{display:flex;width:100%;height:100%;position:relative}nv-split[direction=horizontal]{flex-direction:row}nv-split[direction=vertical]{flex-direction:column}nv-split .nv-split-gutter{position:absolute;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color 0.2s ease}nv-split .nv-split-gutter::after{content:"";position:absolute;background:var(--components-splitter-line-background);transition:background-color 0.2s ease}nv-split .nv-split-gutter:hover::after{background:var(--components-splitter-line-background-hover)}nv-split .nv-split-gutter::before{content:"";background:var(--components-splitter-handle-background);position:absolute;background-repeat:no-repeat;background-position:center;transition:all 0.2s ease;pointer-events:none}nv-split[direction=horizontal]>.nv-split-gutter{width:var(--splitter-gutter);top:0;bottom:0;transform:translateX(-50%);cursor:col-resize}nv-split[direction=horizontal]>.nv-split-gutter::after{width:var(--splitter-line-width);background-color:var(--components-splitter-line-background);height:100%;left:50%;top:0%;transform:translateX(-50%)}nv-split[direction=horizontal]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=horizontal]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-wide);height:var(--splitter-handle-long);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=horizontal]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[direction=vertical]>.nv-split-gutter{height:var(--splitter-gutter);left:0;right:0;transform:translateY(-50%);cursor:row-resize}nv-split[direction=vertical]>.nv-split-gutter::after{height:var(--splitter-line-width);background-color:var(--components-splitter-line-background);width:100%;top:50%;left:0%;transform:translateY(-50%)}nv-split[direction=vertical]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=vertical]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-long);height:var(--splitter-handle-wide);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=vertical]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[data-dragging=true]>.nv-split-gutter::after{background:var(--components-splitter-line-background-active)}nv-split>[slot=pane]{box-sizing:border-box;flex:1 1 auto;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column;margin:0 !important}nv-split>[slot=pane]>nv-split{flex:1 1 auto;width:100%;height:100%}`;
 
@@ -323,7 +323,7 @@ const NvSplit = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'ab2b75b963d3cee109e90fe22e0dfe356a384706', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: 'a7a8258a976029f91ffbce3fa1f90f7ed35409ef', name: "pane" }), index.h("slot", { key: '9af34cb299ff061bec6ba7dfe6e969e093aeb3bc', name: "gutter" })));
+        return (index.h(index.Host, { key: '8ad8bebda77f9868b9715280c0157f247057026d', "data-dragging": this.isDragging.toString() }, index.h("slot", { key: '8ca002feab0c3cd7755a5f1f53864e4e20585420', name: "pane" }), index.h("slot", { key: 'f7f7352ed8c326ec263f6d617bcd84fea02689ea', name: "gutter" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/nv-stack.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQjqJTJB.js');
+var index = require('./index-Cfkoz1kc.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
 const nvStackCss = () => `nv-stack{display:flex;align-items:center;justify-content:flex-start;flex-direction:row}nv-stack nv-col{display:flex}nv-stack:not(nv-row){flex-wrap:nowrap}nv-stack>.nv-stack-item-flex{flex-shrink:1;flex-grow:1}nv-stack>.nv-stack-item-lead{margin-right:auto}nv-stack>.nv-stack-item-lead+*{margin-left:0}nv-stack>.nv-stack-item-center{margin-right:auto;margin-left:auto}nv-stack>.nv-stack-item-tail{margin-left:auto}nv-stack>.nv-stack-nowrap{white-space:nowrap}nv-stack.nv-stack-vertical{align-items:stretch;flex-direction:column}nv-stack.nv-stack-vertical>.nv-stack-item-lead{margin-right:0;margin-bottom:auto}nv-stack.nv-stack-vertical>.nv-stack-item-lead+*{margin-top:0}nv-stack.nv-stack-vertical>.nv-stack-item-tail{margin-left:0;margin-top:auto}nv-stack.nv-stack-vertical>.nv-stack-item-center{margin:auto 0}nv-stack.nv-stack-flex>*{flex-shrink:1;flex-grow:1}nv-stack.nv-stack-fill>*{height:100%}nv-stack.nv-stack-fill.nv-stack-vertical>*{height:auto;width:100%}`;
@@ -20,7 +20,7 @@ const NvStack = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '1fe102ad734149231a7058af441e5ee77ef97ca3', class: clsx.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') }, index.h("slot", { key: 'f7ed597dabd90182887096441ff1258812dfe9fc' })));
+        return (index.h(index.Host, { key: '861c5eed0b6dc7cdd5bf3a2d07af92127e2025bf', class: clsx.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') }, index.h("slot", { key: '4cf3d3fb15fa6c4ed2d7d6bb70334965b0cca457' })));
     }
 };
 NvStack.style = nvStackCss();

package/dist/cjs/nv-table.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQjqJTJB.js');
+var index = require('./index-Cfkoz1kc.js');
 
 /**
  * Table utility functions and constants for nv-table component
@@ -233,7 +233,7 @@ const NvTable = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '0d5518a54b41c67bdd7c73d5147fd954fb53d388' }, index.h("slot", { key: '8ab65d5dd1ce751fd357b275b84db042b1d9ce2e' })));
+        return (index.h(index.Host, { key: 'a6882cbcf9b0b12776f6d4be6d9cbfb42aff6833' }, index.h("slot", { key: 'd4d47a2eb77c50ff30109e217ceecd2677b9d28d' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/nv-tableheader.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQjqJTJB.js');
+var index = require('./index-Cfkoz1kc.js');
 
 const nvTableheaderCss = () => `nv-tableheader{display:inline-flex;width:100%;align-items:center;gap:var(--spacing-2)}nv-tableheader:focus-visible:focus,nv-tableheader:focus-visible:focus-within{outline:none}nv-tableheader:focus-visible:focus-visible,nv-tableheader:focus-visible:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-tableheader:focus-visible{border-radius:var(--radius-rounded-sm)}nv-tableheader nv-iconbutton{transition:transform 120ms ease, opacity 120ms ease}nv-tableheader nv-iconbutton svg{transition:transform 240ms ease}nv-tableheader nv-iconbutton.is-none{opacity:0.5}nv-tableheader nv-iconbutton.is-desc svg{transform:rotate(180deg)}`;
 
@@ -59,7 +59,7 @@ const NvTableheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '95447cd8ccde74d09226bcdbf645eed309be0fa8', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '4e26aa21f080cf23ce42fb72d6777463bd079991' }), this.sortable && (index.h("span", { key: '666254c197e97226d2f1c6830d1216b9457c4acc', class: "sort-icon-wrap", "aria-hidden": "true" }, index.h("nv-iconbutton", { key: '11b2de5c4c270740857094ec8a39f1d392d7246a', disableTabindex: true, name: "arrow-up", size: "xs", emphasis: this.sortDirection === 'none' ? 'lower' : 'low',
+        return (index.h(index.Host, { key: '962f555a02b3035148c5915ae7493c68c0202cc7', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, index.h("slot", { key: '0e69da3d4e2eb8ad01060f51d5043ffc14380415' }), this.sortable && (index.h("span", { key: 'a9b5ff97552d142cc3e1becc14a34ebab1f3092d', class: "sort-icon-wrap", "aria-hidden": "true" }, index.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/cjs/nv-timetest.cjs.entry.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var index = require('./index-Cfkoz1kc.js');
+var novaDatetime = require('./nova-datetime-DOtVgYBB.js');
+
+const nvTimetestCss = () => `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}`;
+
+const NvTimetest = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged", 3);
+        this.lastChanged = index.createEvent(this, "lastChanged", 3);
+        this.historyChanged = index.createEvent(this, "historyChanged", 3);
+        this.valueDateChanged = index.createEvent(this, "valueDateChanged", 3);
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region METHODS
+        this.handleStartChange = (event) => {
+            const input = event.target;
+            const parsed = novaDatetime.parseTimeOnly(input.value);
+            if (!parsed)
+                return;
+            const newStart = novaDatetime.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 = novaDatetime.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 = novaDatetime.parseTimeOnly(input.value);
+            if (!parsed)
+                return;
+            const newEnd = novaDatetime.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 = novaDatetime.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 (index.h(index.Host, { key: '85d3773d49a180e5bc9b5bc0962cc3b709a474b0' }, index.h("label", { key: 'c0d5c262578e6aa1555ded8c542e2eef7e42d491' }, "Start:", index.h("input", { key: '31fe9447be14efd87aab1161dbc01593a30328dc', type: "time", step: "1", value: this.value?.start ?? '', onInput: this.handleStartChange })), index.h("label", { key: '0959b432f53169c425765b94c098ca5ecc8d6ede' }, "End:", index.h("input", { key: 'ccc50a80dfea2ab7eb627d11840dd5626ca25f88', type: "time", step: "1", value: this.value?.end ?? '', onInput: this.handleEndChange })), index.h("slot", { key: 'd4c6a017d41102a245e1f8472d676bc866382c00' })));
+    }
+};
+NvTimetest.style = nvTimetestCss();
+
+exports.nv_timetest = NvTimetest;

package/dist/cjs/nv-toggle.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQjqJTJB.js');
+var index = require('./index-Cfkoz1kc.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 var v4 = require('./v4-C1vaJ4yP.js');
 
@@ -63,8 +63,8 @@ const NvToggle = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '38dd2a460c82599e2c2bfd6b039eafff0dc6fc67', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '4d6bf742f548cc5f92ae84497f12569d9680dcef', class: "input-container" }, index.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 })), index.h("div", { key: 'e4576a0884f02731a3e6d2d20537cfabf411a8fe', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '4744036b0d1e73f350bbc4b6f6e7664bb9361d1e', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '44a2aeb86c840246473bc47e0ba01269af77ef06', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '6e5c3d1721c9db3cffd019c9274294c40793daf0', class: "description" }, index.h("slot", { key: '87c3d35c78ded085cd1ddb5b2874dfae7bd99842', name: "description" }, this.description))))));
+        return (index.h(index.Host, { key: '39ad1374bbf8cd5393a99dc4c18fa28091dc5e90', class: clsx.clsx(this.labelPlacement === 'before' && 'label-placement-before') }, index.h("div", { key: '3a8be2405404975398f1a0dae05c0855b913245f', class: "input-container" }, index.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 })), index.h("div", { key: 'a3308782b02b1c0eca3d6a1b87509674b9bc5c13', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '854b2ffe7bf61423512154ffe8b3b0351a2950a4', htmlFor: this.inputId, class: clsx.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '933bf88b7841f3b2ed24c3bb86fb24159eaac900', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5a04358d1be3b935239bb23e1466cc22ed2f3b48', class: "description" }, index.h("slot", { key: 'f5c1513eff6ee42bc171b0088baec634f8458197', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/nv-togglebutton.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQjqJTJB.js');
+var index = require('./index-Cfkoz1kc.js');
 
 const nvTogglebuttonCss = () => `nv-togglebutton{display:inline-flex;justify-content:center;align-items:center}nv-togglebutton:focus-visible,nv-togglebutton:has(:focus-visible){z-index:1}nv-togglebutton[size=xs]{padding:var(--button-xs-padding-y) var(--button-xs-padding-x);gap:var(--button-xs-gap);border-radius:var(--button-xs-border-radius);line-height:var(--button-xs-line-height);height:var(--button-xs-height);font-size:var(--button-xs-font-size)}nv-togglebutton[size=xs] nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-togglebutton[size=xs]{padding-top:calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));border-radius:var(--togglegroup-xs-button-radius);height:calc((var(--togglegroup-xs-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=sm]{padding:var(--button-sm-padding-y) var(--button-sm-padding-x);gap:var(--button-sm-gap);border-radius:var(--button-sm-border-radius);line-height:var(--button-sm-line-height);height:var(--button-sm-height);font-size:var(--button-sm-font-size)}nv-togglebutton[size=sm] nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-togglebutton[size=sm]{padding-top:calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-sm-button-radius) + 1px);height:calc((var(--togglegroup-sm-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=md]{padding:var(--button-md-padding-y) var(--button-md-padding-x);gap:var(--button-md-gap);border-radius:var(--button-md-border-radius);line-height:var(--button-md-line-height);height:var(--button-md-height);font-size:var(--button-md-font-size)}nv-togglebutton[size=md] nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-togglebutton[size=md]{padding-top:calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-md-button-radius) + 1px);height:calc((var(--togglegroup-md-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[size=lg]{padding:var(--button-lg-padding-y) var(--button-lg-padding-x);gap:var(--button-lg-gap);border-radius:var(--button-lg-border-radius);line-height:var(--button-lg-line-height);height:var(--button-lg-height);font-size:var(--button-lg-font-size)}nv-togglebutton[size=lg] nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-togglebutton[size=lg]{padding-top:calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));padding-bottom:calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));border-radius:calc(var(--togglegroup-lg-button-radius) + 1px);height:calc((var(--togglegroup-lg-height)) - var(--togglegroup-inner-space));border-width:0}nv-togglebutton[emphasis=high]{background:var(--components-button-low-background);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text)}nv-togglebutton[emphasis=high]:hover{background:var(--components-button-low-background-hover);border:1px solid var(--components-button-low-border);color:var(--components-button-low-text-hover)}nv-togglebutton[emphasis=high]:active{background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=high]:focus,nv-togglebutton[emphasis=high]:focus-within{outline:none}nv-togglebutton[emphasis=high]:focus-visible,nv-togglebutton[emphasis=high]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=high]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=high][active]:not([active=false]){background:var(--components-button-low-background-active);border:1px solid var(--components-button-low-border-active);color:var(--components-button-low-text-active)}nv-togglebutton[emphasis=low]{background:var(--components-button-lower-background);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text)}nv-togglebutton[emphasis=low]:hover{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-active);border:1px solid var(--components-button-lower-border-active);color:var(--components-button-lower-text-active)}nv-togglebutton[emphasis=low]:focus,nv-togglebutton[emphasis=low]:focus-within{outline:none}nv-togglebutton[emphasis=low]:focus-visible,nv-togglebutton[emphasis=low]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-togglebutton[emphasis=low]:disabled:not([disabled=false]){opacity:0.5;cursor:not-allowed;box-shadow:none}nv-togglebutton[emphasis=low][active]:not([active=false]),nv-togglebutton[emphasis=low]:active{background:var(--components-button-lower-background-hover);border:1px solid var(--components-button-lower-border);color:var(--components-button-lower-text-hover)}`;
 
@@ -54,7 +54,7 @@ const NvTogglebutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '4af1293d9eb69a3a20d8f30c6b2876c6c29ddc03', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '783fad27c525553cd404c1ffed0ae1305d330de8' })));
+        return (index.h(index.Host, { key: '8e700d38ba155b977d4efa0d9e01b41e73fc4413', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, index.h("slot", { key: '92427015839f98b0d9238b8df6af8e08ee511153' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/nv-togglebuttongroup.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQjqJTJB.js');
+var index = require('./index-Cfkoz1kc.js');
 
 const nvTogglebuttongroupCss = () => `nv-togglebuttongroup{display:flex;gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);width:fit-content;padding:var(--togglegroup-lg-gap)}nv-togglebuttongroup[emphasis=high]{border:1px solid var(--components-togglegroup-high-border)}nv-togglebuttongroup[emphasis=low]{border:1px solid var(--components-togglegroup-low-border)}nv-togglebuttongroup[size=xs]{padding:calc(var(--togglegroup-xs-padding) - 1px);gap:var(--togglegroup-xs-gap);border-radius:var(--togglegroup-xs-radius);height:var(--togglegroup-xs-height)}nv-togglebuttongroup[size=sm]{padding:calc(var(--togglegroup-sm-padding) - 1px);gap:var(--togglegroup-sm-gap);border-radius:var(--togglegroup-sm-radius);height:var(--togglegroup-sm-height)}nv-togglebuttongroup[size=md]{padding:calc(var(--togglegroup-md-padding) - 1px);gap:var(--togglegroup-md-gap);border-radius:var(--togglegroup-md-radius);height:var(--togglegroup-md-height)}nv-togglebuttongroup[size=lg]{padding:calc(var(--togglegroup-lg-padding) - 1px);gap:var(--togglegroup-lg-gap);border-radius:var(--togglegroup-lg-radius);height:var(--togglegroup-lg-height)}`;
 
@@ -153,7 +153,7 @@ const NvTogglebuttongroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '1116872815229d09e1e286dd1f12a9787218e207' }, index.h("slot", { key: 'fa5363ec707f38830065718b2423dd8493acdd4e' })));
+        return (index.h(index.Host, { key: '2026cb95db8b57f2a1cd4ea53608f336843b63fe' }, index.h("slot", { key: '5c06ab59d6c99e789c3a1c3a8a4842a0772ca3a2' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/nv-tooltip.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQjqJTJB.js');
+var index = require('./index-Cfkoz1kc.js');
 
 const nvTooltipCss = () => `nv-tooltip{display:inline-block;vertical-align:top;position:relative;user-select:none}nv-tooltip:has([fluid]:not([fluid=false])){display:block}nv-tooltip nv-popover{display:block;height:0;min-height:0;overflow:visible}nv-tooltip nv-popover>[data-scope=popover]{background:var(--components-tooltip-background);color:var(--components-tooltip-text);font-weight:var(--font-weight-medium-emphasis);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);font-size:var(--tooltip-font-size);border-radius:var(--tooltip-radius);border:none;box-shadow:0px var(--shadow-y-axis-lg-1) var(--shadow-blur-lg-1) var(--shadow-spread-lg-1) var(--shadow-color-opacity-1), 0px var(--shadow-y-axis-lg-2) var(--shadow-blur-lg-2) var(--shadow-spread-lg-2) var(--shadow-color-opacity-2)}nv-tooltip nv-popover>[data-scope=popover] [data-scope=arrow]{background:var(--components-tooltip-background);box-shadow:none;border:none}`;
 
@@ -36,15 +36,20 @@ const NvTooltip = class {
     /****************************************************************************/
     //#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 (index.h(index.Host, { key: 'bda9ba58186add585457f8fdf4a8e1d6389da01a' }, index.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) }, index.h("p", { key: 'b677689d4a73462b7d16ff7d9f31bfd61e7f47eb', slot: "content" }, this.message), index.h("slot", { key: 'bd1540db065fdeceb89d09d69e1dbf7ad4de728d', name: "content" })), index.h("slot", { key: '648d3c3125b0528cd8e88675122d775ad7cc40d9', ref: el => (this.defaultSlot = el) })));
+        return (index.h(index.Host, { key: '8285fbb412cb45cc7baf2936f0405c0438395c8d' }, index.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) }, index.h("p", { key: 'a9c907fa96f9c4108a8d84cec53981218c060811', slot: "content" }, this.message), index.h("slot", { key: 'af1b7ac8069071fe2d41e925f1c0090f8b6aaab5', name: "content" })), index.h("slot", { key: 'e5d3c6d16fb7e4a682b66e0016d9e4e30e5647e0', ref: el => (this.defaultSlot = el) })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/collection/collection-manifest.json

@@ -13,6 +13,8 @@
     "components/nv-col/nv-col.js",
     "components/nv-datagrid/nv-datagrid.js",
     "components/nv-datagridcolumn/nv-datagridcolumn.js",
+    "components/nv-datetest/nv-datetest.js",
+    "components/nv-datetimetest/nv-datetimetest.js",
     "components/nv-dialog/nv-dialog.js",
     "components/nv-dialogfooter/nv-dialogfooter.js",
     "components/nv-dialogheader/nv-dialogheader.js",
@@ -42,6 +44,7 @@
     "components/nv-notification/nv-notification.js",
     "components/nv-notification-bullet/nv-notification-bullet.js",
     "components/nv-notificationcontainer/nv-notificationcontainer.js",
+    "components/nv-pagination-nav/nv-pagination-nav.js",
     "components/nv-paginationtable/nv-paginationtable.js",
     "components/nv-popover/nv-popover.js",
     "components/nv-row/nv-row.js",
@@ -58,6 +61,7 @@
     "components/nv-stack/nv-stack.js",
     "components/nv-table/nv-table.js",
     "components/nv-tableheader/nv-tableheader.js",
+    "components/nv-timetest/nv-timetest.js",
     "components/nv-toggle/nv-toggle.js",
     "components/nv-togglebutton/nv-togglebutton.js",
     "components/nv-togglebuttongroup/nv-togglebuttongroup.js",

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvAccordionDocs = {
     component: 'nv-accordion',
+    parentGroup: 'Accordion',
     subcomponents: ['nv-accordion-item', 'nv-icon', 'nv-button', 'nv-badge'],
     stories: [
         // Default

package/dist/collection/components/nv-accordion-item/nv-accordion-item.docs.js

@@ -1,5 +1,73 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvAccordionItemDocs = {
     component: 'nv-accordion-item',
-    skip: true,
+    parentGroup: 'Accordion',
+    subcomponents: ['nv-accordion', 'nv-icon', 'nv-badge'],
+    stories: [
+        // Default
+        {
+            name: 'Default',
+            description: 'Basic accordion item with title and content',
+            args: {
+                itemTitle: 'Accordion Item Title',
+            },
+            template: (h("nv-accordion", null, h("nv-accordion-item", { "data-storybook-args": true }, h("div", { slot: "content" }, "This is the content of the accordion item.")))),
+        },
+        // itemTitle
+        {
+            name: nameof(x => x.itemTitle),
+            description: 'Accordion item with custom title',
+            args: {
+                itemTitle: 'Custom Title',
+            },
+            template: (h("nv-accordion", null, h("nv-accordion-item", { "data-storybook-args": true }, h("div", { slot: "content" }, "Content with a custom title.")))),
+        },
+        // subtitle
+        {
+            name: nameof(x => x.subtitle),
+            description: 'Accordion item with title and subtitle',
+            args: {
+                itemTitle: 'Main Title',
+                subtitle: 'Additional subtitle text',
+            },
+            template: (h("nv-accordion", null, h("nv-accordion-item", { "data-storybook-args": true }, h("div", { slot: "content" }, "Content with title and subtitle.")))),
+        },
+        // disabled
+        {
+            name: nameof(x => x.disabled),
+            description: 'Disabled accordion item that cannot be opened',
+            args: {
+                itemTitle: 'Disabled Item',
+                disabled: true,
+            },
+            template: (h("nv-accordion", null, h("nv-accordion-item", { "data-storybook-args": true }, h("div", { slot: "content" }, "This content is not accessible.")))),
+        },
+        // open
+        {
+            name: nameof(x => x.open),
+            description: 'Accordion item that is open by default',
+            args: {
+                itemTitle: 'Pre-opened Item',
+                open: true,
+            },
+            template: (h("nv-accordion", null, h("nv-accordion-item", { "data-storybook-args": true }, h("div", { slot: "content" }, "This item starts in an open state.")))),
+        },
+        // CustomHeader
+        {
+            name: 'CustomHeader',
+            description: 'Accordion item with custom header using slots',
+            args: {
+                open: true,
+            },
+            template: (h("nv-accordion", null, h("nv-accordion-item", { "data-storybook-args": true }, h("div", { slot: "header" }, h("div", { "data-class": "flex items-center justify-between w-full" }, h("div", { "data-class": "flex flex-col border-r border-[#E3E3E3] pr-4 mr-4" }, h("span", { "data-class": "nv-accordion-item__title" }, "EC-308"), h("span", { "data-class": "nv-accordion-item__subtitle" }, "Connection point")), h("nv-badge", { color: "success", label: "Running" }, h("nv-icon", { slot: "leading-icon", name: "check", size: "sm" })))), h("div", { slot: "content" }, h("p", null, "Custom header with badge and icon"))))),
+        },
+        // MultipleItems
+        {
+            name: 'MultipleItems',
+            description: 'Multiple accordion items together',
+            template: (h("nv-accordion", null, h("nv-accordion-item", { "item-title": "First Item", open: true }, h("div", { slot: "content" }, "Content of the first item.")), h("nv-accordion-item", { "item-title": "Second Item" }, h("div", { slot: "content" }, "Content of the second item.")), h("nv-accordion-item", { "item-title": "Third Item", disabled: true }, h("div", { slot: "content" }, "This item is disabled.")))),
+        },
+    ],
 };
 export default NvAccordionItemDocs;

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

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

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

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

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

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

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

@@ -1,5 +1,40 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvBreadcrumbDocs = {
     component: 'nv-breadcrumb',
-    skip: true,
+    parentGroup: 'Breadcrumbs',
+    subcomponents: ['nv-breadcrumbs', 'nv-icon', 'nv-tooltip', 'nv-popover'],
+    stories: [
+        // Default
+        {
+            name: 'Default',
+            template: (h("nv-breadcrumbs", null, h("nv-breadcrumb", { "data-storybook-args": true }, h("a", { href: "#" }, "Breadcrumb Item")))),
+        },
+        // type
+        {
+            name: nameof(x => x.type),
+            description: 'The type of breadcrumb. Use "collapsed" to house multiple breadcrumbs in a dropdown.',
+            template: (h("div", null, h("nv-breadcrumbs", { "data-class": "mb-5" }, h("nv-breadcrumb", null, h("a", { href: "#" }, "Home")), h("nv-breadcrumb", { "data-storybook-args": true, type: "default" }, h("a", { href: "#" }, "Default")), h("nv-breadcrumb", null, h("a", { href: "#" }, "Current"))), h("nv-breadcrumbs", { "data-class": "mb-20" }, h("nv-breadcrumb", null, h("a", { href: "#" }, "Home")), h("nv-breadcrumb", { "data-storybook-args": true, type: "collapsed", tooltip: "Click to expand" }, h("li", null, h("nv-breadcrumb", null, h("a", { href: "#" }, "Products"))), h("li", null, h("nv-breadcrumb", null, h("a", { href: "#" }, "Electronics")))), h("nv-breadcrumb", null, h("a", { href: "#" }, "Laptops"))))),
+        },
+        // tooltip
+        {
+            name: nameof(x => x.tooltip),
+            args: { tooltip: 'Go to Home' },
+            template: (h("nv-breadcrumbs", null, h("nv-breadcrumb", { "data-storybook-args": true }, h("a", { href: "#" }, "Home")), h("nv-breadcrumb", null, h("a", { href: "#" }, "Products")))),
+        },
+        // current
+        {
+            name: nameof(x => x.current),
+            description: 'Highlights the breadcrumb as the current page. When true, the breadcrumb is visually hidden but remains accessible to screen readers with aria-current="location".',
+            args: { current: true },
+            template: (h("div", null, h("nv-breadcrumbs", { "data-class": "mb-2" }, h("nv-breadcrumb", null, h("a", { href: "#" }, "Home")), h("nv-breadcrumb", null, h("a", { href: "#" }, "User Account")), h("nv-breadcrumb", { "data-storybook-args": true }, h("a", { href: "#" }, "Authorization"))), h("h2", null, "Authorization"))),
+        },
+        // SlotDefault
+        {
+            name: 'SlotDefault',
+            description: 'Pass an icon, a link, or text to render the breadcrumb content.',
+            template: (h("div", null, h("nv-breadcrumbs", { "data-class": "mb-4" }, h("nv-breadcrumb", { "data-storybook-args": true }, h("a", { href: "#" }, h("nv-icon", { name: "home" }), h("span", null, "Home"))), h("nv-breadcrumb", null, h("a", { href: "#" }, "Products"))), h("nv-breadcrumbs", { "data-class": "mb-4" }, h("nv-breadcrumb", { "data-storybook-args": true }, h("a", { href: "#" }, "Simple Text")), h("nv-breadcrumb", null, h("a", { href: "#" }, "Another Item"))))),
+        },
+    ],
 };
 export default NvBreadcrumbDocs;

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 const NvBreadcrumbsDocs = {
     component: 'nv-breadcrumbs',
+    parentGroup: 'Breadcrumbs',
     subcomponents: ['nv-breadcrumb', 'nv-icon'],
     composedComponents: ['nv-breadcrumb'],
     stories: [

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

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

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvButtongroupDocs = {
     component: 'nv-buttongroup',
+    parentGroup: 'Button',
     subcomponents: ['nv-button', 'nv-iconbutton', 'nv-menu', 'nv-menuitem'],
     badge: 'new',
     stories: [

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

@@ -120,6 +120,7 @@ const rangeStories = formats.map(format => ({
 }));
 const NvCalendarDocs = {
     component: 'nv-calendar',
+    parentGroup: 'Calendar',
     badge: 'beta',
     subcomponents: ['nv-button', 'nv-fieldtime'],
     stories: [

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvColDocs = {
     component: 'nv-col',
+    parentGroup: 'Grid/Row/nv-col',
     subcomponents: ['nv-row'],
     stories: [
         // Default

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

@@ -3,6 +3,7 @@ import { nameof } from "../../utils/class.utils";
 const NvDatagridDocs = {
     component: 'nv-datagrid',
     badge: 'deprecated',
+    parentGroup: 'Table/nv-datagrid',
     subcomponents: ['nv-datagridcolumn', 'nv-iconbutton', 'nv-badge'],
     composedComponents: ['nv-datagridcolumn'],
     stories: [

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

@@ -1,5 +1,29 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvDatagridcolumnDocs = {
     component: 'nv-datagridcolumn',
-    skip: true,
+    badge: 'deprecated',
+    parentGroup: 'Table/nv-datagrid',
+    subcomponents: ['nv-datagrid'],
+    stories: [
+        // Default
+        {
+            name: 'Default',
+            description: 'Basic column definition for nv-datagrid (deprecated - use nv-datatable instead)',
+            template: (h("nv-datagrid", null, h("nv-datagridcolumn", { "data-storybook-args": true, accessor: "name", header: "Name" }, h("div", { slot: "cell" }, "Sample Name")), h("nv-datagridcolumn", { accessor: "email", header: "Email" }, h("div", { slot: "cell" }, "email@example.com")))),
+        },
+        // accessor
+        {
+            name: nameof(x => x.accessor),
+            description: 'The data accessor this column uses',
+            template: (h("nv-datagrid", null, h("nv-datagridcolumn", { accessor: "name", header: "Product" }, h("div", { slot: "cell" }, "Product Name")), h("nv-datagridcolumn", { "data-storybook-args": true, accessor: "price", header: "Price" }, h("div", { slot: "cell" }, "$99.99")))),
+        },
+        // header
+        {
+            name: nameof(x => x.header),
+            description: 'Column header text',
+            template: (h("nv-datagrid", null, h("nv-datagridcolumn", { accessor: "firstName", header: "First Name" }, h("div", { slot: "cell" }, "John")), h("nv-datagridcolumn", { "data-storybook-args": true, accessor: "lastName", header: "Last Name" }, h("div", { slot: "cell" }, "Doe")))),
+        },
+    ],
 };
 export default NvDatagridcolumnDocs;

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

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

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

@@ -0,0 +1,12 @@
+import { h } from "@stencil/core";
+const NvDatetestDocs = {
+    component: 'nv-datetest',
+    badge: 'beta',
+    stories: [
+        {
+            name: 'Default',
+            template: h("nv-datetest", { "data-storybook-args": true }, "Child Content"),
+        },
+    ],
+};
+export default NvDatetestDocs;