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

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

@@ -0,0 +1,197 @@
+nv-fieldselect {
+  --nv-field-border-default: var(--components-form-field-border-default);
+  --nv-field-border-hover: var(--components-form-field-border-hover);
+  --nv-field-border-focus: var(--components-form-field-border-focus);
+  --nv-field-border-disabled: var(--components-form-field-border-default);
+  --nv-field-border-readonly: var(--components-form-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-brand);
+  --nv-field-background: var(--components-form-field-background-default);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--form-gap-y);
+  box-sizing: border-box;
+}
+nv-fieldselect[readonly]:not([readonly=false]) {
+  --nv-field-border-default: var(--components-form-field-border-readonly);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--components-form-field-border-focus);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-background: var(--components-form-field-background-readonly);
+}
+nv-fieldselect[display-value]:not([display-value=false]) {
+  --nv-field-border-default: var(--components-form-field-border-readonly);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--components-form-field-border-focus);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-background: var(--components-form-field-background-readonly);
+}
+nv-fieldselect[error]:not([error=false]) {
+  --nv-field-border-default: var(--components-form-field-border-error);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--nv-field-border-default);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-destructive);
+}
+nv-fieldselect[success]:not([success=false]) {
+  --nv-field-border-default: var(--components-form-field-border-success);
+  --nv-field-border-hover: var(--nv-field-border-default);
+  --nv-field-border-focus: var(--nv-field-border-default);
+  --nv-field-border-disabled: var(--nv-field-border-default);
+  --nv-field-border-readonly: var(--nv-field-border-default);
+  --nv-field-focus-box-shadow: var(--color-focus-success);
+}
+nv-fieldselect[required]:not([required=false]) label::after {
+  content: "*";
+  color: var(--components-form-text-required);
+  font-weight: 700;
+}
+nv-fieldselect label {
+  display: flex;
+  align-items: center;
+  gap: var(--form-label-gap);
+  align-self: stretch;
+  color: var(--components-form-text-label-default);
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-label-font-size);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--form-label-line-height);
+}
+nv-fieldselect .select-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--form-gap-x);
+  align-items: stretch;
+  align-self: stretch;
+}
+nv-fieldselect .select-wrapper .select-container {
+  display: flex;
+  flex-grow: 1;
+  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);
+  justify-content: center;
+  align-items: center;
+  gap: var(--form-field-gap);
+  align-self: stretch;
+  border-radius: var(--form-field-radius);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--nv-field-border-default);
+  opacity: var(--components-form-opacity-default);
+  background: var(--nv-field-background);
+  transition: all 150ms ease-out;
+}
+nv-fieldselect .select-wrapper .select-container:hover {
+  border-color: var(--nv-field-border-hover);
+}
+nv-fieldselect .select-wrapper .select-container:focus-within {
+  border-color: var(--nv-field-border-focus);
+  box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
+}
+nv-fieldselect .select-wrapper .select-container:has(select:disabled) {
+  opacity: 0.5;
+  background-color: var(--components-form-field-background-disabled);
+  border-color: var(--nv-field-border-disabled);
+}
+nv-fieldselect .select-wrapper .select-container input {
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+  overflow: hidden;
+  background-color: transparent;
+  color: var(--components-form-field-content-text);
+  text-overflow: ellipsis;
+  font-size: var(--form-field-font-size);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--form-field-line-height);
+}
+nv-fieldselect .select-wrapper .select-container input:focus {
+  outline: none;
+}
+nv-fieldselect .select-wrapper .select-container input::placeholder {
+  overflow: hidden;
+  color: var(--components-form-field-content-placeholder);
+  text-overflow: ellipsis;
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-field-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--form-field-line-height);
+}
+nv-fieldselect .select-wrapper .select-container input:read-only {
+  opacity: 0.5;
+  background-color: var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));
+  border-color: var(--nv-field-border-readonly);
+}
+nv-fieldselect .select-wrapper .select-container select {
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+  overflow: hidden;
+  background-color: transparent;
+  color: var(--components-form-field-content-text);
+  text-overflow: ellipsis;
+  font-size: var(--form-field-font-size);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--form-field-line-height);
+}
+nv-fieldselect .select-wrapper .select-container select:focus {
+  outline: none;
+}
+nv-fieldselect .select-wrapper .select-container select::placeholder {
+  overflow: hidden;
+  color: var(--components-form-field-content-placeholder);
+  text-overflow: ellipsis;
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-field-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--form-field-line-height);
+}
+nv-fieldselect .select-wrapper .select-container select option {
+  background-color: var(--nv-field-background);
+  color: var(--components-form-field-content-text, #1d1d1d);
+  font-size: var(--form-field-font-size, 16px);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--form-field-line-height, 24px);
+}
+nv-fieldselect .select-wrapper .select-container select option:checked {
+  background-color: var(--color-orange-500);
+  color: var(--color-base-content-high-emphasis);
+  font-size: var(--form-field-font-size, 16px);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--form-field-line-height, 24px);
+}
+nv-fieldselect .select-wrapper .select-container select.hidden {
+  display: none;
+}
+nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon {
+  color: var(--nv-field-border-default);
+}
+nv-fieldselect .select-wrapper .select-container nv-icon.validation {
+  color: var(--nv-field-border-default);
+}
+nv-fieldselect .description {
+  align-self: stretch;
+  color: var(--components-form-text-description-default);
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-description-font-size);
+  font-style: normal;
+  line-height: var(--form-description-line-height);
+}
+nv-fieldselect .error-description {
+  align-self: stretch;
+  color: var(--components-form-text-description-default);
+  font-family: "TT Norms Pro", sans-serif;
+  font-size: var(--form-description-font-size);
+  font-style: normal;
+  line-height: var(--form-description-line-height);
+  color: var(--components-form-text-description-error);
+}

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

