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

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

@@ -215,11 +215,11 @@ export class NvFieldtextarea {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '9d7aed8625b1cfa103e275495d40116b8f1314c3' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '6609cc39f3809b833a4c9755c487ba3eef05a5c4', htmlFor: this.inputId }, h("slot", { key: '277484af20e4054be5491576ffdfb95ca0f23a79', name: "label" }, this.label))), h("div", { key: '6224c47beaee1e15ea9277a1f69f4ac5ea496cb6', class: "textarea-wrapper" }, h("div", { key: '6dd7868aa65091dd79c34497dec020945d56f925', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '2548dab5d8b387d37036a07c4a76b567c84a8b59', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+        return (h(Host, { key: 'e5dd85ced6fd9c2349937818b1bd3020918ec5a6' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '6f74a85203873163ff01ff1f9711c432a6e3cb7d', htmlFor: this.inputId }, h("slot", { key: 'b921ef64985f5a72aa4b6cb3828af99fd07e3982', name: "label" }, this.label))), h("div", { key: '422b0b20edb0f60bd3fc4050c885eabb71f0d4dc', class: "textarea-wrapper" }, h("div", { key: '8c22c47b74a97467ed399da53337b1c2904af395', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '63dbbf09f0abbed5ec62d024b45a783adc3e4069', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
             }), maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '10ba44a9c4b83db00d00c2a4e791c68836413aac', class: "description" }, h("slot", { key: '5015686b48e185707376008306c204432199cde1', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '312502a84e08fdacbe77cc55f4e91e0b4122c82b', hidden: !this.error, class: "error-description" }, h("slot", { key: 'b837f0784d75b8d0df04e025ee8f9a309c6f46d3', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '75b575de27e1ad876c2036f379e7254e20259c23', class: "description" }, h("slot", { key: 'b54458f20c187207d5c69e4f74c3708970c1b6ff', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'b34156ab4b08871d3474316b0dd75393de070ef7', hidden: !this.error, class: "error-description" }, h("slot", { key: '630487e5097436909753f6ddad8d8b0edca94199', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtextarea"; }
     static get formAssociated() { return true; }

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

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

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

@@ -871,9 +871,9 @@ export class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (h(Host, { key: 'a02fbea3aa9b46d22978cececd750548c16c79cf', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '0ec36fbb4e2e810455e35537277496b600b8bd72', htmlFor: this.inputId }, h("slot", { key: '5ab4bca171c9d68fbb592c378b0db30139e23642', name: "label" }, this.label))), h("nv-popover", { key: '962705b7347af233d00ad7c33ea8777403e32534', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, h("div", { key: '16e06fbf7003cfdf29e019cd4dfcd33c3b4a12e4', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '64c31ef85a92430ac348e9ff06405f682ceb7a98', name: "before-input" }), h("div", { key: '291130925798643a0c034719fc46a5ee391ec487', class: "input-container" }, h("slot", { key: '823f17b06aeb798216a46631655513bef79f7508', name: "leading-input" }), this.renderTimeInputFields(), h("nv-iconbutton", { key: '4e87bc2c19494f43cb4ac7dfb3b370eac6edab0b', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: 'a5c97446025ee0b571f3fe2223dfd759ed69f9ca', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '475f240e74459e16e5a9dd3bea0df21f32949e18', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '696be862dee53acc18c311fe2ea26f4ec099c62e', name: "after-input" })), h("div", { key: '75e7e8ad1c1bc7be602d633946b3845007a3b1c5', class: "time-dropdown", slot: "content" }, h("div", { key: '89898000bb7005ef687372d1016b5b93f02a43bc', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'a0bddd8851b21c57637fbe8f9d8a83d62ff43bdf', class: "description" }, h("slot", { key: '133c39ce0065b8f95a932d12c5150af595eab460', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'de3a537dd418c1c218eceb8062fd925c0ea06bba', hidden: !this.error, class: "error-description" }, h("slot", { key: '97e2865ce647f2e4e32697acf5154fc94be9eab7', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: 'c250283de9b4de235cee8fa84f1561762c0bb6f9', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'd18029863a3ae8305cc5e43399b82f083f83d921', htmlFor: this.inputId }, h("slot", { key: '05655a64f240181f997f40a1e9067db035bff9bd', name: "label" }, this.label))), h("nv-popover", { key: '9780461676a907cf7eab03716f8a20a22e940a41', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, h("div", { key: 'c5d0c48848022e9e9fc65aa814e8e72521c1f6ed', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '9786f306ae1a325b584a3bbbe9cf090e527da256', name: "before-input" }), h("div", { key: '666e715dc8568ed25e1081f58570f5d2bf50c0c3', class: "input-container" }, h("slot", { key: '66545084f7872990be3adba701c54c2a86ccc64b', name: "leading-input" }), this.renderTimeInputFields(), h("nv-iconbutton", { key: '2dfc9e20ae4d245cc125643226169e83b73d87e7', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: '4b6ee88ae65445de2a8f2228956fe47f9fb27764', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: 'd7b150d404c59efb3a9ba5964fe5d3d2201bac40', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '2ccaec2934e7d611675daf670832196f03217f3f', name: "after-input" })), h("div", { key: '6888123870b59cf64a5ee4c31bd05829154c542f', class: "time-dropdown", slot: "content" }, h("div", { key: '99547788b1aaf9b6e1c37176358da04d89060cd1', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '23671a99897ae51a90eb4ffefe089a0f220163bc', class: "description" }, h("slot", { key: 'b3a3857e78459f31c5a3295319640c6b2d37322b', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '88bbae1c431c1ec5c81ed66b5399299b64a609cf', hidden: !this.error, class: "error-description" }, h("slot", { key: '9f2a0530c81d5ec81a6a5224378f2e4346d776a1', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtime"; }
     static get formAssociated() { return true; }

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

@@ -3,6 +3,7 @@ import { iconNames } from "./nv-icons";
 import { nameof } from "../../utils/class.utils";
 const NvIconDocs = {
     component: 'nv-icon',
+    parentGroup: 'Icon',
     stories: [
         // Default
         {

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

@@ -48,7 +48,7 @@ export class NvIcon {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'd96ca7fdb241a00f00ccdbce5f0437efade91e5e', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, h("svg", { key: '9de91a2e3ed62fc6128249a3ebf791bf42053475', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, h("use", { key: '4e9891a48aa09ec65096298ced483092d0a54d23', href: `#nvicon_${this.name}` }))));
+        return (h(Host, { key: 'f59fdd9822d6163aed70296063359aba69872688', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, h("svg", { key: '00f09b698e306414aa8a350f864439d74357361e', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, h("use", { key: 'a2deca1e231385373de8cc4265af7853a87978f7', href: `#nvicon_${this.name}` }))));
     }
     static get is() { return "nv-icon"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-icon/nv-icons.js

@@ -88,6 +88,7 @@ export const iconNames = [
     'bulb',
     'cake',
     'calendar-time',
+    'calendar-week',
     'calendar',
     'camera-off',
     'camera',
@@ -124,6 +125,7 @@ export const iconNames = [
     'chevrons-right',
     'circle-caret-right',
     'circle-check',
+    'circle-minus',
     'circle-x',
     'circuit-alternate',
     'circuit-ground-digital',
@@ -292,6 +294,8 @@ export const iconNames = [
     'keyboard-hide',
     'keyboard-show',
     'keyboard',
+    'layers-intersect',
+    'layers-off',
     'layout-board-split',
     'layout-dashboard',
     'layout-grid',

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

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

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

@@ -115,7 +115,7 @@ export class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'e63c932f14d3b673d43ed48f61bb37a48605338d', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 0, disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: '22ea154dce89eae701d873674a8bc6b2cecbcab9', size: this.size }), !this.loading && h("nv-icon", { key: 'f05c05c455e62d27aed57de09efd32230f68c450', name: this.name, size: this.size }), h("slot", { key: 'a1a163e56c8c027d0df2a019f77c187c6abbd91a' })));
+        return (h(Host, { key: 'b746b8c5f6e25d2fd0c3759f9bcb5451d18ac29c', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 0, disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: '5bb5ab5b49b0e1b19695e00846e462dc6a5b6093', size: this.size }), !this.loading && h("nv-icon", { key: '825f0532eea39531c63c669bac307a2c45478cbb', name: this.name, size: this.size }), h("slot", { key: '394a9f1b5fd16037fcd5bebb3075f363bfe4fa62' })));
     }
     static get is() { return "nv-iconbutton"; }
     static get formAssociated() { return true; }

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

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

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

@@ -16,7 +16,7 @@ export class NvLoader {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (h(Host, { key: '5449f31fff78e9aabb1a6af11b99247cdf9fd4f3', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (h(Host, { key: 'a80c59f9585654352e1b48e1a245e94172e1e533', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get is() { return "nv-loader"; }
     static get originalStyleUrls() {

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvMenuDocs = {
     component: 'nv-menu',
+    parentGroup: 'Menu',
     subcomponents: ['nv-menuitem', 'nv-iconbutton'],
     composedComponents: ['nv-menuitem'],
     stories: [

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

@@ -192,7 +192,7 @@ export class NvMenu {
         this.triggerElement = this.el.querySelector('[slot="trigger"]');
     }
     render() {
-        return (h(Host, { key: '470d14ed698cc0064a24bf02e5fac3b32d64601a' }, h("slot", { key: '2dd81fbe5a23b5225fc464fe528ff08983959b7f', name: "trigger" }), h("nv-popover", { key: '68634d33954033dbd997c8a7f7ed711c6a17470b', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open, onOpenChanged: this.handleOpenChanged.bind(this) }, this.items ? (h("ul", { slot: "content" }, this.renderMenuItems())) : (h("slot", { name: "content" })))));
+        return (h(Host, { key: 'b8154f4e215984b0dbb106b44dcad72eacb140e1' }, h("slot", { key: 'cddcea9afd3324d39168f3879cdbb0839f3e432a', name: "trigger" }), h("nv-popover", { key: '2e20e3b97279c27e16b0eef4eb2d327a1e22c3b3', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open, onOpenChanged: this.handleOpenChanged.bind(this) }, this.items ? (h("ul", { slot: "content" }, this.renderMenuItems())) : (h("slot", { name: "content" })))));
     }
     static get is() { return "nv-menu"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,24 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvMenuitemDocs = {
     component: 'nv-menuitem',
-    skip: true,
+    parentGroup: 'Menu',
+    subcomponents: ['nv-menu', 'nv-iconbutton', 'nv-icon'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-menu", { "data-class": "pb-20" }, h("nv-iconbutton", { slot: "trigger", name: "menu", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { "data-storybook-args": true, icon: "user", label: "Profile" }), h("nv-menuitem", { icon: "settings", label: "Settings" })))),
+        },
+        {
+            name: nameof(x => x.icon),
+            args: { icon: 'user' },
+            template: (h("nv-menu", { "data-class": "pb-20" }, h("nv-iconbutton", { slot: "trigger", name: "menu", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { "data-storybook-args": true, label: "With Icon" })))),
+        },
+        {
+            name: nameof(x => x.shortcut),
+            args: { shortcut: '⌘K' },
+            template: (h("nv-menu", { "data-class": "pb-20" }, h("nv-iconbutton", { slot: "trigger", name: "menu", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { "data-storybook-args": true, icon: "search", label: "Search" })))),
+        },
+    ],
 };
 export default NvMenuitemDocs;

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

@@ -43,7 +43,7 @@ export class NvMenuitem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'aac708fbf246c1083c3c4666e97b421485dd44a6', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: '3b37a8661321152859dbc4247b299e60e909fe34', name: this.icon }), h("slot", { key: 'e690d7574f8960c44bee2e3f20b1150b578a49da' }), this.label && h("span", { key: '32d487f8ec9c1d6a910734c825382899982a23a5', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'cefcda06f7cb217348e5027ee6a38f8731421d6e' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '1085e47ae40ac38f87fca10dfbecbf32db95bace', name: "chevron-right" })));
+        return (h(Host, { key: 'b377cf654cd4d0cc7e257c10606977db86087e31', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && h("nv-icon", { key: '409b0902ea54323d4dd778816a244f4ea64d986d', name: this.icon }), h("slot", { key: 'd5c5c4a9ab1e3c70ba6fe052e11cfff212bf93aa' }), this.label && h("span", { key: '0b1e3892dfb16bd1f1d19f72b29f4d4dd396ccdf', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && h("kbd", { key: 'a099a45ed14e3922c3fe25d3b0e1f0d257101e4b' }, this.shortcut), this.hasSubmenu && h("nv-icon", { key: '6c61d48ac2f3927ad7b33673bc9ed196f733e30a', name: "chevron-right" })));
     }
     static get is() { return "nv-menuitem"; }
     static get originalStyleUrls() {
@@ -82,7 +82,7 @@ export class NvMenuitem {
                 "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\"",
+                    "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",

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

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

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

@@ -158,7 +158,7 @@ export class NvNotification {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '3c5025f664fcfc1e68856c003cd31ff10b8efdd9', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": this.getHeadingId() ?? null, "aria-describedby": this.getMessageId() ?? null, tabindex: "-1" }, h("div", { key: 'a26032a0b0ac9818b5da1f6e815a8c96f096ed46', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: 'f660bc8b5e5d8df073b69fb60d1ed0b11ec75c6f', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: 'dbeea84ab7f1c965eae3a8ae74b7afca98453705', name: "x", size: "sm" }))), h("nv-icon", { key: '0cbcee4f8667579b38ea205bdd747aabf6bdca8c', name: this.icon ?? this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: 'aed13fae98256180ff8d453c9f9d108eab429952', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: 'a2964d1c4dc744765ed916fe74d6cc167164eaf4', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: '2eee0bd4a73fd92ea283ae6cd50af2d1edc01f0c', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: '2f7e9b5429b9fa27bc4088b5d26955b8360695c1', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: 'f1b3dbe8722c8750231b4fb18fdc120ecfd04c54', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: '56a881b3a53bb68a214f8db560805c726930b8d4', "data-scope": "actions" }, h("slot", { key: 'ece50671721f12e58dfd03df09545cb456d00a9c', name: "actions" })))))));
+        return (h(Host, { key: '6d78033613b4f5d8c90fd3f0228e90f28272a7ca', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": this.getHeadingId() ?? null, "aria-describedby": this.getMessageId() ?? null, tabindex: "-1" }, h("div", { key: '0a2e82809525643861c44462bbf85bb670b56bb9', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: '46ce066fba0d63bce346697b512051e9fdbf939c', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: '25ce721523d04886ff700923310b0fea3e6eeea5', name: "x", size: "sm" }))), h("nv-icon", { key: '060dfd8b52e92af64a6f5d80f18b520e3fa2db4e', name: this.icon ?? this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: '0b60d8005cd53a7bb4f8cbb7d1e2c67337f5b73d', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: '549d7ee40542d3579e13c6e31dc313ba3a261f81', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: 'c5c067b17e2b7456b6ddf7a7747e51c9924cd50f', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: '3de5ab6bf9a77bb0843cd04b945f40b3b16417db', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: '5bcc2b2842907f35d3e8b9f1be3c2045c5ad8a0f', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: 'e06454ce135e9869b9c7a9faea3e6f082ddc0e8a', "data-scope": "actions" }, h("slot", { key: 'eed113cd7f2d9ae51493f2cd8b9a175db6e7f4aa', name: "actions" })))))));
     }
     static get is() { return "nv-notification"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-notification-bullet/nv-notification-bullet.docs.js

@@ -3,6 +3,7 @@ import { nameof } from "../../utils/class.utils";
 const NvNotificationBulletDocs = {
     component: 'nv-notification-bullet',
     badge: 'new',
+    parentGroup: 'Notification/nv-notification',
     stories: [
         // Default
         {

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

@@ -1,6 +1,29 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const NvNotificationcontainerDocs = {
     component: 'nv-notificationcontainer',
     badge: 'beta',
-    skip: true,
+    parentGroup: 'Notification/nv-notification',
+    subcomponents: ['nv-notification'],
+    stories: [
+        // Default
+        {
+            name: 'Default',
+            description: 'Container for managing notification placement (experimental beta feature)',
+            template: (h("nv-notificationcontainer", { "data-storybook-args": true }, h("nv-notification", { heading: "Notification 1", message: "This is the first notification.", feedback: "information", dismissible: true }), h("nv-notification", { heading: "Notification 2", message: "This is the second notification.", feedback: "success", dismissible: true }))),
+        },
+        // position
+        {
+            name: nameof(x => x.position),
+            description: 'Different positions for notification container',
+            template: (h("div", null, h("p", { "data-class": "mb-4" }, "Top Right (default):"), h("nv-notificationcontainer", { "data-storybook-args": true, position: "top-right" }, h("nv-notification", { heading: "Top Right", message: "Notification in top-right corner.", feedback: "information", dismissible: true })), h("p", { "data-class": "mb-4 mt-6" }, "Top Left:"), h("nv-notificationcontainer", { "data-storybook-args": true, position: "top-left" }, h("nv-notification", { heading: "Top Left", message: "Notification in top-left corner.", feedback: "success", dismissible: true })), h("p", { "data-class": "mb-4 mt-6" }, "Bottom Right:"), h("nv-notificationcontainer", { "data-storybook-args": true, position: "bottom-right" }, h("nv-notification", { heading: "Bottom Right", message: "Notification in bottom-right corner.", feedback: "warning", dismissible: true })), h("p", { "data-class": "mb-4 mt-6" }, "Bottom Left:"), h("nv-notificationcontainer", { "data-storybook-args": true, position: "bottom-left" }, h("nv-notification", { heading: "Bottom Left", message: "Notification in bottom-left corner.", feedback: "error", dismissible: true })))),
+        },
+        // MultipleNotifications
+        {
+            name: 'MultipleNotifications',
+            description: 'Container with multiple stacked notifications',
+            template: (h("nv-notificationcontainer", { position: "top-right" }, h("nv-notification", { heading: "First Notification", message: "This is the first notification in the stack.", feedback: "information", dismissible: true }), h("nv-notification", { heading: "Second Notification", message: "This is the second notification in the stack.", feedback: "success", dismissible: true }), h("nv-notification", { heading: "Third Notification", message: "This is the third notification in the stack.", feedback: "warning", dismissible: true }))),
+        },
+    ],
 };
 export default NvNotificationcontainerDocs;

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

@@ -1,7 +1,5 @@
 import { Host, h } from "@stencil/core";
 /**
- * @deprecated [EXPERIMENTAL]
- * @experimental - Container for notifications TODO: add animations etc...
  * @slot default - Child content of the component.
  */
 export class NvNotificationContainer {
@@ -15,21 +13,9 @@ export class NvNotificationContainer {
     }
     //#endregion PROPERTIES
     /****************************************************************************/
-    //#region METHODS
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region WATCHERS
-    //#endregion WATCHERS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region EVENTS
-    //#endregion EVENTS
-    /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '97882d6391db2e1c9db884a84469db78136765e4', class: `position-${this.position}` }, h("slot", { key: '0a0c52f26006ebd186862634b7b5470c7410c976' })));
+        return (h(Host, { key: 'd2c471aaac0f76edade303331718d2b0f7c6bb39', class: `position-${this.position}` }, h("slot", { key: '48bbc563523bfb107bbbd2cc60561ccb87f9968c' })));
     }
     static get is() { return "nv-notificationcontainer"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-pagination-nav/nv-pagination-nav.css

@@ -0,0 +1,37 @@
+nv-pagination-nav {
+  display: block;
+}
+nv-pagination-nav [data-scope=pagination-nav] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  flex-wrap: wrap;
+}
+nv-pagination-nav [data-scope=page-list] {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+nv-pagination-nav [data-scope=page-button] {
+  display: flex;
+  align-items: center;
+}
+nv-pagination-nav [data-scope=page-button] nv-button,
+nv-pagination-nav [data-scope=page-button] nv-iconbutton {
+  min-width: var(--spacing-8);
+  justify-content: center;
+}
+nv-pagination-nav [data-scope=ellipsis] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--spacing-8);
+  height: var(--spacing-8);
+  color: var(--color-content-lower-text);
+  font-size: var(--font-size-sm);
+  user-select: none;
+}