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

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

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldradio.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldradio/nv-fieldradio.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 NvFieldradioDocs: NovaDocs<Components.NvFieldradio> = {\n  component: 'nv-fieldradio',\n  stories: [\n    {\n      name: 'Default',\n      args: { label: 'Label' },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.name),\n      args: {\n        name: 'group',\n      },\n      template: (\n        <fieldset data-class=\"flex flex-col gap-4\">\n          <nv-fieldradio data-storybook-args label=\"Option 1\"></nv-fieldradio>\n          <nv-fieldradio data-storybook-args label=\"Option 2\"></nv-fieldradio>\n          <nv-fieldradio data-storybook-args label=\"Option 3\"></nv-fieldradio>\n        </fieldset>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.value),\n      args: {\n        label: 'Label',\n        value: 'value',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.label),\n      args: {\n        label: 'Label',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.labelPlacement),\n      args: {\n        name: 'group',\n      },\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-fieldradio\n            data-storybook-args\n            label=\"before\"\n            label-placement=\"before\"\n          ></nv-fieldradio>\n          <nv-fieldradio\n            data-storybook-args\n            label=\"after\"\n            label-placement=\"after\"\n          ></nv-fieldradio>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.description),\n      args: {\n        label: 'Label',\n        description: 'Description',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.error),\n      args: {\n        label: 'Label',\n        error: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.errorDescription),\n      args: {\n        label: 'Label',\n        error: true,\n        errorDescription: 'There is an error!',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.checked),\n      args: {\n        label: 'Label',\n        checked: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.disabled),\n      args: {\n        label: 'Label',\n        disabled: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.autofocus),\n      args: {\n        label: 'Autofocus',\n        autofocus: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: 'DisabledChecked',\n      description: 'Radio button in a disabled state.',\n      args: {\n        label: 'Label',\n        disabled: true,\n        checked: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: 'SlotLabel',\n      description: 'Radio button replacing the label with custom html.',\n      args: {\n        label: 'Label',\n      },\n      template: (\n        <nv-fieldradio data-storybook-args>\n          <span slot=\"label\">Custom Label</span>\n        </nv-fieldradio>\n      ),\n    },\n    {\n      name: 'SlotDescription',\n      description: 'Radio button replacing the description with custom html.',\n      args: {\n        label: 'Label',\n        description: 'Description',\n      },\n      template: (\n        <nv-fieldradio data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldradio>\n      ),\n    },\n    {\n      name: 'SlotErrorDescription',\n      description:\n        'Radio button replacing the error description with custom html.',\n      args: {\n        label: 'Label',\n        error: true,\n        errorDescription: 'Error Description',\n      },\n      template: (\n        <nv-fieldradio data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldradio>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldradioDocs;\n"]}
+{"version":3,"file":"nv-fieldradio.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldradio/nv-fieldradio.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 NvFieldradioDocs: NovaDocs<Components.NvFieldradio> = {\n  component: 'nv-fieldradio',\n  stories: [\n    // Default\n    {\n      name: 'Default',\n      args: { label: 'Label' },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    // inputId\n    {\n      name: nameof<Components.NvFieldradio>(x => x.inputId),\n      args: {\n        label: 'Label',\n        inputId: 'custom-radio-id',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    // name\n    {\n      name: nameof<Components.NvFieldradio>(x => x.name),\n      args: {\n        label: 'Label',\n        name: 'radio-name',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    // value\n    {\n      name: nameof<Components.NvFieldradio>(x => x.value),\n      args: {\n        label: 'Label',\n        value: 'radio-value',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    // label\n    {\n      name: nameof<Components.NvFieldradio>(x => x.label),\n      args: {\n        label: 'Label',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    // labelPlacement\n    {\n      name: nameof<Components.NvFieldradio>(x => x.labelPlacement),\n      args: {\n        label: 'Label',\n        labelPlacement: 'before',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    // description\n    {\n      name: nameof<Components.NvFieldradio>(x => x.description),\n      args: {\n        label: 'Label',\n        description: 'Description',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    // error\n    {\n      name: nameof<Components.NvFieldradio>(x => x.error),\n      args: {\n        label: 'Label',\n        error: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    // errorDescription\n    {\n      name: nameof<Components.NvFieldradio>(x => x.errorDescription),\n      args: {\n        label: 'Label',\n        error: true,\n        errorDescription: 'There is an error!',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    // checked\n    {\n      name: nameof<Components.NvFieldradio>(x => x.checked),\n      args: {\n        label: 'Label',\n        checked: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    // disabled\n    {\n      name: nameof<Components.NvFieldradio>(x => x.disabled),\n      args: {\n        label: 'Label',\n        disabled: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    // autofocus\n    {\n      name: nameof<Components.NvFieldradio>(x => x.autofocus),\n      args: {\n        label: 'Autofocus',\n        autofocus: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    // message\n    {\n      name: nameof<Components.NvFieldradio>(x => x.message),\n      description:\n        'Deprecated: use description instead. Adds a helpful hint message below the label.',\n      args: {\n        label: 'Message (Deprecated)',\n        message: 'This is a hint message',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    // labelBefore\n    {\n      name: nameof<Components.NvFieldradio>(x => x.labelBefore),\n      description:\n        'Deprecated: use labelPlacement instead. Set the label placement to before the input.',\n      args: {\n        label: 'Label Before (Deprecated)',\n        labelBefore: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    // DisabledChecked\n    {\n      name: 'DisabledChecked',\n      description: 'Radio button in a disabled and checked state.',\n      args: {\n        label: 'Label',\n        disabled: true,\n        checked: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    // RadioGroup\n    {\n      name: 'RadioGroup',\n      description:\n        'Multiple radio buttons grouped together demonstrating various states.',\n      template: (\n        <div data-class=\"flex flex-col gap-8\">\n          <fieldset data-class=\"flex flex-col gap-4\">\n            <legend data-class=\"text-sm font-medium mb-2\">\n              Basic Radio Group\n            </legend>\n            <nv-fieldradio\n              name=\"basic-group\"\n              value=\"option1\"\n              label=\"Option 1\"\n              checked\n            ></nv-fieldradio>\n            <nv-fieldradio\n              name=\"basic-group\"\n              value=\"option2\"\n              label=\"Option 2\"\n            ></nv-fieldradio>\n            <nv-fieldradio\n              name=\"basic-group\"\n              value=\"option3\"\n              label=\"Option 3\"\n            ></nv-fieldradio>\n          </fieldset>\n\n          <fieldset data-class=\"flex flex-col gap-4\">\n            <legend data-class=\"text-sm font-medium mb-2\">\n              Radio Group with Descriptions\n            </legend>\n            <nv-fieldradio\n              name=\"description-group\"\n              value=\"small\"\n              label=\"Small\"\n              description=\"Best for individual use\"\n            ></nv-fieldradio>\n            <nv-fieldradio\n              name=\"description-group\"\n              value=\"medium\"\n              label=\"Medium\"\n              description=\"Best for small teams\"\n              checked\n            ></nv-fieldradio>\n            <nv-fieldradio\n              name=\"description-group\"\n              value=\"large\"\n              label=\"Large\"\n              description=\"Best for large organizations\"\n            ></nv-fieldradio>\n          </fieldset>\n\n          <fieldset data-class=\"flex flex-col gap-4\">\n            <legend data-class=\"text-sm font-medium mb-2\">\n              Radio Group with Disabled Options\n            </legend>\n            <nv-fieldradio\n              name=\"disabled-group\"\n              value=\"available1\"\n              label=\"Available Option 1\"\n              checked\n            ></nv-fieldradio>\n            <nv-fieldradio\n              name=\"disabled-group\"\n              value=\"unavailable\"\n              label=\"Unavailable Option\"\n              description=\"This option is temporarily unavailable\"\n              disabled\n            ></nv-fieldradio>\n            <nv-fieldradio\n              name=\"disabled-group\"\n              value=\"available2\"\n              label=\"Available Option 2\"\n            ></nv-fieldradio>\n          </fieldset>\n\n          <fieldset data-class=\"flex flex-col gap-4\">\n            <legend data-class=\"text-sm font-medium mb-2\">\n              Radio Group with Error State\n            </legend>\n            <nv-fieldradio\n              name=\"error-group\"\n              value=\"option1\"\n              label=\"Option 1\"\n            ></nv-fieldradio>\n            <nv-fieldradio\n              name=\"error-group\"\n              value=\"option2\"\n              label=\"Option 2\"\n              error\n              error-description=\"This option has an error\"\n            ></nv-fieldradio>\n            <nv-fieldradio\n              name=\"error-group\"\n              value=\"option3\"\n              label=\"Option 3\"\n            ></nv-fieldradio>\n          </fieldset>\n\n          <fieldset data-class=\"flex gap-4\">\n            <legend data-class=\"text-sm font-medium mb-2\">\n              Horizontal Radio Group\n            </legend>\n            <nv-fieldradio\n              name=\"horizontal-group\"\n              value=\"yes\"\n              label=\"Yes\"\n              checked\n            ></nv-fieldradio>\n            <nv-fieldradio\n              name=\"horizontal-group\"\n              value=\"no\"\n              label=\"No\"\n            ></nv-fieldradio>\n            <nv-fieldradio\n              name=\"horizontal-group\"\n              value=\"maybe\"\n              label=\"Maybe\"\n            ></nv-fieldradio>\n          </fieldset>\n        </div>\n      ),\n    },\n    // SlotLabel\n    {\n      name: 'SlotLabel',\n      description: 'Radio button replacing the label with custom html.',\n      args: {\n        label: 'Label',\n      },\n      template: (\n        <nv-fieldradio data-storybook-args>\n          <span slot=\"label\">Custom Label</span>\n        </nv-fieldradio>\n      ),\n    },\n    // SlotDescription\n    {\n      name: 'SlotDescription',\n      description: 'Radio button replacing the description with custom html.',\n      args: {\n        label: 'Label',\n        description: 'Description',\n      },\n      template: (\n        <nv-fieldradio data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldradio>\n      ),\n    },\n    // SlotErrorDescription\n    {\n      name: 'SlotErrorDescription',\n      description:\n        'Radio button replacing the error description with custom html.',\n      args: {\n        label: 'Label',\n        error: true,\n        errorDescription: 'Error Description',\n      },\n      template: (\n        <nv-fieldradio data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldradio>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldradioDocs;\n"]}

