@nova-design-system/nova-webcomponents 3.0.0-beta.28 → 3.0.0-beta.30

package/dist/cjs/nv-tablehead.cjs.entry.js

@@ -14,7 +14,7 @@ const NvTablehead = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '664bc779e57e372c4939f34e79be34672c701b9b' }, index.h("thead", { key: '772dfe48aea949fa05229f036589947dcf097992' }, index.h("slot", { key: 'bc76551105f0f0dfb4d6639bbe5b304b5b824328' }))));
+        return (index.h(index.Host, { key: '12149e94ecec13e7cc4711cdd86dad480a6f80dc' }, index.h("thead", { key: '3083c897b49ac72a0758a2c78efa10b64a90a4ee' }, index.h("slot", { key: 'd40f3b40723b2bbed4c5c1fd800a0442ab094eea' }))));
     }
 };
 NvTablehead.style = NvTableheadStyle0;

package/dist/cjs/nv-tablerow.cjs.entry.js

@@ -14,7 +14,7 @@ const NvTablerow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '2b24e970bb04d2ce5e9a95a136127fbdaa84a677' }, index.h("tr", { key: 'd6c6a5ca230a5282a152db23885f200c04c43be4' }, index.h("slot", { key: '84d7b5452772f4ff37e481fa14bd28b25cb0fd77' }))));
+        return (index.h(index.Host, { key: 'acb4cbd0903238ff07d45d556123278e9fddb800' }, index.h("tr", { key: 'a2d47ed6d31e1d84cfe0c055dc50c9e32de41286' }, index.h("slot", { key: '7bd7354523db2f45b8db3a78d32b6b26afc136ed' }))));
     }
 };
 NvTablerow.style = NvTablerowStyle0;

package/dist/cjs/nv-tooltip.cjs.entry.js

