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

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

@@ -17,7 +17,7 @@ const NvDialogDocs = {
             name: 'Default',
             template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"))),
         },
-        // Open
+        // open
         {
             name: nameof(x => x.open),
             args: {
@@ -25,7 +25,7 @@ const NvDialogDocs = {
             },
             template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"))),
         },
-        // Undismissable
+        // undismissable
         {
             name: nameof(x => x.undismissable),
             args: {
@@ -33,7 +33,7 @@ const NvDialogDocs = {
             },
             template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"))),
         },
-        // ClickOutside
+        // clickOutside
         {
             name: nameof(x => x.clickOutside),
             args: {
@@ -41,7 +41,7 @@ const NvDialogDocs = {
             },
             template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"))),
         },
-        // Full
+        // full
         {
             name: nameof(x => x.full),
             args: {
@@ -49,60 +49,111 @@ const NvDialogDocs = {
             },
             template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "The dialog will take the full width of the screen regardless of the content."))),
         },
-        // Heading
+        // triggerElement
+        {
+            name: nameof(x => x.triggerElement),
+            description: 'Internal: Accepts a reference to the DOM element acting as the popover trigger. This should be used when the slot for the trigger is not defined.',
+            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"))),
+        },
+        // headerElement
+        {
+            name: nameof(x => x.headerElement),
+            description: 'Internal: Accepts a reference to the DOM element acting as the header. This should be used when the slot for the header is not defined.',
+            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"))),
+        },
+        // footerElement
+        {
+            name: nameof(x => x.footerElement),
+            description: 'Internal: Accepts a reference to the DOM element acting as the footer. This should be used when the slot for the footer is not defined.',
+            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"))),
+        },
+        // controlled
+        {
+            name: nameof(x => x.controlled),
+            description: 'If true, the dialog visibility is managed manually through methods or the open prop.',
+            args: {
+                controlled: true,
+            },
+            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"))),
+        },
+        // heading
         {
             name: nameof(x => x.heading),
             descriptionSource: 'nv-dialogheader',
             template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("nv-dialogheader", { slot: "header", heading: "Dialog Heading" }), h("p", null, "Child Content"))),
         },
-        // Subheading
+        // subheading
         {
             name: nameof(x => x.subheading),
             descriptionSource: 'nv-dialogheader',
             template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("nv-dialogheader", { slot: "header", heading: "Dialog Heading", subheading: "Dialog Subheading" }), h("p", null, "Child Content"))),
         },
-        // LeadingIcon
+        // leadingIcon
         {
             name: nameof(x => x.leadingIcon),
             descriptionSource: 'nv-dialogfooter',
             template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("nv-dialogfooter", { slot: "footer", "leading-icon": "user" }))),
         },
-        // TrailingIcon
+        // trailingIcon
         {
             name: nameof(x => x.trailingIcon),
             descriptionSource: 'nv-dialogfooter',
             template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("nv-dialogfooter", { slot: "footer", "trailing-icon": "user" }))),
         },
-        // Danger
+        // danger
         {
             name: nameof(x => x.danger),
             descriptionSource: 'nv-dialogfooter',
             template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("nv-dialogfooter", { slot: "footer", danger: true }))),
         },
-        // CancelLabel
+        // cancelLabel
         {
             name: nameof(x => x.cancelLabel),
             descriptionSource: 'nv-dialogfooter',
             template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("nv-dialogfooter", { slot: "footer", "cancel-label": "Abbrechen" }))),
         },
-        // PrimaryLabel
+        // primaryLabel
         {
             name: nameof(x => x.primaryLabel),
             descriptionSource: 'nv-dialogfooter',
             template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("nv-dialogfooter", { slot: "footer", "submit-label": "Akzeptieren" }))),
         },
-        // Form
+        // form
         {
             name: nameof(x => x.form),
             descriptionSource: 'nv-dialogfooter',
             template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("form", { id: "test-form" }), h("nv-dialogfooter", { slot: "footer", form: "test-form" }))),
         },
-        // With popover elements
+        // WithPopoverElements
         {
             name: 'WithPopoverElements',
             description: 'The dialog can contain other form elements with popovers.',
             template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("div", { class: "flex flex-col gap-4" }, h("nv-fielddate", null), h("nv-fielddaterange", null)))),
         },
+        // SlotDefault
+        {
+            name: 'SlotDefault',
+            description: 'Body of the dialog.',
+            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("div", null, h("h3", null, "Default Slot Content"), h("p", null, "This is the main body content of the dialog.")))),
+        },
+        // SlotTrigger
+        {
+            name: 'SlotTrigger',
+            description: 'Content to be placed as the trigger, will override the trigger prop.',
+            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Custom Trigger Button"), h("p", null, "Child Content"))),
+        },
+        // SlotHeader
+        {
+            name: 'SlotHeader',
+            description: 'Content to be placed as the header, will override the header prop.',
+            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("nv-dialogheader", { slot: "header", heading: "Custom Header", subheading: "Custom subheading" }), h("p", null, "Child Content"))),
+        },
+        // SlotFooter
+        {
+            name: 'SlotFooter',
+            description: 'Content to be placed as the footer, will override the footer prop.',
+            template: (h("nv-dialog", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Dialog"), h("p", null, "Child Content"), h("nv-dialogfooter", { slot: "footer", "cancel-label": "Cancel", "submit-label": "Submit" }))),
+        },
     ],
 };
 export default NvDialogDocs;

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

