@nova-design-system/nova-webcomponents 3.0.0-beta.34 → 3.0.0-beta.35

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

@@ -31,7 +31,7 @@ const NvTablecolumn = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '976a7fb6560a797a1fdf754714f44f2879cf7346' }, index.h("th", { key: 'd2fb85bea5e7ca5ee9cf8a6e0b5ec86d248f400b', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, index.h("slot", { key: '0e7fc2dbda83ac114bcb70cfd81c4f324c4155a6' }))));
+        return (index.h(index.Host, { key: 'd84688d8480034f9ccfc0965056fe97d7fded63d' }, index.h("th", { key: '66af0bd8372fd31f26f1d76dce881a50b4c2c3a7', abbr: this.abbr, colSpan: this.colspan, headers: this.headers, rowSpan: this.rowspan, scope: this.scope }, index.h("slot", { key: '4a7517e19a7f9db8f29d748c75dad359e75dc367' }))));
     }
 };
 NvTablecolumn.style = NvTablecolumnStyle0;

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

@@ -33,7 +33,7 @@ const NvTabledatacell = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '7ac83ec253d7dc4646a647b90f2930ea18d20c9b' }, index.h("td", { key: 'dedbdb25b21e28cfde242966dc950e1ddf1497ca', colSpan: this.colspan, rowSpan: this.rowspan, headers: this.headers }, index.h("slot", { key: 'f899ee0423444463fb943c4fd9096bc91ba16ea3' }))));
+        return (index.h(index.Host, { key: '7a1ce39e2214eb2f85ce54642c9ce01b8af84267' }, index.h("td", { key: '74359eaa2f3b91c9c58bf1fb24444614c6b21676', colSpan: this.colspan, rowSpan: this.rowspan, headers: this.headers }, index.h("slot", { key: 'cc6eb32e097d4b11a43194aaeda4db1ddda1ff12' }))));
     }
 };
 NvTabledatacell.style = NvTabledatacellStyle0;

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

@@ -14,7 +14,7 @@ const NvTablehead = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '57d72ca018eb61884bcc91df678d8c97c44463b5' }, index.h("thead", { key: '30a4ab6720e842aa5fcbebe66f3de4a7fa1aa9e1' }, index.h("slot", { key: '03ac5c8da1260aa29acb359e2b6fe53fb36bfac4' }))));
+        return (index.h(index.Host, { key: '49d3a0f625f25d004fb3c0b4fe570c9bece0cf28' }, index.h("thead", { key: '7c3c48978fd21f6e942c2b7da1646c79e0e96e37' }, index.h("slot", { key: 'f61a4f0f89571e1d3d0548b1391207a3d0f09319' }))));
     }
 };
 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: '4c4a058b45a05fcff3ed541f7ffcb80aaaec6c3d' }, index.h("tr", { key: 'c37eb2098562ba01e8376b5ab6614f64988fe454' }, index.h("slot", { key: '4b202392edb7345547c423697a2211457b591c00' }))));
+        return (index.h(index.Host, { key: 'b36e5025d1bdc47acfb8502ca733681b34bb5481' }, index.h("tr", { key: '60d9831825ab3fe6acda82ae63336c4f2dddf52a' }, index.h("slot", { key: 'd5f7388f36ef8a3c06d2ba13c6d2b751479be426' }))));
     }
 };
 NvTablerow.style = NvTablerowStyle0;

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

@@ -36,7 +36,7 @@ const NvTooltip = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '943d4c2989f7a2f63b1f22f196b1f6d26b7f8edf' }, index.h("slot", { key: '82784aa5225fe8c437a52c97242ff2db2cb41fb6' }), index.h("nv-popover", { key: 'e560ee505f65e0ca0fa525959ad9aa321cd6821d', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: 'da9632921d70c9ae6a75639e65e1e83160ad16e4', slot: "content" }, this.message), index.h("slot", { key: '3bbe81d6c0004d9f6691fd89c5732409e57e26e6', name: "content" }))));
+        return (index.h(index.Host, { key: '4813090b7b9cabaa208ee6b7e384003a64a5db4b' }, index.h("slot", { key: 'b80271e22aab3dca30afc8c35eb9861df29669c5' }), index.h("nv-popover", { key: '854d726cccce5018b4eed180c97798cade7a46c5', triggerMode: "hover", hasArrow: true, placement: this.placement, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, index.h("p", { key: '343519886ef5f664a5ad461b5f3978cec527c9fb', slot: "content" }, this.message), index.h("slot", { key: '75eeb2a6f32e6eba85dc5d717773be4611a05de4', name: "content" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/collection/collection-manifest.json

@@ -17,6 +17,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-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,185 @@
+import { Host, h, } from "@stencil/core";
+export class NvFielddropdownitemcheck {
+    constructor() {
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Indicates whether the checkbox is selected.
+         */
+        this.checked = false;
+        /**
+         * Disables the item, preventing any user interaction.
+         */
+        this.disabled = false;
+        /**
+         * when the child <nv-fieldcheckbox> change its `checked` state,
+         * update `this.checked` and emit `itemChecked`.
+         * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.
+         */
+        this.onFieldcheckboxChanged = (event) => {
+            if (this.disabled)
+                return;
+            // NvFieldcheckbox has emitted checkedChanged
+            this.checked = event.detail; // get the new state
+            this.itemChecked.emit({
+                value: this.value,
+                checked: this.checked,
+                group: this.group,
+            });
+        };
+    }
+    render() {
+        return (h(Host, { key: '790fd77fd927ace8081971a16d37896b44fe95f5' }, h("div", { key: '8dbd46bbc2cd9bd83a81117bd66f62bdef3ece88' }, h("nv-fieldcheckbox", { key: '1564df63e41efa0dce2f2b47aefc61d7b41bbffc', 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", onCheckedChanged: this.onFieldcheckboxChanged }))));
+    }
+    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."
+                },
+                "getter": false,
+                "setter": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "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;IALrC;QAQE,8EAA8E;QAC9E,oBAAoB;QAEpB;;WAEG;QAEH,YAAO,GAAY,KAAK,CAAC;QA2BzB;;WAEG;QAEM,aAAQ,GAAY,KAAK,CAAC;QA0BnC;;;;WAIG;QACK,2BAAsB,GAAG,CAAC,KAA2B,EAAE,EAAE;YAC/D,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,6CAA6C;YAC7C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,oBAAoB;YACjD,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;QACL,CAAC,CAAC;KAqBH;IAnBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH;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,EACb,gBAAgB,EAAE,IAAI,CAAC,sBAAsB,GAC3B,CAChB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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  /**\n   * when the child <nv-fieldcheckbox> change its `checked` state,\n   * update `this.checked` and emit `itemChecked`.\n   * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n   */\n  private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n    if (this.disabled) return;\n    // NvFieldcheckbox has emitted checkedChanged\n    this.checked = event.detail; // get the new state\n    this.itemChecked.emit({\n      value: this.value,\n      checked: this.checked,\n      group: this.group,\n    });\n  };\n\n  render() {\n    return (\n      <Host>\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            onCheckedChanged={this.onFieldcheckboxChanged}\n          ></nv-fieldcheckbox>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,204 @@
+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);
+}
+
+.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);
+}
+
+.multiselect-divider {
+  display: block;
+  width: 100%;
+  height: 1px;
+  background-color: var(--multiselect-divider-color, #ccc);
+  margin: 8px 0;
+}