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

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

@@ -2,14 +2,20 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFielddropdownDocs = {
     component: 'nv-fielddropdown',
-    subcomponents: ['nv-fielddropdownitem', 'nv-avatar', 'nv-icon', 'nv-alert'],
+    subcomponents: [
+        'nv-fielddropdownitem',
+        'nv-avatar',
+        'nv-icon',
+        'nv-badge',
+        'nv-alert',
+    ],
     stories: [
         // Default
         {
             name: 'Default',
             template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { value: "item_1", label: "Item 1" }), h("nv-fielddropdownitem", { value: "item_2", label: "Item 2" }), h("nv-fielddropdownitem", { value: "item_3", label: "Item 3" }), h("nv-fielddropdownitem", { value: "disabled", label: "Item disabled", disabled: true })))),
         },
-        // Filterable
+        // filterable
         {
             name: nameof(x => x.filterable),
             args: {
@@ -18,7 +24,7 @@ const NvFielddropdownDocs = {
             },
             template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" }), h("nv-fielddropdownitem", { label: "Item 3" }), h("nv-fielddropdownitem", { label: "Item disabled", disabled: true })))),
         },
-        // Label
+        // label
         {
             name: nameof(x => x.label),
             args: {
@@ -26,7 +32,7 @@ const NvFielddropdownDocs = {
             },
             template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
         },
-        // Description
+        // description
         {
             name: nameof(x => x.description),
             args: {
@@ -35,7 +41,7 @@ const NvFielddropdownDocs = {
             },
             template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
         },
-        // Placeholder
+        // placeholder
         {
             name: nameof(x => x.placeholder),
             args: {
@@ -44,7 +50,7 @@ const NvFielddropdownDocs = {
             },
             template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
         },
-        // Disabled
+        // disabled
         {
             name: nameof(x => x.disabled),
             args: {
@@ -53,7 +59,7 @@ const NvFielddropdownDocs = {
             },
             template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
         },
-        // Required
+        // required
         {
             name: nameof(x => x.required),
             args: {
@@ -62,16 +68,16 @@ const NvFielddropdownDocs = {
             },
             template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
         },
-        // Dividers
+        // ariaRequiredAttr
         {
-            name: 'Dividers',
+            name: nameof(x => x.ariaRequiredAttr),
             args: {
-                label: 'Dropdown with dividers',
-                filterable: true,
+                label: 'Aria Required Dropdown',
+                ariaRequiredAttr: true,
             },
-            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("hr", null), h("nv-fielddropdownitem", { label: "Item 2" }), h("hr", null), h("nv-fielddropdownitem", { label: "Item 3" }), h("nv-fielddropdownitem", { label: "Item disabled", disabled: true })))),
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
         },
-        // Error
+        // error
         {
             name: nameof(x => x.error),
             args: {
@@ -80,7 +86,7 @@ const NvFielddropdownDocs = {
             },
             template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
         },
-        // ErrorDescription
+        // errorDescription
         {
             name: nameof(x => x.errorDescription),
             args: {
@@ -91,7 +97,7 @@ const NvFielddropdownDocs = {
             },
             template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
         },
-        // Fluid
+        // fluid
         {
             name: nameof(x => x.fluid),
             args: {
@@ -100,36 +106,7 @@ const NvFielddropdownDocs = {
             },
             template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
         },
-        // PreSelected
-        {
-            name: 'PreSelected',
-            args: {
-                label: 'Dropdown with Pre-selected Value',
-            },
-            template: (h("nv-fielddropdown", { "data-storybook-args": true, filterable: true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1", selected: true }), h("nv-fielddropdownitem", { label: "Item 2" }), h("nv-fielddropdownitem", { label: "Item 3" }), h("nv-fielddropdownitem", { label: "Item disabled", disabled: true })))),
-        },
-        // DefaultSlot
-        {
-            name: 'DefaultSlot',
-            args: {
-                label: 'DefaultSlot Dropdown',
-                description: 'This is a DefaultSlot dropdown.',
-                placeholder: 'Select an option...',
-            },
-            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { class: "flex gap-2", value: "AB" }, h("nv-avatar", { initials: "AB", size: "xs" }), h("span", null, "Custom Item Text 1")), h("nv-fielddropdownitem", { class: "flex gap-2", value: "CD" }, h("nv-avatar", { initials: "CD", size: "xs" }), h("span", null, "Custom Item Text 2")), h("nv-fielddropdownitem", { class: "flex gap-2", value: "EF" }, h("nv-avatar", { initials: "EF", size: "xs" }), h("span", null, "Custom Item Text 3"))))),
-        },
-        // DefaultSlotFiltereable
-        {
-            name: 'DefaultSlotFiltereable',
-            args: {
-                label: 'Default Slot Filtereable Dropdown',
-                description: 'This is a Default Slot Filtereable dropdown.',
-                placeholder: 'Select an option...',
-                filterable: true,
-            },
-            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { class: "flex gap-2", value: "AB" }, h("nv-avatar", { initials: "AB", size: "xs" }), h("span", null, "Custom Item Text 1")), h("nv-fielddropdownitem", { class: "flex gap-2", value: "CD" }, h("nv-avatar", { initials: "CD", size: "xs" }), h("span", null, "Custom Item Text 2")), h("nv-fielddropdownitem", { class: "flex gap-2", value: "EF" }, h("nv-avatar", { initials: "EF", size: "xs" }), h("span", null, "Custom Item Text 3"))))),
-        },
-        // Value
+        // value
         {
             name: nameof(x => x.value),
             args: {
@@ -138,7 +115,7 @@ const NvFielddropdownDocs = {
             },
             template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" }), h("nv-fielddropdownitem", { label: "Item 3" }), h("nv-fielddropdownitem", { label: "Item disabled", disabled: true })))),
         },
-        // Readonly
+        // readonly
         {
             name: nameof(x => x.readonly),
             args: {
@@ -147,7 +124,7 @@ const NvFielddropdownDocs = {
             },
             template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" }), h("nv-fielddropdownitem", { label: "Item 3" })))),
         },
-        // EmptyResult
+        // emptyResult
         {
             name: nameof(x => x.emptyResult),
             args: {
@@ -158,7 +135,7 @@ const NvFielddropdownDocs = {
             },
             template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
         },
-        // Autofocus
+        // autofocus
         {
             name: nameof(x => x.autofocus),
             args: {
@@ -167,38 +144,7 @@ const NvFielddropdownDocs = {
             },
             template: h("nv-fielddropdown", { "data-storybook-args": true }),
         },
-        // OptionsArray
-        {
-            name: 'OptionsArray',
-            args: {
-                label: 'Dropdown with Options Array',
-                options: [
-                    { label: 'Paris', value: 'paris' },
-                    { label: 'London', value: 'london' },
-                    { label: 'New York', value: 'ny' },
-                    { label: 'Tokyo', value: 'tokyo', disabled: true },
-                    { label: 'Berlin', value: 'berlin' },
-                ],
-            },
-            template: h("nv-fielddropdown", { "data-storybook-args": true }),
-        },
-        // OptionsArrayPreselected
-        {
-            name: 'OptionsArrayPreselected',
-            args: {
-                label: 'Preselected Item Using Options Array',
-                value: 'london',
-                options: [
-                    { label: 'Paris', value: 'paris' },
-                    { label: 'London', value: 'london' },
-                    { label: 'New York', value: 'ny' },
-                    { label: 'Tokyo', value: 'tokyo', disabled: true },
-                    { label: 'Berlin', value: 'berlin' },
-                ],
-            },
-            template: h("nv-fielddropdown", { "data-storybook-args": true }),
-        },
-        // MaxHeight
+        // maxHeight
         {
             name: nameof(x => x.maxHeight),
             args: {
@@ -207,7 +153,7 @@ const NvFielddropdownDocs = {
             },
             template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, Array.from({ length: 50 }).map((_, index) => (h("nv-fielddropdownitem", { label: `Item ${index + 1}`, value: `item-${index + 1}` })))))),
         },
-        // OpenOnSelect
+        // openOnSelect
         {
             name: nameof(x => x.openOnSelect),
             args: {
@@ -216,7 +162,7 @@ const NvFielddropdownDocs = {
             },
             template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" }), h("nv-fielddropdownitem", { label: "Item 3" })))),
         },
-        // ControlledFilter
+        // controlledFilter
         {
             name: nameof(x => x.controlledFilter),
             args: {
@@ -226,61 +172,79 @@ const NvFielddropdownDocs = {
             },
             template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" }), h("nv-fielddropdownitem", { label: "Item 3" })))),
         },
-        // DetachedItems
+        // inputId
         {
-            name: nameof(x => x.detached),
-            descriptionSource: 'nv-fielddropdownitem',
+            name: nameof(x => x.inputId),
+            description: 'Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated.',
             args: {
-                filterable: true,
+                label: 'Dropdown with Custom Input ID',
+                inputId: 'custom-dropdown-id',
             },
-            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" }), h("nv-fielddropdownitem", { label: "Item 3" }), h("nv-fielddropdownitem", { label: "Add More", detached: true })))),
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
         },
-        // FilterModeStrict
+        // name
         {
-            name: nameof(x => x.filterMode),
+            name: nameof(x => x.name),
+            description: 'Defines the name attribute of the input field, which is crucial for form submission.',
             args: {
-                label: 'Filter Mode: Strict',
+                label: 'Dropdown with Name',
+                name: 'dropdown-field',
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
+        },
+        // autocomplete
+        {
+            name: nameof(x => x.autocomplete),
+            description: "The autocomplete prop helps users fill out the input field faster by suggesting entries they've used before.",
+            args: {
+                label: 'Dropdown with Autocomplete',
+                autocomplete: 'on',
                 filterable: true,
-                filterMode: 'strict',
-                placeholder: 'Type "System" to search...',
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" })))),
+        },
+        // options
+        {
+            name: nameof(x => x.options),
+            description: 'List of options used to automatically generate dropdown items. This provides an alternative to using the slot manually.',
+            args: {
+                label: 'Dropdown with Options',
                 options: [
-                    { label: 'System Grid Controller', value: 'system-grid' },
-                    { label: 'Service Manager Pro', value: 'service-manager' },
-                    { label: 'Network Handler Advanced', value: 'network-handler' },
-                    { label: 'Database Manager', value: 'database' },
-                    { label: 'API Gateway Service', value: 'api-gateway' },
+                    { label: 'Option 1', value: 'option1' },
+                    { label: 'Option 2', value: 'option2' },
+                    { label: 'Option 3', value: 'option3', disabled: true },
                 ],
             },
-            description: 'Strict mode performs simple substring matching. The query "System" will match "System Grid Controller" because "system" is a substring of the label.',
             template: h("nv-fielddropdown", { "data-storybook-args": true }),
         },
-        // FilterModeSmart
+        // debounceDelay
         {
-            name: 'FilterModeSmart',
+            name: nameof(x => x.debounceDelay),
+            description: 'Delay in milliseconds before the search is triggered when typing in the filter input.',
             args: {
-                label: 'Filter Mode: Smart',
+                label: 'Dropdown with Debounce Delay',
                 filterable: true,
-                filterMode: 'smart',
-                placeholder: 'Type "Grid System" (reversed order)...',
-                options: [
-                    { label: 'System Grid Controller', value: 'system-grid' },
-                    { label: 'Service Manager Pro', value: 'service-manager' },
-                    { label: 'Network Handler Advanced', value: 'network-handler' },
-                    { label: 'Database Manager', value: 'database' },
-                    { label: 'API Gateway Service', value: 'api-gateway' },
-                ],
+                debounceDelay: 500,
             },
-            description: 'Smart mode is token-based and ignores word order. The query "Grid System" will match "System Grid Controller" because both tokens exist in the label.',
-            template: h("nv-fielddropdown", { "data-storybook-args": true }),
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" }), h("nv-fielddropdownitem", { label: "Item 3" })))),
         },
-        // FilterModeFuzzy
+        // detached
         {
-            name: 'FilterModeFuzzy',
+            name: nameof(x => x.detached),
+            descriptionSource: 'nv-fielddropdownitem',
             args: {
-                label: 'Filter Mode: Fuzzy',
                 filterable: true,
-                filterMode: 'fuzzy',
-                placeholder: 'Type "Sytem" (with typo)...',
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" }), h("nv-fielddropdownitem", { label: "Item 3" }), h("nv-fielddropdownitem", { label: "Add More", detached: true })))),
+        },
+        // FilterModeStrict
+        {
+            name: nameof(x => x.filterMode),
+            args: {
+                label: 'Filter Mode: Strict',
+                filterable: true,
+                filterMode: 'strict',
+                placeholder: 'Type "System" to search...',
                 options: [
                     { label: 'System Grid Controller', value: 'system-grid' },
                     { label: 'Service Manager Pro', value: 'service-manager' },
@@ -289,7 +253,7 @@ const NvFielddropdownDocs = {
                     { label: 'API Gateway Service', value: 'api-gateway' },
                 ],
             },
-            description: 'Fuzzy mode tolerates typos using Fuse.js. The query "Sytem" will match "System Grid Controller" despite the missing letter.',
+            description: 'Strict mode performs simple substring matching. The query "System" will match "System Grid Controller" because "system" is a substring of the label.',
             template: h("nv-fielddropdown", { "data-storybook-args": true }),
         },
         // FuzzyThreshold
@@ -377,6 +341,92 @@ const NvFielddropdownDocs = {
             description: 'Customizes the message shown when results are truncated. Use {shown} and {total} as placeholders. Type "item" to see more than 5 results and trigger the truncation message. **Note:** You can override the default localized message by providing a custom `truncatedResultsText` prop. If not provided, the component will automatically use a translation based on the browser locale or the `locale` prop.',
             template: h("nv-fielddropdown", { "data-storybook-args": true }),
         },
+        // Dividers
+        {
+            name: 'Dividers',
+            args: {
+                label: 'Dropdown with dividers',
+                filterable: true,
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("hr", null), h("nv-fielddropdownitem", { label: "Item 2" }), h("hr", null), h("nv-fielddropdownitem", { label: "Item 3" }), h("nv-fielddropdownitem", { label: "Item disabled", disabled: true })))),
+        },
+        // PreSelected
+        {
+            name: 'PreSelected',
+            args: {
+                label: 'Dropdown with Pre-selected Value',
+            },
+            template: (h("nv-fielddropdown", { "data-storybook-args": true, filterable: true }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1", selected: true }), h("nv-fielddropdownitem", { label: "Item 2" }), h("nv-fielddropdownitem", { label: "Item 3" }), h("nv-fielddropdownitem", { label: "Item disabled", disabled: true })))),
+        },
+        // OptionsArray
+        {
+            name: 'OptionsArray',
+            args: {
+                label: 'Dropdown with Options Array',
+                options: [
+                    { label: 'Paris', value: 'paris' },
+                    { label: 'London', value: 'london' },
+                    { label: 'New York', value: 'ny' },
+                    { label: 'Tokyo', value: 'tokyo', disabled: true },
+                    { label: 'Berlin', value: 'berlin' },
+                ],
+            },
+            template: h("nv-fielddropdown", { "data-storybook-args": true }),
+        },
+        // OptionsArrayPreselected
+        {
+            name: 'OptionsArrayPreselected',
+            args: {
+                label: 'Preselected Item Using Options Array',
+                value: 'london',
+                options: [
+                    { label: 'Paris', value: 'paris' },
+                    { label: 'London', value: 'london' },
+                    { label: 'New York', value: 'ny' },
+                    { label: 'Tokyo', value: 'tokyo', disabled: true },
+                    { label: 'Berlin', value: 'berlin' },
+                ],
+            },
+            template: h("nv-fielddropdown", { "data-storybook-args": true }),
+        },
+        // FilterModeSmart
+        {
+            name: 'FilterModeSmart',
+            args: {
+                label: 'Filter Mode: Smart',
+                filterable: true,
+                filterMode: 'smart',
+                placeholder: 'Type "Grid System" (reversed order)...',
+                options: [
+                    { label: 'System Grid Controller', value: 'system-grid' },
+                    { label: 'Service Manager Pro', value: 'service-manager' },
+                    { label: 'Network Handler Advanced', value: 'network-handler' },
+                    { label: 'Database Manager', value: 'database' },
+                    { label: 'API Gateway Service', value: 'api-gateway' },
+                ],
+            },
+            description: 'Smart mode is token-based and ignores word order. The query "Grid System" will match "System Grid Controller" because both tokens exist in the label.',
+            template: h("nv-fielddropdown", { "data-storybook-args": true }),
+        },
+        // FilterModeFuzzy
+        {
+            name: 'FilterModeFuzzy',
+            args: {
+                label: 'Filter Mode: Fuzzy',
+                filterable: true,
+                filterMode: 'fuzzy',
+                placeholder: 'Type "Sytem" (with typo)...',
+                options: [
+                    { label: 'System Grid Controller', value: 'system-grid' },
+                    { label: 'Service Manager Pro', value: 'service-manager' },
+                    { label: 'Network Handler Advanced', value: 'network-handler' },
+                    { label: 'Database Manager', value: 'database' },
+                    { label: 'API Gateway Service', value: 'api-gateway' },
+                ],
+            },
+            description: 'Fuzzy mode tolerates typos using Fuse.js. The query "Sytem" will match "System Grid Controller" despite the missing letter.',
+            template: h("nv-fielddropdown", { "data-storybook-args": true }),
+        },
         // Locale (i18n) - Documentation
         {
             name: 'LocaleI18nHowItWorks',
@@ -441,6 +491,48 @@ const NvFielddropdownDocs = {
             description: 'Forces German locale for the truncated results message. Type "produkt" to see more than 3 results. The message will be displayed in German: "{shown} von {total} Ergebnissen angezeigt — verfeinern Sie Ihre Suche".',
             template: h("nv-fielddropdown", { "data-storybook-args": true }),
         },
+        // SlotContent
+        {
+            name: 'SlotContent',
+            description: 'Use a <ul></ul> tag for the slot, and place <nv-dropdownitem> elements inside.',
+            template: (h("nv-fielddropdown", { label: "Dropdown with Content Slot" }, h("ul", { slot: "content" }, h("nv-fielddropdownitem", { class: "flex gap-2", value: "AB" }, h("nv-avatar", { initials: "AB", size: "xs" }), h("span", null, "Custom Item Text 1")), h("nv-fielddropdownitem", { class: "flex gap-2", value: "CD" }, h("nv-avatar", { initials: "CD", size: "xs" }), h("span", null, "Custom Item Text 2")), h("nv-fielddropdownitem", { class: "flex gap-2", value: "EF" }, h("nv-avatar", { initials: "EF", size: "xs" }), h("span", null, "Custom Item Text 3"))))),
+        },
+        // SlotLeadingInput
+        {
+            name: 'SlotLeadingInput',
+            description: 'Content to be placed before the input text, within the input container.',
+            template: (h("nv-fielddropdown", { label: "Dropdown with Leading Input" }, h("nv-badge", { slot: "leading-input", label: "Leading" }), h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" })))),
+        },
+        // SlotBeforeInput
+        {
+            name: 'SlotBeforeInput',
+            description: 'Content to be placed before the input text, outside the input container.',
+            template: (h("nv-fielddropdown", { label: "Dropdown with Before Input" }, h("nv-badge", { slot: "before-input", label: "Before" }), h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" })))),
+        },
+        // SlotAfterInput
+        {
+            name: 'SlotAfterInput',
+            description: 'Content to be placed after the input text, outside the input container.',
+            template: (h("nv-fielddropdown", { label: "Dropdown with After Input" }, h("nv-badge", { slot: "after-input", label: "After" }), h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" })))),
+        },
+        // SlotLabel
+        {
+            name: 'SlotLabel',
+            description: 'Content to be placed as the label, will override the label prop.',
+            template: (h("nv-fielddropdown", null, h("span", { slot: "label" }, "Custom ", h("strong", null, "Label")), h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" })))),
+        },
+        // SlotDescription
+        {
+            name: 'SlotDescription',
+            description: 'Content to be placed as the description, will override the description prop.',
+            template: (h("nv-fielddropdown", { label: "Dropdown with Description Slot" }, h("span", { slot: "description" }, "Custom ", h("em", null, "description"), " text"), h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" })))),
+        },
+        // SlotErrorDescription
+        {
+            name: 'SlotErrorDescription',
+            description: 'Content to be placed as the error description, will override the errorDescription prop.',
+            template: (h("nv-fielddropdown", { label: "Dropdown with Error Description Slot", error: true }, h("span", { slot: "error-description" }, "Custom ", h("strong", null, "error"), " message"), h("ul", { slot: "content" }, h("nv-fielddropdownitem", { label: "Item 1" }), h("nv-fielddropdownitem", { label: "Item 2" })))),
+        },
     ],
 };
 export default NvFielddropdownDocs;