@@ -1 +1 @@
-{"version":3,"file":"nv-dialog.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-dialog/nv-dialog.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 NvDialogDocs: NovaDocs<Components.NvDialog> = {\n  component: 'nv-dialog',\n  subcomponents: [\n    'nv-dialogheader',\n    'nv-dialogfooter',\n    'nv-button',\n    'nv-icon',\n    'nv-fielddate',\n    'nv-fielddaterange',\n  ],\n  composedComponents: ['nv-dialogheader', 'nv-dialogfooter'],\n\n  stories: [\n    // Default\n    {\n      name: 'Default',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // Open\n    {\n      name: nameof<Components.NvDialog>(x => x.open),\n      args: {\n        open: false,\n      },\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // Undismissable\n    {\n      name: nameof<Components.NvDialog>(x => x.undismissable),\n      args: {\n        undismissable: true,\n      },\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // ClickOutside\n    {\n      name: nameof<Components.NvDialog>(x => x.clickOutside),\n      args: {\n        clickOutside: true,\n      },\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // Full\n    {\n      name: nameof<Components.NvDialog>(x => x.full),\n      args: {\n        full: true,\n      },\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>\n            The dialog will take the full width of the screen regardless of the\n            content.\n          </p>\n        </nv-dialog>\n      ),\n    },\n    // Heading\n    {\n      name: nameof<Components.NvDialogheader>(x => x.heading),\n      descriptionSource: 'nv-dialogheader',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <nv-dialogheader\n            slot=\"header\"\n            heading=\"Dialog Heading\"\n          ></nv-dialogheader>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // Subheading\n    {\n      name: nameof<Components.NvDialogheader>(x => x.subheading),\n      descriptionSource: 'nv-dialogheader',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <nv-dialogheader\n            slot=\"header\"\n            heading=\"Dialog Heading\"\n            subheading=\"Dialog Subheading\"\n          ></nv-dialogheader>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // LeadingIcon\n    {\n      name: nameof<Components.NvDialogfooter>(x => x.leadingIcon),\n      descriptionSource: 'nv-dialogfooter',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n          <nv-dialogfooter slot=\"footer\" leading-icon=\"user\"></nv-dialogfooter>\n        </nv-dialog>\n      ),\n    },\n    // TrailingIcon\n    {\n      name: nameof<Components.NvDialogfooter>(x => x.trailingIcon),\n      descriptionSource: 'nv-dialogfooter',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n          <nv-dialogfooter slot=\"footer\" trailing-icon=\"user\"></nv-dialogfooter>\n        </nv-dialog>\n      ),\n    },\n    // Danger\n    {\n      name: nameof<Components.NvDialogfooter>(x => x.danger),\n      descriptionSource: 'nv-dialogfooter',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n          <nv-dialogfooter slot=\"footer\" danger></nv-dialogfooter>\n        </nv-dialog>\n      ),\n    },\n    // CancelLabel\n    {\n      name: nameof<Components.NvDialogfooter>(x => x.cancelLabel),\n      descriptionSource: 'nv-dialogfooter',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n          <nv-dialogfooter\n            slot=\"footer\"\n            cancel-label=\"Abbrechen\"\n          ></nv-dialogfooter>\n        </nv-dialog>\n      ),\n    },\n    // PrimaryLabel\n    {\n      name: nameof<Components.NvDialogfooter>(x => x.primaryLabel),\n      descriptionSource: 'nv-dialogfooter',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n          <nv-dialogfooter\n            slot=\"footer\"\n            submit-label=\"Akzeptieren\"\n          ></nv-dialogfooter>\n        </nv-dialog>\n      ),\n    },\n    // Form\n    {\n      name: nameof<Components.NvDialogfooter>(x => x.form),\n      descriptionSource: 'nv-dialogfooter',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <form id=\"test-form\"></form>\n          <nv-dialogfooter slot=\"footer\" form=\"test-form\"></nv-dialogfooter>\n        </nv-dialog>\n      ),\n    },\n    // With popover elements\n    {\n      name: 'WithPopoverElements',\n      description: 'The dialog can contain other form elements with popovers.',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n          <div class=\"flex flex-col gap-4\">\n            <nv-fielddate></nv-fielddate>\n            <nv-fielddaterange></nv-fielddaterange>\n          </div>\n        </nv-dialog>\n      ),\n    },\n  ],\n};\n\nexport default NvDialogDocs;\n"]}
+{"version":3,"file":"nv-dialog.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-dialog/nv-dialog.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 NvDialogDocs: NovaDocs<Components.NvDialog> = {\n  component: 'nv-dialog',\n  subcomponents: [\n    'nv-dialogheader',\n    'nv-dialogfooter',\n    'nv-button',\n    'nv-icon',\n    'nv-fielddate',\n    'nv-fielddaterange',\n  ],\n  composedComponents: ['nv-dialogheader', 'nv-dialogfooter'],\n\n  stories: [\n    // Default\n    {\n      name: 'Default',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // open\n    {\n      name: nameof<Components.NvDialog>(x => x.open),\n      args: {\n        open: false,\n      },\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // undismissable\n    {\n      name: nameof<Components.NvDialog>(x => x.undismissable),\n      args: {\n        undismissable: true,\n      },\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // clickOutside\n    {\n      name: nameof<Components.NvDialog>(x => x.clickOutside),\n      args: {\n        clickOutside: true,\n      },\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // full\n    {\n      name: nameof<Components.NvDialog>(x => x.full),\n      args: {\n        full: true,\n      },\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>\n            The dialog will take the full width of the screen regardless of the\n            content.\n          </p>\n        </nv-dialog>\n      ),\n    },\n    // triggerElement\n    {\n      name: nameof<Components.NvDialog>(x => x.triggerElement),\n      description:\n        'Internal: Accepts a reference to the DOM element acting as the popover trigger. This should be used when the slot for the trigger is not defined.',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // headerElement\n    {\n      name: nameof<Components.NvDialog>(x => x.headerElement),\n      description:\n        'Internal: Accepts a reference to the DOM element acting as the header. This should be used when the slot for the header is not defined.',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // footerElement\n    {\n      name: nameof<Components.NvDialog>(x => x.footerElement),\n      description:\n        'Internal: Accepts a reference to the DOM element acting as the footer. This should be used when the slot for the footer is not defined.',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // controlled\n    {\n      name: nameof<Components.NvDialog>(x => x.controlled),\n      description:\n        'If true, the dialog visibility is managed manually through methods or the open prop.',\n      args: {\n        controlled: true,\n      },\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // heading\n    {\n      name: nameof<Components.NvDialogheader>(x => x.heading),\n      descriptionSource: 'nv-dialogheader',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <nv-dialogheader\n            slot=\"header\"\n            heading=\"Dialog Heading\"\n          ></nv-dialogheader>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // subheading\n    {\n      name: nameof<Components.NvDialogheader>(x => x.subheading),\n      descriptionSource: 'nv-dialogheader',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <nv-dialogheader\n            slot=\"header\"\n            heading=\"Dialog Heading\"\n            subheading=\"Dialog Subheading\"\n          ></nv-dialogheader>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // leadingIcon\n    {\n      name: nameof<Components.NvDialogfooter>(x => x.leadingIcon),\n      descriptionSource: 'nv-dialogfooter',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n          <nv-dialogfooter slot=\"footer\" leading-icon=\"user\"></nv-dialogfooter>\n        </nv-dialog>\n      ),\n    },\n    // trailingIcon\n    {\n      name: nameof<Components.NvDialogfooter>(x => x.trailingIcon),\n      descriptionSource: 'nv-dialogfooter',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n          <nv-dialogfooter slot=\"footer\" trailing-icon=\"user\"></nv-dialogfooter>\n        </nv-dialog>\n      ),\n    },\n    // danger\n    {\n      name: nameof<Components.NvDialogfooter>(x => x.danger),\n      descriptionSource: 'nv-dialogfooter',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n          <nv-dialogfooter slot=\"footer\" danger></nv-dialogfooter>\n        </nv-dialog>\n      ),\n    },\n    // cancelLabel\n    {\n      name: nameof<Components.NvDialogfooter>(x => x.cancelLabel),\n      descriptionSource: 'nv-dialogfooter',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n          <nv-dialogfooter\n            slot=\"footer\"\n            cancel-label=\"Abbrechen\"\n          ></nv-dialogfooter>\n        </nv-dialog>\n      ),\n    },\n    // primaryLabel\n    {\n      name: nameof<Components.NvDialogfooter>(x => x.primaryLabel),\n      descriptionSource: 'nv-dialogfooter',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n          <nv-dialogfooter\n            slot=\"footer\"\n            submit-label=\"Akzeptieren\"\n          ></nv-dialogfooter>\n        </nv-dialog>\n      ),\n    },\n    // form\n    {\n      name: nameof<Components.NvDialogfooter>(x => x.form),\n      descriptionSource: 'nv-dialogfooter',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <form id=\"test-form\"></form>\n          <nv-dialogfooter slot=\"footer\" form=\"test-form\"></nv-dialogfooter>\n        </nv-dialog>\n      ),\n    },\n    // WithPopoverElements\n    {\n      name: 'WithPopoverElements',\n      description: 'The dialog can contain other form elements with popovers.',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n          <div class=\"flex flex-col gap-4\">\n            <nv-fielddate></nv-fielddate>\n            <nv-fielddaterange></nv-fielddaterange>\n          </div>\n        </nv-dialog>\n      ),\n    },\n    // SlotDefault\n    {\n      name: 'SlotDefault',\n      description: 'Body of the dialog.',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <div>\n            <h3>Default Slot Content</h3>\n            <p>This is the main body content of the dialog.</p>\n          </div>\n        </nv-dialog>\n      ),\n    },\n    // SlotTrigger\n    {\n      name: 'SlotTrigger',\n      description:\n        'Content to be placed as the trigger, will override the trigger prop.',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Custom Trigger Button</nv-button>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // SlotHeader\n    {\n      name: 'SlotHeader',\n      description:\n        'Content to be placed as the header, will override the header prop.',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <nv-dialogheader\n            slot=\"header\"\n            heading=\"Custom Header\"\n            subheading=\"Custom subheading\"\n          ></nv-dialogheader>\n          <p>Child Content</p>\n        </nv-dialog>\n      ),\n    },\n    // SlotFooter\n    {\n      name: 'SlotFooter',\n      description:\n        'Content to be placed as the footer, will override the footer prop.',\n      template: (\n        <nv-dialog data-storybook-args>\n          <nv-button slot=\"trigger\">Open Dialog</nv-button>\n          <p>Child Content</p>\n          <nv-dialogfooter\n            slot=\"footer\"\n            cancel-label=\"Cancel\"\n            submit-label=\"Submit\"\n          ></nv-dialogfooter>\n        </nv-dialog>\n      ),\n    },\n  ],\n};\n\nexport default NvDialogDocs;\n"]}

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

