@nova-design-system/nova-webcomponents 3.23.0 → 3.24.0

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

@@ -5,38 +5,60 @@ const NvButtongroupDocs = {
     subcomponents: ['nv-button', 'nv-iconbutton', 'nv-menu', 'nv-menuitem'],
     badge: 'new',
     stories: [
+        // Default
         {
             name: 'Default',
             template: (h("nv-buttongroup", { "data-storybook-args": true }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button"))),
         },
+        // orientation
         {
             name: nameof(x => x.orientation),
             args: { orientation: 'vertical' },
             template: (h("nv-buttongroup", { "data-storybook-args": true }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button"))),
         },
+        // emphasis
         {
             name: nameof(x => x.emphasis),
             template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")))),
         },
+        // size
         {
             name: nameof(x => x.size),
             template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-buttongroup", { "data-storybook-args": true, size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")))),
         },
+        // fluid
+        {
+            name: nameof(x => x.fluid),
+            description: 'Allows the button group to stretch and fill the entire width of its container.',
+            args: {
+                fluid: true,
+            },
+            template: (h("nv-buttongroup", { "data-storybook-args": true }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button"))),
+        },
+        // Combobox
         {
             name: 'Combobox',
             description: 'A button group with a menu inside, you can also use popovers, tooltips, etc.',
             args: { emphasis: 'high' },
             template: (h("nv-buttongroup", null, h("nv-button", null, "Combo box"), h("nv-menu", { "data-storybook-args": true, "data-class": "pb-20" }, h("nv-iconbutton", { slot: "trigger", name: "menu" }), 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" }))))),
         },
+        // AllVerticalVariants
         {
             name: 'AllVerticalVariants',
             args: { orientation: 'vertical' },
             template: (h("div", { "data-class": "flex flex-col gap-4" }, h("div", { "data-class": "flex flex-wrap gap-4" }, h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high", size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium", size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low", size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower", size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button"))), h("div", { "data-class": "flex flex-wrap gap-4" }, h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high", size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium", size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low", size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower", size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button"))), h("div", { "data-class": "flex flex-wrap gap-4" }, h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high", size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium", size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low", size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower", size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button"))), h("div", { "data-class": "flex flex-wrap gap-4" }, h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high", size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium", size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low", size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower", size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button"))))),
         },
+        // AllHorizontalVariants
         {
             name: 'AllHorizontalVariants',
             template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high", size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium", size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low", size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower", size: "lg" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high", size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium", size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low", size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower", size: "md" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high", size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium", size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low", size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower", size: "sm" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "high", size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "medium", size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "low", size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")), h("nv-buttongroup", { "data-storybook-args": true, emphasis: "lower", size: "xs" }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button")))),
         },
+        // SlotDefault
+        {
+            name: 'SlotDefault',
+            description: 'Child buttons or links.',
+            template: (h("nv-buttongroup", { "data-storybook-args": true }, h("nv-button", null, "First Button"), h("nv-button", null, "Middle Button"), h("nv-button", null, "Last Button"))),
+        },
     ],
 };
 export default NvButtongroupDocs;

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

