@nova-design-system/nova-webcomponents 3.0.0-beta.17

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

@@ -0,0 +1,162 @@
+/* Variants */
+/* Define maps for color-related variables */
+/* Define maps for size-related variables */
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+nv-loader {
+  display: inline-block;
+  position: relative;
+  aspect-ratio: 1/1;
+  border-radius: 9999px;
+  color: inherit;
+}
+nv-loader.size-xs {
+  width: var(--loader-size-xs);
+  height: var(--loader-size-xs);
+}
+nv-loader.size-xs::before, nv-loader.size-xs::after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+}
+nv-loader.size-xs::before {
+  content: " ";
+  border: calc(var(--loader-size-xs) / 10) solid;
+  opacity: 0.3;
+}
+nv-loader.size-xs::after {
+  content: " ";
+  border-top: calc(var(--loader-size-xs) / 10) solid transparent;
+  border-left: calc(var(--loader-size-xs) / 10) solid transparent;
+  border-right: calc(var(--loader-size-xs) / 10) solid transparent;
+  border-bottom: calc(var(--loader-size-xs) / 10) solid;
+  animation: rotation 1s linear infinite;
+}
+nv-loader.size-sm {
+  width: var(--loader-size-sm);
+  height: var(--loader-size-sm);
+}
+nv-loader.size-sm::before, nv-loader.size-sm::after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+}
+nv-loader.size-sm::before {
+  content: " ";
+  border: calc(var(--loader-size-sm) / 10) solid;
+  opacity: 0.3;
+}
+nv-loader.size-sm::after {
+  content: " ";
+  border-top: calc(var(--loader-size-sm) / 10) solid transparent;
+  border-left: calc(var(--loader-size-sm) / 10) solid transparent;
+  border-right: calc(var(--loader-size-sm) / 10) solid transparent;
+  border-bottom: calc(var(--loader-size-sm) / 10) solid;
+  animation: rotation 1s linear infinite;
+}
+nv-loader.size-md {
+  width: var(--loader-size-md);
+  height: var(--loader-size-md);
+}
+nv-loader.size-md::before, nv-loader.size-md::after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+}
+nv-loader.size-md::before {
+  content: " ";
+  border: calc(var(--loader-size-md) / 10) solid;
+  opacity: 0.3;
+}
+nv-loader.size-md::after {
+  content: " ";
+  border-top: calc(var(--loader-size-md) / 10) solid transparent;
+  border-left: calc(var(--loader-size-md) / 10) solid transparent;
+  border-right: calc(var(--loader-size-md) / 10) solid transparent;
+  border-bottom: calc(var(--loader-size-md) / 10) solid;
+  animation: rotation 1s linear infinite;
+}
+nv-loader.size-lg {
+  width: var(--loader-size-lg);
+  height: var(--loader-size-lg);
+}
+nv-loader.size-lg::before, nv-loader.size-lg::after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+}
+nv-loader.size-lg::before {
+  content: " ";
+  border: calc(var(--loader-size-lg) / 10) solid;
+  opacity: 0.3;
+}
+nv-loader.size-lg::after {
+  content: " ";
+  border-top: calc(var(--loader-size-lg) / 10) solid transparent;
+  border-left: calc(var(--loader-size-lg) / 10) solid transparent;
+  border-right: calc(var(--loader-size-lg) / 10) solid transparent;
+  border-bottom: calc(var(--loader-size-lg) / 10) solid;
+  animation: rotation 1s linear infinite;
+}
+nv-loader.size-xl {
+  width: var(--loader-size-xl);
+  height: var(--loader-size-xl);
+}
+nv-loader.size-xl::before, nv-loader.size-xl::after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
+}
+nv-loader.size-xl::before {
+  content: " ";
+  border: calc(var(--loader-size-xl) / 10) solid;
+  opacity: 0.3;
+}
+nv-loader.size-xl::after {
+  content: " ";
+  border-top: calc(var(--loader-size-xl) / 10) solid transparent;
+  border-left: calc(var(--loader-size-xl) / 10) solid transparent;
+  border-right: calc(var(--loader-size-xl) / 10) solid transparent;
+  border-bottom: calc(var(--loader-size-xl) / 10) solid;
+  animation: rotation 1s linear infinite;
+}
+nv-loader.color-brand::before {
+  border-color: var(--components-loader-brand-background);
+  opacity: 1;
+}
+nv-loader.color-brand::after {
+  border-bottom-color: var(--components-loader-brand-foreground);
+}
+nv-loader.color-white::before {
+  border-color: var(--components-loader-white-background);
+  opacity: 1;
+}
+nv-loader.color-white::after {
+  border-bottom-color: var(--components-loader-white-foreground);
+}

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