@@ -0,0 +1,157 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvFieldselectDocs = {
+    component: 'nv-fieldselect',
+    subcomponents: ['nv-badge', 'nv-button'],
+    stories: [
+        // Default Story
+        {
+            name: 'Default',
+            description: 'A default nv-fieldselect with no specific props set.',
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
+        },
+        // Label Prop Story
+        {
+            name: nameof(x => x.label),
+            args: {
+                label: 'Select Label',
+            },
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
+        },
+        // Description Prop Story
+        {
+            name: nameof(x => x.description),
+            args: {
+                label: 'Select with Description',
+                description: 'This is a description.',
+            },
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
+        },
+        // Placeholder Prop Story
+        {
+            name: 'Placeholder',
+            description: 'Display temporary text inside the select field to give users a hint about what to choose.',
+            args: {
+                label: 'Select with Placeholder',
+            },
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "", disabled: true }, "Choose an option..."), h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
+        },
+        // Value Prop Story
+        {
+            name: nameof(x => x.value),
+            args: {
+                label: 'Select Value',
+                value: '2',
+            },
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
+        },
+        // Disabled Prop Story
+        {
+            name: nameof(x => x.disabled),
+            args: {
+                label: 'Disabled Select',
+                disabled: true,
+                value: '3',
+            },
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
+        },
+        // Readonly Prop Story
+        {
+            name: nameof(x => x.readonly),
+            args: {
+                label: 'Readonly Select',
+                readonly: true,
+                value: '1',
+            },
+            template: (h("div", { "data-class": "flex flex-col gap-2" }, h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4")), h("nv-fieldselect", { "data-storybook-args": true, multiple: true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4")))),
+        },
+        // Readonly Prop Story + Display Value
+        {
+            name: nameof(x => x.displayValue),
+            args: {
+                label: 'Readonly Select with Display Label',
+                readonly: true,
+                displayValue: true,
+                value: '1',
+            },
+            template: (h("div", { "data-class": "flex flex-col gap-2" }, h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2")), h("nv-fieldselect", { "data-storybook-args": true, multiple: true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2")))),
+        },
+        // Required Prop Story
+        {
+            name: nameof(x => x.required),
+            args: {
+                label: 'Required Field',
+                required: true,
+            },
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
+        },
+        // Error Prop Story
+        {
+            name: nameof(x => x.error),
+            args: {
+                label: 'Error State',
+                error: true,
+            },
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
+        },
+        // Success Prop Story
+        {
+            name: nameof(x => x.success),
+            args: {
+                label: 'Success State',
+                success: true,
+            },
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
+        },
+        // Multiple Prop Story
+        {
+            name: nameof(x => x.multiple),
+            args: {
+                label: 'Multiple Select',
+                multiple: true,
+            },
+            template: (h("div", { "data-class": "flex flex-col gap-2" }, h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4")), h("nv-fieldselect", { value: "1, 2", "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4")))),
+        },
+        // SlotLabel Story
+        {
+            name: 'SlotLabel',
+            description: 'You can use the `label` slot to customize the content of the label.',
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("span", { slot: "label" }, "Label"), h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
+        },
+        // SlotDescription Story
+        {
+            name: 'SlotDescription',
+            description: 'You can use the `description` slot to customize the content of the description.',
+            args: {
+                label: 'Select with Description',
+                description: 'This is a description.',
+            },
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("span", { slot: "description" }, "Description"), h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
+        },
+        // SlotBefore Story
+        {
+            name: 'SlotBefore',
+            description: 'You can use the `before` slot to customize the content before the select.',
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("span", { slot: "before" }, "Before"), h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
+        },
+        // SlotAfter Story
+        {
+            name: 'SlotAfter',
+            description: 'You can use the `after` slot to customize the content after the select.',
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("span", { slot: "after" }, "After"), h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
+        },
+        // SlotErrorDescription Story
+        {
+            name: 'SlotErrorDescription',
+            description: 'You can use the `error-description` slot to customize the content of the error description.',
+            args: {
+                label: 'Select with Error',
+                error: true,
+                errorDescription: 'This is an error.',
+            },
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("span", { slot: "error-description" }, "Error Description"), h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"), h("option", { value: "3" }, "Option 3"), h("option", { value: "4" }, "Option 4"))),
+        },
+    ],
+};
+export default NvFieldselectDocs;
+//# sourceMappingURL=nv-fieldselect.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fieldselect.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldselect/nv-fieldselect.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 NvFieldselectDocs: NovaDocs<Components.NvFieldselect> = {\n  component: 'nv-fieldselect',\n  subcomponents: ['nv-badge', 'nv-button'],\n  stories: [\n    // Default Story\n    {\n      name: 'Default',\n      description: 'A default nv-fieldselect with no specific props set.',\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n          <option value=\"4\">Option 4</option>\n        </nv-fieldselect>\n      ),\n    },\n    // Label Prop Story\n    {\n      name: nameof<Components.NvFieldselect>(x => x.label),\n      args: {\n        label: 'Select Label',\n      },\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n          <option value=\"4\">Option 4</option>\n        </nv-fieldselect>\n      ),\n    },\n    // Description Prop Story\n    {\n      name: nameof<Components.NvFieldselect>(x => x.description),\n      args: {\n        label: 'Select with Description',\n        description: 'This is a description.',\n      },\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n          <option value=\"4\">Option 4</option>\n        </nv-fieldselect>\n      ),\n    },\n    // Placeholder Prop Story\n    {\n      name: 'Placeholder',\n      description:\n        'Display temporary text inside the select field to give users a hint about what to choose.',\n      args: {\n        label: 'Select with Placeholder',\n      },\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <option value=\"\" disabled>\n            Choose an option...\n          </option>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n          <option value=\"4\">Option 4</option>\n        </nv-fieldselect>\n      ),\n    },\n    // Value Prop Story\n    {\n      name: nameof<Components.NvFieldselect>(x => x.value),\n      args: {\n        label: 'Select Value',\n        value: '2',\n      },\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n          <option value=\"4\">Option 4</option>\n        </nv-fieldselect>\n      ),\n    },\n    // Disabled Prop Story\n    {\n      name: nameof<Components.NvFieldselect>(x => x.disabled),\n      args: {\n        label: 'Disabled Select',\n        disabled: true,\n        value: '3',\n      },\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n          <option value=\"4\">Option 4</option>\n        </nv-fieldselect>\n      ),\n    },\n    // Readonly Prop Story\n    {\n      name: nameof<Components.NvFieldselect>(x => x.readonly),\n      args: {\n        label: 'Readonly Select',\n        readonly: true,\n        value: '1',\n      },\n      template: (\n        <div data-class=\"flex flex-col gap-2\">\n          <nv-fieldselect data-storybook-args>\n            <option value=\"1\">Option 1</option>\n            <option value=\"2\">Option 2</option>\n            <option value=\"3\">Option 3</option>\n            <option value=\"4\">Option 4</option>\n          </nv-fieldselect>\n          <nv-fieldselect data-storybook-args multiple={true}>\n            <option value=\"1\">Option 1</option>\n            <option value=\"2\">Option 2</option>\n            <option value=\"3\">Option 3</option>\n            <option value=\"4\">Option 4</option>\n          </nv-fieldselect>\n        </div>\n      ),\n    },\n    // Readonly Prop Story + Display Value\n    {\n      name: nameof<Components.NvFieldselect>(x => x.displayValue),\n      args: {\n        label: 'Readonly Select with Display Label',\n        readonly: true,\n        displayValue: true,\n        value: '1',\n      },\n      template: (\n        <div data-class=\"flex flex-col gap-2\">\n          <nv-fieldselect data-storybook-args>\n            <option value=\"1\">Option 1</option>\n            <option value=\"2\">Option 2</option>\n          </nv-fieldselect>\n          <nv-fieldselect data-storybook-args multiple={true}>\n            <option value=\"1\">Option 1</option>\n            <option value=\"2\">Option 2</option>\n          </nv-fieldselect>\n        </div>\n      ),\n    },\n    // Required Prop Story\n    {\n      name: nameof<Components.NvFieldselect>(x => x.required),\n      args: {\n        label: 'Required Field',\n        required: true,\n      },\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n          <option value=\"4\">Option 4</option>\n        </nv-fieldselect>\n      ),\n    },\n    // Error Prop Story\n    {\n      name: nameof<Components.NvFieldselect>(x => x.error),\n      args: {\n        label: 'Error State',\n        error: true,\n      },\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n          <option value=\"4\">Option 4</option>\n        </nv-fieldselect>\n      ),\n    },\n    // Success Prop Story\n    {\n      name: nameof<Components.NvFieldselect>(x => x.success),\n      args: {\n        label: 'Success State',\n        success: true,\n      },\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n          <option value=\"4\">Option 4</option>\n        </nv-fieldselect>\n      ),\n    },\n    // Multiple Prop Story\n    {\n      name: nameof<Components.NvFieldselect>(x => x.multiple),\n      args: {\n        label: 'Multiple Select',\n        multiple: true,\n      },\n      template: (\n        <div data-class=\"flex flex-col gap-2\">\n          <nv-fieldselect data-storybook-args>\n            <option value=\"1\">Option 1</option>\n            <option value=\"2\">Option 2</option>\n            <option value=\"3\">Option 3</option>\n            <option value=\"4\">Option 4</option>\n          </nv-fieldselect>\n          <nv-fieldselect value=\"1, 2\" data-storybook-args>\n            <option value=\"1\">Option 1</option>\n            <option value=\"2\">Option 2</option>\n            <option value=\"3\">Option 3</option>\n            <option value=\"4\">Option 4</option>\n          </nv-fieldselect>\n        </div>\n      ),\n    },\n    // SlotLabel Story\n    {\n      name: 'SlotLabel',\n      description:\n        'You can use the `label` slot to customize the content of the label.',\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <span slot=\"label\">Label</span>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n          <option value=\"4\">Option 4</option>\n        </nv-fieldselect>\n      ),\n    },\n    // SlotDescription Story\n    {\n      name: 'SlotDescription',\n      description:\n        'You can use the `description` slot to customize the content of the description.',\n      args: {\n        label: 'Select with Description',\n        description: 'This is a description.',\n      },\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <span slot=\"description\">Description</span>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n          <option value=\"4\">Option 4</option>\n        </nv-fieldselect>\n      ),\n    },\n    // SlotBefore Story\n    {\n      name: 'SlotBefore',\n      description:\n        'You can use the `before` slot to customize the content before the select.',\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <span slot=\"before\">Before</span>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n          <option value=\"4\">Option 4</option>\n        </nv-fieldselect>\n      ),\n    },\n    // SlotAfter Story\n    {\n      name: 'SlotAfter',\n      description:\n        'You can use the `after` slot to customize the content after the select.',\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <span slot=\"after\">After</span>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n          <option value=\"4\">Option 4</option>\n        </nv-fieldselect>\n      ),\n    },\n    // SlotErrorDescription Story\n    {\n      name: 'SlotErrorDescription',\n      description:\n        'You can use the `error-description` slot to customize the content of the error description.',\n      args: {\n        label: 'Select with Error',\n        error: true,\n        errorDescription: 'This is an error.',\n      },\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <span slot=\"error-description\">Error Description</span>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n          <option value=\"3\">Option 3</option>\n          <option value=\"4\">Option 4</option>\n        </nv-fieldselect>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldselectDocs;\n"]}