@@ -1 +1 @@
-{"version":3,"file":"nv-buttongroup.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-buttongroup/nv-buttongroup.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 NvButtongroupDocs: NovaDocs<Components.NvButtongroup> = {\n  component: 'nv-buttongroup',\n  subcomponents: ['nv-button', 'nv-iconbutton', 'nv-menu', 'nv-menuitem'],\n  badge: 'new',\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-buttongroup data-storybook-args>\n          <nv-button>First Button</nv-button>\n          <nv-button>Middle Button</nv-button>\n          <nv-button>Last Button</nv-button>\n        </nv-buttongroup>\n      ),\n    },\n    {\n      name: nameof<Components.NvButtongroup>(x => x.orientation),\n      args: { orientation: 'vertical' },\n      template: (\n        <nv-buttongroup data-storybook-args>\n          <nv-button>First Button</nv-button>\n          <nv-button>Middle Button</nv-button>\n          <nv-button>Last Button</nv-button>\n        </nv-buttongroup>\n      ),\n    },\n    {\n      name: nameof<Components.NvButtongroup>(x => x.emphasis),\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <nv-buttongroup data-storybook-args emphasis=\"high\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"medium\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"low\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"lower\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvButtongroup>(x => x.size),\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <nv-buttongroup data-storybook-args size=\"xs\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args size=\"sm\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args size=\"md\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args size=\"lg\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n        </div>\n      ),\n    },\n    {\n      name: 'Combobox',\n      description:\n        'A button group with a menu inside, you can also use popovers, tooltips, etc.',\n      args: { emphasis: 'high' },\n      template: (\n        <nv-buttongroup>\n          <nv-button>Combo box</nv-button>\n          <nv-menu data-storybook-args data-class=\"pb-20\">\n            <nv-iconbutton slot=\"trigger\" name=\"menu\"></nv-iconbutton>\n            <ul slot=\"content\">\n              <nv-menuitem\n                icon=\"user\"\n                shortcut=\"&#8984;K\"\n                id=\"user-settings\"\n                label=\"User settings\"\n              ></nv-menuitem>\n              <nv-menuitem\n                icon=\"bulb\"\n                shortcut=\"&#8984;F\"\n                id=\"find-all-items\"\n                label=\"Find all items\"\n              ></nv-menuitem>\n            </ul>\n          </nv-menu>\n        </nv-buttongroup>\n      ),\n    },\n    {\n      name: 'AllVerticalVariants',\n      args: { orientation: 'vertical' },\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <div data-class=\"flex flex-wrap gap-4\">\n            <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"lg\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"lg\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"lg\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"lg\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n          </div>\n\n          <div data-class=\"flex flex-wrap gap-4\">\n            <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"md\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"md\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"md\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"md\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n          </div>\n\n          <div data-class=\"flex flex-wrap gap-4\">\n            <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"sm\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"sm\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"sm\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"sm\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n          </div>\n\n          <div data-class=\"flex flex-wrap gap-4\">\n            <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"xs\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"xs\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"xs\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"xs\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n          </div>\n        </div>\n      ),\n    },\n    {\n      name: 'AllHorizontalVariants',\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"lg\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"lg\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"lg\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"lg\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n\n          <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"md\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"md\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"md\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"md\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n\n          <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"sm\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"sm\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"sm\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"sm\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n\n          <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"xs\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"xs\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"xs\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"xs\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvButtongroupDocs;\n"]}
+{"version":3,"file":"nv-buttongroup.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-buttongroup/nv-buttongroup.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 NvButtongroupDocs: NovaDocs<Components.NvButtongroup> = {\n  component: 'nv-buttongroup',\n  subcomponents: ['nv-button', 'nv-iconbutton', 'nv-menu', 'nv-menuitem'],\n  badge: 'new',\n  stories: [\n    // Default\n    {\n      name: 'Default',\n      template: (\n        <nv-buttongroup data-storybook-args>\n          <nv-button>First Button</nv-button>\n          <nv-button>Middle Button</nv-button>\n          <nv-button>Last Button</nv-button>\n        </nv-buttongroup>\n      ),\n    },\n    // orientation\n    {\n      name: nameof<Components.NvButtongroup>(x => x.orientation),\n      args: { orientation: 'vertical' },\n      template: (\n        <nv-buttongroup data-storybook-args>\n          <nv-button>First Button</nv-button>\n          <nv-button>Middle Button</nv-button>\n          <nv-button>Last Button</nv-button>\n        </nv-buttongroup>\n      ),\n    },\n    // emphasis\n    {\n      name: nameof<Components.NvButtongroup>(x => x.emphasis),\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <nv-buttongroup data-storybook-args emphasis=\"high\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"medium\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"low\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"lower\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n        </div>\n      ),\n    },\n    // size\n    {\n      name: nameof<Components.NvButtongroup>(x => x.size),\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <nv-buttongroup data-storybook-args size=\"xs\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args size=\"sm\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args size=\"md\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args size=\"lg\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n        </div>\n      ),\n    },\n    // fluid\n    {\n      name: nameof<Components.NvButtongroup>(x => x.fluid),\n      description:\n        'Allows the button group to stretch and fill the entire width of its container.',\n      args: {\n        fluid: true,\n      },\n      template: (\n        <nv-buttongroup data-storybook-args>\n          <nv-button>First Button</nv-button>\n          <nv-button>Middle Button</nv-button>\n          <nv-button>Last Button</nv-button>\n        </nv-buttongroup>\n      ),\n    },\n    // Combobox\n    {\n      name: 'Combobox',\n      description:\n        'A button group with a menu inside, you can also use popovers, tooltips, etc.',\n      args: { emphasis: 'high' },\n      template: (\n        <nv-buttongroup>\n          <nv-button>Combo box</nv-button>\n          <nv-menu data-storybook-args data-class=\"pb-20\">\n            <nv-iconbutton slot=\"trigger\" name=\"menu\"></nv-iconbutton>\n            <ul slot=\"content\">\n              <nv-menuitem\n                icon=\"user\"\n                shortcut=\"&#8984;K\"\n                id=\"user-settings\"\n                label=\"User settings\"\n              ></nv-menuitem>\n              <nv-menuitem\n                icon=\"bulb\"\n                shortcut=\"&#8984;F\"\n                id=\"find-all-items\"\n                label=\"Find all items\"\n              ></nv-menuitem>\n            </ul>\n          </nv-menu>\n        </nv-buttongroup>\n      ),\n    },\n    // AllVerticalVariants\n    {\n      name: 'AllVerticalVariants',\n      args: { orientation: 'vertical' },\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <div data-class=\"flex flex-wrap gap-4\">\n            <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"lg\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"lg\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"lg\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"lg\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n          </div>\n\n          <div data-class=\"flex flex-wrap gap-4\">\n            <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"md\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"md\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"md\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"md\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n          </div>\n\n          <div data-class=\"flex flex-wrap gap-4\">\n            <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"sm\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"sm\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"sm\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"sm\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n          </div>\n\n          <div data-class=\"flex flex-wrap gap-4\">\n            <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"xs\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"xs\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"xs\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n            <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"xs\">\n              <nv-button>First Button</nv-button>\n              <nv-button>Middle Button</nv-button>\n              <nv-button>Last Button</nv-button>\n            </nv-buttongroup>\n          </div>\n        </div>\n      ),\n    },\n    // AllHorizontalVariants\n    {\n      name: 'AllHorizontalVariants',\n      template: (\n        <div data-class=\"flex flex-col gap-4\">\n          <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"lg\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"lg\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"lg\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"lg\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n\n          <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"md\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"md\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"md\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"md\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n\n          <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"sm\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"sm\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"sm\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"sm\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n\n          <nv-buttongroup data-storybook-args emphasis=\"high\" size=\"xs\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"medium\" size=\"xs\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"low\" size=\"xs\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n          <nv-buttongroup data-storybook-args emphasis=\"lower\" size=\"xs\">\n            <nv-button>First Button</nv-button>\n            <nv-button>Middle Button</nv-button>\n            <nv-button>Last Button</nv-button>\n          </nv-buttongroup>\n        </div>\n      ),\n    },\n    // SlotDefault\n    {\n      name: 'SlotDefault',\n      description: 'Child buttons or links.',\n      template: (\n        <nv-buttongroup data-storybook-args>\n          <nv-button>First Button</nv-button>\n          <nv-button>Middle Button</nv-button>\n          <nv-button>Last Button</nv-button>\n        </nv-buttongroup>\n      ),\n    },\n  ],\n};\n\nexport default NvButtongroupDocs;\n"]}

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
 const toKebabCase = (str) => str
     .toLowerCase()
     .replace(/[^a-z0-9]+/g, '')
