@nova-design-system/nova-webcomponents 3.27.0 → 3.29.0

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

@@ -275,7 +275,7 @@ export class NvSidebarnavitem {
     render() {
         const showNotificationBullet = this.notificationCount !== undefined && this.notificationCount > 0;
         const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';
-        return (h(Host, { key: '02ab37b6d10ba4696c002b6d220296e5a24adea0', role: "listitem" }, h("div", { key: '348ae561a8cfe97b149ff0048cb797d367a537fd', class: "nv-sidebarnavitem-trigger", onClick: this.handleToggle, "aria-expanded": this.collapsible ? String(this.open) : undefined, "aria-current": this.active && !this.collapsible ? 'page' : undefined }, this.icon && (h("div", { key: '6edb4688ce946914dee6748e967045e0100e9d28', class: "nv-sidebarnavitem-icon" }, h("nv-icon", { key: '990df4c9d2df9483a1f0bd364a050e7168f6fec1', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (h("nv-notification-bullet", { key: '45baa0607d1cf3e53c78d439ee02cf8f14023986', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), h("div", { key: '5179eb39ca4248806cd90fb8e2caae1aa44ebafe', class: "nv-sidebarnavitem-content" }, h("slot", { key: '80cea6fd9f87b5169de72809edd9f47e237a7ba1' })), h("div", { key: '02fa17d52079bebf3ced8af706616e0f6f15a146', class: "nv-sidebarnavitem-trailing" }, h("slot", { key: '38891572371a5dad912c9a1177ad02aa904cd99c', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (h("nv-notification-bullet", { key: '1235893ac6c2552c9b0f19693482f64efe84506d', count: this.notificationCount, size: notificationSize })), this.collapsible && (h("nv-icon", { key: '88a269b0309ea956377c8dc2666b930f53627954', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (h("div", { key: '4e0fe20c969d2e0375e82f337170296642771541', class: "nv-sidebarnavitem-subitems", ref: el => {
+        return (h(Host, { key: '1b2cf1eb2d9c5042aeb24324194feb1b55650ca9', role: "listitem" }, h("div", { key: 'c3dafa7bd8d23dacb986a049b909c799b96aa2a9', class: "nv-sidebarnavitem-trigger", onClick: this.handleToggle, "aria-expanded": this.collapsible ? String(this.open) : undefined, "aria-current": this.active && !this.collapsible ? 'page' : undefined }, this.icon && (h("div", { key: '7f5bcd6d41518923d6a83ddca423660eb2a41e6f', class: "nv-sidebarnavitem-icon" }, h("nv-icon", { key: 'bd910ba67edcd13bacea4cd6c229a20c6cb20911', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (h("nv-notification-bullet", { key: 'cd52de830137aa70411c49d619e0ede95bcaf67f', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), h("div", { key: '103b75a710cf47e26143d4821826c95d9b17408c', class: "nv-sidebarnavitem-content" }, h("slot", { key: 'bae51d0b18e157637987b686d9ee021031256290' })), h("div", { key: 'a8eb101fb69af8a4ac279d6a3ad5652e22e22e33', class: "nv-sidebarnavitem-trailing" }, h("slot", { key: '1d797ec2458e3e4abab727cfdb0939f6be082164', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (h("nv-notification-bullet", { key: '2d4e477da92c41c7b74e30829bb283b7bb130759', count: this.notificationCount, size: notificationSize })), this.collapsible && (h("nv-icon", { key: '5012ca8ad3b830a2fd57c0382d446a2891d7949a', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (h("div", { key: 'f7fd2c3cda2ae781ce10a9bc92cbd74154a18ba1', class: "nv-sidebarnavitem-subitems", ref: el => {
                 // Only update ref and initialize if element changed or not yet initialized
                 if (el !== this.subitemsRef) {
                     this.subitemsRef = el;
@@ -290,7 +290,7 @@ export class NvSidebarnavitem {
                         });
                     }
                 }
-            } }, h("slot", { key: '0d3ab2f4207370afb5819b468e58ab1c3cfe38b1', name: "subitems" })))));
+            } }, h("slot", { key: 'c3d3fb65b3af3550c10c14937dea1a981e3eb010', name: "subitems" })))));
     }
     static get is() { return "nv-sidebarnavitem"; }
     static get originalStyleUrls() {
@@ -309,8 +309,8 @@ export class NvSidebarnavitem {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IconName",
-                    "resolved": "\"access-point\" | \"access-point-off\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-square-rounded\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back\" | \"arrow-back-up\" | \"arrow-down\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-forward\" | \"arrow-forward-up\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"bell\" | \"bell-bolt\" | \"bell-off\" | \"bell-ringing\" | \"bike\" | \"bluetooth\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bolt\" | \"bolt-off\" | \"book\" | \"bookmark\" | \"bookmark-off\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"brush\" | \"building\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"bulb\" | \"bulb-off\" | \"cake\" | \"calendar\" | \"calendar-time\" | \"camera\" | \"camera-off\" | \"car\" | \"car-crane\" | \"caravan\" | \"cash\" | \"cash-banknote\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area\" | \"chart-area-line\" | \"chart-arrows\" | \"chart-arrows-vertical\" | \"chart-bar\" | \"chart-bubble\" | \"chart-circles\" | \"chart-donut\" | \"chart-dots\" | \"chart-line\" | \"chart-pie\" | \"chart-radar\" | \"check\" | \"checkbox\" | \"checklist\" | \"checks\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-top\" | \"chevrons-left\" | \"chevrons-right\" | \"circle-caret-right\" | \"circle-check\" | \"circle-x\" | \"circuit-alternate\" | \"circuit-ground-digital\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clock\" | \"clock-edit\" | \"cloud\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"color-picker\" | \"color-swatch\" | \"columns-1\" | \"columns-2\" | \"columns-3\" | \"compass\" | \"contract\" | \"cookie\" | \"copy\" | \"cpu\" | \"crane\" | \"credit-card\" | \"crop\" | \"cross\" | \"crown\" | \"currency-bitcoin\" | \"currency-dollar\" | \"currency-ethereum\" | \"currency-euro\" | \"cut\" | \"dashboard\" | \"database\" | \"device-desktop\" | \"device-floppy\" | \"device-gamepad\" | \"device-laptop\" | \"device-mobile\" | \"device-mobile-rotated\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction\" | \"direction-horizontal\" | \"direction-sign\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots\" | \"dots-vertical\" | \"download\" | \"drone\" | \"droplet\" | \"droplet-filled\" | \"droplet-half\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser\" | \"eraser-off\" | \"external-link\" | \"eye\" | \"eye-check\" | \"eye-off\" | \"eyeglass2\" | \"face-id\" | \"feather\" | \"file\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text\" | \"file-text-bookmark\" | \"file-type-bmp\" | \"file-type-css\" | \"file-type-csv\" | \"file-type-doc\" | \"file-type-html\" | \"file-type-jpg\" | \"file-type-js\" | \"file-type-pdf\" | \"file-type-png\" | \"file-type-ppt\" | \"file-type-xls\" | \"file-type-xml\" | \"file-type-zip\" | \"file-upload\" | \"file-x\" | \"file-zip\" | \"files\" | \"files-off\" | \"filter\" | \"filter-off\" | \"filter-sort\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge\" | \"gauge-off\" | \"gift\" | \"git-branch\" | \"git-branch-delete\" | \"git-cherry-pick\" | \"git-commit\" | \"git-compare\" | \"git-fork\" | \"git-merge\" | \"git-pull-request\" | \"git-pull-request-closed\" | \"git-pull-request-draft\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones\" | \"headphones-off\" | \"headset\" | \"heart\" | \"heart-off\" | \"heartbeat\" | \"helicopter\" | \"helmet\" | \"helmet-swopp\" | \"help\" | \"history\" | \"home\" | \"hourglass\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"inbox\" | \"info-circle\" | \"keyboard\" | \"keyboard-hide\" | \"keyboard-show\" | \"layout\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list\" | \"list-search\" | \"loader\" | \"location\" | \"lock\" | \"lock-off\" | \"lock-open\" | \"login\" | \"logout\" | \"mail\" | \"mail-forward\" | \"mail-opened\" | \"map\" | \"map-pin\" | \"map-pin-2\" | \"map-pin-off\" | \"master-data\" | \"menu\" | \"message\" | \"message-dots\" | \"message-off\" | \"messages\" | \"microphone\" | \"microphone-off\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"photo\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned\" | \"pinned-off\" | \"plane\" | \"plane-off\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug\" | \"plug-connected\" | \"plus\" | \"power\" | \"power-ac\" | \"power-dc\" | \"presentation\" | \"presentation-analytics\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle\" | \"puzzle-2\" | \"pylon\" | \"qrcode\" | \"quotes\" | \"quotes-open\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"recharging\" | \"recycle\" | \"refresh\" | \"refresh-alert\" | \"refresh-off\" | \"repeat\" | \"repeat-once\" | \"replace\" | \"report\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"ripple\" | \"ripple-off\" | \"rocket\" | \"rotate\" | \"rotate-2\" | \"rotate-clockwise\" | \"rotate-clockwise-2\" | \"rotate-dot\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share\" | \"share-2\" | \"shield\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"ship\" | \"ship-off\" | \"shopping-cart\" | \"sitemap\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"sparkles\" | \"speakerphone\" | \"stack\" | \"stairs\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"tank-empty-fill\" | \"tank-full-fill\" | \"tank-medium-fill\" | \"temperature\" | \"temperature-off\" | \"template\" | \"terminal\" | \"text\" | \"text-size\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash\" | \"trash-off\" | \"tree\" | \"trees\" | \"truck\" | \"truck-delivery\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"users\" | \"versions\" | \"video\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"volume\" | \"volume-2\" | \"volume-3\" | \"wallet\" | \"wand\" | \"wave\" | \"waves\" | \"wifi\" | \"wifi-off\" | \"wind\" | \"wind-direction\" | \"windmill\" | \"wood\" | \"world\" | \"world-code\" | \"writing\" | \"x\" | \"zoom-reset\"",
+                    "original": "`${IconName}`",
+                    "resolved": "\"access-point\" | \"access-point-off\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-square-rounded\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back\" | \"arrow-back-up\" | \"arrow-down\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-forward\" | \"arrow-forward-up\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"bell\" | \"bell-bolt\" | \"bell-off\" | \"bell-ringing\" | \"bike\" | \"bluetooth\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bolt\" | \"bolt-off\" | \"book\" | \"bookmark\" | \"bookmark-off\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"brush\" | \"building\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"bulb\" | \"bulb-off\" | \"cake\" | \"calendar\" | \"calendar-time\" | \"calendar-week\" | \"camera\" | \"camera-off\" | \"car\" | \"car-crane\" | \"caravan\" | \"cash\" | \"cash-banknote\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area\" | \"chart-area-line\" | \"chart-arrows\" | \"chart-arrows-vertical\" | \"chart-bar\" | \"chart-bubble\" | \"chart-circles\" | \"chart-donut\" | \"chart-dots\" | \"chart-line\" | \"chart-pie\" | \"chart-radar\" | \"check\" | \"checkbox\" | \"checklist\" | \"checks\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-top\" | \"chevrons-left\" | \"chevrons-right\" | \"circle-caret-right\" | \"circle-check\" | \"circle-minus\" | \"circle-x\" | \"circuit-alternate\" | \"circuit-ground-digital\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clock\" | \"clock-edit\" | \"cloud\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"color-picker\" | \"color-swatch\" | \"columns-1\" | \"columns-2\" | \"columns-3\" | \"compass\" | \"contract\" | \"cookie\" | \"copy\" | \"cpu\" | \"crane\" | \"credit-card\" | \"crop\" | \"cross\" | \"crown\" | \"currency-bitcoin\" | \"currency-dollar\" | \"currency-ethereum\" | \"currency-euro\" | \"cut\" | \"dashboard\" | \"database\" | \"device-desktop\" | \"device-floppy\" | \"device-gamepad\" | \"device-laptop\" | \"device-mobile\" | \"device-mobile-rotated\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction\" | \"direction-horizontal\" | \"direction-sign\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots\" | \"dots-vertical\" | \"download\" | \"drone\" | \"droplet\" | \"droplet-filled\" | \"droplet-half\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser\" | \"eraser-off\" | \"external-link\" | \"eye\" | \"eye-check\" | \"eye-off\" | \"eyeglass2\" | \"face-id\" | \"feather\" | \"file\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text\" | \"file-text-bookmark\" | \"file-type-bmp\" | \"file-type-css\" | \"file-type-csv\" | \"file-type-doc\" | \"file-type-html\" | \"file-type-jpg\" | \"file-type-js\" | \"file-type-pdf\" | \"file-type-png\" | \"file-type-ppt\" | \"file-type-xls\" | \"file-type-xml\" | \"file-type-zip\" | \"file-upload\" | \"file-x\" | \"file-zip\" | \"files\" | \"files-off\" | \"filter\" | \"filter-off\" | \"filter-sort\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge\" | \"gauge-off\" | \"gift\" | \"git-branch\" | \"git-branch-delete\" | \"git-cherry-pick\" | \"git-commit\" | \"git-compare\" | \"git-fork\" | \"git-merge\" | \"git-pull-request\" | \"git-pull-request-closed\" | \"git-pull-request-draft\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones\" | \"headphones-off\" | \"headset\" | \"heart\" | \"heart-off\" | \"heartbeat\" | \"helicopter\" | \"helmet\" | \"helmet-swopp\" | \"help\" | \"history\" | \"home\" | \"hourglass\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"inbox\" | \"info-circle\" | \"keyboard\" | \"keyboard-hide\" | \"keyboard-show\" | \"layers-intersect\" | \"layers-off\" | \"layout\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list\" | \"list-search\" | \"loader\" | \"location\" | \"lock\" | \"lock-off\" | \"lock-open\" | \"login\" | \"logout\" | \"mail\" | \"mail-forward\" | \"mail-opened\" | \"map\" | \"map-pin\" | \"map-pin-2\" | \"map-pin-off\" | \"master-data\" | \"menu\" | \"message\" | \"message-dots\" | \"message-off\" | \"messages\" | \"microphone\" | \"microphone-off\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"photo\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned\" | \"pinned-off\" | \"plane\" | \"plane-off\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug\" | \"plug-connected\" | \"plus\" | \"power\" | \"power-ac\" | \"power-dc\" | \"presentation\" | \"presentation-analytics\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle\" | \"puzzle-2\" | \"pylon\" | \"qrcode\" | \"quotes\" | \"quotes-open\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"recharging\" | \"recycle\" | \"refresh\" | \"refresh-alert\" | \"refresh-off\" | \"repeat\" | \"repeat-once\" | \"replace\" | \"report\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"ripple\" | \"ripple-off\" | \"rocket\" | \"rotate\" | \"rotate-2\" | \"rotate-clockwise\" | \"rotate-clockwise-2\" | \"rotate-dot\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share\" | \"share-2\" | \"shield\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"ship\" | \"ship-off\" | \"shopping-cart\" | \"sitemap\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"sparkles\" | \"speakerphone\" | \"stack\" | \"stairs\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"tank-empty-fill\" | \"tank-full-fill\" | \"tank-medium-fill\" | \"temperature\" | \"temperature-off\" | \"template\" | \"terminal\" | \"text\" | \"text-size\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash\" | \"trash-off\" | \"tree\" | \"trees\" | \"truck\" | \"truck-delivery\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"users\" | \"versions\" | \"video\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"volume\" | \"volume-2\" | \"volume-3\" | \"wallet\" | \"wand\" | \"wave\" | \"waves\" | \"wifi\" | \"wifi-off\" | \"wind\" | \"wind-direction\" | \"windmill\" | \"wood\" | \"world\" | \"world-code\" | \"writing\" | \"x\" | \"zoom-reset\"",
                     "references": {
                         "IconName": {
                             "location": "import",
@@ -323,7 +323,10 @@ export class NvSidebarnavitem {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "icon",
+                            "text": undefined
+                        }],
                     "text": "Optional icon to display before the label."
                 },
                 "getter": false,

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

@@ -1,5 +1,19 @@
+import { h } from "@stencil/core";
 const NvSidebarnavsubitemDocs = {
     component: 'nv-sidebarnavsubitem',
-    skip: true,
+    parentGroup: 'Sidebar',
+    subcomponents: [
+        'nv-sidebar',
+        'nv-sidebarlogo',
+        'nv-sidebarcontent',
+        'nv-sidebargroup',
+        'nv-sidebarnavitem',
+    ],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-sidebar", null, h("nv-sidebarlogo", { label: "Nova" }), h("nv-sidebarcontent", null, h("nv-sidebargroup", { label: "Navigation" }, h("nv-sidebarnavitem", { icon: "folder", collapsible: true }, h("span", null, "Reports"), h("nv-sidebarnavsubitem", { "data-storybook-args": true }, h("a", { href: "#" }, "Monthly Reports")), h("nv-sidebarnavsubitem", null, h("a", { href: "#" }, "Annual Reports"))))))),
+        },
+    ],
 };
 export default NvSidebarnavsubitemDocs;

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

@@ -23,7 +23,7 @@ export class NvSidebarnavsubitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'd9279792355dc0d64f0e513b727447a27fcb1fa9', role: "listitem", "aria-current": this.active ? 'page' : undefined }, h("div", { key: 'a5ea72c3bbd5b08f075c4fa8281919792f125c80', class: "nv-sidebarnavsubitem-indicator" }), h("div", { key: '2d2c37eedf9e6db6d9cc44c0af4b26e2fb9f601c', class: "nv-sidebarnavsubitem-content" }, h("slot", { key: '635c40197bc256aabe6962d831dc9431a6ce1cda' })), h("div", { key: '192dbe9426642b9af4401f21d33c36272e327304', class: "nv-sidebarnavsubitem-trailing" }, h("slot", { key: '0ebd3bd4dab2bb45556cde7bd8cd4f8dd27bdba2', name: "trailing" }))));
+        return (h(Host, { key: '05f74ef3cf6f93804e4446fe23977d8773deb7e2', role: "listitem", "aria-current": this.active ? 'page' : undefined }, h("div", { key: 'f1f2db51fbff9c2f58ba317cb5fcbe1805cd189b', class: "nv-sidebarnavsubitem-indicator" }), h("div", { key: 'c476dfbda77ee7bcca1338ef8d8b103806e6e3a7', class: "nv-sidebarnavsubitem-content" }, h("slot", { key: 'b80cb20a4f13b691cbd31c344d442f8a23585a26' })), h("div", { key: '383dc01158c4752506a6069be9abe2e20b83b9e4', class: "nv-sidebarnavsubitem-trailing" }, h("slot", { key: '2c63f696dd64ef8f680f3b85959d756952fd8db4', name: "trailing" }))));
     }
     static get is() { return "nv-sidebarnavsubitem"; }
     static get originalStyleUrls() {

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvSplitDocs = {
     component: 'nv-split',
+    parentGroup: 'Split',
     subcomponents: ['nv-alert'],
     badge: 'beta',
     stories: [

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

@@ -321,7 +321,7 @@ export class NvSplit {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'ab5109b9c1c1e59f794029899855d7ddfba304f1', "data-dragging": this.isDragging.toString() }, h("slot", { key: 'd7587efb2e4799f102baaa624555e250fe3746a8', name: "pane" }), h("slot", { key: 'af615e7e74a99db838e3d71334b20ed2e77994f9', name: "gutter" })));
+        return (h(Host, { key: '8ad8bebda77f9868b9715280c0157f247057026d', "data-dragging": this.isDragging.toString() }, h("slot", { key: '8ca002feab0c3cd7755a5f1f53864e4e20585420', name: "pane" }), h("slot", { key: 'f7f7352ed8c326ec263f6d617bcd84fea02689ea', name: "gutter" })));
     }
     static get is() { return "nv-split"; }
     static get originalStyleUrls() {

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

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

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

@@ -18,7 +18,7 @@ export class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'd4399a61570a72d817150c5d50c38e89147459d4', 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: 'd7bec1dff9c21480b69aed24e4a6081d6de627f7' })));
+        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: '43a288ca58eb82de6308dd98ac30abb3fc971f1e' }, h("slot", { key: '3a0b986f015777d2ca95b8ce7aebab7133b5d054' })));
+        return (h(Host, { key: 'a6882cbcf9b0b12776f6d4be6d9cbfb42aff6833' }, h("slot", { key: 'd4d47a2eb77c50ff30109e217ceecd2677b9d28d' })));
     }
     static get is() { return "nv-table"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-table/styles/nv-table.css

@@ -9,12 +9,29 @@ nv-table table {
 nv-table table thead {
   background: var(--components-datagrid-header-background);
 }
-nv-table table tbody tr:hover td {
-  background: var(--components-datagrid-body-background-hover);
+nv-table table tbody tr.nv-datatable-row-clickable {
+  cursor: pointer;
+}
+nv-table table tbody tr.nv-datatable-row-clickable td {
+  transition: background-color 120ms ease-in-out;
+}
+nv-table table tbody tr.nv-datatable-row-clickable:focus-visible {
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
 }
 nv-table table tbody tr[data-selected] {
   background: var(--components-datagrid-body-background-active);
 }
+nv-table table[data-row-click-enabled=true] tbody tr.nv-datatable-row-clickable:hover td {
+  background: var(--components-datagrid-body-background-hover);
+}
+nv-table table[data-row-click-enabled=false] > tbody > tr:hover:not([data-selected]) {
+  background-color: transparent !important;
+  cursor: default;
+}
+nv-table table[data-row-click-enabled=false] > tbody > tr:hover:not([data-selected]) > td {
+  background: var(--components-datagrid-body-background-default) !important;
+}
 nv-table table td {
   height: var(--spacing-16);
   padding: var(--datagrid-cell-body-padding-y) var(--datagrid-cell-body-padding-x) var(--spacing-2) var(--datagrid-cell-body-padding-x);

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: '809cf43ff3c9d3977a60a30e350fe6f4457c39f4', role: "columnheader", "aria-sort": this.ariaSort, tabindex: this.sortable ? 0 : undefined, onKeyDown: this.handleKeyDown.bind(this), onClick: this.cycleSortDirection.bind(this) }, h("slot", { key: 'ba569a25aa09bb3b18d39e463474698efe6cff40' }), this.sortable && (h("span", { key: '77a948313d5dfc746c142eaf448df609ae0bf2b3', class: "sort-icon-wrap", "aria-hidden": "true" }, h("nv-iconbutton", { key: 'f18fa1d05c5d4eac8c057a7f350c270eaacc7055', 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: 'Fields',
     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: '626c2acc6992a641c5fd94509fd0ef171fd6d1c6', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: 'a9e4b73d740032520f6094bcada1f835b4bac16c', class: "input-container" }, h("input", { key: '1856dfa88421fecee06bdf098dcad22e69f34c00', 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: '4c46bc519d38a66fdecf75cb15caf6d577d92856', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'fd61979a72a2b4e3254987beafd4b024fe1c6bae', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '0e32e3e03ffda0633f881f41d2372a3d92d82f10', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '688d4160a48d85fa5049556de27f0a26f10ec549', class: "description" }, h("slot", { key: '006a61b40a49426bc7c70f1fe830aeb38ecdbf3b', 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: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" })))),
+        },
+        // 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: "layout-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: 'd619862ae9db76a7ce34b05c4974d40e731a576e', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, h("slot", { key: '5bb9a32e26c3c404a9d2bab2bf7d573a501296a5' })));
+        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: [