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

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

@@ -18,7 +18,7 @@ const NvFieldmultiselectDocs = {
             },
             template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", description: "Description for PHP", value: "php" }), h("nv-fielddropdownitemcheck", { label: "Java", description: "Description for Java", value: "java" }), h("nv-fielddropdownitemcheck", { label: "Javascript", description: "Description for Javascript", value: "javascript" }), h("nv-fielddropdownitemcheck", { label: "Item disabled", description: "Description for disabled item", disabled: true, value: "disabled" })))),
         },
-        // Label
+        // label
         {
             name: nameof(x => x.label),
             args: {
@@ -37,7 +37,7 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // InputId
+        // inputId
         {
             name: nameof(x => x.inputId),
             args: {
@@ -57,7 +57,7 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // Name
+        // name
         {
             name: nameof(x => x.name),
             args: {
@@ -77,7 +77,7 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // Description
+        // description
         {
             name: nameof(x => x.description),
             args: {
@@ -96,7 +96,7 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // Placeholder
+        // placeholder
         {
             name: nameof(x => x.placeholder),
             args: {
@@ -115,7 +115,7 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // Required
+        // required
         {
             name: nameof(x => x.required),
             args: {
@@ -135,7 +135,27 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // Readonly
+        // ariaRequiredAttr
+        {
+            name: nameof(x => x.ariaRequiredAttr),
+            args: {
+                label: 'Aria Required Multiselect',
+                ariaRequiredAttr: true,
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // readonly
         {
             name: nameof(x => x.readonly),
             args: {
@@ -155,7 +175,7 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // Disabled
+        // disabled
         {
             name: nameof(x => x.disabled),
             args: {
@@ -175,7 +195,7 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // Error
+        // error
         {
             name: nameof(x => x.error),
             args: {
@@ -194,7 +214,7 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // ErrorDescription
+        // errorDescription
         {
             name: nameof(x => x.errorDescription),
             args: {
@@ -214,7 +234,7 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // MaxHeight
+        // maxHeight
         {
             name: nameof(x => x.maxHeight),
             args: {
@@ -424,7 +444,7 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // Open
+        // open
         {
             name: nameof(x => x.open),
             args: {
@@ -443,7 +463,7 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // Fluid
+        // fluid
         {
             name: nameof(x => x.fluid),
             args: {
@@ -462,7 +482,7 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // Options
+        // options
         {
             name: nameof(x => x.options),
             args: {
@@ -480,30 +500,31 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // OptionsWithDescription
+        // filterable
         {
-            name: 'OptionsWithDescription',
+            name: nameof(x => x.filterable),
             args: {
+                filterable: true,
                 options: [
-                    { label: 'PHP', value: 'php', description: 'Description for PHP' },
+                    { label: 'PHP', value: 'php' },
                     {
                         label: 'Java',
                         value: 'java',
-                        description: 'Description for Java',
                     },
                     {
                         label: 'Javascript',
                         value: 'javascript',
-                        description: 'Description for Javascript',
                     },
                 ],
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // OptionsWithDisabledElement
+        // badgeLabel
         {
-            name: 'OptionsWithDisabledElement',
+            name: nameof(x => x.badgeLabel),
             args: {
+                badgeLabel: 'languages',
+                value: ['php'],
                 options: [
                     { label: 'PHP', value: 'php' },
                     {
@@ -514,20 +535,39 @@ const NvFieldmultiselectDocs = {
                         label: 'Javascript',
                         value: 'javascript',
                     },
-                    {
-                        label: 'Item disabled',
-                        value: 'disabled',
-                        disabled: true,
-                    },
                 ],
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // OptionsWithPreselectedValue
+        // filterText
         {
-            name: 'OptionsWithPreselectedValue',
+            name: nameof(x => x.filterText),
             args: {
-                value: ['java'],
+                label: 'Multiselect with Initial Filter Text',
+                filterable: true,
+                filterText: 'php',
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" }), h("nv-fielddropdownitemcheck", { label: "Java", value: "java" }), h("nv-fielddropdownitemcheck", { label: "Javascript", value: "javascript" })))),
+        },
+        // emptyResult
+        {
+            name: nameof(x => x.emptyResult),
+            args: {
+                filterable: true,
+                open: true,
+                filterText: 'search for a inexistent item',
+                emptyResult: 'No items found',
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),
+        },
+        // debounceDelay
+        {
+            name: nameof(x => x.debounceDelay),
+            args: {
+                label: 'Multiselect with Custom Debounce Delay',
+                filterable: true,
+                debounceDelay: 1000,
+                placeholder: 'Type to filter...',
                 options: [
                     { label: 'PHP', value: 'php' },
                     {
@@ -542,92 +582,75 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // OptionsWithPrecheckedElement
+        // autocomplete
         {
-            name: 'OptionsWithPrecheckedElement',
+            name: nameof(x => x.autocomplete),
+            description: "The autocomplete prop helps users fill out the input field faster by suggesting entries they've used before, like their email or address. You can turn it on to make forms more convenient or off to ensure users always type in fresh data.",
             args: {
+                label: 'Multiselect with Autocomplete',
+                autocomplete: 'on',
                 options: [
                     { label: 'PHP', value: 'php' },
-                    {
-                        label: 'Java',
-                        value: 'java',
-                        checked: true,
-                    },
-                    {
-                        label: 'Javascript',
-                        value: 'javascript',
-                    },
+                    { label: 'Java', value: 'java' },
+                    { label: 'Javascript', value: 'javascript' },
                 ],
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // OptionsWithMultiplePreselectedValues
+        // value
         {
-            name: 'OptionsWithMultiplePreselectedValues',
+            name: nameof(x => x.value),
+            description: 'Specifies the selected values of the multiselect field. This is the canonical value for the component and is used for form submission.',
             args: {
+                label: 'Multiselect with Value',
                 value: ['php', 'java'],
                 options: [
                     { label: 'PHP', value: 'php' },
-                    {
-                        label: 'Java',
-                        value: 'java',
-                    },
-                    {
-                        label: 'Javascript',
-                        value: 'javascript',
-                    },
+                    { label: 'Java', value: 'java' },
+                    { label: 'Javascript', value: 'javascript' },
                 ],
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // OptionsWithMultiplePrecheckedElement
+        // selectAllLabel
         {
-            name: 'OptionsWithMultiplePrecheckedElement',
+            name: nameof(x => x.selectAllLabel),
+            description: 'Text for the "Select All" button.',
             args: {
+                label: 'Custom Select All Label',
+                enableSelectAll: true,
+                selectAllLabel: 'Choose All',
                 options: [
-                    {
-                        label: 'PHP',
-                        value: 'php',
-                        checked: true,
-                    },
-                    {
-                        label: 'Java',
-                        value: 'java',
-                    },
-                    {
-                        label: 'Javascript',
-                        value: 'javascript',
-                        checked: true,
-                    },
+                    { label: 'PHP', value: 'php' },
+                    { label: 'Java', value: 'java' },
+                    { label: 'Javascript', value: 'javascript' },
                 ],
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // Filterable
+        // deselectAllLabel
         {
-            name: nameof(x => x.filterable),
+            name: nameof(x => x.deselectAllLabel),
+            description: 'Text for the "Deselect All" button.',
             args: {
-                filterable: true,
+                label: 'Custom Deselect All Label',
+                enableSelectAll: true,
+                deselectAllLabel: 'Clear All',
+                value: ['php', 'java', 'javascript'],
                 options: [
                     { label: 'PHP', value: 'php' },
-                    {
-                        label: 'Java',
-                        value: 'java',
-                    },
-                    {
-                        label: 'Javascript',
-                        value: 'javascript',
-                    },
+                    { label: 'Java', value: 'java' },
+                    { label: 'Javascript', value: 'javascript' },
                 ],
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // BadgeLabel
+        // enableSelectAll
         {
-            name: nameof(x => x.badgeLabel),
+            name: nameof(x => x.enableSelectAll),
             args: {
-                badgeLabel: 'languages',
-                value: ['php'],
+                label: 'Select All Button',
+                enableSelectAll: true,
                 options: [
                     { label: 'PHP', value: 'php' },
                     {
@@ -642,55 +665,134 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // FilterText
+        // FilterModeStrict
         {
-            name: nameof(x => x.filterText),
+            name: nameof(x => x.filterMode),
             args: {
-                label: 'Multiselect with Initial Filter Text',
+                label: 'Filter Mode: Strict',
                 filterable: true,
-                filterText: 'php',
+                filterMode: 'strict',
+                placeholder: 'Type "System" to search...',
+                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' },
+                ],
             },
-            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" }), h("nv-fielddropdownitemcheck", { label: "Java", value: "java" }), h("nv-fielddropdownitemcheck", { label: "Javascript", value: "javascript" })))),
+            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-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // EmptyResult
+        // FuzzyThreshold
         {
-            name: nameof(x => x.emptyResult),
+            name: nameof(x => x.fuzzyThreshold),
             args: {
+                label: 'Fuzzy with Custom Threshold',
                 filterable: true,
-                open: true,
-                filterText: 'search for a inexistent item',
-                emptyResult: 'No items found',
+                filterMode: 'fuzzy',
+                fuzzyThreshold: 0.2,
+                placeholder: 'Try typing with typos...',
+                options: [
+                    { label: 'System Grid Controller', value: 'system-grid' },
+                    { label: 'Service Manager Pro', value: 'service-manager' },
+                    { label: 'Network Handler Advanced', value: 'network-handler' },
+                ],
             },
-            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" })))),
+            description: 'Lower fuzzyThreshold (0.2) means stricter matching. Values range from 0 (exact match) to 1 (match anything). Default is 0.3.',
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // DebounceDelay
+        // MaxResults
         {
-            name: nameof(x => x.debounceDelay),
+            name: nameof(x => x.maxResults),
             args: {
-                label: 'Multiselect with Custom Debounce Delay',
+                label: 'Limited Results (Max 10)',
                 filterable: true,
-                debounceDelay: 1000,
-                placeholder: 'Type to filter...',
+                maxResults: 10,
+                placeholder: 'Results limited to first 10 matches...',
+                options: Array.from({ length: 50 }).map((_, i) => ({
+                    label: `Item ${i + 1}`,
+                    value: `item-${i + 1}`,
+                })),
+            },
+            description: 'Limits the number of displayed results to protect UI performance. Values are clamped between 10 and 500.',
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // StartFilterAt
+        {
+            name: nameof(x => x.startFilterAt),
+            args: {
+                label: 'Filter starts at 3 characters',
+                filterable: true,
+                startFilterAt: 3,
+                placeholder: 'Type at least 3 characters...',
                 options: [
-                    { label: 'PHP', value: 'php' },
+                    { 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' },
+                ],
+            },
+            description: 'Filtering only starts after the user types the specified number of characters. Useful for very large datasets.',
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // WorkerThreshold
+        {
+            name: nameof(x => x.workerThreshold),
+            args: {
+                label: 'Worker Threshold',
+                filterable: true,
+                workerThreshold: 100,
+                placeholder: 'Search in large dataset...',
+                options: Array.from({ length: 200 }).map((_, i) => ({
+                    label: `Option ${i + 1} - ${['Alpha', 'Beta', 'Gamma', 'Delta'][i % 4]} Category`,
+                    value: `option-${i + 1}`,
+                })),
+            },
+            description: 'When the number of items exceeds workerThreshold, filtering is offloaded to a Web Worker to keep the UI responsive.',
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // TruncatedResultsText
+        {
+            name: nameof(x => x.truncatedResultsText),
+            args: {
+                label: 'Custom Truncation Message',
+                filterable: true,
+                filterMode: 'fuzzy',
+                maxResults: 5,
+                truncatedResultsText: 'Showing {shown} of {total} items',
+                options: Array.from({ length: 50 }).map((_, i) => ({
+                    label: `Item ${i + 1}`,
+                    value: `item-${i + 1}`,
+                })),
+            },
+            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-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // OptionsWithDescription
+        {
+            name: 'OptionsWithDescription',
+            args: {
+                options: [
+                    { label: 'PHP', value: 'php', description: 'Description for PHP' },
                     {
                         label: 'Java',
                         value: 'java',
+                        description: 'Description for Java',
                     },
                     {
                         label: 'Javascript',
                         value: 'javascript',
+                        description: 'Description for Javascript',
                     },
                 ],
             },
-            description: 'Demonstrates the debounce delay when filtering items. The filter will wait 1 second after the user stops typing before filtering the results.',
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // EnableSelectAll
+        // OptionsWithDisabledElement
         {
-            name: nameof(x => x.enableSelectAll),
+            name: 'OptionsWithDisabledElement',
             args: {
-                enableSelectAll: true,
                 options: [
                     { label: 'PHP', value: 'php' },
                     {
@@ -701,15 +803,19 @@ const NvFieldmultiselectDocs = {
                         label: 'Javascript',
                         value: 'javascript',
                     },
+                    {
+                        label: 'Item disabled',
+                        value: 'disabled',
+                        disabled: true,
+                    },
                 ],
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // EnableSelectAllWithPreselectedValue
+        // OptionsWithPreselectedValue
         {
-            name: 'EnableSelectAllWithPreselectedValue',
+            name: 'OptionsWithPreselectedValue',
             args: {
-                enableSelectAll: true,
                 value: ['java'],
                 options: [
                     { label: 'PHP', value: 'php' },
@@ -725,11 +831,10 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // EnableSelectAllWithPrecheckedElement
+        // OptionsWithPrecheckedElement
         {
-            name: 'EnableSelectAllWithPrecheckedElement',
+            name: 'OptionsWithPrecheckedElement',
             args: {
-                enableSelectAll: true,
                 options: [
                     { label: 'PHP', value: 'php' },
                     {
@@ -745,11 +850,10 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // EnableSelectAllWithMultiplePreselectedValues
+        // OptionsWithMultiplePreselectedValues
         {
-            name: 'EnableSelectAllWithMultiplePreselectedValues',
+            name: 'OptionsWithMultiplePreselectedValues',
             args: {
-                enableSelectAll: true,
                 value: ['php', 'java'],
                 options: [
                     { label: 'PHP', value: 'php' },
@@ -765,9 +869,92 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // EnableSelectAllWithMultiplePrecheckedElement
+        // OptionsWithMultiplePrecheckedElement
         {
-            name: 'EnableSelectAllWithMultiplePrecheckedElement',
+            name: 'OptionsWithMultiplePrecheckedElement',
+            args: {
+                options: [
+                    {
+                        label: 'PHP',
+                        value: 'php',
+                        checked: true,
+                    },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                        checked: true,
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // EnableSelectAllWithPreselectedValue
+        {
+            name: 'EnableSelectAllWithPreselectedValue',
+            args: {
+                enableSelectAll: true,
+                value: ['java'],
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // EnableSelectAllWithPrecheckedElement
+        {
+            name: 'EnableSelectAllWithPrecheckedElement',
+            args: {
+                enableSelectAll: true,
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                        checked: true,
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // EnableSelectAllWithMultiplePreselectedValues
+        {
+            name: 'EnableSelectAllWithMultiplePreselectedValues',
+            args: {
+                enableSelectAll: true,
+                value: ['php', 'java'],
+                options: [
+                    { label: 'PHP', value: 'php' },
+                    {
+                        label: 'Java',
+                        value: 'java',
+                    },
+                    {
+                        label: 'Javascript',
+                        value: 'javascript',
+                    },
+                ],
+            },
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // EnableSelectAllWithMultiplePrecheckedElement
+        {
+            name: 'EnableSelectAllWithMultiplePrecheckedElement',
             args: {
                 enableSelectAll: true,
                 options: [
@@ -805,9 +992,168 @@ const NvFieldmultiselectDocs = {
             },
             template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
         },
-        // Slots
+        // 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-fieldmultiselect", { "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-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // Locale (i18n) - Documentation
+        {
+            name: 'LocaleI18nHowItWorks',
+            args: {
+                label: 'Internationalization Overview',
+                filterable: true,
+                filterMode: 'fuzzy',
+                maxResults: 3,
+                options: Array.from({ length: 50 }).map((_, i) => ({
+                    label: `Product ${i + 1} - Category ${Math.floor(i / 10) + 1}`,
+                    value: `product-${i + 1}`,
+                })),
+            },
+            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-fieldmultiselect", { "data-storybook-args": true }), h("nv-alert", { feedback: "information", heading: "How i18n works:", message: "By default, the component automatically detects your browser's language using navigator.language and displays the truncated results message in the appropriate language. You can force a specific language by setting the locale prop (e.g., locale='fr' for French, locale='de' for German). The component supports 11 languages: English, French, German, Spanish, Italian, Dutch, Portuguese, Russian, Japanese, Chinese, and Korean. You can always override the automatic translation by providing a custom truncatedResultsText prop with your own message. Try it: Type 'product' to see more than 3 results and observe the localized truncation message." }))),
+        },
+        // Locale (i18n) - Automatic detection
+        {
+            name: 'LocaleI18nAutomatic',
+            args: {
+                label: 'Internationalization (Auto-detect)',
+                filterable: true,
+                filterMode: 'fuzzy',
+                maxResults: 3,
+                options: Array.from({ length: 50 }).map((_, i) => ({
+                    label: `Product ${i + 1} - Category ${Math.floor(i / 10) + 1}`,
+                    value: `product-${i + 1}`,
+                })),
+            },
+            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-fieldmultiselect", { "data-storybook-args": true }), h("nv-alert", { feedback: "information", message: "This example demonstrates automatic browser locale detection. The component reads navigator.language and automatically displays the truncated results message in your browser's language. Type 'product' to see more than 3 results and trigger the truncation message. Note: You can override this by providing a custom truncatedResultsText prop." }))),
+        },
+        // Locale (i18n) - French
+        {
+            name: 'LocaleI18nFrench',
+            args: {
+                label: 'Internationalisation (Français)',
+                filterable: true,
+                filterMode: 'fuzzy',
+                maxResults: 4,
+                locale: 'fr',
+                options: Array.from({ length: 50 }).map((_, i) => ({
+                    label: `Produit ${i + 1} - Catégorie ${Math.floor(i / 10) + 1}`,
+                    value: `produit-${i + 1}`,
+                })),
+            },
+            description: 'Forces French locale for the truncated results message. Type "produit" to see more than 4 results. The message will be displayed in French: "{shown} résultats affichés sur {total} — affinez votre recherche".',
+            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // Locale (i18n) - German
+        {
+            name: 'LocaleI18nGerman',
+            args: {
+                label: 'Internationalisierung (Deutsch)',
+                filterable: true,
+                filterMode: 'fuzzy',
+                maxResults: 3,
+                locale: 'de',
+                options: Array.from({ length: 50 }).map((_, i) => ({
+                    label: `Produkt ${i + 1} - Kategorie ${Math.floor(i / 10) + 1}`,
+                    value: `produkt-${i + 1}`,
+                })),
+            },
+            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-fieldmultiselect", { "data-storybook-args": true }),
+        },
+        // SlotLeadingInput
+        {
+            name: 'SlotLeadingInput',
+            description: 'Content to be placed before the input text, within the input container.',
+            args: {
+                label: 'Leading Input Slot',
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("nv-badge", { slot: "leading-input", label: "Leading" }), h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" }), h("nv-fielddropdownitemcheck", { label: "Java", value: "java" })))),
+        },
+        // SlotBeforeInput
+        {
+            name: 'SlotBeforeInput',
+            description: 'Content to be placed before the input text, outside the input container.',
+            args: {
+                label: 'Before Input Slot',
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("span", { slot: "before-input" }, "Before Input"), h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" }), h("nv-fielddropdownitemcheck", { label: "Java", value: "java" })))),
+        },
+        // SlotAfterInput
+        {
+            name: 'SlotAfterInput',
+            description: 'Content to be placed after the input text, outside the input container.',
+            args: {
+                label: 'After Input Slot',
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("span", { slot: "after-input" }, "After Input"), h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" }), h("nv-fielddropdownitemcheck", { label: "Java", value: "java" })))),
+        },
+        // SlotLabel
+        {
+            name: 'SlotLabel',
+            description: 'Content to be placed as the label, will override the label prop.',
+            args: {
+                label: 'Original Label',
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("span", { slot: "label" }, "Custom Label"), h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" }), h("nv-fielddropdownitemcheck", { label: "Java", value: "java" })))),
+        },
+        // SlotDescription
+        {
+            name: 'SlotDescription',
+            description: 'Content to be placed as the description, will override the description prop.',
+            args: {
+                label: 'Description Slot',
+                description: 'Original description',
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("span", { slot: "description" }, "Custom Description"), h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" }), h("nv-fielddropdownitemcheck", { label: "Java", value: "java" })))),
+        },
+        // SlotErrorDescription
+        {
+            name: 'SlotErrorDescription',
+            description: 'Content to be placed as the error description, will override the errorDescription prop.',
+            args: {
+                label: 'Error Description Slot',
+                errorDescription: 'Original error description',
+                error: true,
+            },
+            template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("span", { slot: "error-description" }, "Custom Error Description"), h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" }), h("nv-fielddropdownitemcheck", { label: "Java", value: "java" })))),
+        },
+        // SlotContentExample
         {
-            name: 'Slots',
+            name: 'SlotContentExample',
             args: {
                 label: 'Available Slots for the checkbox items',
                 description: 'You can use main, label, and description slots. Main will replace the label and description.',
@@ -963,7 +1309,7 @@ const NvFieldmultiselectDocs = {
         },
         // SlotContentWithMultiplePrecheckedElement
         {
-            name: 'Slot with Multiple Prechecked element',
+            name: 'SlotWithMultiplePrecheckedElement',
             template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php", checked: true }), h("nv-fielddropdownitemcheck", { label: "Java", value: "java" }), h("nv-fielddropdownitemcheck", { label: "Javascript", value: "javascript", checked: true })))),
         },
         // SlotContentFilterable
@@ -1035,212 +1381,6 @@ const NvFieldmultiselectDocs = {
             },
             template: (h("nv-fieldmultiselect", { "data-storybook-args": true }, h("ul", { slot: "content" }, h("nv-fielddropdownitemcheck", { label: "PHP", value: "php" }), h("nv-fielddropdownitemcheck", { label: "Java", value: "java" }), h("nv-fielddropdownitemcheck", { label: "Javascript", value: "javascript" })))),
         },
-        // 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' },
-                    { label: 'Network Handler Advanced', value: 'network-handler' },
-                    { label: 'Database Manager', value: 'database' },
-                    { label: 'API Gateway Service', value: 'api-gateway' },
-                ],
-            },
-            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-fieldmultiselect", { "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-fieldmultiselect", { "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-fieldmultiselect", { "data-storybook-args": true }),
-        },
-        // FuzzyThreshold
-        {
-            name: nameof(x => x.fuzzyThreshold),
-            args: {
-                label: 'Fuzzy with Custom Threshold',
-                filterable: true,
-                filterMode: 'fuzzy',
-                fuzzyThreshold: 0.2,
-                placeholder: 'Try typing with typos...',
-                options: [
-                    { label: 'System Grid Controller', value: 'system-grid' },
-                    { label: 'Service Manager Pro', value: 'service-manager' },
-                    { label: 'Network Handler Advanced', value: 'network-handler' },
-                ],
-            },
-            description: 'Lower fuzzyThreshold (0.2) means stricter matching. Values range from 0 (exact match) to 1 (match anything). Default is 0.3.',
-            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
-        },
-        // MaxResults
-        {
-            name: nameof(x => x.maxResults),
-            args: {
-                label: 'Limited Results (Max 10)',
-                filterable: true,
-                maxResults: 10,
-                placeholder: 'Results limited to first 10 matches...',
-                options: Array.from({ length: 50 }).map((_, i) => ({
-                    label: `Item ${i + 1}`,
-                    value: `item-${i + 1}`,
-                })),
-            },
-            description: 'Limits the number of displayed results to protect UI performance. Values are clamped between 10 and 500.',
-            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
-        },
-        // StartFilterAt
-        {
-            name: nameof(x => x.startFilterAt),
-            args: {
-                label: 'Filter starts at 3 characters',
-                filterable: true,
-                startFilterAt: 3,
-                placeholder: 'Type at least 3 characters...',
-                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' },
-                ],
-            },
-            description: 'Filtering only starts after the user types the specified number of characters. Useful for very large datasets.',
-            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
-        },
-        // WorkerThreshold
-        {
-            name: nameof(x => x.workerThreshold),
-            args: {
-                label: 'Worker Threshold',
-                filterable: true,
-                workerThreshold: 100,
-                placeholder: 'Search in large dataset...',
-                options: Array.from({ length: 200 }).map((_, i) => ({
-                    label: `Option ${i + 1} - ${['Alpha', 'Beta', 'Gamma', 'Delta'][i % 4]} Category`,
-                    value: `option-${i + 1}`,
-                })),
-            },
-            description: 'When the number of items exceeds workerThreshold, filtering is offloaded to a Web Worker to keep the UI responsive.',
-            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
-        },
-        // TruncatedResultsText
-        {
-            name: nameof(x => x.truncatedResultsText),
-            args: {
-                label: 'Custom Truncation Message',
-                filterable: true,
-                filterMode: 'fuzzy',
-                maxResults: 5,
-                truncatedResultsText: 'Showing {shown} of {total} items',
-                options: Array.from({ length: 50 }).map((_, i) => ({
-                    label: `Item ${i + 1}`,
-                    value: `item-${i + 1}`,
-                })),
-            },
-            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-fieldmultiselect", { "data-storybook-args": true }),
-        },
-        // Locale (i18n) - Documentation
-        {
-            name: 'LocaleI18nHowItWorks',
-            args: {
-                label: 'Internationalization Overview',
-                filterable: true,
-                filterMode: 'fuzzy',
-                maxResults: 3,
-                options: Array.from({ length: 50 }).map((_, i) => ({
-                    label: `Product ${i + 1} - Category ${Math.floor(i / 10) + 1}`,
-                    value: `product-${i + 1}`,
-                })),
-            },
-            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-fieldmultiselect", { "data-storybook-args": true }), h("nv-alert", { feedback: "information", heading: "How i18n works:", message: "By default, the component automatically detects your browser's language using navigator.language and displays the truncated results message in the appropriate language. You can force a specific language by setting the locale prop (e.g., locale='fr' for French, locale='de' for German). The component supports 11 languages: English, French, German, Spanish, Italian, Dutch, Portuguese, Russian, Japanese, Chinese, and Korean. You can always override the automatic translation by providing a custom truncatedResultsText prop with your own message. Try it: Type 'product' to see more than 3 results and observe the localized truncation message." }))),
-        },
-        // Locale (i18n) - Automatic detection
-        {
-            name: 'LocaleI18nAutomatic',
-            args: {
-                label: 'Internationalization (Auto-detect)',
-                filterable: true,
-                filterMode: 'fuzzy',
-                maxResults: 3,
-                options: Array.from({ length: 50 }).map((_, i) => ({
-                    label: `Product ${i + 1} - Category ${Math.floor(i / 10) + 1}`,
-                    value: `product-${i + 1}`,
-                })),
-            },
-            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-fieldmultiselect", { "data-storybook-args": true }), h("nv-alert", { feedback: "information", message: "This example demonstrates automatic browser locale detection. The component reads navigator.language and automatically displays the truncated results message in your browser's language. Type 'product' to see more than 3 results and trigger the truncation message. Note: You can override this by providing a custom truncatedResultsText prop." }))),
-        },
-        // Locale (i18n) - French
-        {
-            name: 'LocaleI18nFrench',
-            args: {
-                label: 'Internationalisation (Français)',
-                filterable: true,
-                filterMode: 'fuzzy',
-                maxResults: 4,
-                locale: 'fr',
-                options: Array.from({ length: 50 }).map((_, i) => ({
-                    label: `Produit ${i + 1} - Catégorie ${Math.floor(i / 10) + 1}`,
-                    value: `produit-${i + 1}`,
-                })),
-            },
-            description: 'Forces French locale for the truncated results message. Type "produit" to see more than 4 results. The message will be displayed in French: "{shown} résultats affichés sur {total} — affinez votre recherche".',
-            template: h("nv-fieldmultiselect", { "data-storybook-args": true }),
-        },
-        // Locale (i18n) - German
-        {
-            name: 'LocaleI18nGerman',
-            args: {
-                label: 'Internationalisierung (Deutsch)',
-                filterable: true,
-                filterMode: 'fuzzy',
-                maxResults: 3,
-                locale: 'de',
-                options: Array.from({ length: 50 }).map((_, i) => ({
-                    label: `Produkt ${i + 1} - Kategorie ${Math.floor(i / 10) + 1}`,
-                    value: `produkt-${i + 1}`,
-                })),
-            },
-            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-fieldmultiselect", { "data-storybook-args": true }),
-        },
     ],
 };
 export default NvFieldmultiselectDocs;