@@ -122,8 +123,220 @@ const NvCalendarDocs = {
     badge: 'beta',
     subcomponents: ['nv-button', 'nv-fieldtime'],
     stories: [
+        // Default
         {
-            name: 'all',
+            name: 'Default',
+            args: {
+                selectionType: 'single',
+                singleValue: '2025-03-15',
+                locale: 'en-US',
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // firstDayOfWeek
+        {
+            name: nameof(x => x.firstDayOfWeek),
+            description: 'First day of the week (0 = Sunday, 1 = Monday, etc.).',
+            args: {
+                firstDayOfWeek: 1,
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // numberOfCalendars
+        {
+            name: nameof(x => x.numberOfCalendars),
+            description: 'Number of calendars to display.',
+            args: {
+                numberOfCalendars: 2,
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // value
+        {
+            name: nameof(x => x.value),
+            description: 'Selected date value. For single mode: ISO date string. For range mode: comma-separated ISO date strings.',
+            args: {
+                selectionType: 'single',
+                value: '2025-03-15',
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // singleValue
+        {
+            name: nameof(x => x.singleValue),
+            description: 'Selected date (ISO string format), ex: "2025-03-15".',
+            args: {
+                selectionType: 'single',
+                singleValue: '2025-03-15',
+                locale: 'en-US',
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // rangeValue
+        {
+            name: nameof(x => x.rangeValue),
+            description: 'Selected date range format: { start: ISO string, end: ISO string }.',
+            args: {
+                selectionType: 'range',
+                rangeValue: {
+                    start: '2025-03-15',
+                    end: '2025-03-20',
+                },
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // min
+        {
+            name: nameof(x => x.min),
+            description: 'Minimum date for selection (ISO string format, ex: "2025-01-01").',
+            args: {
+                min: '2025-02-05',
+                singleValue: '2025-02-15',
+                dateFormat: 'YYYY-MM-DD',
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // max
+        {
+            name: nameof(x => x.max),
+            description: 'Maximum date for selection (ISO string format, ex: "2025-12-31").',
+            args: {
+                max: '2025-02-20',
+                singleValue: '2025-02-15',
+                dateFormat: 'YYYY-MM-DD',
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // disabledDates
+        {
+            name: nameof(x => x.disabledDates),
+            description: 'Disabled dates (ISO string array).',
+            args: {
+                selectionType: 'single',
+                singleValue: '2025-03-15',
+                locale: 'en-US',
+                dateFormat: 'YYYY-MM-DD',
+                disabledDates: ['2025-03-13', '2025-03-14', '2025-03-19', '2025-03-20'],
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // locale
+        {
+            name: nameof(x => x.locale),
+            description: 'Locale for date formatting.',
+            args: {
+                locale: 'fr-BE',
+                dateFormat: 'DD/MM/YYYY',
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // dateFormat
+        {
+            name: nameof(x => x.dateFormat),
+            description: 'Date format (ex: YYYY-MM-DD, DD-MM-YYYY, etc.).',
+            args: {
+                dateFormat: 'DD/MM/YYYY',
+                singleValue: '15/03/2025',
+                locale: 'en-US',
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // shortcutsPlacement
+        {
+            name: nameof(x => x.shortcutsPlacement),
+            description: 'Footer placement.',
+            args: {
+                selectionType: 'single',
+                locale: 'en-US',
+                dateFormat: 'YYYY-MM-DD',
+                shortcutsPlacement: 'right',
+                shortcuts: [
+                    {
+                        label: 'Today',
+                        singleValue: new Date().toISOString().split('T')[0],
+                    },
+                ],
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // selectionType
+        {
+            name: nameof(x => x.selectionType),
+            description: 'Selection type (single date or date range).',
+            args: {
+                selectionType: 'range',
+                rangeValue: {
+                    start: '2025-03-15',
+                    end: '2025-03-20',
+                },
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // showActions
+        {
+            name: nameof(x => x.showActions),
+            description: 'Show action buttons.',
+            args: {
+                showActions: true,
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // shortcuts
+        {
+            name: nameof(x => x.shortcuts),
+            description: 'Custom actions to display in the footer.',
+            args: {
+                selectionType: 'single',
+                locale: 'en-US',
+                dateFormat: 'YYYY-MM-DD',
+                shortcuts: [
+                    {
+                        label: 'Today',
+                        singleValue: new Date().toISOString().split('T')[0],
+                    },
+                    {
+                        label: 'Last week',
+                        singleValue: new Date(new Date().setDate(new Date().getDate() - 7))
+                            .toISOString()
+                            .split('T')[0],
+                    },
+                ],
+                shortcutsPlacement: 'bottom',
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // showWeekNumbers
+        {
+            name: nameof(x => x.showWeekNumbers),
+            description: 'Show week numbers.',
+            args: {
+                showWeekNumbers: true,
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // cancelLabel
+        {
+            name: nameof(x => x.cancelLabel),
+            description: 'Sets the label for the cancel button in actions.',
+            args: {
+                showActions: true,
+                cancelLabel: 'Abbrechen',
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // primaryLabel
+        {
+            name: nameof(x => x.primaryLabel),
+            description: 'Sets the label for the primary (OK) button in actions.',
+            args: {
+                showActions: true,
+                primaryLabel: 'Bestätigen',
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // RangeWithAllFeatures
+        {
+            name: 'RangeWithAllFeatures',
             args: {
                 selectionType: 'range',
                 rangeValue: {
@@ -182,8 +395,10 @@ const NvCalendarDocs = {
             },
             template: h("nv-calendar", { "data-storybook-args": true }),
         },
+        // SingleWithAllFeatures
         {
-            name: 'single',
+            name: 'SingleWithAllFeatures',
+            description: 'Calendar showing all features combined',
             args: {
                 selectionType: 'single',
                 singleValue: '2025-03-15',
@@ -191,8 +406,21 @@ const NvCalendarDocs = {
             },
             template: h("nv-calendar", { "data-storybook-args": true }),
         },
+        // Single
         {
-            name: 'range',
+            name: 'Single',
+            description: 'Calendar with single date selection',
+            args: {
+                selectionType: 'single',
+                singleValue: '2025-03-15',
+                locale: 'en-US',
+            },
+            template: h("nv-calendar", { "data-storybook-args": true }),
+        },
+        // Range
+        {
+            name: 'Range',
+            description: 'Calendar with date range selection',
             args: {
                 selectionType: 'range',
                 rangeValue: {
@@ -202,34 +430,43 @@ const NvCalendarDocs = {
             },
             template: h("nv-calendar", { "data-storybook-args": true }),
         },
+        // NumberOfCalendars
         {
-            name: 'numberOfCalendars',
+            name: 'NumberOfCalendars',
+            description: 'Display multiple calendars side by side',
             args: {
                 numberOfCalendars: 2,
             },
             template: h("nv-calendar", { "data-storybook-args": true }),
         },
+        // FirstDayOfWeek
         {
-            name: 'firstDayOfWeek',
+            name: 'FirstDayOfWeek',
+            description: 'Set the first day of the week',
             args: {
                 firstDayOfWeek: 1,
             },
             template: h("nv-calendar", { "data-storybook-args": true }),
         },
+        // ShowWeekNumbers
         {
-            name: 'showWeekNumbers',
+            name: 'ShowWeekNumbers',
+            description: 'Display week numbers in the calendar',
             args: {
                 showWeekNumbers: true,
             },
             template: h("nv-calendar", { "data-storybook-args": true }),
         },
+        // ShowActions
         {
-            name: 'showActions',
+            name: 'ShowActions',
+            description: 'Show action buttons at the bottom',
             args: {
                 showActions: true,
             },
             template: h("nv-calendar", { "data-storybook-args": true }),
         },
+        // MinMax
         {
             name: 'MinMax',
             args: {
@@ -243,6 +480,7 @@ const NvCalendarDocs = {
             },
             template: h("nv-calendar", { "data-storybook-args": true }),
         },
+        // ShortcutSingle
         {
             name: 'ShortcutSingle',
             args: {
@@ -271,6 +509,7 @@ const NvCalendarDocs = {
             },
             template: h("nv-calendar", { "data-storybook-args": true }),
         },
+        // ShortcutPlacement
         {
             name: 'ShortcutPlacement',
             args: {
@@ -299,6 +538,7 @@ const NvCalendarDocs = {
             },
             template: h("nv-calendar", { "data-storybook-args": true }),
         },
+        // ShortcutRange
         {
             name: 'ShortcutRange',
             args: {
@@ -351,6 +591,7 @@ const NvCalendarDocs = {
             },
             template: h("nv-calendar", { "data-storybook-args": true }),
         },
+        // WithDisabledDates
         {
             name: 'WithDisabledDates',
             args: {
@@ -362,6 +603,7 @@ const NvCalendarDocs = {
             },
             template: (h("div", null, h("p", { class: "text-center pb-4" }, "Calendar with specific disabled dates"), h("nv-calendar", { "data-storybook-args": true }))),
         },
+        // CulturalVariants
         {
             name: 'CulturalVariants',
             args: {
@@ -372,13 +614,7 @@ const NvCalendarDocs = {
             },
             template: (h("div", { class: "flex flex-wrap gap-4" }, h("div", null, h("p", { class: "text-center pb-4" }, "Cultural variants en-BE"), h("nv-calendar", { locale: "en-BE", dateFormat: "YYYY-MM-DD", "data-storybook-args": true })), h("div", null, h("p", { class: "text-center pb-4" }, "Cultural variants fr-BE"), h("nv-calendar", { locale: "fr-BE", dateFormat: "DD/MM/YYYY", "data-storybook-args": true })), h("div", null, h("p", { class: "text-center pb-4" }, "Cultural variants nl-BE"), h("nv-calendar", { locale: "nl-BE", dateFormat: "DD/MM/YYYY", "data-storybook-args": true })), h("div", null, h("p", { class: "text-center pb-4" }, "Cultural variants de-DE"), h("nv-calendar", { locale: "de-DE", dateFormat: "DD.MM.YYYY", "data-storybook-args": true })), h("div", null, h("p", { class: "text-center pb-4" }, "Cultural variants us-US"), h("nv-calendar", { locale: "us-US", dateFormat: "YYYY-MM-DD", "data-storybook-args": true })), h("div", null, h("p", { class: "text-center pb-4" }, "Cultural variants es-ES"), h("nv-calendar", { locale: "es-ES", dateFormat: "DD/MM/YYYY", "data-storybook-args": true })), h("div", null, h("p", { class: "text-center pb-4" }, "Cultural variants ru-RU"), h("nv-calendar", { locale: "ru-RU", dateFormat: "DD/MM/YYYY", "data-storybook-args": true })), h("div", null, h("p", { class: "text-center pb-4" }, "Cultural variants ja-JP"), h("nv-calendar", { locale: "ja-JP", dateFormat: "YYYY-MM-DD", "data-storybook-args": true })), h("div", null, h("p", { class: "text-center pb-4" }, "Cultural variants zh-CN"), h("nv-calendar", { locale: "zh-CN", dateFormat: "YYYY-MM-DD", "data-storybook-args": true })), h("div", null, h("p", { class: "text-center pb-4" }, "Cultural variants ko-KR"), h("nv-calendar", { locale: "ko-KR", dateFormat: "YYYY-MM-DD", "data-storybook-args": true })))),
         },
-        {
-            name: 'SlotActions',
-            args: {
-                showActions: true,
-            },
-            template: (h("nv-calendar", { "data-storybook-args": true }, h("div", { slot: "actions" }, h("nv-fieldtime", null)))),
-        },
+        // CustomActionLabels
         {
             name: 'CustomActionLabels',
             args: {
@@ -393,6 +629,25 @@ const NvCalendarDocs = {
             },
             template: (h("div", null, h("p", { class: "text-center pb-4" }, "Custom action button labels - \"Abbrechen\" and \"Best\u00E4tigen\""), h("nv-calendar", { "data-storybook-args": true }))),
         },
+        // SlotDefault
+        {
+            name: 'SlotDefault',
+            description: 'Child content of the component.',
+            args: {
+                selectionType: 'single',
+                singleValue: '2025-03-15',
+            },
+            template: (h("nv-calendar", { "data-storybook-args": true }, h("div", null, "Custom default slot content"))),
+        },
+        // SlotActions
+        {
+            name: 'SlotActions',
+            description: 'Child content for the actions area.',
+            args: {
+                showActions: true,
+            },
+            template: (h("nv-calendar", { "data-storybook-args": true }, h("div", { slot: "actions" }, h("nv-fieldtime", null)))),
+        },
         ...singleStories,
         ...rangeStories,
     ],