npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.15.0 → 3.17.0 - Mend

@nova-design-system/nova-webcomponents 3.15.0 → 3.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (554) hide show

package/dist/collection/components/nv-iconbutton/nv-iconbutton.css CHANGED Viewed

@@ -6,8 +6,8 @@ nv-iconbutton.root {
   justify-content: center;
   align-items: center;
   font-style: normal;
-  font-weight: 500;
-  font-family: "TT Norms Pro", sans-serif;
+  font-weight: var(--font-weight-medium-emphasis);
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   transition: background-color 150ms ease-out;
   height: fit-content;
   width: fit-content;

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

@@ -5,10 +5,12 @@ const NvMenuDocs = {
     subcomponents: ['nv-menuitem', 'nv-iconbutton'],
     composedComponents: ['nv-menuitem'],
     stories: [
+        // Default
         {
             name: 'Default',
             template: (h("nv-menu", { "data-storybook-args": true, "data-class": "pb-20" }, h("nv-iconbutton", { slot: "trigger", name: "menu", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "user", shortcut: "\u2318K", id: "user-settings", label: "User settings" }), h("nv-menuitem", { icon: "bulb", shortcut: "\u2318F", id: "find-all-items", label: "Find all items" })))),
         },
+        // Open
         {
             name: nameof(x => x.open),
             args: {
@@ -16,10 +18,12 @@ const NvMenuDocs = {
             },
             template: (h("nv-menu", { "data-storybook-args": true, "data-class": "pb-20" }, h("nv-iconbutton", { slot: "trigger", name: "menu", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "user", shortcut: "\u2318K", id: "user-settings", label: "User settings" }), h("nv-menuitem", { icon: "bulb", shortcut: "\u2318F", id: "find-all-items", label: "Find all items" })))),
         },
+        // Nested
         {
             name: nameof(x => x.nested),
             template: (h("nv-menu", { "data-storybook-args": true, "data-class": "pb-20" }, h("nv-iconbutton", { name: "menu", slot: "trigger", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "adjustments-up", shortcut: "\u2318U", id: "up", disabled: true, label: "This is disabled" }), h("nv-menu", { nested: true, placement: "right-start" }, h("nv-menuitem", { slot: "trigger", "has-submenu": true, icon: "cloud", label: "Cloud Functions" }), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "upload", id: "upload", label: "Upload" }), h("nv-menuitem", { icon: "download", id: "download", label: "Download" }), h("nv-menu", { nested: true, placement: "right-start" }, h("nv-menuitem", { slot: "trigger", "has-submenu": true, icon: "engine", label: "Even more functions?" }), h("ul", { slot: "content" }, h("nv-menuitem", { id: "deep", label: "Deeply nested" }), h("nv-menuitem", { id: "nav", label: "Have you tried keyboard navigation?" })))))))),
         },
+        // DisableCloseOnSelect
         {
             name: nameof(x => x.disableCloseOnSelect),
             args: {
@@ -27,6 +31,7 @@ const NvMenuDocs = {
             },
             template: (h("nv-menu", { "data-storybook-args": true, "data-class": "pb-20" }, h("nv-iconbutton", { name: "menu", slot: "trigger", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "adjustments-up", id: "no-close", label: "Select Me, I won't close" }), h("nv-menuitem", { icon: "activity", id: "no-close-either", label: "Me neither" })))),
         },
+        // Placement
         {
             name: nameof(x => x.placement),
             args: {
@@ -34,6 +39,7 @@ const NvMenuDocs = {
             },
             template: (h("nv-menu", { "data-storybook-args": true, "data-class": "p-20 flex justify-center" }, h("nv-iconbutton", { name: "menu", slot: "trigger", shape: "rounded" }), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "help", id: "help", label: "Where am I?" })))),
         },