@@ -0,0 +1,114 @@
+/**
+* Scrollbar mixin for the Nova Design System
+* This mixin provides consistent scrollbar styling for components
+*
+* Usage:
+* @include scrollbar();
+*/
+nv-drawer dialog {
+  width: 100vw;
+  height: 100svh;
+  margin: 0;
+  max-height: unset;
+  max-width: unset;
+  padding: 0;
+  background: color-mix(in srgb, var(--components-overlay-background) 70%, transparent);
+  backdrop-filter: blur(4px);
+  border: none;
+}
+nv-drawer dialog[data-state=closed] {
+  pointer-events: none;
+}
+nv-drawer dialog[data-state=open] {
+  pointer-events: auto;
+}
+nv-drawer dialog.side-right .backdrop {
+  justify-content: flex-end;
+}
+nv-drawer dialog.side-right .content {
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
+}
+nv-drawer dialog.side-left .backdrop {
+  justify-content: flex-start;
+}
+nv-drawer dialog.side-left .content {
+  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
+}
+nv-drawer .backdrop {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+}
+nv-drawer .backdrop .content {
+  background: var(--color-level-00-background);
+  width: var(--drawer-width, min(90vw, 400px));
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+}
+nv-drawer .backdrop .content[data-side=left] {
+  border-top-right-radius: var(--drawer-radius-top-right, 0);
+  border-bottom-right-radius: var(--drawer-radius-bottom-right, 0);
+}
+nv-drawer .backdrop .content[data-side=right] {
+  border-top-left-radius: var(--drawer-radius-top-left, 0);
+  border-bottom-left-radius: var(--drawer-radius-bottom-left, 0);
+}
+nv-drawer .backdrop .content.size-sm {
+  width: clamp(var(--drawer-size-sm-min-width), var(--drawer-size-sm-width), var(--drawer-size-sm-max-width));
+}
+nv-drawer .backdrop .content.size-md {
+  width: clamp(var(--drawer-size-md-min-width), var(--drawer-size-md-width), var(--drawer-size-md-max-width));
+}
+nv-drawer .backdrop .content.size-lg {
+  width: clamp(var(--drawer-size-lg-min-width), var(--drawer-size-lg-width), var(--drawer-size-lg-max-width));
+}
+nv-drawer .backdrop .content.size-full {
+  width: var(--drawer-size-full-width);
+}
+nv-drawer .backdrop .content nv-button.close-button {
+  position: absolute;
+  top: var(--drawer-dismissible-position-top, var(--dialog-dismissible-position-top));
+  right: var(--drawer-dismissible-position-right, var(--dialog-dismissible-position-right));
+  z-index: 1;
+  display: flex;
+  padding: var(--button-sm-icon-button-padding);
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: var(--drawer-gap-y, 10px);
+}
+nv-drawer .backdrop .content .content-body::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+nv-drawer .backdrop .content .content-body::-webkit-scrollbar-track {
+  background-color: var(--color-level-10-background);
+  border-radius: 9999px;
+}
+nv-drawer .backdrop .content .content-body::-webkit-scrollbar-thumb {
+  background-color: var(--color-gray-200);
+  border-radius: 9999px;
+}
+nv-drawer .backdrop .content .content-body {
+  box-sizing: border-box;
+  padding: var(--drawer-padding-y, var(--dialog-body-padding-y)) var(--drawer-padding-x, var(--dialog-body-padding-x));
+  scrollbar-gutter: stable both-edges;
+  flex: 1;
+  overflow-y: auto;
+  width: 100%;
+  border-bottom: 1px solid var(--color-content-low-border);
+  /* text/md/regular */
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
+  font-size: var(--font-size-md);
+  font-style: normal;
+  font-weight: var(--font-weight-low-emphasis);
+  line-height: var(--line-height-base); /* 150% */
+  color: var(--color-content-medium-text);
+}
+nv-drawer .backdrop .content slot[name=footer]::slotted(*),
+nv-drawer .backdrop .content nv-drawerfooter {
+  padding-top: var(--spacing-4);
+}

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