@@ -0,0 +1,27 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvLoaderDocs = {
+    component: 'nv-loader',
+    stories: [
+        {
+            name: 'Default',
+            args: { color: 'white' },
+            template: h("nv-loader", { "data-storybook-args": true }),
+        },
+        {
+            name: nameof(x => x.size),
+            template: (h("div", { "data-class": "flex gap-4 items-center" }, h("nv-loader", { "data-storybook-args": true, size: "xs" }), h("nv-loader", { "data-storybook-args": true, size: "sm" }), h("nv-loader", { "data-storybook-args": true, size: "md" }), h("nv-loader", { "data-storybook-args": true, size: "lg" }), h("nv-loader", { "data-storybook-args": true, size: "xl" }))),
+        },
+        {
+            name: 'Emphasis',
+            description: 'Choose the emphasis of the loader to best fit your application’s needs, whether it’s a high emphasis loader for important actions or a low emphasis one for less important ones.',
+            template: (h("div", { "data-class": "flex gap-4 items-center" }, h("div", { "data-class": "bg-orange-500 p-4 inline-flex items-center" }, h("nv-loader", { "data-storybook-args": true, color: "brand" })), h("nv-loader", { "data-storybook-args": true, color: "white" }))),
+        },
+        {
+            name: nameof(x => x.color),
+            template: (h("div", { "data-class": "flex gap-4 text-green-500" }, h("nv-loader", { "data-storybook-args": true }))),
+        },
+    ],
+};
+export default NvLoaderDocs;
+//# sourceMappingURL=nv-loader.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-loader.docs.js","sourceRoot":"","sources":["../../../src/components/nv-loader/nv-loader.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,YAAY,GAAkC;IAClD,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;YACxB,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAC9C,QAAQ,EAAE,CACR,yBAAgB,yBAAyB;gBACvC,8CAA+B,IAAI,EAAC,IAAI,GAAa;gBACrD,8CAA+B,IAAI,EAAC,IAAI,GAAa;gBACrD,8CAA+B,IAAI,EAAC,IAAI,GAAa;gBACrD,8CAA+B,IAAI,EAAC,IAAI,GAAa;gBACrD,8CAA+B,IAAI,EAAC,IAAI,GAAa,CACjD,CACP;SACF;QACD;YACE,IAAI,EAAE,UAAU;YAChB,WAAW,EACT,kLAAkL;YACpL,QAAQ,EAAE,CACR,yBAAgB,yBAAyB;gBACvC,yBAAgB,4CAA4C;oBAC1D,8CAA+B,KAAK,EAAC,OAAO,GAAa,CACrD;gBACN,8CAA+B,KAAK,EAAC,OAAO,GAAa,CACrD,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YAC/C,QAAQ,EAAE,CACR,yBAAgB,2BAA2B;gBACzC,+CAA2C,CACvC,CACP;SACF;KACF;CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvLoaderDocs: NovaDocs<Components.NvLoader> = {\n  component: 'nv-loader',\n  stories: [\n    {\n      name: 'Default',\n      args: { color: 'white' },\n      template: <nv-loader data-storybook-args></nv-loader>,\n    },\n    {\n      name: nameof<Components.NvLoader>(x => x.size),\n      template: (\n        <div data-class=\"flex gap-4 items-center\">\n          <nv-loader data-storybook-args size=\"xs\"></nv-loader>\n          <nv-loader data-storybook-args size=\"sm\"></nv-loader>\n          <nv-loader data-storybook-args size=\"md\"></nv-loader>\n          <nv-loader data-storybook-args size=\"lg\"></nv-loader>\n          <nv-loader data-storybook-args size=\"xl\"></nv-loader>\n        </div>\n      ),\n    },\n    {\n      name: 'Emphasis',\n      description:\n        'Choose the emphasis of the loader to best fit your application’s needs, whether it’s a high emphasis loader for important actions or a low emphasis one for less important ones.',\n      template: (\n        <div data-class=\"flex gap-4 items-center\">\n          <div data-class=\"bg-orange-500 p-4 inline-flex items-center\">\n            <nv-loader data-storybook-args color=\"brand\"></nv-loader>\n          </div>\n          <nv-loader data-storybook-args color=\"white\"></nv-loader>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvLoader>(x => x.color),\n      template: (\n        <div data-class=\"flex gap-4 text-green-500\">\n          <nv-loader data-storybook-args></nv-loader>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvLoaderDocs;\n"]}

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