@@ -26,7 +26,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '590d897c7012f9020f6ac6e9f49acb840b4067ca' }, index.h("slot", { key: '9479477482e361a042d464311a90dc3b0babb9e5' }), index.h("nv-popover", { key: '89a2903946a89074201b5eb61a64b0595d831512', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '5a6097b56440b06c33b20d5c06054f6aad9c9a42', slot: "content" }, this.message), index.h("slot", { key: '595f1185183da50e916b243276c38a10a84e5712', name: "content" }))));
+        return (index.h(index.Host, { key: 'f2a8c20a32c58f486c6ab3910947274c6c9307e3' }, index.h("slot", { key: '0dd69aa01fa88f5640128014145a3dfe27cb6a11' }), index.h("nv-popover", { key: 'f11b6473623a6223903c7bec2344af00c5952814', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'ca4426091740d7491f92aebaea090ff109a09436', slot: "content" }, this.message), index.h("slot", { key: '94abaf31618c29d02439493f7628c7886c7d4ec0', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/collection/collection-manifest.json

@@ -16,6 +16,8 @@
     "components/nv-fieldcheckbox/nv-fieldcheckbox.js",
     "components/nv-fielddropdown/nv-fielddropdown.js",
     "components/nv-fielddropdownitem/nv-fielddropdownitem.js",
+    "components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.js",
+    "components/nv-fieldmultiselect/nv-fieldmultiselect.js",
     "components/nv-fieldnumber/nv-fieldnumber.js",
     "components/nv-fieldpassword/nv-fieldpassword.js",
     "components/nv-fieldradio/nv-fieldradio.js",

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

@@ -131,6 +131,76 @@ nv-badge.badge-5 .close:focus-visible, nv-badge.badge-5 .close:has(:focus-visibl
 nv-badge.badge-5 nv-icon {
   color: var(--color-rainbow-5-content);
 }
+nv-badge.badge-6 {
+  color: var(--color-rainbow-6-content);
+  background-color: var(--color-rainbow-6-background);
+}
+nv-badge.badge-6 .close:focus, nv-badge.badge-6 .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-6 .close:focus-visible, nv-badge.badge-6 .close:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-rainbow-6-content);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-6 nv-icon {
+  color: var(--color-rainbow-6-content);
+}
+nv-badge.badge-7 {
+  color: var(--color-rainbow-7-content);
+  background-color: var(--color-rainbow-7-background);
+}
+nv-badge.badge-7 .close:focus, nv-badge.badge-7 .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-7 .close:focus-visible, nv-badge.badge-7 .close:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-rainbow-7-content);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-7 nv-icon {
+  color: var(--color-rainbow-7-content);
+}
+nv-badge.badge-8 {
+  color: var(--color-rainbow-8-content);
+  background-color: var(--color-rainbow-8-background);
+}
+nv-badge.badge-8 .close:focus, nv-badge.badge-8 .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-8 .close:focus-visible, nv-badge.badge-8 .close:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-rainbow-8-content);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-8 nv-icon {
+  color: var(--color-rainbow-8-content);
+}
+nv-badge.badge-9 {
+  color: var(--color-rainbow-9-content);
+  background-color: var(--color-rainbow-9-background);
+}
+nv-badge.badge-9 .close:focus, nv-badge.badge-9 .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-9 .close:focus-visible, nv-badge.badge-9 .close:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-rainbow-9-content);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-9 nv-icon {
+  color: var(--color-rainbow-9-content);
+}
+nv-badge.badge-10 {
+  color: var(--color-rainbow-10-content);
+  background-color: var(--color-rainbow-10-background);
+}
+nv-badge.badge-10 .close:focus, nv-badge.badge-10 .close:focus-within {
+  outline: none;
+}
+nv-badge.badge-10 .close:focus-visible, nv-badge.badge-10 .close:has(:focus-visible) {
+  outline: var(--focus-outline-stroke) solid var(--color-rainbow-10-content);
+  outline-offset: calc(var(--focus-outline-offset) * 0.2);
+}
+nv-badge.badge-10 nv-icon {
+  color: var(--color-rainbow-10-content);
+}
 nv-badge span {
   font-size: var(--font-size-xs);
   line-height: var(--line-height-xs) !important;

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

@@ -20,7 +20,7 @@ const NvBadgeDocs = {
         },
         {
             name: nameof(x => x.color),
-            template: (h("div", { "data-class": "flex gap-4" }, h("nv-badge", { "data-storybook-args": true, color: "1", label: "Badge color 1" }), h("nv-badge", { "data-storybook-args": true, color: "2", label: "Badge color 2" }), h("nv-badge", { "data-storybook-args": true, color: "3", label: "Badge color 3" }), h("nv-badge", { "data-storybook-args": true, color: "4", label: "Badge color 4" }), h("nv-badge", { "data-storybook-args": true, color: "5", label: "Badge color 5" }))),
+            template: (h("div", { "data-class": "flex gap-4" }, h("nv-badge", { "data-storybook-args": true, color: "1", label: "Badge color 1" }), h("nv-badge", { "data-storybook-args": true, color: "2", label: "Badge color 2" }), h("nv-badge", { "data-storybook-args": true, color: "3", label: "Badge color 3" }), h("nv-badge", { "data-storybook-args": true, color: "4", label: "Badge color 4" }), h("nv-badge", { "data-storybook-args": true, color: "5", label: "Badge color 5" }), h("nv-badge", { "data-storybook-args": true, color: "6", label: "Badge color 6" }), h("nv-badge", { "data-storybook-args": true, color: "7", label: "Badge color 7" }), h("nv-badge", { "data-storybook-args": true, color: "8", label: "Badge color 8" }), h("nv-badge", { "data-storybook-args": true, color: "9", label: "Badge color 9" }), h("nv-badge", { "data-storybook-args": true, color: "10", label: "Badge color 10" }))),
         },
         {
             name: nameof(x => x.leadIcon),

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

@@ -1 +1 @@
-{"version":3,"file":"nv-badge.docs.js","sourceRoot":"","sources":["../../../src/components/nv-badge/nv-badge.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,WAAW,GAAiC;IAChD,SAAS,EAAE,UAAU;IACrB,aAAa,EAAE,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE;gBACJ,KAAK,EAAE,OAAO;aACf;YACD,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YAC9C,IAAI,EAAE;gBACJ,KAAK,EAAE,aAAa;aACrB;YACD,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YAC9C,QAAQ,EAAE,CACR,yBAAgB,YAAY;gBAC1B,6CAEE,KAAK,EAAC,GAAG,EACT,KAAK,EAAC,eAAe,GACX;gBACZ,6CAEE,KAAK,EAAC,GAAG,EACT,KAAK,EAAC,eAAe,GACX;gBACZ,6CAEE,KAAK,EAAC,GAAG,EACT,KAAK,EAAC,eAAe,GACX;gBACZ,6CAEE,KAAK,EAAC,GAAG,EACT,KAAK,EAAC,eAAe,GACX;gBACZ,6CAEE,KAAK,EAAC,GAAG,EACT,KAAK,EAAC,eAAe,GACX,CACR,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YACjD,IAAI,EAAE;gBACJ,QAAQ,EAAE,MAAM;gBAChB,KAAK,EAAE,iBAAiB;aACzB;YACD,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,qBAAqB;YAClC,IAAI,EAAE;gBACJ,KAAK,EAAE,iBAAiB;aACzB;YACD,QAAQ,EAAE,CACR;gBACE,eAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAW,CAC1C,CACZ;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YACpD,WAAW,EAAE,8BAA8B;YAC3C,IAAI,EAAE;gBACJ,WAAW,EAAE,IAAI;gBACjB,KAAK,EAAE,mBAAmB;aAC3B;YACD,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;YAC/C,WAAW,EAAE,0BAA0B;YACvC,IAAI,EAAE;gBACJ,MAAM,EAAE,IAAI;gBACZ,KAAK,EAAE,cAAc;aACtB;YACD,QAAQ,EAAE,8CAAyC;SACpD;QACD;YACE,IAAI,EAAE,MAAM,CAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;YACzD,WAAW,EAAE,gCAAgC;YAC7C,IAAI,EAAE;gBACJ,gBAAgB,EAAE,IAAI;gBACtB,WAAW,EAAE,IAAI;gBACjB,KAAK,EAAE,0BAA0B;aAClC;YACD,QAAQ,EAAE,8CAAyC;SACpD;KACF;CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvBadgeDocs: NovaDocs<Components.NvBadge> = {\n  component: 'nv-badge',\n  subcomponents: ['nv-icon'],\n  stories: [\n    {\n      name: 'Default',\n      args: {\n        label: 'Label',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.label),\n      args: {\n        label: 'Badge Label',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.color),\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-badge\n            data-storybook-args\n            color=\"1\"\n            label=\"Badge color 1\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"2\"\n            label=\"Badge color 2\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"3\"\n            label=\"Badge color 3\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"4\"\n            label=\"Badge color 4\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"5\"\n            label=\"Badge color 5\"\n          ></nv-badge>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.leadIcon),\n      args: {\n        leadIcon: 'user',\n        label: 'Badge with Icon',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: 'LeadingIconSlot',\n      description: 'Badge with an icon.',\n      args: {\n        label: 'Badge with Icon',\n      },\n      template: (\n        <nv-badge data-storybook-args>\n          <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n        </nv-badge>\n      ),\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.dismissible),\n      description: 'Badge with a dismiss button.',\n      args: {\n        dismissible: true,\n        label: 'Dismissible Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.hidden),\n      description: 'Badge with hidden state.',\n      args: {\n        hidden: true,\n        label: 'Hidden Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.preventAutoClose),\n      description: 'Badge with prevent auto close.',\n      args: {\n        preventAutoClose: true,\n        dismissible: true,\n        label: 'Prevent Auto Close Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n  ],\n};\n\nexport default NvBadgeDocs;\n"]}
+{"version":3,"file":"nv-badge.docs.js","sourceRoot":"","sources":["../../../src/components/nv-badge/nv-badge.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 NvBadgeDocs: NovaDocs<Components.NvBadge> = {\n  component: 'nv-badge',\n  subcomponents: ['nv-icon'],\n  stories: [\n    {\n      name: 'Default',\n      args: {\n        label: 'Label',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.label),\n      args: {\n        label: 'Badge Label',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.color),\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-badge\n            data-storybook-args\n            color=\"1\"\n            label=\"Badge color 1\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"2\"\n            label=\"Badge color 2\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"3\"\n            label=\"Badge color 3\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"4\"\n            label=\"Badge color 4\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"5\"\n            label=\"Badge color 5\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"6\"\n            label=\"Badge color 6\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"7\"\n            label=\"Badge color 7\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"8\"\n            label=\"Badge color 8\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"9\"\n            label=\"Badge color 9\"\n          ></nv-badge>\n          <nv-badge\n            data-storybook-args\n            color=\"10\"\n            label=\"Badge color 10\"\n          ></nv-badge>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.leadIcon),\n      args: {\n        leadIcon: 'user',\n        label: 'Badge with Icon',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: 'LeadingIconSlot',\n      description: 'Badge with an icon.',\n      args: {\n        label: 'Badge with Icon',\n      },\n      template: (\n        <nv-badge data-storybook-args>\n          <nv-icon slot=\"leading-icon\" name=\"user\"></nv-icon>\n        </nv-badge>\n      ),\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.dismissible),\n      description: 'Badge with a dismiss button.',\n      args: {\n        dismissible: true,\n        label: 'Dismissible Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.hidden),\n      description: 'Badge with hidden state.',\n      args: {\n        hidden: true,\n        label: 'Hidden Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n    {\n      name: nameof<Components.NvBadge>(x => x.preventAutoClose),\n      description: 'Badge with prevent auto close.',\n      args: {\n        preventAutoClose: true,\n        dismissible: true,\n        label: 'Prevent Auto Close Badge',\n      },\n      template: <nv-badge data-storybook-args></nv-badge>,\n    },\n  ],\n};\n\nexport default NvBadgeDocs;\n"]}

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

@@ -89,11 +89,11 @@ export class NvBadge {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '230bec882e7425786c0a57434b1d6fde7a5d19bc', class: clsx(`badge-${this.color}`, {
+        return (h(Host, { key: '18d3a28777aa74117ccc68aa0c889ea716b90d56', class: clsx(`badge-${this.color}`, {
                 'has-close': this.dismissible,
                 'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
-            }) }, h("slot", { key: 'cfeeaed354a34cbe1eaf1caeed9456b630a07265', name: "leading-icon" }, this.leadIcon && (h("nv-icon", { key: '10031f4f26339860458f1413b171916cbc97f98f', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && h("span", { key: '8d165b104e3952c61084f1473d31ce1a05404966' }, this.label), this.dismissible && (h("button", { key: '8320177e0ac7f8c4f5d09b6c947d81d0eddadb4f', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '3298bd640cb7bb62923e5f1e650944afc01a7385', name: "x", size: "sm" })))));
+            }) }, h("slot", { key: '87ac2dd4ae3ba521d1a6b15394d79c85c1899102', name: "leading-icon" }, this.leadIcon && (h("nv-icon", { key: '22fbc091fe0c861e9a6ce12e5ba1b8d0e83ca7da', slot: "leading-icon", name: this.leadIcon, size: "sm" }))), this.label && h("span", { key: '040559657d6a337b2cd3ce265d2e99cdd0245324' }, this.label), this.dismissible && (h("button", { key: 'd0f992bdf748be5bf63d7a3e9864f96cad4dfae7', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '60915e33efb355a5e2820507fe2365ba4e602c26', name: "x", size: "sm" })))));
     }
     static get is() { return "nv-badge"; }
     static get originalStyleUrls() {
@@ -181,7 +181,7 @@ export class NvBadge {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The color of the badge. Use a string between 1 to 5"
+                    "text": "The color of the badge. Use a string between 1 to 10"
                 },
                 "attribute": "color",
                 "reflect": true,

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

@@ -1 +1 @@
-{"version":3,"file":"nv-badge.js","sourceRoot":"","sources":["../../../src/components/nv-badge/nv-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n */\n@Component({\n  tag: 'nv-badge',\n  styleUrl: 'nv-badge.scss',\n  shadow: false,\n})\nexport class NvBadge {\n  @Element() ref: HTMLNvBadgeElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Whether the badge is dismissible.\n   * @deprecated use dismissible instead.\n   */\n  @Prop()\n  readonly dismissal: boolean = false;\n\n  /**\n   * The icon to display in the badge.\n   * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n   */\n  @Prop()\n  readonly icon: string;\n\n  /**\n   * The location of the icon in the badge.\n   * @deprecated only leadIcon now.\n   */\n  @Prop({ reflect: true })\n  readonly iconLocation: 'left' | 'right';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The color of the badge. Use a string between 1 to 5\n   */\n  @Prop({ reflect: true })\n  readonly color?: string = '1';\n\n  /**\n   * Main content of the badge.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string | null = null;\n\n  /**\n   * The lead icon of the badge.\n   */\n  @Prop({ reflect: true, mutable: true })\n  leadIcon?: string | null = null;\n\n  /**\n   * Whether the badge is dismissible.\n   */\n  @Prop({ reflect: true, mutable: true })\n  dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the badge. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n  @State()\n  private _isHidden: boolean = this.hidden;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<MouseEvent>;\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Handles the dismissal prop change.\n   * @param {boolean} dismissal - The new dismissal value.\n   */\n  @Watch('dismissal')\n  handleDismissalChange(dismissal: boolean) {\n    this.dismissible = dismissal;\n  }\n\n  /**\n   * Handles the icon prop change.\n   * @param {string} icon - The new icon value.\n   */\n  @Watch('icon')\n  handleIconChange(icon: string) {\n    this.leadIcon = icon;\n  }\n\n  /**\n   * Handles the hidden prop change.\n   * @param {boolean} hidden - The new hidden value.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n    if (this._isHidden === true) this._isHidden = hidden;\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden === true) await timeline(fadeOut, collapse).start();\n    if (hidden === false) await timeline(expand, fadeIn).start();\n\n    this.hiddenChangedComplete.emit(hidden);\n\n    if (this._isHidden === false) this._isHidden = hidden;\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Component will load.\n   */\n  componentWillLoad() {\n    if (this.dismissal) {\n      this.dismissible = this.dismissal;\n    }\n\n    if (this.icon != null && this.icon != '') {\n      this.leadIcon = this.icon;\n    }\n\n    if (this.hidden) {\n      const { setCollapsed } = useCollapse(this.ref);\n      const { setFadeOut } = useFade(this.ref);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the close button click.\n   * @param {MouseEvent} originalEvent - The original event.\n   */\n  private readonly handleClose = (originalEvent?: MouseEvent) => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit(originalEvent);\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`badge-${this.color}`, {\n          'has-close': this.dismissible,\n          'with-gap': this.dismissible || this.label,\n          'visually-hidden': this._isHidden,\n        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && (\n            <nv-icon\n              slot=\"leading-icon\"\n              name={this.leadIcon}\n              size=\"sm\"\n            ></nv-icon>\n          )}\n        </slot>\n        {this.label && <span>{this.label}</span>}\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-badge.js","sourceRoot":"","sources":["../../../src/components/nv-badge/nv-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n  State,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { useFade, useCollapse, timeline } from '../../animations';\n\n/**\n * @slot leading-icon - Icon before the label.\n */\n@Component({\n  tag: 'nv-badge',\n  styleUrl: 'nv-badge.scss',\n  shadow: false,\n})\nexport class NvBadge {\n  @Element() ref: HTMLNvBadgeElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Whether the badge is dismissible.\n   * @deprecated use dismissible instead.\n   */\n  @Prop()\n  readonly dismissal: boolean = false;\n\n  /**\n   * The icon to display in the badge.\n   * @deprecated use leadIcon or slot=\"leading-icon\" instead.\n   */\n  @Prop()\n  readonly icon: string;\n\n  /**\n   * The location of the icon in the badge.\n   * @deprecated only leadIcon now.\n   */\n  @Prop({ reflect: true })\n  readonly iconLocation: 'left' | 'right';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * The color of the badge. Use a string between 1 to 10\n   */\n  @Prop({ reflect: true })\n  readonly color?: string = '1';\n\n  /**\n   * Main content of the badge.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string | null = null;\n\n  /**\n   * The lead icon of the badge.\n   */\n  @Prop({ reflect: true, mutable: true })\n  leadIcon?: string | null = null;\n\n  /**\n   * Whether the badge is dismissible.\n   */\n  @Prop({ reflect: true, mutable: true })\n  dismissible: boolean = false;\n\n  /**\n   * Controls the visibility of the badge. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n  @State()\n  private _isHidden: boolean = this.hidden;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the badge is dismissed.\n   */\n  @Event()\n  closeClicked: EventEmitter<MouseEvent>;\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Handles the dismissal prop change.\n   * @param {boolean} dismissal - The new dismissal value.\n   */\n  @Watch('dismissal')\n  handleDismissalChange(dismissal: boolean) {\n    this.dismissible = dismissal;\n  }\n\n  /**\n   * Handles the icon prop change.\n   * @param {string} icon - The new icon value.\n   */\n  @Watch('icon')\n  handleIconChange(icon: string) {\n    this.leadIcon = icon;\n  }\n\n  /**\n   * Handles the hidden prop change.\n   * @param {boolean} hidden - The new hidden value.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n    if (this._isHidden === true) this._isHidden = hidden;\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden === true) await timeline(fadeOut, collapse).start();\n    if (hidden === false) await timeline(expand, fadeIn).start();\n\n    this.hiddenChangedComplete.emit(hidden);\n\n    if (this._isHidden === false) this._isHidden = hidden;\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  /**\n   * Component will load.\n   */\n  componentWillLoad() {\n    if (this.dismissal) {\n      this.dismissible = this.dismissal;\n    }\n\n    if (this.icon != null && this.icon != '') {\n      this.leadIcon = this.icon;\n    }\n\n    if (this.hidden) {\n      const { setCollapsed } = useCollapse(this.ref);\n      const { setFadeOut } = useFade(this.ref);\n\n      setCollapsed();\n      setFadeOut();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the close button click.\n   * @param {MouseEvent} originalEvent - The original event.\n   */\n  private readonly handleClose = (originalEvent?: MouseEvent) => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit(originalEvent);\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(`badge-${this.color}`, {\n          'has-close': this.dismissible,\n          'with-gap': this.dismissible || this.label,\n          'visually-hidden': this._isHidden,\n        })}\n      >\n        <slot name=\"leading-icon\">\n          {this.leadIcon && (\n            <nv-icon\n              slot=\"leading-icon\"\n              name={this.leadIcon}\n              size=\"sm\"\n            ></nv-icon>\n          )}\n        </slot>\n        {this.label && <span>{this.label}</span>}\n        {this.dismissible && (\n          <button onClick={this.handleClose} class=\"close\" type=\"button\">\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -0,0 +1,12 @@
+nv-fielddropdownitemcheck slot-fb,
+nv-fielddropdownitemcheck span {
+  all: unset;
+}
+nv-fielddropdownitemcheck nv-fieldcheckbox input[type=checkbox] {
+  all: unset;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+}

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

@@ -0,0 +1,6 @@
+const NvFielddropdownitemcheckDocs = {
+    component: 'nv-fielddropdownitemcheck',
+    skip: true,
+};
+export default NvFielddropdownitemcheckDocs;
+//# sourceMappingURL=nv-fielddropdownitemcheck.docs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fielddropdownitemcheck.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.docs.tsx"],"names":[],"mappings":"AAGA,MAAM,4BAA4B,GAChC;IACE,SAAS,EAAE,2BAA2B;IACtC,IAAI,EAAE,IAAI;CACX,CAAC;AAEJ,eAAe,4BAA4B,CAAC","sourcesContent":["import type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvFielddropdownitemcheckDocs: NovaDocs<Components.NvFielddropdownitemcheck> =\n  {\n    component: 'nv-fielddropdownitemcheck',\n    skip: true,\n  };\n\nexport default NvFielddropdownitemcheckDocs;\n"]}

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

@@ -0,0 +1,171 @@
+import { Host, h, } from "@stencil/core";
+export class NvFielddropdownitemcheck {
+    constructor() {
+        this.handleCheckboxToggle = () => {
+            if (this.disabled)
+                return; // Ignore interactions si désactivé
+            this.checked = !this.checked;
+            this.itemChecked.emit({
+                value: this.value,
+                checked: this.checked,
+                group: this.group,
+            });
+            console.log('itemChecked emitted:', {
+                value: this.value,
+                checked: this.checked,
+                group: this.group,
+            });
+        };
+        this.checked = false;
+        this.value = undefined;
+        this.label = undefined;
+        this.description = undefined;
+        this.group = undefined;
+        this.disabled = false;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '571a1f2a81e3ba72969f1d6e84e27bd490b99044', onClick: this.handleCheckboxToggle }, h("div", { key: '08590c63ca67b7414c06db1d6c05fd9c2ad41c16' }, h("nv-fieldcheckbox", { key: '68108d6fb714b9fa9bcdc2c9be1ed8e1e2d3b174', checked: this.checked, name: this.label || this.value, label: this.label || this.value, "label-placement": "after", description: this.description, disabled: this.disabled, tabindex: "-1", role: "option" }))));
+    }
+    static get is() { return "nv-fielddropdownitemcheck"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-fielddropdownitemcheck.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-fielddropdownitemcheck.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the checkbox is selected."
+                },
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value associated with this item."
+                },
+                "attribute": "value",
+                "reflect": true
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label displayed alongside the checkbox."
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A description providing additional context or information about the\ncheckbox."
+                },
+                "attribute": "description",
+                "reflect": true
+            },
+            "group": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The group this item belongs to, if applicable."
+                },
+                "attribute": "group",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the item, preventing any user interaction."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemChecked",
+                "name": "itemChecked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the checkbox is toggled.\nIt provides details about the current state of the item."
+                },
+                "complexType": {
+                    "original": "{\n    /**\n     * The value associated with this item\n     */\n    value: string | undefined;\n    /**\n     * Whether the checkbox is currently checked\n     */\n    checked: boolean;\n    /**\n     * The group this item belongs to, if any\n     */\n    group?: string | undefined;\n  }",
+                    "resolved": "{ value: string; checked: boolean; group?: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=nv-fielddropdownitemcheck.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fielddropdownitemcheck.js","sourceRoot":"","sources":["../../../src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,OAAO,GACR,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,wBAAwB;;QAmE3B,yBAAoB,GAAG,GAAG,EAAE;YAClC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO,CAAC,mCAAmC;YAC9D,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;YAEH,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE;gBAClC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC,CAAC;uBAvEiB,KAAK;;;;;wBA+BK,KAAK;;IA0ClC,mBAAmB;IACnB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB;YACtC;gBACE,yEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,qBACf,OAAO,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAC,IAAI,EACb,IAAI,EAAC,QAAQ,GACK,CAChB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\n\n@Component({\n  tag: 'nv-fielddropdownitemcheck',\n  styleUrl: 'nv-fielddropdownitemcheck.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n  @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Indicates whether the checkbox is selected.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * The value associated with this item.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed alongside the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /**\n   * The group this item belongs to, if applicable.\n   */\n  @Prop({ reflect: true })\n  readonly group?: string;\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the checkbox is toggled.\n   * It provides details about the current state of the item.\n   */\n  @Event()\n  itemChecked: EventEmitter<{\n    /**\n     * The value associated with this item\n     */\n    value: string | undefined;\n    /**\n     * Whether the checkbox is currently checked\n     */\n    checked: boolean;\n    /**\n     * The group this item belongs to, if any\n     */\n    group?: string | undefined;\n  }>;\n\n  private handleCheckboxToggle = () => {\n    if (this.disabled) return; // Ignore interactions si désactivé\n    this.checked = !this.checked;\n    this.itemChecked.emit({\n      value: this.value,\n      checked: this.checked,\n      group: this.group,\n    });\n\n    console.log('itemChecked emitted:', {\n      value: this.value,\n      checked: this.checked,\n      group: this.group,\n    });\n  };\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host onClick={this.handleCheckboxToggle}>\n        <div>\n          <nv-fieldcheckbox\n            checked={this.checked}\n            name={this.label || this.value}\n            label={this.label || this.value}\n            label-placement=\"after\"\n            description={this.description}\n            disabled={this.disabled}\n            tabindex=\"-1\"\n            role=\"option\"\n          ></nv-fieldcheckbox>\n        </div>\n      </Host>\n    );\n  }\n\n  //#endregion METHODS\n}\n"]}

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