+        // Items
         {
             name: nameof(x => x.items),
             args: {
@@ -90,6 +96,7 @@ const NvMenuDocs = {
             },
             template: (h("nv-menu", { "data-storybook-args": true, "data-class": "pb-20" }, h("nv-iconbutton", { slot: "trigger", name: "menu", shape: "rounded" }))),
         },
+        // Separator
         {
             name: 'Separator',
             description: 'Use an hr element to create a separator between menu items.',

package/dist/collection/components/nv-menu/nv-menu.docs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-menu.docs.js","sourceRoot":"","sources":["../../../src/components/nv-menu/nv-menu.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvMenuDocs: NovaDocs<Components.NvMenu> = {\n component: 'nv-menu',\n subcomponents: ['nv-menuitem', 'nv-iconbutton'],\n composedComponents: ['nv-menuitem'],\n stories: [\n {\n name: 'Default',\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n slot=\"trigger\"\n name=\"menu\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"user\"\n shortcut=\"⌘K\"\n id=\"user-settings\"\n label=\"User settings\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"bulb\"\n shortcut=\"⌘F\"\n id=\"find-all-items\"\n label=\"Find all items\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n {\n name: nameof<Components.NvMenu>(x => x.open),\n args: {\n open: true,\n },\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n slot=\"trigger\"\n name=\"menu\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"user\"\n shortcut=\"⌘K\"\n id=\"user-settings\"\n label=\"User settings\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"bulb\"\n shortcut=\"⌘F\"\n id=\"find-all-items\"\n label=\"Find all items\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n {\n name: nameof<Components.NvMenu>(x => x.nested),\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n name=\"menu\"\n slot=\"trigger\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"adjustments-up\"\n shortcut=\"⌘U\"\n id=\"up\"\n disabled\n label=\"This is disabled\"\n ></nv-menuitem>\n <nv-menu nested placement=\"right-start\">\n <nv-menuitem\n slot=\"trigger\"\n has-submenu\n icon=\"cloud\"\n label=\"Cloud Functions\"\n ></nv-menuitem>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"upload\"\n id=\"upload\"\n label=\"Upload\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"download\"\n id=\"download\"\n label=\"Download\"\n ></nv-menuitem>\n <nv-menu nested placement=\"right-start\">\n <nv-menuitem\n slot=\"trigger\"\n has-submenu\n icon=\"engine\"\n label=\"Even more functions?\"\n ></nv-menuitem>\n <ul slot=\"content\">\n <nv-menuitem id=\"deep\" label=\"Deeply nested\"></nv-menuitem>\n <nv-menuitem\n id=\"nav\"\n label=\"Have you tried keyboard navigation?\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n </ul>\n </nv-menu>\n </ul>\n </nv-menu>\n ),\n },\n {\n name: nameof<Components.NvMenu>(x => x.disableCloseOnSelect),\n args: {\n disableCloseOnSelect: true,\n },\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n name=\"menu\"\n slot=\"trigger\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"adjustments-up\"\n id=\"no-close\"\n label=\"Select Me, I won't close\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"activity\"\n id=\"no-close-either\"\n label=\"Me neither\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n {\n name: nameof<Components.NvMenu>(x => x.placement),\n args: {\n placement: 'top-start',\n },\n template: (\n <nv-menu data-storybook-args data-class=\"p-20 flex justify-center\">\n <nv-iconbutton\n name=\"menu\"\n slot=\"trigger\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"help\"\n id=\"help\"\n label=\"Where am I?\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n {\n name: nameof<Components.NvMenu>(x => x.items),\n args: {\n items: [\n {\n label: 'Paramètres',\n icon: 'settings',\n shortcut: '⌘S',\n value: 'settings',\n },\n {\n label: 'Options avancées',\n icon: 'adjustments',\n hasSubmenu: true,\n value: 'advanced',\n submenuItems: [\n {\n label: 'Configuration',\n icon: 'settings',\n value: 'config',\n },\n {\n label: 'Sécurité',\n icon: 'shield',\n hasSubmenu: true,\n value: 'security',\n submenuItems: [\n {\n label: 'Permissions',\n icon: 'lock',\n value: 'permissions',\n },\n {\n label: 'Authentification',\n icon: 'user',\n value: 'authentication',\n },\n ],\n },\n ],\n },\n {\n label: 'Profil',\n icon: 'user',\n value: 'profile',\n disabled: true,\n },\n {\n label: 'Déconnexion',\n icon: 'logout',\n value: 'logout',\n },\n ],\n },\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n slot=\"trigger\"\n name=\"menu\"\n shape=\"rounded\"\n ></nv-iconbutton>\n </nv-menu>\n ),\n },\n {\n name: 'Separator',\n description:\n 'Use an hr element to create a separator between menu items.',\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n name=\"menu\"\n slot=\"trigger\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem icon=\"upload\" id=\"upload\" label=\"Upload\"></nv-menuitem>\n <nv-menuitem\n icon=\"download\"\n id=\"download\"\n label=\"Download\"\n ></nv-menuitem>\n <hr />\n <nv-menuitem\n icon=\"bulb\"\n shortcut=\"⌘F\"\n id=\"find-all-items\"\n label=\"Find all items\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n ],\n};\n\nexport default NvMenuDocs;\n"]}
1	+ {"version":3,"file":"nv-menu.docs.js","sourceRoot":"","sources":["../../../src/components/nv-menu/nv-menu.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvMenuDocs: NovaDocs<Components.NvMenu> = {\n component: 'nv-menu',\n subcomponents: ['nv-menuitem', 'nv-iconbutton'],\n composedComponents: ['nv-menuitem'],\n stories: [\n // Default\n {\n name: 'Default',\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n slot=\"trigger\"\n name=\"menu\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"user\"\n shortcut=\"⌘K\"\n id=\"user-settings\"\n label=\"User settings\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"bulb\"\n shortcut=\"⌘F\"\n id=\"find-all-items\"\n label=\"Find all items\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n // Open\n {\n name: nameof<Components.NvMenu>(x => x.open),\n args: {\n open: true,\n },\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n slot=\"trigger\"\n name=\"menu\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"user\"\n shortcut=\"⌘K\"\n id=\"user-settings\"\n label=\"User settings\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"bulb\"\n shortcut=\"⌘F\"\n id=\"find-all-items\"\n label=\"Find all items\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n // Nested\n {\n name: nameof<Components.NvMenu>(x => x.nested),\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n name=\"menu\"\n slot=\"trigger\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"adjustments-up\"\n shortcut=\"⌘U\"\n id=\"up\"\n disabled\n label=\"This is disabled\"\n ></nv-menuitem>\n <nv-menu nested placement=\"right-start\">\n <nv-menuitem\n slot=\"trigger\"\n has-submenu\n icon=\"cloud\"\n label=\"Cloud Functions\"\n ></nv-menuitem>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"upload\"\n id=\"upload\"\n label=\"Upload\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"download\"\n id=\"download\"\n label=\"Download\"\n ></nv-menuitem>\n <nv-menu nested placement=\"right-start\">\n <nv-menuitem\n slot=\"trigger\"\n has-submenu\n icon=\"engine\"\n label=\"Even more functions?\"\n ></nv-menuitem>\n <ul slot=\"content\">\n <nv-menuitem id=\"deep\" label=\"Deeply nested\"></nv-menuitem>\n <nv-menuitem\n id=\"nav\"\n label=\"Have you tried keyboard navigation?\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n </ul>\n </nv-menu>\n </ul>\n </nv-menu>\n ),\n },\n // DisableCloseOnSelect\n {\n name: nameof<Components.NvMenu>(x => x.disableCloseOnSelect),\n args: {\n disableCloseOnSelect: true,\n },\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n name=\"menu\"\n slot=\"trigger\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"adjustments-up\"\n id=\"no-close\"\n label=\"Select Me, I won't close\"\n ></nv-menuitem>\n <nv-menuitem\n icon=\"activity\"\n id=\"no-close-either\"\n label=\"Me neither\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n // Placement\n {\n name: nameof<Components.NvMenu>(x => x.placement),\n args: {\n placement: 'top-start',\n },\n template: (\n <nv-menu data-storybook-args data-class=\"p-20 flex justify-center\">\n <nv-iconbutton\n name=\"menu\"\n slot=\"trigger\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem\n icon=\"help\"\n id=\"help\"\n label=\"Where am I?\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n // Items\n {\n name: nameof<Components.NvMenu>(x => x.items),\n args: {\n items: [\n {\n label: 'Paramètres',\n icon: 'settings',\n shortcut: '⌘S',\n value: 'settings',\n },\n {\n label: 'Options avancées',\n icon: 'adjustments',\n hasSubmenu: true,\n value: 'advanced',\n submenuItems: [\n {\n label: 'Configuration',\n icon: 'settings',\n value: 'config',\n },\n {\n label: 'Sécurité',\n icon: 'shield',\n hasSubmenu: true,\n value: 'security',\n submenuItems: [\n {\n label: 'Permissions',\n icon: 'lock',\n value: 'permissions',\n },\n {\n label: 'Authentification',\n icon: 'user',\n value: 'authentication',\n },\n ],\n },\n ],\n },\n {\n label: 'Profil',\n icon: 'user',\n value: 'profile',\n disabled: true,\n },\n {\n label: 'Déconnexion',\n icon: 'logout',\n value: 'logout',\n },\n ],\n },\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n slot=\"trigger\"\n name=\"menu\"\n shape=\"rounded\"\n ></nv-iconbutton>\n </nv-menu>\n ),\n },\n // Separator\n {\n name: 'Separator',\n description:\n 'Use an hr element to create a separator between menu items.',\n template: (\n <nv-menu data-storybook-args data-class=\"pb-20\">\n <nv-iconbutton\n name=\"menu\"\n slot=\"trigger\"\n shape=\"rounded\"\n ></nv-iconbutton>\n <ul slot=\"content\">\n <nv-menuitem icon=\"upload\" id=\"upload\" label=\"Upload\"></nv-menuitem>\n <nv-menuitem\n icon=\"download\"\n id=\"download\"\n label=\"Download\"\n ></nv-menuitem>\n <hr />\n <nv-menuitem\n icon=\"bulb\"\n shortcut=\"⌘F\"\n id=\"find-all-items\"\n label=\"Find all items\"\n ></nv-menuitem>\n </ul>\n </nv-menu>\n ),\n },\n ],\n};\n\nexport default NvMenuDocs;\n"]}

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

@@ -62,6 +62,24 @@ export class NvMenu {
     async close() {
         this.open = false;
     }
+    focusFirstItem() {
+        const firstButton = this.popoverElement.querySelector('nv-menuitem');
+        if (firstButton) {
+            requestAnimationFrame(() => firstButton.focus());
+        }
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    handleOpenChange(newOpen) {
+        // React to external changes, e.g., focus first item if opened externally
+        if (newOpen) {
+            this.focusFirstItem();
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LISTENERS
     handleMenuItemSelect(event) {
         if (this.disableCloseOnSelect)
             return;
@@ -174,13 +192,7 @@ export class NvMenu {
         if (triggerHasFocus && triggerHasFocusVisible)
             this.focusFirstItem();
     }
-    focusFirstItem() {
-        const firstButton = this.popoverElement.querySelector('nv-menuitem');
-        if (firstButton) {
-            requestAnimationFrame(() => firstButton.focus());
-        }
-    }
-    //#endregion EVENTS
+    //#endregion LISTENERS
     /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
@@ -189,7 +201,7 @@ export class NvMenu {
         });
     }
     render() {
-        return (h(Host, { key: '163c25a3424503f4c32e5c47647d685882f6dd57' }, h("slot", { key: '64c7fe175a04a174f92d4fe62026ab03db6f16a9', name: "trigger" }), h("nv-popover", { key: 'bd8e058010e53b1f68cbefcba6871ee7a02f0e9a', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (h("ul", { slot: "content" }, this.renderMenuItems())) : (h("slot", { name: "content" })))));
+        return (h(Host, { key: '9c580e2085804dead07f60f3ce4494bed123a58e' }, h("slot", { key: '87740cf4b003379eb7a4d011b2b80640e9d7c24f', name: "trigger" }), h("nv-popover", { key: '102ebedefdc1b6ac5f10900a82c904b12e4cddb1', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open }, this.items ? (h("ul", { slot: "content" }, this.renderMenuItems())) : (h("slot", { name: "content" })))));
     }
     static get is() { return "nv-menu"; }
     static get originalStyleUrls() {
@@ -379,6 +391,12 @@ export class NvMenu {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "menuitemSelected",

package/dist/collection/components/nv-menu/nv-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-menu.js","sourceRoot":"","sources":["../../../src/components/nv-menu/nv-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Listen,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/*\n @slot trigger - The button element that toggles the menu popover\n * @slot content - The content of the menu, should be wrapped in a ul element containing nv-menuitem elements\n /\n@Component({\n tag: 'nv-menu',\n styleUrl: 'nv-menu.scss',\n shadow: false,\n})\nexport class NvMenu {\n @Element() el: HTMLNvMenuElement;\n private triggerElement!: HTMLElement;\n private popoverElement!: HTMLNvPopoverElement;\n private isHandlingKeyDown: boolean = false;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Use this to toggle the initial visibility of the menu, by default the menu\n * is hidden.\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /\n Use this if the menu is nested inside another menu. This will prevent the\n * parent menu from closing when the child menu is opened.\n /\n @Prop({ reflect: true })\n readonly nested: boolean = false;\n\n /\n Use this to disable the menu from closing automatically when a menu item is\n * selected.\n /\n @Prop({ reflect: true })\n readonly disableCloseOnSelect: boolean = false;\n\n /\n Decides where the menu shows up next to the button it's linked to (above,\n * below, to the sides). If there isn't enough room, it will adjust its\n * position on the axis to fit on the screen, so users can always see it.\n /\n @Prop({ reflect: true })\n readonly placement: Placement = 'bottom-end';\n\n /\n List of items used to automatically generate dropdown items. This\n * provides an alternative to using the slot manually.\n \n @example\n * items = [{\n * \"label\": \"Option 1\",\n * \"value\": \"option1\",\n * },\n * {\n * \"label\": \"Option 2\",\n * \"value\": \"option2\",\n * }]\n /\n @Prop({ reflect: true })\n readonly items?: {\n /\n The label of the menu item.\n /\n label: string;\n /\n The value of the menu item.\n /\n value?: string;\n /\n Whether the menu item is disabled.\n /\n disabled?: boolean;\n /\n Whether the menu item has a submenu.\n /\n hasSubmenu?: boolean;\n /\n The icon of the menu item.\n /\n icon?: string;\n /\n The shortcut of the menu item.\n /\n shortcut?: string;\n /\n Whether the menu item is nested.\n /\n nested?: boolean;\n /\n The submenu items of the menu item.\n /\n submenuItems?: InstanceType<typeof NvMenu>['items'];\n }[];\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Opens the menu.\n /\n @Method()\n async show() {\n this.open = true;\n }\n\n /\n Closes the menu.\n /\n @Method()\n async close() {\n this.open = false;\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted from nv-menuitem elements with the corresponding id and name when\n * selected (via click or keyboard). This event listener can be attached to\n * either the nv-menu or the nv-menuitem element.\n /\n @Event()\n menuitemSelected: EventEmitter<\n HTMLNvMenuitemElementEventMap['menuitemSelected']\n >;\n\n @Listen('menuitemSelected')\n handleMenuItemSelect(\n event: CustomEvent<HTMLNvMenuitemElementEventMap['menuitemSelected']>,\n ) {\n if (this.disableCloseOnSelect) return;\n if (event.detail.hasSubmenu) return;\n this.open = false;\n }\n\n @Listen('keydown', { passive: false })\n handleKeydown(event: KeyboardEvent) {\n // If the menu is not open, check if the trigger is focused\n // and the user presses Enter or ArrowDown, open the menu\n if (!this.open) {\n if (\n (event.key === 'Enter' \|\|\n event.key === 'ArrowDown' \|\|\n event.key === ' ') &&\n document.activeElement === this.triggerElement\n ) {\n event.preventDefault();\n this.show();\n // Then, put the focus on the first menuitem\n const firstMenuItem = this.popoverElement.querySelector('nv-menuitem');\n if (firstMenuItem) {\n requestAnimationFrame(() => (firstMenuItem as HTMLElement).focus());\n }\n }\n return;\n }\n\n if (this.isHandlingKeyDown) return;\n this.isHandlingKeyDown = true;\n\n if (\n event.key === 'ArrowDown' \|\|\n event.key === 'ArrowUp' \|\|\n event.key === 'ArrowLeft' \|\|\n event.key === 'ArrowRight' \|\|\n event.key === 'Escape'\n ) {\n event.preventDefault();\n }\n\n if (event.key === 'Escape' && !this.nested) {\n this.close();\n this.triggerElement.focus();\n this.isHandlingKeyDown = false;\n return;\n }\n\n const menuContent = this.el.querySelector('[slot=\"content\"]');\n const menuItems = (\n Array.from(menuContent.childNodes) as Array<\n HTMLNvMenuitemElement \| HTMLNvMenuElement\n >\n ).filter(item => item.matches?.('nv-menuitem, nv-menu'));\n\n let currentIndex = menuItems.indexOf(\n document.activeElement as HTMLNvMenuitemElement,\n );\n if (currentIndex === -1)\n currentIndex = menuItems.indexOf(\n document.activeElement.parentElement as HTMLNvMenuitemElement,\n );\n if (\n currentIndex === -1 &&\n menuItems.find(item => item.matches('nv-menu[open]'))\n ) {\n this.isHandlingKeyDown = false;\n return;\n }\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowUp') {\n menuItems.forEach(item => {\n if (item.matches('nv-menu')) (item as HTMLNvMenuElement).close();\n });\n }\n\n if (event.key === 'ArrowDown') {\n let nextIndex = (currentIndex + 1) % menuItems.length;\n while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {\n nextIndex = (nextIndex + 1) % menuItems.length;\n }\n const nextFocusable = menuItems[nextIndex];\n if (nextFocusable.matches('nv-menuitem')) {\n nextFocusable.focus();\n } else if (nextFocusable.matches('nv-menu')) {\n nextFocusable.querySelector('nv-menuitem').focus();\n }\n }\n\n if (event.key === 'ArrowUp') {\n let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;\n while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {\n prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;\n }\n const prevFocusable = menuItems[prevIndex];\n if (prevFocusable.matches('nv-menuitem')) {\n prevFocusable.focus();\n } else if (prevFocusable.matches('nv-menu')) {\n prevFocusable.querySelector('nv-menuitem').focus();\n }\n }\n\n if (event.key === 'ArrowRight') {\n const submenu = menuItems[currentIndex];\n if (!submenu.matches('nv-menu')) {\n this.isHandlingKeyDown = false;\n return;\n }\n (submenu as HTMLNvMenuElement).show();\n }\n\n if (event.key === 'ArrowLeft' && this.nested) {\n if (menuItems.find(item => item.matches('nv-menu[open]'))) {\n this.isHandlingKeyDown = false;\n return;\n }\n this.close();\n this.triggerElement.focus();\n }\n\n this.isHandlingKeyDown = false;\n }\n\n @Listen('openChanged')\n handleOpenChanged(event: CustomEvent<boolean>) {\n // Stop propagation to prevent the event from affecting parent components like dialogs\n event.stopPropagation();\n\n if (event.target === this.el.querySelector('nv-popover')) {\n this.open = event.detail;\n }\n const triggerHasFocus = this.triggerElement === document.activeElement;\n const triggerHasFocusVisible =\n this.triggerElement.matches(':focus-visible');\n if (triggerHasFocus && triggerHasFocusVisible) this.focusFirstItem();\n }\n\n private focusFirstItem() {\n const firstButton = this.popoverElement.querySelector('nv-menuitem');\n if (firstButton) {\n requestAnimationFrame(() => firstButton.focus());\n }\n }\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === 'trigger';\n }) as HTMLElement;\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region RENDER\n\n /\n * Generates menu items from the `items` property.\n * @param {MenuItem[]} items - The items to display in the menu.\n * @returns {HTMLElement[]} The rendered items.\n */\n private renderMenuItems = () => {\n return this.items.map(item => {\n if (item.hasSubmenu && item.submenuItems?.length > 0) {\n return (\n <nv-menu nested placement=\"right-start\" items={item.submenuItems}>\n <nv-menuitem\n slot=\"trigger\"\n hasSubmenu\n disabled={item.disabled}\n icon={item.icon as IconName}\n shortcut={item.shortcut}\n id={item.value}\n name={item.label}\n label={item.label}\n ></nv-menuitem>\n </nv-menu>\n );\n }\n return (\n <nv-menuitem\n disabled={item.disabled}\n icon={item.icon as IconName}\n shortcut={item.shortcut}\n id={item.value}\n name={item.label}\n label={item.label}\n ></nv-menuitem>\n );\n });\n };\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\"></slot>\n <nv-popover\n ref={el => (this.popoverElement = el)}\n triggerMode=\"click\"\n triggerElement={this.triggerElement}\n placement={this.placement}\n nested={this.nested}\n open={this.open}\n >\n {this.items ? (\n <ul slot=\"content\">{this.renderMenuItems()}</ul>\n ) : (\n <slot name=\"content\"></slot>\n )}\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"]}
1	+ {"version":3,"file":"nv-menu.js","sourceRoot":"","sources":["../../../src/components/nv-menu/nv-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Listen,\n Event,\n EventEmitter,\n Method,\n Watch,\n} from '@stencil/core';\nimport type { Placement } from '@floating-ui/dom';\nimport { IconName } from '../nv-icon/nv-icons';\n\n/*\n @slot trigger - The button element that toggles the menu popover\n * @slot content - The content of the menu, should be wrapped in a ul element containing nv-menuitem elements\n /\n@Component({\n tag: 'nv-menu',\n styleUrl: 'nv-menu.scss',\n shadow: false,\n})\nexport class NvMenu {\n @Element() el: HTMLNvMenuElement;\n private triggerElement!: HTMLElement;\n private popoverElement!: HTMLNvPopoverElement;\n private isHandlingKeyDown: boolean = false;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Use this to toggle the initial visibility of the menu, by default the menu\n * is hidden.\n /\n @Prop({ reflect: true, mutable: true })\n open: boolean = false;\n\n /\n Use this if the menu is nested inside another menu. This will prevent the\n * parent menu from closing when the child menu is opened.\n /\n @Prop({ reflect: true })\n readonly nested: boolean = false;\n\n /\n Use this to disable the menu from closing automatically when a menu item is\n * selected.\n /\n @Prop({ reflect: true })\n readonly disableCloseOnSelect: boolean = false;\n\n /\n Decides where the menu shows up next to the button it's linked to (above,\n * below, to the sides). If there isn't enough room, it will adjust its\n * position on the axis to fit on the screen, so users can always see it.\n /\n @Prop({ reflect: true })\n readonly placement: Placement = 'bottom-end';\n\n /\n List of items used to automatically generate dropdown items. This\n * provides an alternative to using the slot manually.\n \n @example\n * items = [{\n * \"label\": \"Option 1\",\n * \"value\": \"option1\",\n * },\n * {\n * \"label\": \"Option 2\",\n * \"value\": \"option2\",\n * }]\n /\n @Prop({ reflect: true })\n readonly items?: {\n /\n The label of the menu item.\n /\n label: string;\n /\n The value of the menu item.\n /\n value?: string;\n /\n Whether the menu item is disabled.\n /\n disabled?: boolean;\n /\n Whether the menu item has a submenu.\n /\n hasSubmenu?: boolean;\n /\n The icon of the menu item.\n /\n icon?: string;\n /\n The shortcut of the menu item.\n /\n shortcut?: string;\n /\n Whether the menu item is nested.\n /\n nested?: boolean;\n /\n The submenu items of the menu item.\n /\n submenuItems?: InstanceType<typeof NvMenu>['items'];\n }[];\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Opens the menu.\n /\n @Method()\n async show() {\n this.open = true;\n }\n\n /\n Closes the menu.\n /\n @Method()\n async close() {\n this.open = false;\n }\n\n private focusFirstItem() {\n const firstButton = this.popoverElement.querySelector('nv-menuitem');\n if (firstButton) {\n requestAnimationFrame(() => firstButton.focus());\n }\n }\n\n //#endregion METHODS\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emitted from nv-menuitem elements with the corresponding id and name when\n * selected (via click or keyboard). This event listener can be attached to\n * either the nv-menu or the nv-menuitem element.\n /\n @Event()\n menuitemSelected: EventEmitter<\n HTMLNvMenuitemElementEventMap['menuitemSelected']\n >;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('open')\n handleOpenChange(newOpen: boolean) {\n // React to external changes, e.g., focus first item if opened externally\n if (newOpen) {\n this.focusFirstItem();\n }\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region LISTENERS\n\n @Listen('menuitemSelected')\n handleMenuItemSelect(\n event: CustomEvent<HTMLNvMenuitemElementEventMap['menuitemSelected']>,\n ) {\n if (this.disableCloseOnSelect) return;\n if (event.detail.hasSubmenu) return;\n this.open = false;\n }\n\n @Listen('keydown', { passive: false })\n handleKeydown(event: KeyboardEvent) {\n // If the menu is not open, check if the trigger is focused\n // and the user presses Enter or ArrowDown, open the menu\n if (!this.open) {\n if (\n (event.key === 'Enter' \|\|\n event.key === 'ArrowDown' \|\|\n event.key === ' ') &&\n document.activeElement === this.triggerElement\n ) {\n event.preventDefault();\n this.show();\n // Then, put the focus on the first menuitem\n const firstMenuItem = this.popoverElement.querySelector('nv-menuitem');\n if (firstMenuItem) {\n requestAnimationFrame(() => (firstMenuItem as HTMLElement).focus());\n }\n }\n return;\n }\n\n if (this.isHandlingKeyDown) return;\n this.isHandlingKeyDown = true;\n\n if (\n event.key === 'ArrowDown' \|\|\n event.key === 'ArrowUp' \|\|\n event.key === 'ArrowLeft' \|\|\n event.key === 'ArrowRight' \|\|\n event.key === 'Escape'\n ) {\n event.preventDefault();\n }\n\n if (event.key === 'Escape' && !this.nested) {\n this.close();\n this.triggerElement.focus();\n this.isHandlingKeyDown = false;\n return;\n }\n\n const menuContent = this.el.querySelector('[slot=\"content\"]');\n const menuItems = (\n Array.from(menuContent.childNodes) as Array<\n HTMLNvMenuitemElement \| HTMLNvMenuElement\n >\n ).filter(item => item.matches?.('nv-menuitem, nv-menu'));\n\n let currentIndex = menuItems.indexOf(\n document.activeElement as HTMLNvMenuitemElement,\n );\n if (currentIndex === -1)\n currentIndex = menuItems.indexOf(\n document.activeElement.parentElement as HTMLNvMenuitemElement,\n );\n if (\n currentIndex === -1 &&\n menuItems.find(item => item.matches('nv-menu[open]'))\n ) {\n this.isHandlingKeyDown = false;\n return;\n }\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowUp') {\n menuItems.forEach(item => {\n if (item.matches('nv-menu')) (item as HTMLNvMenuElement).close();\n });\n }\n\n if (event.key === 'ArrowDown') {\n let nextIndex = (currentIndex + 1) % menuItems.length;\n while (menuItems[nextIndex].matches('nv-menuitem[disabled]')) {\n nextIndex = (nextIndex + 1) % menuItems.length;\n }\n const nextFocusable = menuItems[nextIndex];\n if (nextFocusable.matches('nv-menuitem')) {\n nextFocusable.focus();\n } else if (nextFocusable.matches('nv-menu')) {\n nextFocusable.querySelector('nv-menuitem').focus();\n }\n }\n\n if (event.key === 'ArrowUp') {\n let prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;\n while (menuItems[prevIndex].matches('nv-menuitem[disabled]')) {\n prevIndex = (prevIndex - 1 + menuItems.length) % menuItems.length;\n }\n const prevFocusable = menuItems[prevIndex];\n if (prevFocusable.matches('nv-menuitem')) {\n prevFocusable.focus();\n } else if (prevFocusable.matches('nv-menu')) {\n prevFocusable.querySelector('nv-menuitem').focus();\n }\n }\n\n if (event.key === 'ArrowRight') {\n const submenu = menuItems[currentIndex];\n if (!submenu.matches('nv-menu')) {\n this.isHandlingKeyDown = false;\n return;\n }\n (submenu as HTMLNvMenuElement).show();\n }\n\n if (event.key === 'ArrowLeft' && this.nested) {\n if (menuItems.find(item => item.matches('nv-menu[open]'))) {\n this.isHandlingKeyDown = false;\n return;\n }\n this.close();\n this.triggerElement.focus();\n }\n\n this.isHandlingKeyDown = false;\n }\n\n @Listen('openChanged')\n handleOpenChanged(event: CustomEvent<boolean>) {\n // Stop propagation to prevent the event from affecting parent components like dialogs\n event.stopPropagation();\n\n if (event.target === this.el.querySelector('nv-popover')) {\n this.open = event.detail;\n }\n const triggerHasFocus = this.triggerElement === document.activeElement;\n const triggerHasFocusVisible =\n this.triggerElement.matches(':focus-visible');\n if (triggerHasFocus && triggerHasFocusVisible) this.focusFirstItem();\n }\n\n //#endregion LISTENERS\n /************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.triggerElement = Array.from(this.el.children).find(child => {\n return child.getAttribute('slot') === 'trigger';\n }) as HTMLElement;\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region RENDER\n\n /\n * Generates menu items from the `items` property.\n * @param {MenuItem[]} items - The items to display in the menu.\n * @returns {HTMLElement[]} The rendered items.\n */\n private renderMenuItems = () => {\n return this.items.map(item => {\n if (item.hasSubmenu && item.submenuItems?.length > 0) {\n return (\n <nv-menu nested placement=\"right-start\" items={item.submenuItems}>\n <nv-menuitem\n slot=\"trigger\"\n hasSubmenu\n disabled={item.disabled}\n icon={item.icon as IconName}\n shortcut={item.shortcut}\n id={item.value}\n name={item.label}\n label={item.label}\n ></nv-menuitem>\n </nv-menu>\n );\n }\n return (\n <nv-menuitem\n disabled={item.disabled}\n icon={item.icon as IconName}\n shortcut={item.shortcut}\n id={item.value}\n name={item.label}\n label={item.label}\n ></nv-menuitem>\n );\n });\n };\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\"></slot>\n <nv-popover\n ref={el => (this.popoverElement = el)}\n triggerMode=\"click\"\n triggerElement={this.triggerElement}\n placement={this.placement}\n nested={this.nested}\n open={this.open}\n >\n {this.items ? (\n <ul slot=\"content\">{this.renderMenuItems()}</ul>\n ) : (\n <slot name=\"content\"></slot>\n )}\n </nv-popover>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"]}

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

@@ -82,7 +82,7 @@ export class NvMenuitem {
                 "mutable": false,
                 "complexType": {
                     "original": "`${IconName}`",
-                    "resolved": "\"home\" | \"photo\" | \"access-point-off\" | \"access-point\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"adjustments\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back-up\" | \"arrow-back\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-down\" | \"arrow-forward-up\" | \"arrow-forward\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrow-up\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"battery\" | \"bell-off\" | \"bell-ringing\" | \"bell\" | \"bike\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bluetooth\" | \"bolt-off\" | \"bolt\" | \"book\" | \"bookmark-off\" | \"bookmark\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"browser\" | \"brush\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"building\" | \"bulb-off\" | \"bulb\" | \"cake\" | \"calendar-time\" | \"calendar\" | \"camera-off\" | \"camera\" | \"car-crane\" | \"car\" | \"caravan\" | \"cash-banknote\" | \"cash\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area-line\" | \"chart-area\" | \"chart-arrows-vertical\" | \"chart-arrows\" | \"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-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clipboard\" | \"clock-edit\" | \"clock\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"cloud\" | \"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-rotated\" | \"device-mobile\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction-horizontal\" | \"direction-sign\" | \"direction\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots-vertical\" | \"dots\" | \"download\" | \"drone\" | \"droplet-filled\" | \"droplet-half\" | \"droplet\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser-off\" | \"eraser\" | \"external-link\" | \"eye-off\" | \"eye\" | \"face-id\" | \"feather\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text-bookmark\" | \"file-text\" | \"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\" | \"file\" | \"files-off\" | \"files\" | \"filter-off\" | \"filter-sort\" | \"filter\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folder\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge-off\" | \"gauge\" | \"gift\" | \"git-branch\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones-off\" | \"headphones\" | \"headset\" | \"heart-off\" | \"heart\" | \"heartbeat\" | \"helicopter\" | \"helmet-swopp\" | \"helmet\" | \"help\" | \"history\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"hourglass\" | \"inbox\" | \"info-circle\" | \"keyboard-hide\" | \"keyboard-show\" | \"keyboard\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"layout\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list-search\" | \"list\" | \"loader\" | \"location\" | \"lock-off\" | \"lock-open\" | \"lock\" | \"login\" | \"logout\" | \"mail-forward\" | \"mail-opened\" | \"mail\" | \"map-pin-2\" | \"map-pin-off\" | \"map-pin\" | \"map\" | \"menu\" | \"message-dots\" | \"message-off\" | \"message\" | \"messages\" | \"microphone-off\" | \"microphone\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"phone\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned-off\" | \"pinned\" | \"plane-off\" | \"plane\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug-connected\" | \"plug\" | \"plus\" | \"power-ac\" | \"power-dc\" | \"power\" | \"presentation-analytics\" | \"presentation\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle-2\" | \"puzzle\" | \"pylon\" | \"qrcode\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt\" | \"recharging\" | \"recycle\" | \"refresh-alert\" | \"refresh-off\" | \"refresh\" | \"repeat-once\" | \"repeat\" | \"replace\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"report\" | \"ripple-off\" | \"ripple\" | \"rocket\" | \"rotate-2\" | \"rotate-clockwise-2\" | \"rotate-clockwise\" | \"rotate-dot\" | \"rotate\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share-2\" | \"share\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"shield\" | \"ship-off\" | \"ship\" | \"shopping-cart\" | \"slash\" | \"smart-home\" | \"snowflake\" | \"solar-panel\" | \"sort-ascending-letters\" | \"sort-ascending-numbers\" | \"sort-descending-letters\" | \"sort-descending-numbers\" | \"spacing-horizontal\" | \"spacing-vertical\" | \"speakerphone\" | \"stack\" | \"stairs\" | \"star\" | \"sun\" | \"sunrise\" | \"sunset\" | \"switch-horizontal\" | \"switch-vertical\" | \"table\" | \"tag\" | \"tank-empty-fill\" | \"tank-full-fill\" | \"tank-medium-fill\" | \"temperature-off\" | \"temperature\" | \"template\" | \"terminal\" | \"text-size\" | \"text\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash-off\" | \"trash\" | \"tree\" | \"trees\" | \"truck-delivery\" | \"truck\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"user\" | \"users\" | \"versions\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"video\" | \"volume-2\" | \"volume-3\" | \"volume\" | \"wand\" | \"wave\" | \"waves\" | \"wifi-off\" | \"wifi\" | \"wind-direction\" | \"wind\" | \"windmill\" | \"wood\" | \"world-code\" | \"world\" | \"writing\" | \"x\" | \"zoom-reset\"",
+                    "resolved": "\"home\" | \"photo\" | \"access-point-off\" | \"access-point\" | \"accessible\" | \"activity\" | \"address-book\" | \"adjustments-horizontal\" | \"adjustments-up\" | \"adjustments\" | \"affiliate\" | \"air-conditioning\" | \"alert-circle\" | \"alert-triangle\" | \"align-center\" | \"align-left\" | \"align-right\" | \"app-window\" | \"apps\" | \"archive\" | \"areas\" | \"arrow-back-up\" | \"arrow-back\" | \"arrow-down-left\" | \"arrow-down-right\" | \"arrow-down\" | \"arrow-forward-up\" | \"arrow-forward\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up-left\" | \"arrow-up-right\" | \"arrow-up\" | \"arrows-diagonal\" | \"arrows-exchange\" | \"arrows-maximize\" | \"arrows-minimize\" | \"arrows-move\" | \"aspect-ratio\" | \"atom\" | \"ban\" | \"basket\" | \"battery-1\" | \"battery-2\" | \"battery-3\" | \"battery-4\" | \"battery-automotive\" | \"battery-charging\" | \"battery-eco\" | \"battery-off\" | \"battery\" | \"bell-off\" | \"bell-ringing\" | \"bell\" | \"bike\" | \"bluetooth-connected\" | \"bluetooth-off\" | \"bluetooth\" | \"bolt-off\" | \"bolt\" | \"book\" | \"bookmark-off\" | \"bookmark\" | \"bookmarks\" | \"box-align-top\" | \"box-multiple\" | \"brand-facebook\" | \"brand-instagram\" | \"brand-linkedin\" | \"brand-x\" | \"brand-youtube\" | \"briefcase\" | \"brightness-down\" | \"brightness-up\" | \"browser-check\" | \"browser-plus\" | \"browser-x\" | \"browser\" | \"brush\" | \"building-bank\" | \"building-factory\" | \"building-lighthouse\" | \"building-store\" | \"building\" | \"bulb-off\" | \"bulb\" | \"cake\" | \"calendar-time\" | \"calendar\" | \"camera-off\" | \"camera\" | \"car-crane\" | \"car\" | \"caravan\" | \"cash-banknote\" | \"cash\" | \"cast\" | \"cell\" | \"charging-pile\" | \"chart-arcs\" | \"chart-area-line\" | \"chart-area\" | \"chart-arrows-vertical\" | \"chart-arrows\" | \"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-check\" | \"clipboard-list\" | \"clipboard-plus\" | \"clipboard-text\" | \"clipboard-x\" | \"clipboard\" | \"clock-edit\" | \"clock\" | \"cloud-data-connection\" | \"cloud-download\" | \"cloud-rain\" | \"cloud-snow\" | \"cloud-upload\" | \"cloud\" | \"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-rotated\" | \"device-mobile\" | \"device-tablet\" | \"device-watch\" | \"devices\" | \"dialpad\" | \"direction-horizontal\" | \"direction-sign\" | \"direction\" | \"discount\" | \"door-enter\" | \"door-exit\" | \"door-off\" | \"dots-vertical\" | \"dots\" | \"download\" | \"drone\" | \"droplet-filled\" | \"droplet-half\" | \"droplet\" | \"droplets\" | \"edit\" | \"empty\" | \"engine\" | \"equal-not\" | \"eraser-off\" | \"eraser\" | \"external-link\" | \"eye-off\" | \"eye\" | \"face-id\" | \"feather\" | \"file-alert\" | \"file-analytics\" | \"file-check\" | \"file-code\" | \"file-download\" | \"file-export\" | \"file-horizontal\" | \"file-import\" | \"file-plus\" | \"file-search\" | \"file-text-bookmark\" | \"file-text\" | \"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\" | \"file\" | \"files-off\" | \"files\" | \"filter-off\" | \"filter-sort\" | \"filter\" | \"fingerprint\" | \"fire-extinguisher\" | \"flag\" | \"flame\" | \"flip-horizontal\" | \"flip-vertical\" | \"folder-minus\" | \"folder-off\" | \"folder-plus\" | \"folder-x\" | \"folder\" | \"folders\" | \"frame\" | \"gas-station\" | \"gauge-off\" | \"gauge\" | \"gift\" | \"git-branch\" | \"git-compare\" | \"gps\" | \"grid-dots\" | \"grip-horizontal\" | \"grip-vertical\" | \"hand-stop\" | \"hand-waving\" | \"hash\" | \"haze\" | \"headphones-off\" | \"headphones\" | \"headset\" | \"heart-off\" | \"heart\" | \"heartbeat\" | \"helicopter\" | \"helmet-swopp\" | \"helmet\" | \"help\" | \"history\" | \"hourglass-empty\" | \"hourglass-high\" | \"hourglass-low\" | \"hourglass-off\" | \"hourglass\" | \"inbox\" | \"info-circle\" | \"keyboard-hide\" | \"keyboard-show\" | \"keyboard\" | \"layout-board-split\" | \"layout-dashboard\" | \"layout-grid\" | \"layout-sidebar-left-collapse\" | \"layout-sidebar-left-expand\" | \"layout-sidebar-right-collapse\" | \"layout-sidebar-right-expand\" | \"layout\" | \"leaf\" | \"lifebuoy\" | \"link\" | \"list-search\" | \"list\" | \"loader\" | \"location\" | \"lock-off\" | \"lock-open\" | \"lock\" | \"login\" | \"logout\" | \"mail-forward\" | \"mail-opened\" | \"mail\" | \"map-pin-2\" | \"map-pin-off\" | \"map-pin\" | \"map\" | \"master-data\" | \"menu\" | \"message-dots\" | \"message-off\" | \"message\" | \"messages\" | \"microphone-off\" | \"microphone\" | \"minus\" | \"mist\" | \"moon\" | \"motorbike\" | \"mouse\" | \"movie\" | \"network\" | \"news\" | \"note\" | \"notebook\" | \"notes\" | \"offshore-station\" | \"package\" | \"palette\" | \"paperclip\" | \"pencil\" | \"phone-call\" | \"phone-calling\" | \"phone-check\" | \"phone-incoming\" | \"phone-off\" | \"phone-outgoing\" | \"phone\" | \"photo-off\" | \"pig\" | \"pin\" | \"pinned-off\" | \"pinned\" | \"plane-off\" | \"plane\" | \"plant\" | \"player-pause\" | \"player-play\" | \"player-skip-back\" | \"player-skip-forward\" | \"player-stop\" | \"player-track-next\" | \"player-track-prev\" | \"plug-connected\" | \"plug\" | \"plus\" | \"power-ac\" | \"power-dc\" | \"power\" | \"presentation-analytics\" | \"presentation\" | \"printer\" | \"propeller\" | \"published\" | \"puzzle-2\" | \"puzzle\" | \"pylon\" | \"qrcode\" | \"quotes-open\" | \"quotes\" | \"radar\" | \"radio\" | \"radioactive\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt\" | \"recharging\" | \"recycle\" | \"refresh-alert\" | \"refresh-off\" | \"refresh\" | \"repeat-once\" | \"repeat\" | \"replace\" | \"report-analytics\" | \"report-medical\" | \"report-search\" | \"report\" | \"ripple-off\" | \"ripple\" | \"rocket\" | \"rotate-2\" | \"rotate-clockwise-2\" | \"rotate-clockwise\" | \"rotate-dot\" | \"rotate\" | \"router\" | \"ruler-measure\" | \"sailboat\" | \"satellite\" | \"scale\" | \"school\" | \"scissors\" | \"scooter-electric\" | \"screenshot\" | \"search\" | \"seeding\" | \"select\" | \"selector\" | \"send\" | \"server\" | \"settings\" | \"shape\" | \"share-2\" | \"share\" | \"shield-check\" | \"shield-lock\" | \"shield-off\" | \"shield-x\" | \"shield\" | \"ship-off\" | \"ship\" | \"shopping-cart\" | \"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-off\" | \"temperature\" | \"template\" | \"terminal\" | \"text-size\" | \"text\" | \"thumb-down\" | \"thumb-up\" | \"ticket\" | \"timeline\" | \"tir\" | \"tool\" | \"tools\" | \"train\" | \"trash-off\" | \"trash\" | \"tree\" | \"trees\" | \"truck-delivery\" | \"truck\" | \"umbrella\" | \"unlink\" | \"upload\" | \"user-circle\" | \"user-exclamation\" | \"user-minus\" | \"user-off\" | \"user-plus\" | \"user-worker\" | \"user\" | \"users\" | \"versions\" | \"video-minus\" | \"video-off\" | \"video-plus\" | \"video\" | \"volume-2\" | \"volume-3\" | \"wallet\" | \"wand\" | \"wave\" | \"waves\" | \"wifi-off\" | \"wifi\" | \"wind-direction\" | \"wind\" | \"windmill\" | \"wood\" | \"world-code\" | \"world\" | \"writing\" | \"x\" | \"zoom-reset\"",
                     "references": {
                         "IconName": {
                             "location": "import",

package/dist/collection/components/nv-notification/styles/nv-notification.css CHANGED Viewed

@@ -49,7 +49,7 @@ nv-notification [data-scope=container] [data-scope=content] [data-scope=heading]
   color: var(--components-notification-content-title);
   font-size: var(--notification-title-font-size);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: 20px; /* 142.857% */
 }
 nv-notification [data-scope=container] [data-scope=content] [data-scope=message] {
@@ -62,7 +62,7 @@ nv-notification [data-scope=container] [data-scope=content] [data-scope=message]
   font-variant-numeric: lining-nums tabular-nums slashed-zero;
   font-size: var(--font-size-sm, 14px);
   font-style: normal;
-  font-weight: 400;
+  font-weight: var(--font-weight-low-emphasis);
   line-height: var(--line-height-sm, 20px);
 }
 nv-notification [data-scope=container] [data-scope=content] [data-scope=actions] {

package/dist/collection/components/nv-popover/nv-popover.docs.js CHANGED Viewed

@@ -4,19 +4,23 @@ const NvPopoverDocs = {
     component: 'nv-popover',
     subcomponents: ['nv-button'],
     stories: [
+        // Default
         {
             name: 'Default',
             template: (h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Click Me"), h("p", { slot: "content" }, "This is a Click popover."))),
         },
+        // Open
         {
             name: nameof(x => x.open),
             args: { open: true },
             template: (h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Click Me"), h("p", { slot: "content" }, "This is a pre opened popover."))),
         },
+        // TriggerMode
         {
             name: nameof(x => x.triggerMode),
             template: (h("div", { "data-class": "flex gap-4 items-start" }, h("nv-popover", { "data-storybook-args": true, "trigger-mode": "hover" }, h("nv-button", { slot: "trigger" }, "Hover Me"), h("p", { slot: "content" }, "This is a Hover popover.")), h("nv-popover", { "data-storybook-args": true, "trigger-mode": "click" }, h("nv-button", { slot: "trigger" }, "Click Me"), h("p", { slot: "content" }, "This is a Click popover.")), h("nv-popover", { "data-storybook-args": true, "trigger-mode": "controlled", open: true }, h("nv-button", { slot: "trigger" }, "Controlled"), h("p", { slot: "content" }, "This is a Controlled popover.")))),
         },
+        // Placement
         {
             name: nameof(x => x.placement),
             args: {
@@ -24,6 +28,7 @@ const NvPopoverDocs = {
             },
             template: (h("div", { "data-class": "flex gap-4 items-start" }, h("nv-popover", { "data-storybook-args": true, placement: "top", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Top"), h("p", { slot: "content" }, "This is a Top popover.")), h("nv-popover", { "data-storybook-args": true, placement: "bottom" }, h("nv-button", { slot: "trigger" }, "Bottom"), h("p", { slot: "content" }, "This is a Bottom popover.")), h("nv-popover", { "data-storybook-args": true, placement: "left" }, h("nv-button", { slot: "trigger" }, "Left"), h("p", { slot: "content" }, "This is a Left popover.")), h("nv-popover", { "data-storybook-args": true, placement: "right" }, h("nv-button", { slot: "trigger" }, "Right"), h("p", { slot: "content" }, "This is a Right popover.")))),
         },
+        // GroupName
         {
             name: nameof(x => x.groupName),
             args: {
@@ -31,6 +36,7 @@ const NvPopoverDocs = {
             },
             template: (h("div", { "data-class": "flex gap-4 items-start" }, h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Popover 1"), h("p", { slot: "content" }, "This is a popover.")), h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Popover 2"), h("p", { slot: "content" }, "This is a popover.")), h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Popover 3"), h("p", { slot: "content" }, "This is a popover.")))),
         },
+        // Offset
         {
             name: nameof(x => x.offset),
             args: {
@@ -39,6 +45,7 @@ const NvPopoverDocs = {
             },
             template: (h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Offset"), h("p", { slot: "content" }, "This is a popover with 30px offset."))),
         },
+        // HasArrow
         {
             name: nameof(x => x.hasArrow),
             args: {
@@ -46,6 +53,7 @@ const NvPopoverDocs = {
             },
             template: (h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Arrow"), h("p", { slot: "content" }, "This is a popover with an arrow."))),
         },
+        // DisableFlip
         {
             name: nameof(x => x.disableFlip),
             args: {
@@ -53,6 +61,7 @@ const NvPopoverDocs = {
             },
             template: (h("div", { "data-class": "flex gap-4 items-start" }, h("nv-popover", { "data-storybook-args": true, "disable-flip": true, placement: "bottom", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Flip Off Placement Bottom"), h("p", { slot: "content" }, "This will always stay to the bottom.")), h("nv-popover", { "data-storybook-args": true, placement: "top", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Flip On Placement Top"), h("p", { slot: "content" }, "This could flip to the bottom.")), h("nv-popover", { "data-storybook-args": true, placement: "bottom", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Flip On Placement Bottom"), h("p", { slot: "content" }, "This could flip to the top.")))),
         },
+        // ShiftPadding
         {
             name: nameof(x => x.shiftPadding),
             args: {
@@ -60,6 +69,7 @@ const NvPopoverDocs = {
             },
             template: (h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Shift Padding"), h("p", { slot: "content" }, "This is a popover with 40px padding."))),
         },
+        // EnterDelay
         {
             name: nameof(x => x.enterDelay),
             args: {
@@ -68,6 +78,7 @@ const NvPopoverDocs = {
             },
             template: (h("nv-popover", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Hover me and wait 1s"), h("p", { slot: "content" }, "This is a popover with a 1s enter delay."))),
         },
+        // Strategy
         {
             name: nameof(x => x.strategy),
             template: (h("div", { "data-class": "flex gap-8 items-start" }, h("div", { "data-class": "relative" }, h("h4", { "data-class": "mb-2 text-sm font-medium" }, "Absolute Strategy (Default)"), h("div", { "data-class": "w-48 h-32 overflow-hidden border border-gray-300 rounded p-4" }, h("p", { "data-class": "mb-2 text-xs" }, "Scroll container with overflow hidden"), h("nv-popover", { "data-storybook-args": true, strategy: "absolute", placement: "right" }, h("nv-button", { slot: "trigger" }, "Absolute"), h("p", { slot: "content" }, "This popover uses absolute positioning and may be clipped by overflow containers.")))), h("div", { "data-class": "relative" }, h("h4", { "data-class": "mb-2 text-sm font-medium" }, "Fixed Strategy"), h("div", { "data-class": "w-48 h-32 overflow-hidden border border-gray-300 rounded p-4" }, h("p", { "data-class": "mb-2 text-xs" }, "Scroll container with overflow hidden"), h("nv-popover", { "data-storybook-args": true, strategy: "fixed", placement: "right" }, h("nv-button", { slot: "trigger" }, "Fixed"), h("p", { slot: "content" }, "This popover uses fixed positioning and breaks out of overflow containers.")))))),

package/dist/collection/components/nv-popover/nv-popover.docs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-popover.docs.js","sourceRoot":"","sources":["../../../src/components/nv-popover/nv-popover.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvPopoverDocs: NovaDocs<Components.NvPopover> = {\n component: 'nv-popover',\n subcomponents: ['nv-button'],\n stories: [\n {\n name: 'Default',\n template: (\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Click Me</nv-button>\n <p slot=\"content\">This is a Click popover.</p>\n </nv-popover>\n ),\n },\n {\n name: nameof<Components.NvPopover>(x => x.open),\n args: { open: true },\n template: (\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Click Me</nv-button>\n <p slot=\"content\">This is a pre opened popover.</p>\n </nv-popover>\n ),\n },\n {\n name: nameof<Components.NvPopover>(x => x.triggerMode),\n template: (\n <div data-class=\"flex gap-4 items-start\">\n <nv-popover data-storybook-args trigger-mode=\"hover\">\n <nv-button slot=\"trigger\">Hover Me</nv-button>\n <p slot=\"content\">This is a Hover popover.</p>\n </nv-popover>\n <nv-popover data-storybook-args trigger-mode=\"click\">\n <nv-button slot=\"trigger\">Click Me</nv-button>\n <p slot=\"content\">This is a Click popover.</p>\n </nv-popover>\n <nv-popover data-storybook-args trigger-mode=\"controlled\" open>\n <nv-button slot=\"trigger\">Controlled</nv-button>\n <p slot=\"content\">This is a Controlled popover.</p>\n </nv-popover>\n </div>\n ),\n },\n {\n name: nameof<Components.NvPopover>(x => x.placement),\n args: {\n hasArrow: true,\n },\n template: (\n <div data-class=\"flex gap-4 items-start\">\n <nv-popover data-storybook-args placement=\"top\" data-class=\"py-6\">\n <nv-button slot=\"trigger\">Top</nv-button>\n <p slot=\"content\">This is a Top popover.</p>\n </nv-popover>\n <nv-popover data-storybook-args placement=\"bottom\">\n <nv-button slot=\"trigger\">Bottom</nv-button>\n <p slot=\"content\">This is a Bottom popover.</p>\n </nv-popover>\n <nv-popover data-storybook-args placement=\"left\">\n <nv-button slot=\"trigger\">Left</nv-button>\n <p slot=\"content\">This is a Left popover.</p>\n </nv-popover>\n <nv-popover data-storybook-args placement=\"right\">\n <nv-button slot=\"trigger\">Right</nv-button>\n <p slot=\"content\">This is a Right popover.</p>\n </nv-popover>\n </div>\n ),\n },\n {\n name: nameof<Components.NvPopover>(x => x.groupName),\n args: {\n groupName: 'popover-group-1',\n },\n template: (\n <div data-class=\"flex gap-4 items-start\">\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Popover 1</nv-button>\n <p slot=\"content\">This is a popover.</p>\n </nv-popover>\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Popover 2</nv-button>\n <p slot=\"content\">This is a popover.</p>\n </nv-popover>\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Popover 3</nv-button>\n <p slot=\"content\">This is a popover.</p>\n </nv-popover>\n </div>\n ),\n },\n {\n name: nameof<Components.NvPopover>(x => x.offset),\n args: {\n offset: 30,\n placement: 'right',\n },\n template: (\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Offset</nv-button>\n <p slot=\"content\">This is a popover with 30px offset.</p>\n </nv-popover>\n ),\n },\n {\n name: nameof<Components.NvPopover>(x => x.hasArrow),\n args: {\n hasArrow: true,\n },\n template: (\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Arrow</nv-button>\n <p slot=\"content\">This is a popover with an arrow.</p>\n </nv-popover>\n ),\n },\n {\n name: nameof<Components.NvPopover>(x => x.disableFlip),\n args: {\n open: true,\n },\n template: (\n <div data-class=\"flex gap-4 items-start\">\n <nv-popover\n data-storybook-args\n disable-flip\n placement=\"bottom\"\n data-class=\"py-6\"\n >\n <nv-button slot=\"trigger\">Flip Off Placement Bottom</nv-button>\n <p slot=\"content\">This will always stay to the bottom.</p>\n </nv-popover>\n <nv-popover data-storybook-args placement=\"top\" data-class=\"py-6\">\n <nv-button slot=\"trigger\">Flip On Placement Top</nv-button>\n <p slot=\"content\">This could flip to the bottom.</p>\n </nv-popover>\n <nv-popover data-storybook-args placement=\"bottom\" data-class=\"py-6\">\n <nv-button slot=\"trigger\">Flip On Placement Bottom</nv-button>\n <p slot=\"content\">This could flip to the top.</p>\n </nv-popover>\n </div>\n ),\n },\n {\n name: nameof<Components.NvPopover>(x => x.shiftPadding),\n args: {\n shiftPadding: 40,\n },\n template: (\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Shift Padding</nv-button>\n <p slot=\"content\">This is a popover with 40px padding.</p>\n </nv-popover>\n ),\n },\n {\n name: nameof<Components.NvPopover>(x => x.enterDelay),\n args: {\n enterDelay: 1000,\n triggerMode: 'hover',\n },\n template: (\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Hover me and wait 1s</nv-button>\n <p slot=\"content\">This is a popover with a 1s enter delay.</p>\n </nv-popover>\n ),\n },\n {\n name: nameof<Components.NvPopover>(x => x.strategy),\n template: (\n <div data-class=\"flex gap-8 items-start\">\n <div data-class=\"relative\">\n <h4 data-class=\"mb-2 text-sm font-medium\">\n Absolute Strategy (Default)\n </h4>\n <div data-class=\"w-48 h-32 overflow-hidden border border-gray-300 rounded p-4\">\n <p data-class=\"mb-2 text-xs\">\n Scroll container with overflow hidden\n </p>\n <nv-popover\n data-storybook-args\n strategy=\"absolute\"\n placement=\"right\"\n >\n <nv-button slot=\"trigger\">Absolute</nv-button>\n <p slot=\"content\">\n This popover uses absolute positioning and may be clipped by\n overflow containers.\n </p>\n </nv-popover>\n </div>\n </div>\n <div data-class=\"relative\">\n <h4 data-class=\"mb-2 text-sm font-medium\">Fixed Strategy</h4>\n <div data-class=\"w-48 h-32 overflow-hidden border border-gray-300 rounded p-4\">\n <p data-class=\"mb-2 text-xs\">\n Scroll container with overflow hidden\n </p>\n <nv-popover\n data-storybook-args\n strategy=\"fixed\"\n placement=\"right\"\n >\n <nv-button slot=\"trigger\">Fixed</nv-button>\n <p slot=\"content\">\n This popover uses fixed positioning and breaks out of overflow\n containers.\n </p>\n </nv-popover>\n </div>\n </div>\n </div>\n ),\n },\n ],\n};\n\nexport default NvPopoverDocs;\n"]}
1	+ {"version":3,"file":"nv-popover.docs.js","sourceRoot":"","sources":["../../../src/components/nv-popover/nv-popover.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvPopoverDocs: NovaDocs<Components.NvPopover> = {\n component: 'nv-popover',\n subcomponents: ['nv-button'],\n stories: [\n // Default\n {\n name: 'Default',\n template: (\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Click Me</nv-button>\n <p slot=\"content\">This is a Click popover.</p>\n </nv-popover>\n ),\n },\n // Open\n {\n name: nameof<Components.NvPopover>(x => x.open),\n args: { open: true },\n template: (\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Click Me</nv-button>\n <p slot=\"content\">This is a pre opened popover.</p>\n </nv-popover>\n ),\n },\n // TriggerMode\n {\n name: nameof<Components.NvPopover>(x => x.triggerMode),\n template: (\n <div data-class=\"flex gap-4 items-start\">\n <nv-popover data-storybook-args trigger-mode=\"hover\">\n <nv-button slot=\"trigger\">Hover Me</nv-button>\n <p slot=\"content\">This is a Hover popover.</p>\n </nv-popover>\n <nv-popover data-storybook-args trigger-mode=\"click\">\n <nv-button slot=\"trigger\">Click Me</nv-button>\n <p slot=\"content\">This is a Click popover.</p>\n </nv-popover>\n <nv-popover data-storybook-args trigger-mode=\"controlled\" open>\n <nv-button slot=\"trigger\">Controlled</nv-button>\n <p slot=\"content\">This is a Controlled popover.</p>\n </nv-popover>\n </div>\n ),\n },\n // Placement\n {\n name: nameof<Components.NvPopover>(x => x.placement),\n args: {\n hasArrow: true,\n },\n template: (\n <div data-class=\"flex gap-4 items-start\">\n <nv-popover data-storybook-args placement=\"top\" data-class=\"py-6\">\n <nv-button slot=\"trigger\">Top</nv-button>\n <p slot=\"content\">This is a Top popover.</p>\n </nv-popover>\n <nv-popover data-storybook-args placement=\"bottom\">\n <nv-button slot=\"trigger\">Bottom</nv-button>\n <p slot=\"content\">This is a Bottom popover.</p>\n </nv-popover>\n <nv-popover data-storybook-args placement=\"left\">\n <nv-button slot=\"trigger\">Left</nv-button>\n <p slot=\"content\">This is a Left popover.</p>\n </nv-popover>\n <nv-popover data-storybook-args placement=\"right\">\n <nv-button slot=\"trigger\">Right</nv-button>\n <p slot=\"content\">This is a Right popover.</p>\n </nv-popover>\n </div>\n ),\n },\n // GroupName\n {\n name: nameof<Components.NvPopover>(x => x.groupName),\n args: {\n groupName: 'popover-group-1',\n },\n template: (\n <div data-class=\"flex gap-4 items-start\">\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Popover 1</nv-button>\n <p slot=\"content\">This is a popover.</p>\n </nv-popover>\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Popover 2</nv-button>\n <p slot=\"content\">This is a popover.</p>\n </nv-popover>\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Popover 3</nv-button>\n <p slot=\"content\">This is a popover.</p>\n </nv-popover>\n </div>\n ),\n },\n // Offset\n {\n name: nameof<Components.NvPopover>(x => x.offset),\n args: {\n offset: 30,\n placement: 'right',\n },\n template: (\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Offset</nv-button>\n <p slot=\"content\">This is a popover with 30px offset.</p>\n </nv-popover>\n ),\n },\n // HasArrow\n {\n name: nameof<Components.NvPopover>(x => x.hasArrow),\n args: {\n hasArrow: true,\n },\n template: (\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Arrow</nv-button>\n <p slot=\"content\">This is a popover with an arrow.</p>\n </nv-popover>\n ),\n },\n // DisableFlip\n {\n name: nameof<Components.NvPopover>(x => x.disableFlip),\n args: {\n open: true,\n },\n template: (\n <div data-class=\"flex gap-4 items-start\">\n <nv-popover\n data-storybook-args\n disable-flip\n placement=\"bottom\"\n data-class=\"py-6\"\n >\n <nv-button slot=\"trigger\">Flip Off Placement Bottom</nv-button>\n <p slot=\"content\">This will always stay to the bottom.</p>\n </nv-popover>\n <nv-popover data-storybook-args placement=\"top\" data-class=\"py-6\">\n <nv-button slot=\"trigger\">Flip On Placement Top</nv-button>\n <p slot=\"content\">This could flip to the bottom.</p>\n </nv-popover>\n <nv-popover data-storybook-args placement=\"bottom\" data-class=\"py-6\">\n <nv-button slot=\"trigger\">Flip On Placement Bottom</nv-button>\n <p slot=\"content\">This could flip to the top.</p>\n </nv-popover>\n </div>\n ),\n },\n // ShiftPadding\n {\n name: nameof<Components.NvPopover>(x => x.shiftPadding),\n args: {\n shiftPadding: 40,\n },\n template: (\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Shift Padding</nv-button>\n <p slot=\"content\">This is a popover with 40px padding.</p>\n </nv-popover>\n ),\n },\n // EnterDelay\n {\n name: nameof<Components.NvPopover>(x => x.enterDelay),\n args: {\n enterDelay: 1000,\n triggerMode: 'hover',\n },\n template: (\n <nv-popover data-storybook-args>\n <nv-button slot=\"trigger\">Hover me and wait 1s</nv-button>\n <p slot=\"content\">This is a popover with a 1s enter delay.</p>\n </nv-popover>\n ),\n },\n // Strategy\n {\n name: nameof<Components.NvPopover>(x => x.strategy),\n template: (\n <div data-class=\"flex gap-8 items-start\">\n <div data-class=\"relative\">\n <h4 data-class=\"mb-2 text-sm font-medium\">\n Absolute Strategy (Default)\n </h4>\n <div data-class=\"w-48 h-32 overflow-hidden border border-gray-300 rounded p-4\">\n <p data-class=\"mb-2 text-xs\">\n Scroll container with overflow hidden\n </p>\n <nv-popover\n data-storybook-args\n strategy=\"absolute\"\n placement=\"right\"\n >\n <nv-button slot=\"trigger\">Absolute</nv-button>\n <p slot=\"content\">\n This popover uses absolute positioning and may be clipped by\n overflow containers.\n </p>\n </nv-popover>\n </div>\n </div>\n <div data-class=\"relative\">\n <h4 data-class=\"mb-2 text-sm font-medium\">Fixed Strategy</h4>\n <div data-class=\"w-48 h-32 overflow-hidden border border-gray-300 rounded p-4\">\n <p data-class=\"mb-2 text-xs\">\n Scroll container with overflow hidden\n </p>\n <nv-popover\n data-storybook-args\n strategy=\"fixed\"\n placement=\"right\"\n >\n <nv-button slot=\"trigger\">Fixed</nv-button>\n <p slot=\"content\">\n This popover uses fixed positioning and breaks out of overflow\n containers.\n </p>\n </nv-popover>\n </div>\n </div>\n </div>\n ),\n },\n ],\n};\n\nexport default NvPopoverDocs;\n"]}