package/dist/collection/components/nv-fieldradio/nv-fieldradio.js

@@ -70,7 +70,7 @@ export class NvFieldradio {
      */
     handleChange(event) {
         const target = event.target;
-        if ((target === null || target === void 0 ? void 0 : target.type) === 'radio') {
+        if (target?.type === 'radio') {
             Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(element => {
                 if (element.name === this.name) {
                     element.checked = false;
@@ -83,9 +83,9 @@ export class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'c41b30e8ef1cb1571f5b5343803121556967c616', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: '32c7fbd51351df01cd3ccddea785d53604a78c04', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), h("div", { key: 'bf576a4ce2be056bcc862c13da85e5af91fd5cb1', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '041dd4f586598b79ddf460f97895a753eff1aaa8', htmlFor: this.inputId }, h("slot", { key: '6c0881f1da0accd31b4c011ff3351d7f8e185c8f', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'b7b0c84a81c55340dddd0645199122c1789c0053', class: "description" }, h("slot", { key: '5ba50f1eaef357ee7c581a791ccd69e7ee4fcd67', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'ac8093ddba1e8bbd78f3791c30876b00d56d98c7', hidden: !this.error, class: "error-description" }, h("slot", { key: '93324ca047fb2a205ec71e35a7bc0fd9e92d81f5', name: "error-description" }, this.errorDescription))))));
+        return (h(Host, { key: '3fceb787d8e778b5724361f0a240a63375117941', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: 'a61213ca3fb3251cd02a3716859a0182a07428d7', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), h("div", { key: '4faca6c7d131897671d307053e28ade9e5f398f8', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'ab93b19fa1fd36d6d0fdae08ac4f935c82d0f355', htmlFor: this.inputId }, h("slot", { key: 'f914379ab7738b7ce2856be0738796da23c130c6', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'fc0d08ba7178252f8ba0c8f958a080f44b8e8a19', class: "description" }, h("slot", { key: '2d7936a1322ea9798998900fa92cfac1f574685c', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '39e27f0156df7ec64324012dc815cba251992d6f', hidden: !this.error, class: "error-description" }, h("slot", { key: '1d408d03c05c3eeba238aea59c5e6393c3befd82', name: "error-description" }, this.errorDescription))))));
     }
     static get is() { return "nv-fieldradio"; }
     static get formAssociated() { return true; }

package/dist/collection/components/nv-fieldradio/nv-fieldradio.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldradio.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldradio/nv-fieldradio.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,MAAM,EACN,KAAK,EACL,OAAO,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAIpC;;;;GAIG;AAOH,MAAM,OAAO,YAAY;IANzB;QAmBE;;;WAGG;QAEM,gBAAW,GAAY,KAAK,CAAC;QAYtC,uBAAuB;QACvB,8EAA8E;QAC9E,oBAAoB;QAEpB;;;;;WAKG;QAEM,YAAO,GAAW,MAAM,EAAE,CAAC;QA0CpC;;;;;WAKG;QAEM,UAAK,GAAY,KAAK,CAAC;QAUhC;;WAEG;QAEH,YAAO,GAAY,KAAK,CAAC;QAEzB;;WAEG;QAEM,aAAQ,GAAY,KAAK,CAAC;QAEnC;;;;WAIG;QAGM,cAAS,GAAY,KAAK,CAAC;KAiGrC;IApMC,mBAAmB;QACjB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;QAClC,CAAC;QAED,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;QACjC,CAAC;IACH,CAAC;IAwGD,mBAAmB;IACnB,8EAA8E;IAC9E,kBAAkB;IAElB;;;OAGG;IAEH,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAED;;;;OAIG;IAEH,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEhD,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,MAAK,OAAO,EAAE,CAAC;YAC7B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAChE,OAAO,CAAC,EAAE;gBACR,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;oBAC/B,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;gBAC1B,CAAC;YACH,CAAC,CACF,CAAC;YAEF,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;QAChC,CAAC;IACH,CAAC;IAED,qBAAqB;IACrB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,EAC5D,IAAI,CAAC,KAAK,IAAI,OAAO,CACtB;YAED,8DACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB;YAEF,4DAAK,KAAK,EAAC,gBAAgB;gBACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAC1D,8DAAO,OAAO,EAAE,IAAI,CAAC,OAAO;oBAC1B,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT;gBAEA,CAAC,IAAI,CAAC,WAAW;oBAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC,IAAI,CAClD,4DAAK,KAAK,EAAC,aAAa;oBACtB,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP;gBAEA,CAAC,IAAI,CAAC,gBAAgB;oBACrB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC,IAAI,CACxD,4DAAK,MAAM,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,mBAAmB;oBACjD,6DAAM,IAAI,EAAC,mBAAmB,IAAE,IAAI,CAAC,gBAAgB,CAAQ,CACzD,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldradio',\n  shadow: false,\n  styleUrl: 'styles/nv-fieldradio.scss',\n  formAssociated: true,\n})\nexport class NvFieldradio {\n  @Element() el: HTMLNvFieldradioElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Adds a helpful hint message below the label\n   * @deprecated use description instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Set the label placement to before the input\n   * @deprecated use labelPlacement instead.\n   */\n  @Prop({ reflect: true })\n  readonly labelBefore: boolean = false;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Use this to assign a group name to your radio buttons. When you have\n   * multiple radio buttons with the same name, users will be able to select\n   * only one option within that group, making your forms more organized and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Defines what data will be sent when the radio button is selected.\n   * This helps you identify which option the user has chosen in your form,\n   * ensuring accurate data collection. When the form is submitted, the data\n   * will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value: string;\n\n  /**\n   * Sets the text content that is rendered next to the input element of type\n   * radio. This label is essential for accessibility and user clarity, as it\n   * describes the purpose or option of the radio button.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Defines the position of the label relative to the radio button.\n   */\n  @Prop({ mutable: true, reflect: true })\n  labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Adds a helpful hint message below the label. This description provides\n   * extra information or context about the radio button option, assisting users\n   * in making more informed choices.\n   */\n  @Prop({ mutable: true, reflect: true })\n  description: string;\n\n  /**\n   * Highlight the radio button with error styling. It helps users quickly\n   * identify which option needs attention, improving their form-filling\n   * experience by making issues more visible.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the radio\n   * button.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Controls whether the radio button is selected.\n   */\n  @Prop({ mutable: true, reflect: true })\n  checked: boolean = false;\n\n  /**\n   * Disables the radio button, making it un-selectable.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event({ bubbles: false })\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  handleCheckedChange(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the radio button input element and controls\n   * the checked state of the host elements.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target?.type === 'radio') {\n      Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(\n        element => {\n          if (element.name === this.name) {\n            element.checked = false;\n          }\n        },\n      );\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <input\n          type=\"radio\"\n          id={this.inputId}\n          name={this.name}\n          autofocus={this.autofocus}\n          autocomplete=\"off\"\n          value={this.value}\n          checked={this.checked}\n          disabled={this.disabled}\n        />\n\n        <div class=\"text-container\">\n          {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n            <label htmlFor={this.inputId}>\n              <slot name=\"label\">{this.label}</slot>\n            </label>\n          )}\n\n          {(this.description ||\n            this.el.querySelector('[slot=\"description\"]')) && (\n            <div class=\"description\">\n              <slot name=\"description\">{this.description}</slot>\n            </div>\n          )}\n\n          {(this.errorDescription ||\n            this.el.querySelector('[slot=\"error-description\"]')) && (\n            <div hidden={!this.error} class=\"error-description\">\n              <slot name=\"error-description\">{this.errorDescription}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-fieldradio.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldradio/nv-fieldradio.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldradio',\n  shadow: false,\n  styleUrl: 'styles/nv-fieldradio.scss',\n  formAssociated: true,\n})\nexport class NvFieldradio {\n  @Element() el: HTMLNvFieldradioElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Adds a helpful hint message below the label\n   * @deprecated use description instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Set the label placement to before the input\n   * @deprecated use labelPlacement instead.\n   */\n  @Prop({ reflect: true })\n  readonly labelBefore: boolean = false;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Use this to assign a group name to your radio buttons. When you have\n   * multiple radio buttons with the same name, users will be able to select\n   * only one option within that group, making your forms more organized and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Defines what data will be sent when the radio button is selected.\n   * This helps you identify which option the user has chosen in your form,\n   * ensuring accurate data collection. When the form is submitted, the data\n   * will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value: string;\n\n  /**\n   * Sets the text content that is rendered next to the input element of type\n   * radio. This label is essential for accessibility and user clarity, as it\n   * describes the purpose or option of the radio button.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Defines the position of the label relative to the radio button.\n   */\n  @Prop({ mutable: true, reflect: true })\n  labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Adds a helpful hint message below the label. This description provides\n   * extra information or context about the radio button option, assisting users\n   * in making more informed choices.\n   */\n  @Prop({ mutable: true, reflect: true })\n  description: string;\n\n  /**\n   * Highlight the radio button with error styling. It helps users quickly\n   * identify which option needs attention, improving their form-filling\n   * experience by making issues more visible.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the radio\n   * button.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Controls whether the radio button is selected.\n   */\n  @Prop({ mutable: true, reflect: true })\n  checked: boolean = false;\n\n  /**\n   * Disables the radio button, making it un-selectable.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event({ bubbles: false })\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  handleCheckedChange(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the radio button input element and controls\n   * the checked state of the host elements.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target?.type === 'radio') {\n      Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(\n        element => {\n          if (element.name === this.name) {\n            element.checked = false;\n          }\n        },\n      );\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <input\n          type=\"radio\"\n          id={this.inputId}\n          name={this.name}\n          autofocus={this.autofocus}\n          autocomplete=\"off\"\n          value={this.value}\n          checked={this.checked}\n          disabled={this.disabled}\n        />\n\n        <div class=\"text-container\">\n          {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n            <label htmlFor={this.inputId}>\n              <slot name=\"label\">{this.label}</slot>\n            </label>\n          )}\n\n          {(this.description ||\n            this.el.querySelector('[slot=\"description\"]')) && (\n            <div class=\"description\">\n              <slot name=\"description\">{this.description}</slot>\n            </div>\n          )}\n\n          {(this.errorDescription ||\n            this.el.querySelector('[slot=\"error-description\"]')) && (\n            <div hidden={!this.error} class=\"error-description\">\n              <slot name=\"error-description\">{this.errorDescription}</slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -4,11 +4,13 @@ const NvFieldselectDocs = {
     component: 'nv-fieldselect',
     subcomponents: ['nv-badge', 'nv-button'],
     stories: [
+        // Default
         {
             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
         {
             name: nameof(x => x.label),
             args: {
@@ -16,6 +18,7 @@ const NvFieldselectDocs = {
             },
             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
         {
             name: nameof(x => x.description),
             args: {
@@ -24,14 +27,7 @@ const NvFieldselectDocs = {
             },
             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"))),
         },
-        {
-            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
         {
             name: nameof(x => x.value),
             args: {
@@ -40,6 +36,7 @@ const NvFieldselectDocs = {
             },
             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
         {
             name: nameof(x => x.disabled),
             args: {
@@ -49,6 +46,7 @@ const NvFieldselectDocs = {
             },
             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
         {
             name: nameof(x => x.readonly),
             args: {
@@ -58,6 +56,7 @@ const NvFieldselectDocs = {
             },
             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")))),
         },
+        // displayValue
         {
             name: nameof(x => x.displayValue),
             args: {
@@ -68,6 +67,7 @@ const NvFieldselectDocs = {
             },
             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
         {
             name: nameof(x => x.required),
             args: {
@@ -76,6 +76,16 @@ const NvFieldselectDocs = {
             },
             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"))),
         },
+        // ariaRequiredAttr
+        {
+            name: nameof(x => x.ariaRequiredAttr),
+            args: {
+                label: 'Aria Required Field',
+                ariaRequiredAttr: 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
         {
             name: nameof(x => x.error),
             args: {
@@ -84,6 +94,7 @@ const NvFieldselectDocs = {
             },
             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
         {
             name: nameof(x => x.success),
             args: {
@@ -92,6 +103,7 @@ const NvFieldselectDocs = {
             },
             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
         {
             name: nameof(x => x.multiple),
             args: {
@@ -100,6 +112,7 @@ const NvFieldselectDocs = {
             },
             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")))),
         },
+        // autofocus
         {
             name: nameof(x => x.autofocus),
             args: {
@@ -108,11 +121,7 @@ const NvFieldselectDocs = {
             },
             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"))),
         },
-        {
-            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"))),
-        },
+        // fluid
         {
             name: nameof(x => x.fluid),
             args: {
@@ -121,37 +130,84 @@ const NvFieldselectDocs = {
             },
             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"))),
         },
+        // message
         {
-            name: 'SlotDescription',
-            description: 'You can use the `description` slot to customize the content of the description.',
+            name: nameof(x => x.message),
+            description: "Deprecated: Use 'description' instead. Message defines a 'hint' message for the Select Field.",
             args: {
-                label: 'Select with Description',
-                description: 'This is a description.',
+                label: 'Message (Deprecated)',
+                message: 'This is a hint message',
             },
-            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"))),
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"))),
         },
+        // validation
         {
-            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"))),
+            name: nameof(x => x.validation),
+            description: 'Deprecated: Use errorDescription and set the error prop instead. Add the message to the validation state.',
+            args: {
+                label: 'Validation (Deprecated)',
+                validation: 'This is a validation message',
+            },
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"))),
         },
+        // options
         {
-            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"))),
+            name: nameof(x => x.options),
+            description: 'Options to display in the select. Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]',
+            args: {
+                label: 'Select with Options',
+                options: [
+                    { label: 'Option 1', value: '1' },
+                    { label: 'Option 2', value: '2' },
+                    { label: 'Option 3', value: '3' },
+                    { label: 'Option 4', value: '4', disabled: true },
+                ],
+            },
+            template: h("nv-fieldselect", { "data-storybook-args": true }),
         },
+        // inputId
         {
-            name: 'SlotErrorDescription',
-            description: 'You can use the `error-description` slot to customize the content of the error description.',
+            name: nameof(x => x.inputId),
+            description: 'Sets the ID for the select element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.',
+            args: {
+                label: 'Select with Custom ID',
+                inputId: 'custom-select-id',
+            },
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"))),
+        },
+        // name
+        {
+            name: nameof(x => x.name),
+            description: 'Defines the name attribute of the select field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the selected data in form submissions. It should be unique within the form to avoid conflicts.',
+            args: {
+                label: 'Select with Name',
+                name: 'country-select',
+            },
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"))),
+        },
+        // errorDescription
+        {
+            name: nameof(x => x.errorDescription),
+            description: "Show a helpful message under the select field when there's a problem. It explains what's wrong and how users can fix it, making the error easier to understand and resolve.",
             args: {
                 label: 'Select with Error',
                 error: true,
-                errorDescription: 'This is an error.',
+                errorDescription: 'Please select a valid option.',
             },
-            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"))),
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"))),
         },
+        // Placeholder
         {
-            name: 'Options Array',
+            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"))),
+        },
+        // OptionsArray
+        {
+            name: 'OptionsArray',
             args: {
                 label: 'Select with Options Array',
                 options: [
@@ -164,8 +220,9 @@ const NvFieldselectDocs = {
             },
             template: h("nv-fieldselect", { "data-storybook-args": true }),
         },
+        // OptionsArrayWithPreselection
         {
-            name: 'Options Array with Preselection',
+            name: 'OptionsArrayWithPreselection',
             args: {
                 label: 'Select with Preselected Option',
                 options: [
@@ -178,6 +235,57 @@ const NvFieldselectDocs = {
             },
             template: h("nv-fieldselect", { "data-storybook-args": true }),
         },
+        // SlotDefault
+        {
+            name: 'SlotDefault',
+            description: 'Content to be placed inside the select element.',
+            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"))),
+        },
+        // SlotLabel
+        {
+            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
+        {
+            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"))),
+        },
+        // SlotLeadingInput
+        {
+            name: 'SlotLeadingInput',
+            description: 'Content to be placed before the select input, within the select container.',
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("span", { slot: "leading-input" }, "Leading"), h("option", { value: "1" }, "Option 1"), h("option", { value: "2" }, "Option 2"))),
+        },
+        // SlotBeforeInput
+        {
+            name: 'SlotBeforeInput',
+            description: 'You can use the `before-input` slot to customize the content before the select.',
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("span", { slot: "before-input" }, "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"))),
+        },
+        // SlotAfterInput
+        {
+            name: 'SlotAfterInput',
+            description: 'You can use the `after-input` slot to customize the content after the select.',
+            template: (h("nv-fieldselect", { "data-storybook-args": true }, h("span", { slot: "after-input" }, "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
+        {
+            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;

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

@@ -1 +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    {\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    {\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    {\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    {\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    {\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    {\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    {\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    {\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    {\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    {\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    {\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    {\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    {\n      name: nameof<Components.NvFieldselect>(x => x.autofocus),\n      args: {\n        label: 'Autofocus',\n        autofocus: 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    {\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    {\n      name: nameof<Components.NvFieldtextarea>(x => x.fluid),\n      args: {\n        label: 'Fluid',\n        fluid: 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    {\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    {\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    {\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    {\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      name: 'Options Array',\n      args: {\n        label: 'Select with Options Array',\n        options: [\n          { label: 'Paris', value: 'paris' },\n          { label: 'London', value: 'london' },\n          { label: 'New York', value: 'ny' },\n          { label: 'Tokyo', value: 'tokyo', disabled: true },\n          { label: 'Berlin', value: 'berlin' },\n        ],\n      },\n      template: <nv-fieldselect data-storybook-args></nv-fieldselect>,\n    },\n    {\n      name: 'Options Array with Preselection',\n      args: {\n        label: 'Select with Preselected Option',\n        options: [\n          { label: 'Paris', value: 'paris' },\n          { label: 'London', value: 'london', selected: true },\n          { label: 'New York', value: 'ny' },\n          { label: 'Tokyo', value: 'tokyo', disabled: true },\n          { label: 'Berlin', value: 'berlin' },\n        ],\n      },\n      template: <nv-fieldselect data-storybook-args></nv-fieldselect>,\n    },\n  ],\n};\n\nexport default NvFieldselectDocs;\n"]}
+{"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\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\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\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    // value\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\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\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    // displayValue\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\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    // ariaRequiredAttr\n    {\n      name: nameof<Components.NvFieldselect>(x => x.ariaRequiredAttr),\n      args: {\n        label: 'Aria Required Field',\n        ariaRequiredAttr: 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\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\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\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    // autofocus\n    {\n      name: nameof<Components.NvFieldselect>(x => x.autofocus),\n      args: {\n        label: 'Autofocus',\n        autofocus: 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    // fluid\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.fluid),\n      args: {\n        label: 'Fluid',\n        fluid: 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    // message\n    {\n      name: nameof<Components.NvFieldselect>(x => x.message),\n      description:\n        \"Deprecated: Use 'description' instead. Message defines a 'hint' message for the Select Field.\",\n      args: {\n        label: 'Message (Deprecated)',\n        message: 'This is a hint message',\n      },\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n        </nv-fieldselect>\n      ),\n    },\n    // validation\n    {\n      name: nameof<Components.NvFieldselect>(x => x.validation),\n      description:\n        'Deprecated: Use errorDescription and set the error prop instead. Add the message to the validation state.',\n      args: {\n        label: 'Validation (Deprecated)',\n        validation: 'This is a validation message',\n      },\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n        </nv-fieldselect>\n      ),\n    },\n    // options\n    {\n      name: nameof<Components.NvFieldselect>(x => x.options),\n      description:\n        'Options to display in the select. Format: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]',\n      args: {\n        label: 'Select with Options',\n        options: [\n          { label: 'Option 1', value: '1' },\n          { label: 'Option 2', value: '2' },\n          { label: 'Option 3', value: '3' },\n          { label: 'Option 4', value: '4', disabled: true },\n        ],\n      },\n      template: <nv-fieldselect data-storybook-args></nv-fieldselect>,\n    },\n    // inputId\n    {\n      name: nameof<Components.NvFieldselect>(x => x.inputId),\n      description:\n        'Sets the ID for the select element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.',\n      args: {\n        label: 'Select with Custom ID',\n        inputId: 'custom-select-id',\n      },\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n        </nv-fieldselect>\n      ),\n    },\n    // name\n    {\n      name: nameof<Components.NvFieldselect>(x => x.name),\n      description:\n        'Defines the name attribute of the select field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the selected data in form submissions. It should be unique within the form to avoid conflicts.',\n      args: {\n        label: 'Select with Name',\n        name: 'country-select',\n      },\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n        </nv-fieldselect>\n      ),\n    },\n    // errorDescription\n    {\n      name: nameof<Components.NvFieldselect>(x => x.errorDescription),\n      description:\n        \"Show a helpful message under the select field when there's a problem. It explains what's wrong and how users can fix it, making the error easier to understand and resolve.\",\n      args: {\n        label: 'Select with Error',\n        error: true,\n        errorDescription: 'Please select a valid option.',\n      },\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n        </nv-fieldselect>\n      ),\n    },\n    // Placeholder\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    // OptionsArray\n    {\n      name: 'OptionsArray',\n      args: {\n        label: 'Select with Options Array',\n        options: [\n          { label: 'Paris', value: 'paris' },\n          { label: 'London', value: 'london' },\n          { label: 'New York', value: 'ny' },\n          { label: 'Tokyo', value: 'tokyo', disabled: true },\n          { label: 'Berlin', value: 'berlin' },\n        ],\n      },\n      template: <nv-fieldselect data-storybook-args></nv-fieldselect>,\n    },\n    // OptionsArrayWithPreselection\n    {\n      name: 'OptionsArrayWithPreselection',\n      args: {\n        label: 'Select with Preselected Option',\n        options: [\n          { label: 'Paris', value: 'paris' },\n          { label: 'London', value: 'london', selected: true },\n          { label: 'New York', value: 'ny' },\n          { label: 'Tokyo', value: 'tokyo', disabled: true },\n          { label: 'Berlin', value: 'berlin' },\n        ],\n      },\n      template: <nv-fieldselect data-storybook-args></nv-fieldselect>,\n    },\n    // SlotDefault\n    {\n      name: 'SlotDefault',\n      description: 'Content to be placed inside the select element.',\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    // SlotLabel\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\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    // SlotLeadingInput\n    {\n      name: 'SlotLeadingInput',\n      description:\n        'Content to be placed before the select input, within the select container.',\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <span slot=\"leading-input\">Leading</span>\n          <option value=\"1\">Option 1</option>\n          <option value=\"2\">Option 2</option>\n        </nv-fieldselect>\n      ),\n    },\n    // SlotBeforeInput\n    {\n      name: 'SlotBeforeInput',\n      description:\n        'You can use the `before-input` slot to customize the content before the select.',\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <span slot=\"before-input\">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    // SlotAfterInput\n    {\n      name: 'SlotAfterInput',\n      description:\n        'You can use the `after-input` slot to customize the content after the select.',\n      template: (\n        <nv-fieldselect data-storybook-args>\n          <span slot=\"after-input\">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\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"]}

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

@@ -372,15 +372,15 @@ export class NvFieldselect {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '19dc919c517b20e9271019c3c035a5d3965ac500' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'd490a55c4c2bbea30ea5474906e16ac1e0ebf09d', htmlFor: this.inputId }, h("slot", { key: 'eaa51f927cc6c16899f806832afe5807948e5aed', name: "label" }, this.label))), h("div", { key: '04ee5ad2797e3f315c21359b09a9350c9c69789b', class: "select-wrapper" }, h("slot", { key: '7b63bc1fdf20a286635c36f7a1d865365284dd68', name: "before-input" }), h("div", { key: 'a98eb2c006fe321bc6f2e28d18afe24641cd4227', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: '2946fafe902e662c5fa37c8a238cd98a04b9e2f5', name: "leading-input" }), this.internalReadonly && (h("input", { key: '7512f2cca62e6f4e86bd32b370730e5b630bd8c1', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
+        return (h(Host, { key: '40714f4af41b7d652d1a468e56849fe1debe8d60' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '3cbb3c5d86df0272ae035e4d55137b2abceed7df', htmlFor: this.inputId }, h("slot", { key: '91c991cc47389ff46346df6616733e205a5cbea7', name: "label" }, this.label))), h("div", { key: '42dfb725f9ff9caf8c00f4b1189f22d229269156', class: "select-wrapper" }, h("slot", { key: 'bbe11ade568532183c52ec56c9d2b8ab667e9d5c', name: "before-input" }), h("div", { key: '8cfe703cd711c2f4831655d616345f06a6f358b0', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: '1c4194d8e9d98467e7c37400cf0434993e8ea91e', name: "leading-input" }), this.internalReadonly && (h("input", { key: '2c2caf1d45e6d68a644539ded3c7add991abf300', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` })), h("select", Object.assign({ key: '6f6c473e866a81ff53baa1c647d3563033d8d71e', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: useNativeRequired ? this.required : undefined }, (ariaRequiredValue !== undefined && {
-            'aria-required': String(ariaRequiredValue),
-        }), { multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                : `${this.inputId}-description` })), h("select", { key: '744913ecd27a2d33996b13f685679467fc837c30', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+                'aria-required': String(ariaRequiredValue),
+            }), multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` }), this.options && this.options.length > 0 ? (this.options.map(option => (h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (h("slot", null))), h("div", { key: '11ace2d1d554e07071441a92b751f9f1e40c41b9', class: "select-icons" }, this.error && (h("nv-icon", { key: '5fe0c48e595e4e51fd88a1cf3b593349eb8b6880', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '992b8433aa0430828910e9b0d7a5b5bb9cbdde02', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (h("nv-iconbutton", { key: 'a1c89dc4437e96680a6d1ddf4db85b478ad52b28', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), h("slot", { key: 'fe76b1d3caa6addb556d6743626c6bc160d77d53', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '50bd8a56780a1b722d38279bb9f51860bf36e8b6', class: "description", id: `${this.inputId}-description` }, h("slot", { key: '3bfc2999c532ec0c8e192a5e442a0294e70cfc8d', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '5e807d931efdd9d3a69c90dee42497234f7c2cda', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: '48db0766450942d8d8ce4cdfa3f80a46d7c18a77', name: "error-description" }, this.errorDescription)))));
+                : `${this.inputId}-description` }, this.options && this.options.length > 0 ? (this.options.map(option => (h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (h("slot", null))), h("div", { key: '891676c5a9d755b49fd375fba8f193c990d41cfa', class: "select-icons" }, this.error && (h("nv-icon", { key: '2d4528dba1eccbc1acc39d2bfb54a13d03913b9b', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '035768470154e3e529921741802ae74f1b56b29c', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (h("nv-iconbutton", { key: '23a1006cc1f1dfa9862af41e64d5d57539bff127', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), h("slot", { key: '5f899c5426e304c1d83b046317eaf732d919cb55', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '0f78de9aa808a625dc6a8f0148a43450992b787e', class: "description", id: `${this.inputId}-description` }, h("slot", { key: '72d96f2909d0b793dcd24fe939b58ebc5e9c7de1', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'c10fdcc3592d36fea37f283835abcf8790a99010', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: 'c8783f8f94d1c9f082e60e38b061dae49e5b5584', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldselect"; }
     static get formAssociated() { return true; }