@@ -0,0 +1,78 @@
+import { Host, h } from "@stencil/core";
+import clsx from "clsx";
+export class NvLoader {
+    constructor() {
+        this.size = 'md';
+        this.color = undefined;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region RENDER
+    /* <slot> empty to force rendering change */
+    render() {
+        return (h(Host, { key: 'b4c0dab3c3ea4e2bdd434d779d4b736577bd467e', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+    }
+    static get is() { return "nv-loader"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-loader.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-loader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${SemanticSizes}`",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "SemanticSizes": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::SemanticSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Choose the size of the loader to best fit your application\u2019s needs, whether\nit\u2019s a small spinner for subtle loading indicators or a large one for more\nprominent displays."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'md'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "`${LoaderColors}`",
+                    "resolved": "\"brand\" | \"white\"",
+                    "references": {
+                        "LoaderColors": {
+                            "location": "import",
+                            "path": "../../utils/constants",
+                            "id": "src/utils/constants.ts::LoaderColors"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Choose the color of the loader. Options are primary and white to keep the\ndesign consistent and ensure the loader stands out or blends in\nappropriately with your application\u2019s interface."
+                },
+                "attribute": "color",
+                "reflect": true
+            }
+        };
+    }
+}
+//# sourceMappingURL=nv-loader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-loader.js","sourceRoot":"","sources":["../../../src/components/nv-loader/nv-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,IAAI,MAAM,MAAM,CAAC;AASxB,MAAM,OAAO,QAAQ;;oBAUiB,IAAI;;;IAUxC,uBAAuB;IACvB,8EAA8E;IAC9E,gBAAgB;IAEhB,4CAA4C;IAC5C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,IAAI,IAAI,QAAQ,IAAI,CAAC,IAAI,EAAE,EAChC,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,CAAC,KAAK,EAAE,CACpC,GACK,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport { SemanticSizes, LoaderColors } from '../../utils/constants';\n\n@Component({\n  tag: 'nv-loader',\n  styleUrl: 'nv-loader.scss',\n  shadow: false,\n})\nexport class NvLoader {\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Choose the size of the loader to best fit your application’s needs, whether\n   * it’s a small spinner for subtle loading indicators or a large one for more\n   * prominent displays.\n   */\n  @Prop({ reflect: true })\n  readonly size: `${SemanticSizes}` = 'md';\n\n  /**\n   * Choose the color of the loader. Options are primary and white to keep the\n   * design consistent and ensure the loader stands out or blends in\n   * appropriately with your application’s interface.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${LoaderColors}`;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n\n  /* <slot> empty to force rendering change */\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.size && `size-${this.size}`,\n          this.color && `color-${this.color}`,\n        )}\n      ></Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,61 @@
+nv-menuitem {
+  display: flex;
+  align-items: center;
+  max-width: 300px;
+  width: 100vw;
+  font-size: var(--menu-contextual-item-font-size);
+  font-weight: var(--menu-contextual-item-font-weight);
+  color: var(--components-menu-contextual-item-content);
+  border-radius: var(--menu-contextual-item-radius);
+  gap: var(--menu-contextual-item-gap-x);
+  padding: var(--menu-contextual-item-padding-y) var(--menu-contextual-item-padding-x);
+  transition: background-color 150ms ease-out;
+  cursor: pointer;
+}
+nv-menuitem:hover, nv-menuitem:focus, nv-menuitem:focus-within {
+  background-color: var(--components-menu-contextual-item-background-hover);
+  color: var(--components-menu-contextual-item-content-hover);
+}
+nv-menuitem kbd {
+  color: var(--components-menu-contextual-item-shortcut);
+}
+nv-menuitem [data-scope=text] {
+  margin-right: auto;
+}
+nv-menuitem[disabled]:not([disabled=false]) {
+  cursor: unset;
+  background-color: unset;
+  color: var(--components-menu-contextual-item-content-disabled);
+}
+
+nv-menu {
+  display: inline-block;
+  position: relative;
+}
+nv-menu:has([fluid]:not([fluid=false])) {
+  display: block;
+}
+nv-menu nv-popover {
+  display: unset;
+}
+nv-menu nv-popover [data-scope=popover] {
+  background-color: transparent !important;
+  padding: 0 !important;
+}
+nv-menu [slot=content] {
+  padding: var(--menu-contextual-padding-y) var(--menu-contextual-padding-x);
+  border-radius: var(--menu-contextual-radius);
+  gap: var(--menu-contextual-gap-y);
+  background-color: var(--components-menu-contextual-background);
+  border-color: var(--components-menu-contextual-border);
+  display: flex;
+  flex-direction: column;
+}
+nv-menu nv-menu[open]:not([open=false]) > nv-menuitem {
+  background-color: var(--components-menu-contextual-item-background-hover);
+  color: var(--components-menu-contextual-item-content-hover);
+}
+nv-menu hr {
+  display: block;
+  margin: var(--menu-contextual-divider-padding-top) var(--menu-contextual-divider-padding-x) var(--menu-contextual-divider-padding-bottom) var(--menu-contextual-divider-padding-x);
+}

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

@@ -0,0 +1,40 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvMenuDocs = {
+    component: 'nv-menu',
+    subcomponents: ['nv-menuitem', 'nv-iconbutton'],
+    composedComponents: ['nv-menuitem'],
+    stories: [
+        {
+            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" }, "User settings"), h("nv-menuitem", { icon: "bulb", shortcut: "\u2318F", id: "find-all-items" }, "Find all items")))),
+        },
+        {
+            name: nameof(x => x.open),
+            args: {
+                open: true,
+            },
+            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" }, "User settings"), h("nv-menuitem", { icon: "bulb", shortcut: "\u2318F", id: "find-all-items" }, "Find all items")))),
+        },
+        {
+            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 }, "This is disabled"), h("nv-menu", { nested: true }, h("nv-menuitem", { slot: "trigger", "has-submenu": true, icon: "cloud" }, "Cloud Functions"), h("ul", { slot: "content" }, h("nv-menuitem", { icon: "upload", id: "upload" }, "Upload"), h("nv-menuitem", { icon: "download", id: "download" }, "Download"), h("nv-menu", { nested: true }, h("nv-menuitem", { slot: "trigger", "has-submenu": true, icon: "engine" }, "Even more functions?"), h("ul", { slot: "content" }, h("nv-menuitem", { id: "deep" }, "So deep"), h("nv-menuitem", { id: "nav" }, "Have you tried keyboard navigation?")))))))),
+        },
+        {
+            name: nameof(x => x.disableCloseOnSelect),
+            args: {
+                disableCloseOnSelect: true,
+            },
+            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" }, "Select Me, I won't close"), h("nv-menuitem", { icon: "activity", id: "no-close-either" }, "Me neither")))),
+        },
+        {
+            name: nameof(x => x.placement),
+            args: {
+                placement: 'top-start',
+            },
+            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" }, "Where am I?")))),
+        },
+    ],
+};
+export default NvMenuDocs;
+//# sourceMappingURL=nv-menu.docs.js.map

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