@@ -0,0 +1,201 @@
+nv-fieldmultiselect {
+  --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-fieldmultiselect[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-fieldmultiselect[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-fieldmultiselect[required]:not([required=false]) > label::after {
+  content: "*";
+  color: var(--components-form-text-required);
+  font-weight: 700;
+}
+nv-fieldmultiselect 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-fieldmultiselect nv-popover {
+  width: 100%;
+  display: block;
+}
+nv-fieldmultiselect .input-wrapper-multiselect {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--form-gap-x);
+  align-items: stretch;
+  align-self: stretch;
+  width: 100%;
+}
+nv-fieldmultiselect .input-container-multiselect {
+  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;
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  min-height: 40px;
+}
+nv-fieldmultiselect .input-container-multiselect:hover {
+  border-color: var(--nv-field-border-hover);
+}
+nv-fieldmultiselect .input-container-multiselect:focus-within {
+  border-color: var(--nv-field-border-focus);
+  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
+}
+nv-fieldmultiselect .input-container-multiselect:has(input:read-only) {
+  opacity: 0.5;
+  background-color: var(--components-form-field-background-readonly);
+  border-color: var(--nv-field-border-readonly);
+}
+nv-fieldmultiselect .input-container-multiselect:has(input:disabled) {
+  opacity: 0.5;
+  background-color: var(--components-form-field-background-disabled);
+  border-color: var(--nv-field-border-disabled);
+}
+nv-fieldmultiselect .input-container-multiselect input,
+nv-fieldmultiselect .input-container-multiselect p.non-filterable-text {
+  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);
+  width: 100%;
+  padding-right: 2rem;
+  flex-grow: 1;
+  margin: 0;
+  min-height: 100%;
+  box-sizing: border-box;
+}
+nv-fieldmultiselect .input-container-multiselect input:focus,
+nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus {
+  outline: none;
+}
+nv-fieldmultiselect .input-container-multiselect input::placeholder,
+nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::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-fieldmultiselect .input-container-multiselect .toggle-dropdown-icon {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+}
+nv-fieldmultiselect .input-container-multiselect nv-icon.validation {
+  color: var(--nv-field-border-default);
+  position: absolute;
+  right: 50px;
+}
+nv-fieldmultiselect .input-container-multiselect.focus-within, nv-fieldmultiselect .input-container-multiselect:hover {
+  border-color: var(--nv-field-border-focus);
+  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
+}
+nv-fieldmultiselect .non-filterable-text {
+  display: block;
+  border-radius: var(--form-field-radius);
+  background-color: var(--nv-field-background);
+  color: var(--components-form-field-content-text);
+  font-size: var(--form-field-font-size);
+  font-weight: 500;
+  line-height: var(--form-field-line-height);
+  box-sizing: border-box;
+  cursor: pointer;
+  height: 100%;
+  min-height: 40px;
+}
+nv-fieldmultiselect .non-filterable-text span {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+nv-fieldmultiselect .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-fieldmultiselect .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);
+}
+nv-fieldmultiselect hr {
+  border: none;
+  border-top: 1px solid var(--dropdown-divider-color, #ccc);
+  margin: 0.5rem 0;
+}
+
+.input-container-multiselect.focus-within,
+.input-container-multiselect:hover {
+  border-color: var(--nv-field-border-focus);
+  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
+}
+
+.no-results-message {
+  text-align: center;
+  padding: 10px;
+  color: var(--nv-field-error-text, #999);
+}