@@ -0,0 +1,145 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvDrawerDocs = {
+    component: 'nv-drawer',
+    subcomponents: [
+        'nv-drawerheader',
+        'nv-drawerfooter',
+        'nv-button',
+        'nv-icon',
+        'nv-avatar',
+        'nv-fieldtext',
+        'nv-fieldselect',
+        'nv-fielddate',
+        'nv-fielddaterange',
+    ],
+    composedComponents: ['nv-drawerheader', 'nv-drawerfooter'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Drawer"), h("p", null, "Child Content"))),
+        },
+        {
+            name: nameof(x => x.open),
+            args: {
+                open: false,
+            },
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Drawer"), h("p", null, "Child Content"))),
+        },
+        {
+            name: nameof(x => x.undismissable),
+            args: {
+                undismissable: true,
+            },
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Drawer"), h("p", null, "Child Content"))),
+        },
+        {
+            name: nameof(x => x.clickOutside),
+            args: {
+                clickOutside: true,
+            },
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Drawer"), h("p", null, "Child Content"))),
+        },
+        {
+            name: nameof(x => x.side),
+            args: {
+                side: 'right',
+            },
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Drawer (Right)"), h("p", null, "This drawer slides in from the right side."))),
+        },
+        {
+            name: nameof(x => x.width),
+            args: {
+                width: '600px',
+            },
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Custom Width Drawer"), h("p", null, "This drawer has a custom width of 600px (overrides size)."))),
+        },
+        {
+            name: nameof(x => x.heading),
+            descriptionSource: 'nv-drawerheader',
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Drawer"), h("nv-drawerheader", { slot: "header", heading: "Drawer Heading" }), h("p", null, "Child Content"))),
+        },
+        {
+            name: nameof(x => x.subheading),
+            descriptionSource: 'nv-drawerheader',
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Drawer"), h("nv-drawerheader", { slot: "header", heading: "Drawer Heading", subheading: "Drawer Subheading" }), h("p", null, "Child Content"))),
+        },
+        {
+            name: nameof(x => x.leadingIcon),
+            descriptionSource: 'nv-drawerfooter',
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Drawer"), h("p", null, "Child Content"), h("nv-drawerfooter", { slot: "footer", "leading-icon": "user" }))),
+        },
+        {
+            name: nameof(x => x.trailingIcon),
+            descriptionSource: 'nv-drawerfooter',
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Drawer"), h("p", null, "Child Content"), h("nv-drawerfooter", { slot: "footer", "trailing-icon": "user" }))),
+        },
+        {
+            name: nameof(x => x.danger),
+            descriptionSource: 'nv-drawerfooter',
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Drawer"), h("p", null, "Child Content"), h("nv-drawerfooter", { slot: "footer", danger: true }))),
+        },
+        {
+            name: nameof(x => x.cancelLabel),
+            descriptionSource: 'nv-drawerfooter',
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Drawer"), h("p", null, "Child Content"), h("nv-drawerfooter", { slot: "footer", "cancel-label": "Abbrechen" }))),
+        },
+        {
+            name: nameof(x => x.primaryLabel),
+            descriptionSource: 'nv-drawerfooter',
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Drawer"), h("p", null, "Child Content"), h("nv-drawerfooter", { slot: "footer", "primary-label": "Akzeptieren" }))),
+        },
+        {
+            name: 'SideLeft',
+            args: {
+                side: 'left',
+            },
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Drawer (Left)"), h("p", null, "This drawer slides in from the left side."))),
+        },
+        {
+            name: 'SizeSmall',
+            args: {
+                size: 'sm',
+            },
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Small Drawer"), h("p", null, "This drawer uses responsive sizing with clamp() using CSS variables:", h("code", null, "--drawer-size-sm-min-width"), ",", ' ', h("code", null, "--drawer-size-sm-width"), ", and", ' ', h("code", null, "--drawer-size-sm-max-width"), "."))),
+        },
+        {
+            name: 'SizeMedium',
+            args: {
+                size: 'md',
+            },
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Medium Drawer"), h("p", null, "This drawer uses responsive sizing with clamp() using CSS variables:", h("code", null, "--drawer-size-md-min-width"), ",", ' ', h("code", null, "--drawer-size-md-width"), ", and", ' ', h("code", null, "--drawer-size-md-max-width"), " (default size)."))),
+        },
+        {
+            name: 'SizeLarge',
+            args: {
+                size: 'lg',
+            },
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Large Drawer"), h("p", null, "This drawer uses responsive sizing with clamp() using CSS variables:", h("code", null, "--drawer-size-lg-min-width"), ",", ' ', h("code", null, "--drawer-size-lg-width"), ", and", ' ', h("code", null, "--drawer-size-lg-max-width"), "."))),
+        },
+        {
+            name: 'SizeFull',
+            args: {
+                size: 'full',
+            },
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Full Drawer"), h("p", null, "This drawer uses the CSS variable", ' ', h("code", null, "--drawer-size-full-width"), " for full-width sizing (typically calculated as 100vw minus sidebar width when collapsed)."))),
+        },
+        {
+            name: 'WithPopoverElements',
+            description: 'The drawer can contain other form elements with popovers.',
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Drawer"), h("div", { class: "flex flex-col gap-4" }, h("nv-fielddate", null)))),
+        },
+        {
+            name: 'figmaExample',
+            description: 'Full layout example for testing with Figma design.',
+            template: (h("nv-drawer", { "data-storybook-args": true }, h("nv-button", { slot: "trigger" }, "Open Profile Drawer"), h("nv-drawerheader", { slot: "header" }, h("div", { class: "pt-6 px-6" }, h("div", { class: "flex items-start gap-4" }, h("div", null, h("nv-avatar", { src: "https://i.pravatar.cc/150?img=16", alt: "Profile picture", size: "xl" })), h("div", { class: "pb-1" }, h("div", { class: "text-2xl font-bold text-gray-900 mb-1" }, "Constance de la Chaze"), h("div", { class: "text-base text-gray-500 mb-6" }, "#conchita"))), h("div", { class: "flex justify-around -mx-6 px-6 pb-4 border-b border-gray-200" }, h("div", { class: "text-center flex-1" }, h("div", { class: "text-xs text-gray-400 mb-1" }, "Followers"), h("div", { class: "text-2xl font-bold text-gray-900" }, "2134")), h("div", { class: "w-px h-[60px] bg-gray-200 mx-2" }), h("div", { class: "text-center flex-1" }, h("div", { class: "text-xs text-gray-400 mb-1" }, "Following"), h("div", { class: "text-2xl font-bold text-gray-900" }, "345")), h("div", { class: "w-px h-[60px] bg-gray-200 mx-2" }), h("div", { class: "text-center flex-1" }, h("div", { class: "text-xs text-gray-400 mb-1" }, "Posts"), h("div", { class: "text-2xl font-bold text-gray-900" }, "129")), h("div", { class: "w-px h-[60px] bg-gray-200 mx-2" }), h("div", { class: "text-center flex-1" }, h("div", { class: "text-xs text-gray-400 mb-1" }, "Collections"), h("div", { class: "text-2xl font-bold text-gray-900" }, "24"))))), h("div", { class: "px-6 py-6 flex flex-col gap-4" }, h("div", { class: "grid grid-cols-2 gap-4" }, h("nv-fieldtext", { fluid: true, autofocus: true, label: "First name", value: "Constance", placeholder: "Enter first name" }), h("nv-fieldtext", { fluid: true, label: "Last name", value: "de la Chazi\u00E8re", placeholder: "Enter last name" })), h("nv-fieldtext", { fluid: true, label: "Username", value: "conchita", placeholder: "Enter username" }, h("span", { slot: "prefix", class: "text-gray-500" }, "energy.com/")), h("nv-fieldtext", { fluid: true, label: "Email", type: "email", value: "Constance@energy.com", placeholder: "Enter email" }, h("nv-icon", { slot: "prefix", name: "mail", size: "sm" })), h("div", { class: "grid grid-cols-[120px_1fr] gap-4" }, h("nv-fieldselect", { fluid: true, label: "Prefix", value: "+32" }, h("option", { value: "+32" }, "+32"), h("option", { value: "+33" }, "+33"), h("option", { value: "+1" }, "+1"), h("option", { value: "+44" }, "+44")), h("nv-fieldtext", { fluid: true, label: "Phone", type: "tel", value: "0486 54 32 10", placeholder: "Enter phone number" })), h("nv-fieldtext", { fluid: true, label: "Address", value: "Rue de la Chance, 313", placeholder: "Enter address" }), h("div", { class: "grid grid-cols-2 gap-4" }, h("nv-fieldtext", { fluid: true, label: "City", value: "Schaerbeek", placeholder: "Enter city" }), h("nv-fieldtext", { fluid: true, label: "Zip Code", value: "1030", placeholder: "Enter zip code" })), h("nv-fieldselect", { fluid: true, label: "Country", value: "BE" }, h("option", { value: "BE" }, "Belgium"), h("option", { value: "FR" }, "France"), h("option", { value: "NL" }, "Netherlands"), h("option", { value: "DE" }, "Germany"))), h("nv-drawerfooter", { slot: "footer" }, h("nv-button", { emphasis: "lower", onClick: (e) => {
+                    const drawer = e.target.closest('nv-drawer');
+                    if (drawer) {
+                        drawer.close();
+                    }
+                } }, "Cancel"), h("nv-button", { emphasis: "high" }, "Save Changes")))),
+        },
+    ],
+};
+export default NvDrawerDocs;
+//# sourceMappingURL=nv-drawer.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-drawer.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-drawer/nv-drawer.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 NvDrawerDocs: NovaDocs<Components.NvDrawer> = {\n  component: 'nv-drawer',\n  subcomponents: [\n    'nv-drawerheader',\n    'nv-drawerfooter',\n    'nv-button',\n    'nv-icon',\n    'nv-avatar',\n    'nv-fieldtext',\n    'nv-fieldselect',\n    'nv-fielddate',\n    'nv-fielddaterange',\n  ],\n  composedComponents: ['nv-drawerheader', 'nv-drawerfooter'],\n\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Drawer</nv-button>\n          <p>Child Content</p>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: nameof<Components.NvDrawer>(x => x.open),\n      args: {\n        open: false,\n      },\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Drawer</nv-button>\n          <p>Child Content</p>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: nameof<Components.NvDrawer>(x => x.undismissable),\n      args: {\n        undismissable: true,\n      },\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Drawer</nv-button>\n          <p>Child Content</p>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: nameof<Components.NvDrawer>(x => x.clickOutside),\n      args: {\n        clickOutside: true,\n      },\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Drawer</nv-button>\n          <p>Child Content</p>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: nameof<Components.NvDrawer>(x => x.side),\n      args: {\n        side: 'right' as const,\n      },\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Drawer (Right)</nv-button>\n          <p>This drawer slides in from the right side.</p>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: nameof<Components.NvDrawer>(x => x.width),\n      args: {\n        width: '600px',\n      },\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Custom Width Drawer</nv-button>\n          <p>This drawer has a custom width of 600px (overrides size).</p>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: nameof<Components.NvDrawerheader>(x => x.heading),\n      descriptionSource: 'nv-drawerheader',\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Drawer</nv-button>\n          <nv-drawerheader\n            slot=\"header\"\n            heading=\"Drawer Heading\"\n          ></nv-drawerheader>\n          <p>Child Content</p>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: nameof<Components.NvDrawerheader>(x => x.subheading),\n      descriptionSource: 'nv-drawerheader',\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Drawer</nv-button>\n          <nv-drawerheader\n            slot=\"header\"\n            heading=\"Drawer Heading\"\n            subheading=\"Drawer Subheading\"\n          ></nv-drawerheader>\n          <p>Child Content</p>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: nameof<Components.NvDrawerfooter>(x => x.leadingIcon),\n      descriptionSource: 'nv-drawerfooter',\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Drawer</nv-button>\n          <p>Child Content</p>\n          <nv-drawerfooter slot=\"footer\" leading-icon=\"user\"></nv-drawerfooter>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: nameof<Components.NvDrawerfooter>(x => x.trailingIcon),\n      descriptionSource: 'nv-drawerfooter',\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Drawer</nv-button>\n          <p>Child Content</p>\n          <nv-drawerfooter slot=\"footer\" trailing-icon=\"user\"></nv-drawerfooter>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: nameof<Components.NvDrawerfooter>(x => x.danger),\n      descriptionSource: 'nv-drawerfooter',\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Drawer</nv-button>\n          <p>Child Content</p>\n          <nv-drawerfooter slot=\"footer\" danger></nv-drawerfooter>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: nameof<Components.NvDrawerfooter>(x => x.cancelLabel),\n      descriptionSource: 'nv-drawerfooter',\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Drawer</nv-button>\n          <p>Child Content</p>\n          <nv-drawerfooter\n            slot=\"footer\"\n            cancel-label=\"Abbrechen\"\n          ></nv-drawerfooter>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: nameof<Components.NvDrawerfooter>(x => x.primaryLabel),\n      descriptionSource: 'nv-drawerfooter',\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Drawer</nv-button>\n          <p>Child Content</p>\n          <nv-drawerfooter\n            slot=\"footer\"\n            primary-label=\"Akzeptieren\"\n          ></nv-drawerfooter>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: 'SideLeft',\n      args: {\n        side: 'left' as const,\n      },\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Drawer (Left)</nv-button>\n          <p>This drawer slides in from the left side.</p>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: 'SizeSmall',\n      args: {\n        size: 'sm' as const,\n      },\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Small Drawer</nv-button>\n          <p>\n            This drawer uses responsive sizing with clamp() using CSS variables:\n            <code>--drawer-size-sm-min-width</code>,{' '}\n            <code>--drawer-size-sm-width</code>, and{' '}\n            <code>--drawer-size-sm-max-width</code>.\n          </p>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: 'SizeMedium',\n      args: {\n        size: 'md' as const,\n      },\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Medium Drawer</nv-button>\n          <p>\n            This drawer uses responsive sizing with clamp() using CSS variables:\n            <code>--drawer-size-md-min-width</code>,{' '}\n            <code>--drawer-size-md-width</code>, and{' '}\n            <code>--drawer-size-md-max-width</code> (default size).\n          </p>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: 'SizeLarge',\n      args: {\n        size: 'lg' as const,\n      },\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Large Drawer</nv-button>\n          <p>\n            This drawer uses responsive sizing with clamp() using CSS variables:\n            <code>--drawer-size-lg-min-width</code>,{' '}\n            <code>--drawer-size-lg-width</code>, and{' '}\n            <code>--drawer-size-lg-max-width</code>.\n          </p>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: 'SizeFull',\n      args: {\n        size: 'full' as const,\n      },\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Full Drawer</nv-button>\n          <p>\n            This drawer uses the CSS variable{' '}\n            <code>--drawer-size-full-width</code> for full-width sizing\n            (typically calculated as 100vw minus sidebar width when collapsed).\n          </p>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: 'WithPopoverElements',\n      description: 'The drawer can contain other form elements with popovers.',\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Drawer</nv-button>\n          <div class=\"flex flex-col gap-4\">\n            <nv-fielddate></nv-fielddate>\n          </div>\n        </nv-drawer>\n      ),\n    },\n    {\n      name: 'figmaExample',\n      description: 'Full layout example for testing with Figma design.',\n      template: (\n        <nv-drawer data-storybook-args>\n          <nv-button slot=\"trigger\">Open Profile Drawer</nv-button>\n          <nv-drawerheader slot=\"header\">\n            {/* Banner */}\n            {/* Profile info */}\n            <div class=\"pt-6 px-6\">\n              <div class=\"flex items-start gap-4\">\n                <div>\n                  <nv-avatar\n                    src=\"https://i.pravatar.cc/150?img=16\"\n                    alt=\"Profile picture\"\n                    size=\"xl\"\n                  />\n                </div>\n\n                <div class=\"pb-1\">\n                  <div class=\"text-2xl font-bold text-gray-900 mb-1\">\n                    Constance de la Chaze\n                  </div>\n                  <div class=\"text-base text-gray-500 mb-6\">#conchita</div>\n                </div>\n              </div>\n\n              {/* Stats section */}\n              <div class=\"flex justify-around -mx-6 px-6 pb-4 border-b border-gray-200\">\n                <div class=\"text-center flex-1\">\n                  <div class=\"text-xs text-gray-400 mb-1\">Followers</div>\n                  <div class=\"text-2xl font-bold text-gray-900\">2134</div>\n                </div>\n                <div class=\"w-px h-[60px] bg-gray-200 mx-2\"></div>\n                <div class=\"text-center flex-1\">\n                  <div class=\"text-xs text-gray-400 mb-1\">Following</div>\n                  <div class=\"text-2xl font-bold text-gray-900\">345</div>\n                </div>\n                <div class=\"w-px h-[60px] bg-gray-200 mx-2\"></div>\n                <div class=\"text-center flex-1\">\n                  <div class=\"text-xs text-gray-400 mb-1\">Posts</div>\n                  <div class=\"text-2xl font-bold text-gray-900\">129</div>\n                </div>\n                <div class=\"w-px h-[60px] bg-gray-200 mx-2\"></div>\n                <div class=\"text-center flex-1\">\n                  <div class=\"text-xs text-gray-400 mb-1\">Collections</div>\n                  <div class=\"text-2xl font-bold text-gray-900\">24</div>\n                </div>\n              </div>\n            </div>\n          </nv-drawerheader>\n\n          {/* Form content */}\n          <div class=\"px-6 py-6 flex flex-col gap-4\">\n            {/* First name & Last name */}\n            <div class=\"grid grid-cols-2 gap-4\">\n              <nv-fieldtext\n                fluid\n                autofocus\n                label=\"First name\"\n                value=\"Constance\"\n                placeholder=\"Enter first name\"\n              />\n              <nv-fieldtext\n                fluid\n                label=\"Last name\"\n                value=\"de la Chazière\"\n                placeholder=\"Enter last name\"\n              />\n            </div>\n\n            {/* Username */}\n            <nv-fieldtext\n              fluid\n              label=\"Username\"\n              value=\"conchita\"\n              placeholder=\"Enter username\"\n            >\n              <span slot=\"prefix\" class=\"text-gray-500\">\n                energy.com/\n              </span>\n            </nv-fieldtext>\n\n            {/* Email */}\n            <nv-fieldtext\n              fluid\n              label=\"Email\"\n              type=\"email\"\n              value=\"Constance@energy.com\"\n              placeholder=\"Enter email\"\n            >\n              <nv-icon slot=\"prefix\" name=\"mail\" size=\"sm\" />\n            </nv-fieldtext>\n\n            {/* Phone */}\n            <div class=\"grid grid-cols-[120px_1fr] gap-4\">\n              <nv-fieldselect fluid label=\"Prefix\" value=\"+32\">\n                <option value=\"+32\">+32</option>\n                <option value=\"+33\">+33</option>\n                <option value=\"+1\">+1</option>\n                <option value=\"+44\">+44</option>\n              </nv-fieldselect>\n              <nv-fieldtext\n                fluid\n                label=\"Phone\"\n                type=\"tel\"\n                value=\"0486 54 32 10\"\n                placeholder=\"Enter phone number\"\n              />\n            </div>\n\n            {/* Address */}\n            <nv-fieldtext\n              fluid\n              label=\"Address\"\n              value=\"Rue de la Chance, 313\"\n              placeholder=\"Enter address\"\n            />\n\n            {/* City & Zip Code */}\n            <div class=\"grid grid-cols-2 gap-4\">\n              <nv-fieldtext\n                fluid\n                label=\"City\"\n                value=\"Schaerbeek\"\n                placeholder=\"Enter city\"\n              />\n              <nv-fieldtext\n                fluid\n                label=\"Zip Code\"\n                value=\"1030\"\n                placeholder=\"Enter zip code\"\n              />\n            </div>\n\n            {/* Country */}\n            <nv-fieldselect fluid label=\"Country\" value=\"BE\">\n              <option value=\"BE\">Belgium</option>\n              <option value=\"FR\">France</option>\n              <option value=\"NL\">Netherlands</option>\n              <option value=\"DE\">Germany</option>\n            </nv-fieldselect>\n          </div>\n\n          {/* Footer with action buttons */}\n          <nv-drawerfooter slot=\"footer\">\n            <nv-button\n              emphasis=\"lower\"\n              onClick={(e: MouseEvent) => {\n                const drawer = (e.target as HTMLElement).closest(\n                  'nv-drawer',\n                ) as HTMLNvDrawerElement;\n                if (drawer) {\n                  drawer.close();\n                }\n              }}\n            >\n              Cancel\n            </nv-button>\n            <nv-button emphasis=\"high\">Save Changes</nv-button>\n          </nv-drawerfooter>\n        </nv-drawer>\n      ),\n    },\n  ],\n};\n\nexport default NvDrawerDocs;\n"]}