@@ -0,0 +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 icon=\"user\" shortcut=\"&#8984;K\" id=\"user-settings\">\n              User settings\n            </nv-menuitem>\n            <nv-menuitem icon=\"bulb\" shortcut=\"&#8984;F\" id=\"find-all-items\">\n              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 icon=\"user\" shortcut=\"&#8984;K\" id=\"user-settings\">\n              User settings\n            </nv-menuitem>\n            <nv-menuitem icon=\"bulb\" shortcut=\"&#8984;F\" id=\"find-all-items\">\n              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=\"&#8984;U\"\n              id=\"up\"\n              disabled\n            >\n              This is disabled\n            </nv-menuitem>\n            <nv-menu nested>\n              <nv-menuitem slot=\"trigger\" has-submenu icon=\"cloud\">\n                Cloud Functions\n              </nv-menuitem>\n              <ul slot=\"content\">\n                <nv-menuitem icon=\"upload\" id=\"upload\">\n                  Upload\n                </nv-menuitem>\n                <nv-menuitem icon=\"download\" id=\"download\">\n                  Download\n                </nv-menuitem>\n                <nv-menu nested>\n                  <nv-menuitem slot=\"trigger\" has-submenu icon=\"engine\">\n                    Even more functions?\n                  </nv-menuitem>\n                  <ul slot=\"content\">\n                    <nv-menuitem id=\"deep\">So deep</nv-menuitem>\n                    <nv-menuitem id=\"nav\">\n                      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 icon=\"adjustments-up\" id=\"no-close\">\n              Select Me, I won't close\n            </nv-menuitem>\n            <nv-menuitem icon=\"activity\" id=\"no-close-either\">\n              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 icon=\"help\" id=\"help\">\n              Where am I?\n            </nv-menuitem>\n          </ul>\n        </nv-menu>\n      ),\n    },\n  ],\n};\n\nexport default NvMenuDocs;\n"]}