@baloise/ds-core 20.0.0-next.7 → 20.0.0-next.9

package/dist/collection/components/notification/notification.host.css

@@ -1 +1 @@
-:host{--_notification-position: var(--notification-position, var(--mod-notification-position, static));--_notification-top: var(--notification-top, var(--mod-notification-top));--_notification-right: var(--notification-right, var(--mod-notification-right));--_notification-bottom: var(--notification-bottom, var(--mod-notification-bottom));--_notification-left: var(--notification-left, var(--mod-notification-left));position:var(--_notification-position);top:var(--_notification-top);right:var(--_notification-right);bottom:var(--_notification-bottom);left:var(--_notification-left);--_notification-m: var(--notification-m, var(--mod-notification-m, 0));--_notification-my: var(--notification-my, var(--mod-notification-my));--_notification-mx: var(--notification-mx, var(--mod-notification-mx));--_notification-ml: var(--notification-ml, var(--mod-notification-ml));--_notification-mr: var(--notification-mr, var(--mod-notification-mr));--_notification-mt: var(--notification-mt, var(--mod-notification-mt));--_notification-mb: var(--notification-mb, var(--mod-notification-mb));margin:var(--_notification-m);margin-inline:var(--_notification-mx);margin-block:var(--_notification-my);margin-left:var(--_notification-ml);margin-right:var(--_notification-mr);margin-top:var(--_notification-mt);margin-bottom:var(--_notification-mb);--_notification-radius: var(--notification-radius, var(--mod-notification-radius, var(--ds-notification-radius)));--_notification-color-background: var(--notification-color-background, var(--mod-notification-color-background, var(--ds-notification-color-base-background)));--_notification-color-border: var(--notification-color-border, var(--mod-notification-color-border, var(--ds-notification-color-base-border)));--_notification-color-text: var(--notification-color-text, var(--mod-notification-color-text, var(--ds-notification-color-base-text)));--_notification-heading-family: var(--notification-heading-family, var(--mod-notification-heading-family, var(--ds-alias-text-family-heading)));--_notification-heading-weight: var(--notification-heading-weight, var(--mod-notification-heading-weight, var(--ds-alias-text-weight-bold)));--_notification-heading-size: var(--notification-heading-size, var(--mod-notification-heading-size, var(--ds-alias-text-size-lg-device)));--_notification-heading-line-height: var(--notification-heading-line-height, var(--mod-notification-heading-line-height, var(--ds-alias-text-line-height-heading)));--_notification-content-family: var(--notification-content-family, var(--mod-notification-content-family, var(--ds-alias-text-family-body)));--_notification-content-weight: var(--notification-content-weight, var(--mod-notification-content-weight, inherit));--_notification-content-size: var(--notification-content-size, var(--mod-notification-content-size, var(--ds-alias-text-size-base-device)));--_notification-content-line-height: var(--notification-content-line-height, var(--mod-notification-content-line-height, var(--ds-alias-text-line-height-body)));--_notification-icon: var(--notification-icon, var(--mod-notification-icon, var(--ds-notification-color-base-icon)));--_notification-icon-display: var(--notification-icon-display, var(--mod-notification-icon-display, block));--_notification-space: var(--notification-space, var(--mod-notification-space, var(--ds-card-space-base-device, 1.5rem)));--_notification-icon-space: var(--notification-icon-space, var(--mod-notification-icon-space, 1.5rem));--_notification-close-offset: var(--notification-close-offset, var(--mod-notification-close-offset, 2rem));--_notification-gap: var(--notification-gap, var(--mod-notification-gap, 0.125rem));--_notification-close-position: var(--notification-close-position, var(--mod-notification-close-position, absolute));--_notification-close-right: var(--notification-close-right, var(--mod-notification-close-right, var(--_notification-space)));--_notification-close-top: var(--notification-close-top, var(--mod-notification-close-top, var(--_notification-space)));--_notification-animation-start-opacity: var(--notification-animation-start-opacity, var(--mod-notification-animation-start-opacity, 1));--_notification-animation-start-transform: var(--notification-animation-start-transform, var(--mod-notification-animation-start-transform, none));--_notification-animation-transition: var(--notification-animation-transition, var(--mod-notification-animation-transition, none));--_notification-animation-end-opacity: var(--notification-animation-end-opacity, var(--mod-notification-animation-end-opacity, 1));--_notification-animation-end-transform: var(--notification-animation-end-transform, var(--mod-notification-animation-end-transform, none))}#notification{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;flex:1;position:relative;hyphens:auto;border:var(--ds-alias-border-width-base) solid var(--_notification-color-border);border-radius:var(--_notification-radius);background:var(--_notification-color-background);color:var(--_notification-color-text);padding-top:var(--_notification-space);padding-right:var(--_notification-space);padding-bottom:var(--_notification-space);padding-left:calc(var(--_notification-space) + var(--_notification-icon-space));display:flex;flex-direction:column;gap:var(--_notification-gap)}#notification ds-close,#notification .close{position:var(--_notification-close-position);top:var(--_notification-close-top);right:var(--_notification-close-right)}#notification>h2{font-family:var(--_notification-heading-family);font-weight:var(--_notification-heading-weight);line-height:var(--_notification-heading-line-height);font-size:var(--_notification-heading-size);margin:0 !important}#notification:has(.close)>h2::before,#notification:has(ds-close)>h2::before{content:"";float:right;width:24px;height:calc(var(--_notification-heading-line-height)*16px)}#notification>span,#notification>p{font-family:var(--_notification-content-family);font-size:var(--_notification-content-size);font-weight:var(--_notification-content-weight);line-height:var(--_notification-content-line-height);margin:0 !important}#notification::before{display:var(--_notification-icon-display);background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;position:absolute;height:1.5rem;width:1.5rem;left:-0.25rem;top:calc((var(--_notification-space)));transform:translateX(var(--_notification-space));content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;mask-image:var(--_notification-icon);-webkit-mask-image:var(--_notification-icon)}:host(.has-no-icon){--mod-notification-icon-display: none;--mod-notification-icon-space: 0rem}:host(.is-info){--mod-notification-color-text: var(--ds-notification-color-info-text);--mod-notification-color-border: var(--ds-notification-color-info-border);--mod-notification-color-background: var(--ds-notification-color-info-background);--mod-notification-icon: var(--ds-notification-color-info-icon)}:host(.is-success){--mod-notification-color-text: var(--ds-notification-color-success-text);--mod-notification-color-border: var(--ds-notification-color-success-border);--mod-notification-color-background: var(--ds-notification-color-success-background);--mod-notification-icon: var(--ds-notification-color-success-icon)}:host(.is-warning){--mod-notification-color-text: var(--ds-notification-color-warning-text);--mod-notification-color-border: var(--ds-notification-color-warning-border);--mod-notification-color-background: var(--ds-notification-color-warning-background);--mod-notification-icon: var(--ds-notification-color-warning-icon)}:host(.is-danger){--mod-notification-color-text: var(--ds-notification-color-danger-text);--mod-notification-color-border: var(--ds-notification-color-danger-border);--mod-notification-color-background: var(--ds-notification-color-danger-background);--mod-notification-icon: var(--ds-notification-color-danger-icon)}:host(.is-outline-base){--mod-notification-color-text: var(--ds-notification-color-outline-base-text);--mod-notification-color-border: var(--ds-notification-color-outline-base-border);--mod-notification-color-background: var(--ds-notification-color-outline-base-background);--mod-notification-icon: var(--ds-notification-color-outline-base-icon)}:host(.is-outline-purple){--mod-notification-color-text: var(--ds-notification-color-outline-purple-text);--mod-notification-color-border: var(--ds-notification-color-outline-purple-border);--mod-notification-color-background: var(--ds-notification-color-outline-purple-background);--mod-notification-icon: var(--ds-notification-color-outline-purple-icon)}:host(.is-outline-green){--mod-notification-color-text: var(--ds-notification-color-outline-green-text);--mod-notification-color-border: var(--ds-notification-color-outline-green-border);--mod-notification-color-background: var(--ds-notification-color-outline-green-background);--mod-notification-icon: var(--ds-notification-color-outline-green-icon)}:host(.is-outline-yellow){--mod-notification-color-text: var(--ds-notification-color-outline-yellow-text);--mod-notification-color-border: var(--ds-notification-color-outline-yellow-border);--mod-notification-color-background: var(--ds-notification-color-outline-yellow-background);--mod-notification-icon: var(--ds-notification-color-outline-yellow-icon)}:host(.is-outline-red){--mod-notification-color-text: var(--ds-notification-color-outline-red-text);--mod-notification-color-border: var(--ds-notification-color-outline-red-border);--mod-notification-color-background: var(--ds-notification-color-outline-red-background);--mod-notification-icon: var(--ds-notification-color-outline-red-icon)}:host(.is-sm){--mod-notification-space: var(--ds-card-space-sm-device)}:host(.is-md){--mod-notification-space: var(--ds-card-space-md-device)}:host(.is-lg){--mod-notification-space: var(--ds-card-space-lg-device)}:host{display:block}
+:host{--_notification-position: var(--notification-position, var(--mod-notification-position, static));--_notification-top: var(--notification-top, var(--mod-notification-top));--_notification-right: var(--notification-right, var(--mod-notification-right));--_notification-bottom: var(--notification-bottom, var(--mod-notification-bottom));--_notification-left: var(--notification-left, var(--mod-notification-left));position:var(--_notification-position);top:var(--_notification-top);right:var(--_notification-right);bottom:var(--_notification-bottom);left:var(--_notification-left);--_notification-m: var(--notification-m, var(--mod-notification-m, 0));--_notification-my: var(--notification-my, var(--mod-notification-my));--_notification-mx: var(--notification-mx, var(--mod-notification-mx));--_notification-ml: var(--notification-ml, var(--mod-notification-ml));--_notification-mr: var(--notification-mr, var(--mod-notification-mr));--_notification-mt: var(--notification-mt, var(--mod-notification-mt));--_notification-mb: var(--notification-mb, var(--mod-notification-mb));margin:var(--_notification-m);margin-inline:var(--_notification-mx);margin-block:var(--_notification-my);margin-left:var(--_notification-ml);margin-right:var(--_notification-mr);margin-top:var(--_notification-mt);margin-bottom:var(--_notification-mb);--_notification-radius: var(--notification-radius, var(--mod-notification-radius, var(--ds-notification-radius)));--_notification-color-background: var(--notification-color-background, var(--mod-notification-color-background, var(--ds-notification-base-color-background)));--_notification-color-border: var(--notification-color-border, var(--mod-notification-color-border, var(--ds-notification-base-color-border)));--_notification-color-text: var(--notification-color-text, var(--mod-notification-color-text, var(--ds-notification-base-color-text)));--_notification-heading-family: var(--notification-heading-family, var(--mod-notification-heading-family, var(--ds-alias-text-family-heading)));--_notification-heading-weight: var(--notification-heading-weight, var(--mod-notification-heading-weight, var(--ds-alias-text-weight-bold)));--_notification-heading-size: var(--notification-heading-size, var(--mod-notification-heading-size, var(--ds-alias-text-size-lg-device)));--_notification-heading-line-height: var(--notification-heading-line-height, var(--mod-notification-heading-line-height, var(--ds-alias-text-line-height-heading)));--_notification-content-family: var(--notification-content-family, var(--mod-notification-content-family, var(--ds-alias-text-family-body)));--_notification-content-weight: var(--notification-content-weight, var(--mod-notification-content-weight, inherit));--_notification-content-size: var(--notification-content-size, var(--mod-notification-content-size, var(--ds-alias-text-size-base-device)));--_notification-content-line-height: var(--notification-content-line-height, var(--mod-notification-content-line-height, var(--ds-alias-text-line-height-body)));--_notification-icon: var(--notification-icon, var(--mod-notification-icon, var(--ds-notification-base-color-icon)));--_notification-icon-display: var(--notification-icon-display, var(--mod-notification-icon-display, block));--_notification-space: var(--notification-space, var(--mod-notification-space, var(--ds-card-space-base-device, 1.5rem)));--_notification-icon-space: var(--notification-icon-space, var(--mod-notification-icon-space, 1.5rem));--_notification-close-offset: var(--notification-close-offset, var(--mod-notification-close-offset, 2rem));--_notification-gap: var(--notification-gap, var(--mod-notification-gap, 0.125rem));--_notification-close-position: var(--notification-close-position, var(--mod-notification-close-position, absolute));--_notification-close-right: var(--notification-close-right, var(--mod-notification-close-right, var(--_notification-space)));--_notification-close-top: var(--notification-close-top, var(--mod-notification-close-top, var(--_notification-space)));--_notification-animation-start-opacity: var(--notification-animation-start-opacity, var(--mod-notification-animation-start-opacity, 1));--_notification-animation-start-transform: var(--notification-animation-start-transform, var(--mod-notification-animation-start-transform, none));--_notification-animation-transition: var(--notification-animation-transition, var(--mod-notification-animation-transition, none));--_notification-animation-end-opacity: var(--notification-animation-end-opacity, var(--mod-notification-animation-end-opacity, 1));--_notification-animation-end-transform: var(--notification-animation-end-transform, var(--mod-notification-animation-end-transform, none))}#notification{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;flex:1;position:relative;hyphens:auto;border:var(--ds-alias-border-width-base) solid var(--_notification-color-border);border-radius:var(--_notification-radius);background:var(--_notification-color-background);color:var(--_notification-color-text);padding-top:var(--_notification-space);padding-right:var(--_notification-space);padding-bottom:var(--_notification-space);padding-left:calc(var(--_notification-space) + var(--_notification-icon-space));display:flex;flex-direction:column;gap:var(--_notification-gap)}#notification ds-close,#notification .close{position:var(--_notification-close-position);top:var(--_notification-close-top);right:var(--_notification-close-right)}#notification>h2{font-family:var(--_notification-heading-family);font-weight:var(--_notification-heading-weight);line-height:var(--_notification-heading-line-height);font-size:var(--_notification-heading-size);margin:0 !important}#notification:has(.close)>h2::before,#notification:has(ds-close)>h2::before{content:"";float:right;width:24px;height:calc(var(--_notification-heading-line-height)*16px)}#notification>span,#notification>p{font-family:var(--_notification-content-family);font-size:var(--_notification-content-size);font-weight:var(--_notification-content-weight);line-height:var(--_notification-content-line-height);margin:0 !important}#notification::before{display:var(--_notification-icon-display);background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;position:absolute;height:1.5rem;width:1.5rem;left:-0.25rem;top:calc((var(--_notification-space)));transform:translateX(var(--_notification-space));content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;mask-image:var(--_notification-icon);-webkit-mask-image:var(--_notification-icon)}:host(.has-no-icon){--mod-notification-icon-display: none;--mod-notification-icon-space: 0rem}:host(.is-info){--mod-notification-color-text: var(--ds-notification-info-color-text);--mod-notification-color-border: var(--ds-notification-info-color-border);--mod-notification-color-background: var(--ds-notification-info-color-background);--mod-notification-icon: var(--ds-notification-info-color-icon)}:host(.is-success){--mod-notification-color-text: var(--ds-notification-success-color-text);--mod-notification-color-border: var(--ds-notification-success-color-border);--mod-notification-color-background: var(--ds-notification-success-color-background);--mod-notification-icon: var(--ds-notification-success-color-icon)}:host(.is-warning){--mod-notification-color-text: var(--ds-notification-warning-color-text);--mod-notification-color-border: var(--ds-notification-warning-color-border);--mod-notification-color-background: var(--ds-notification-warning-color-background);--mod-notification-icon: var(--ds-notification-warning-color-icon)}:host(.is-danger){--mod-notification-color-text: var(--ds-notification-danger-color-text);--mod-notification-color-border: var(--ds-notification-danger-color-border);--mod-notification-color-background: var(--ds-notification-danger-color-background);--mod-notification-icon: var(--ds-notification-danger-color-icon)}:host(.is-outline-base){--mod-notification-color-text: var(--ds-notification-outline-base-color-text);--mod-notification-color-border: var(--ds-notification-outline-base-color-border);--mod-notification-color-background: var(--ds-notification-outline-base-color-background);--mod-notification-icon: var(--ds-notification-outline-base-color-icon)}:host(.is-outline-purple){--mod-notification-color-text: var(--ds-notification-outline-purple-color-text);--mod-notification-color-border: var(--ds-notification-outline-purple-color-border);--mod-notification-color-background: var(--ds-notification-outline-purple-color-background);--mod-notification-icon: var(--ds-notification-outline-purple-color-icon)}:host(.is-outline-green){--mod-notification-color-text: var(--ds-notification-outline-green-color-text);--mod-notification-color-border: var(--ds-notification-outline-green-color-border);--mod-notification-color-background: var(--ds-notification-outline-green-color-background);--mod-notification-icon: var(--ds-notification-outline-green-color-icon)}:host(.is-outline-yellow){--mod-notification-color-text: var(--ds-notification-outline-yellow-color-text);--mod-notification-color-border: var(--ds-notification-outline-yellow-color-border);--mod-notification-color-background: var(--ds-notification-outline-yellow-color-background);--mod-notification-icon: var(--ds-notification-outline-yellow-color-icon)}:host(.is-outline-red){--mod-notification-color-text: var(--ds-notification-outline-red-color-text);--mod-notification-color-border: var(--ds-notification-outline-red-color-border);--mod-notification-color-background: var(--ds-notification-outline-red-color-background);--mod-notification-icon: var(--ds-notification-outline-red-color-icon)}:host(.is-sm){--mod-notification-space: var(--ds-card-space-sm-device)}:host(.is-md){--mod-notification-space: var(--ds-card-space-md-device)}:host(.is-lg){--mod-notification-space: var(--ds-card-space-lg-device)}:host{display:block}

package/dist/collection/components/notification/notification.interfaces.js

@@ -1,9 +1,8 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-export const NOTIFICATION_SIZES = ['sm', 'md', 'lg', '', 'small', 'medium', 'large'];
+export const NOTIFICATION_SIZES = ['sm', 'md', 'lg', 'small', 'medium', 'large'];
 export const NOTIFICATION_COLORS = [
-    '',
     'base',
     'info',
     'success',

package/dist/collection/components/notification/notification.js

@@ -18,7 +18,7 @@ export class Notification {
         this.didLoad = false;
         /**
          * PUBLIC PROPERTY API
-         * ------------------------------------------------------
+         * ─────────────────────────────────────────────────────
          */
         /**
          * If `true` the notification will be displayed as an alert, otherwise as a status message.
@@ -32,11 +32,6 @@ export class Notification {
          * @internal Handler for on close event
          */
         this.closeHandler = () => void 0;
-        /**
-         * Defines the color of the element
-         * Color type primary is deprecated, please use info instead.
-         */
-        this.color = '';
         /**
          * Defines the heading of the notification.
          */
@@ -51,7 +46,7 @@ export class Notification {
     }
     /**
      * LIFECYCLE
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     componentDidLoad() {
         this.didLoad = true;
@@ -59,7 +54,7 @@ export class Notification {
     }
     /**
      * PUBLIC METHODS
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     /**
      * Closes this notification
@@ -70,21 +65,21 @@ export class Notification {
     }
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render() {
         const size = normalizeDeprecatedTShirtSize(this.size) || '';
         const a11yAttributes = this.alert
             ? { 'role': 'alert', 'aria-live': 'assertive', 'aria-atomic': 'true' }
             : { 'role': 'status', 'aria-live': 'polite', 'aria-atomic': 'true' };
-        return (h(Host, Object.assign({ key: 'f3e829a86b22c64fe93b06b2664b398a7248d49f' }, a11yAttributes, { class: {
+        return (h(Host, Object.assign({ key: 'c3dfeb924f2eff0258b2e3e8d191066e606c1717' }, a11yAttributes, { class: {
                 'has-no-icon': this.noIcon,
                 [`is-${this.color}`]: hasValue(this.color),
                 [`is-${size}`]: hasValue(this.size),
-            } }), h("section", { key: 'f8ff4cdc8379ec73ac00a6654478a0039dd746f1', id: "notification", part: "section" }, this.closable && (h("ds-close", { key: 'f72f440db26de1ef40ca24ec9c9f06015ce31126', part: "close", onClick: ev => {
+            } }), h("section", { key: 'bb25cab8e27de885d570db0a6255f8dbab2d94fe', id: "notification", part: "section" }, this.closable && (h("ds-close", { key: '2c3468c64ca1b011d63815e65f466b308d3bb624', part: "close", onClick: ev => {
                 stopEventBubbling(ev);
                 this.close();
-            } })), hasValue(this.heading) && h("h2", { key: 'adae5186e4009153c2d93645bdf8ab49e4da9df7', part: "heading" }, this.heading), h("span", { key: '979fc05e46a6c9220826efeac704f87f23f9ce49' }, h("slot", { key: '88929c8c561498c89755da6bd6d36819a7e6d390' })))));
+            } })), hasValue(this.heading) && h("h2", { key: '69c9eccaf9154cfd398564d1a915dab0afbc1033', part: "heading" }, this.heading), h("span", { key: 'f8f3a07f74a2ae6a4ac1b4ff026f8a794b236c5d' }, h("slot", { key: '05feb23000c982c3d90778b1eae1180b5ebd1add' })))));
     }
     static get is() { return "ds-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -166,7 +161,7 @@ export class Notification {
                 "mutable": false,
                 "complexType": {
                     "original": "NotificationColor",
-                    "resolved": "\"\" | \"base\" | \"danger\" | \"info\" | \"outline-base\" | \"outline-green\" | \"outline-purple\" | \"outline-red\" | \"outline-yellow\" | \"success\" | \"warning\"",
+                    "resolved": "\"base\" | \"danger\" | \"info\" | \"outline-base\" | \"outline-green\" | \"outline-purple\" | \"outline-red\" | \"outline-yellow\" | \"success\" | \"warning\" | undefined",
                     "references": {
                         "NotificationColor": {
                             "location": "import",
@@ -177,7 +172,7 @@ export class Notification {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Defines the color of the element\nColor type primary is deprecated, please use info instead."
@@ -185,8 +180,7 @@ export class Notification {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "color",
-                "defaultValue": "''"
+                "attribute": "color"
             },
             "heading": {
                 "type": "string",
@@ -233,7 +227,7 @@ export class Notification {
                 "mutable": false,
                 "complexType": {
                     "original": "NotificationSize",
-                    "resolved": "\"\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\" | undefined",
+                    "resolved": "\"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\" | undefined",
                     "references": {
                         "NotificationSize": {
                             "location": "import",

package/dist/collection/components/number-input/number-input.js

@@ -6,7 +6,7 @@ import { h, } from "@stencil/core";
 import isEmpty from "lodash/isEmpty";
 import isNaN from "lodash/isNaN";
 import isNil from "lodash/isNil";
-import { inheritAttributes, FormControl, stopEventBubbling, debounceEvent, Logger, getDecimalSeparator, getThousandSeparator, hasValue, OneOf, Type, } from "../../utils/index";
+import { inheritAttributes, FormControl, stopEventBubbling, debounceEvent, Logger, getDecimalSeparator, getThousandSeparator, hasValue, OneOf, Type, watchInvalidTextSlot, } from "../../utils/index";
 import { defaultConfig, ListenToConfig } from "../../global/index";
 import { isNotNumber, mapDecimalSeparator, toFixedNumber, toNumber, toUserFormattedNumber, validateKeyDown, } from "./number-input.utils";
 import { Field } from "../input/field.util";
@@ -15,6 +15,7 @@ import { INPUT_COLORS } from "../input/input.interfaces";
  * Number input renders a specialized text input for numeric values with increment/decrement buttons, formatting, and validation.
  *
  * @slot - The number input field content and surrounding elements.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part input - The native HTML input element.
  * @part prefix - The prefix wrapper (if used).
  * @part suffix - The suffix wrapper (if used).
@@ -28,6 +29,7 @@ export class NumberInput {
         this.control = new FormControl(this);
         this.lastValue = '';
         this.focused = false;
+        this.hasInvalidTextSlotContent = false;
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
         this.nativeInputValue = '';
@@ -197,6 +199,13 @@ export class NumberInput {
     connectedCallback() {
         this.debounceChanged();
         this.control.connectedCallback();
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
@@ -292,7 +301,8 @@ export class NumberInput {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: 'a7ccea6d0b98bd447e9fac8af180019eddbaff7b', disabled: this.disabled, color: this.color, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("input", Object.assign({ key: '76078e54d6f2dbfa6ad348e09b9987b741b8bdc1', id: "input", part: "input", type: "text", inputMode: "decimal", pattern: this.inputPattern, ref: el => (this.control.nativeEl = el), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', name: this.name, disabled: this.disabled, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, min: this.min, max: this.max, value: this.nativeInputValue, onInput: ev => this.handleInput(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onClick: ev => this.control.onClick(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes))));
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
+        return (h(Field, { key: 'a185df149be41135c6b939ad1c3ad5ba57a38e94', disabled: this.disabled, color: this.color, invalid: isInvalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("input", Object.assign({ key: 'a7461115068e7a365ba4b0e25501d96be6de099d', id: "input", part: "input", type: "text", inputMode: "decimal", pattern: this.inputPattern, ref: el => (this.control.nativeEl = el), "aria-describedby": "description", "aria-invalid": isInvalid ? 'true' : 'false', name: this.name, disabled: this.disabled, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, min: this.min, max: this.max, value: this.nativeInputValue, onInput: ev => this.handleInput(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onClick: ev => this.control.onClick(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes))));
     }
     static get is() { return "ds-number-input"; }
     static get encapsulation() { return "shadow"; }
@@ -701,6 +711,7 @@ export class NumberInput {
     static get states() {
         return {
             "focused": {},
+            "hasInvalidTextSlotContent": {},
             "language": {},
             "region": {},
             "nativeInputValue": {},

package/dist/collection/components/number-input/test/number-input.visual.play.js

@@ -3,7 +3,7 @@
  */
 import { expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
 const TAG = 'number-input';
-const VARIANTS = ['basic', 'disabled', 'invalid', 'valid', 'warning', 'decimal', 'suffix'];
+const VARIANTS = ['basic', 'disabled', 'invalid', 'invalid-slot', 'valid', 'warning', 'decimal', 'suffix'];
 const image = screenshot(TAG);
 test.describe('host', () => {
     test.beforeEach('Setup', async ({ page }) => {

package/dist/collection/components/radio/radio-group/radio-group.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, } from "@stencil/core";
-import { Logger, stopEventBubbling, hasTagName, isDescendant, OneOf, Type } from "../../../utils/index";
+import { Logger, stopEventBubbling, hasTagName, isDescendant, OneOf, Type, watchInvalidTextSlot, } from "../../../utils/index";
 import { Field } from "../../input/field.util";
 import { defaultConfig, ListenToConfig } from "../../../global/index";
 import { INPUT_COLORS } from "../../input/input.interfaces";
@@ -12,11 +12,13 @@ import { RADIO_LABEL_POSITIONS, RADIO_TILE_COLORS, RADIO_GROUP_COLUMNS, } from "
  * Radio Group groups multiple radio inputs so only one option can be selected at a time within a form field.
  *
  * @slot - The radio items to display inside the group.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  */
 export class RadioGroup {
     constructor() {
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
+        this.hasInvalidTextSlotContent = false;
         this.inputId = `ds-rg-${radioGroupIds++}`;
         /**
          * PUBLIC PROPERTY API
@@ -144,8 +146,15 @@ export class RadioGroup {
     connectedCallback() {
         this.initialValue = this.value;
         this.internals.setFormValue(this.value);
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
         this.passDownAttributes();
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     componentWillLoad() {
         this.handleValueChange();
     }
@@ -242,6 +251,7 @@ export class RadioGroup {
      * ------------------------------------------------------
      */
     passDownAttributes() {
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
         this.getRadios().forEach(radio => {
             var _a;
             if (this.disabled !== undefined) {
@@ -250,9 +260,7 @@ export class RadioGroup {
             if (this.readonly !== undefined) {
                 radio.readonly = this.readonly;
             }
-            if (this.invalid !== undefined) {
-                radio.invalid = this.invalid;
-            }
+            radio.invalid = isInvalid;
             radio.labelPosition = this.labelPosition;
             radio.tile = this.tile;
             radio.hideTrigger = this.hideTrigger;
@@ -293,10 +301,10 @@ export class RadioGroup {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: 'e52d1c8b0aafdbf523cd91bae9dfc0d563eb5002', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
+        return (h(Field, { key: 'c7cc878d4b12a536d805dbdf3e44419cc2c31c3f', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid || this.hasInvalidTextSlotContent, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
                 'is-vertical': this.vertical,
                 'is-tile': this.tile,
-            }, onClick: this.handleClick }, h("slot", { key: 'd235eec63f1e13a9de4988b841ea124f05d9a2a3', onSlotchange: this.handleSlotChange })));
+            }, onClick: this.handleClick }, h("slot", { key: '468b13eff479f2654ce14a5b513e10f513fbf0ee', onSlotchange: this.handleSlotChange })));
     }
     static get is() { return "ds-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -759,7 +767,8 @@ export class RadioGroup {
     static get states() {
         return {
             "language": {},
-            "region": {}
+            "region": {},
+            "hasInvalidTextSlotContent": {}
         };
     }
     static get events() {

package/dist/collection/components/radio/test/radio.visual.play.js

@@ -26,6 +26,7 @@ const HOST_VARIANTS = [
     'form',
     'field-disabled',
     'field-invalid',
+    'field-invalid-slot',
     'tile-basic',
     'tile-columns',
     'tile-invalid',

package/dist/collection/components/segment/segment/segment.js

@@ -3,13 +3,14 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h } from "@stencil/core";
-import { Logger, stopEventBubbling, isDescendant, ListenToResize, Type } from "../../../utils/index";
+import { Logger, stopEventBubbling, isDescendant, ListenToResize, Type, watchInvalidTextSlot, } from "../../../utils/index";
 import { Field } from "../../input/field.util";
 import { defaultConfig, ListenToConfig } from "../../../global/index";
 /**
  * Segment renders a group of button-like controls for selecting a single option from multiple choices with toggle behavior.
  *
  * @slot - One or more ds-segment-item elements.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part segment - The segment container element.
  */
 export class Segment {
@@ -19,6 +20,7 @@ export class Segment {
         this.region = defaultConfig.region;
         this.items = [];
         this.autoVertical = false;
+        this.hasInvalidTextSlotContent = false;
         // Natural (horizontal) offsetWidth of #group, stored just before going auto-vertical.
         // Used to decide when there is enough room to go back to horizontal layout.
         this.lastNaturalWidth = 0;
@@ -169,10 +171,14 @@ export class Segment {
             this.updatePill();
         });
         this.resizeObserver.observe(this.el);
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.disconnectInvalidTextSlotWatcher) === null || _b === void 0 ? void 0 : _b.call(this);
     }
     componentDidLoad() {
         this.handleSlotChange();
@@ -245,19 +251,20 @@ export class Segment {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: '3623376042c1133c3c27368913914b7e3626761c', role: "fieldset", disabled: this.disabled, color: 'primary', invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
+        return (h(Field, { key: 'd7cb9bc3c60989feaf5a7e9d42621fd93e4c175f', role: "fieldset", disabled: this.disabled, color: 'primary', invalid: isInvalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
                 'is-wide': this.wide,
                 'is-vertical': this.vertical,
                 'is-vertical-on-mobile': this.verticalOnMobile,
                 'is-auto-vertical': this.autoVertical,
-            }, onSlotChange: this.handleSlotChange }, h("div", { key: 'b175ee856735bd12278ab68610792d8f35db0d50', id: "group" }, h("div", { key: '37ecfcd8b782e67b612fa9d0a799fafe98bf54ae', id: "pill" }), this.items.map(item => (h("label", Object.assign({ key: item.value, class: {
+            }, onSlotChange: this.handleSlotChange }, h("div", { key: '26806fb30d2cd5e9f5ef4e7bf48f5e1fe4f9e922', id: "group" }, h("div", { key: '852fc0596b4f5ae2fe504d6dd3fe11cddbc4b3d2', id: "pill" }), this.items.map(item => (h("label", Object.assign({ key: item.value, class: {
                 'is-selected': item.value === this.value,
-            }, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null }, (this.iconOnly
+            }, "aria-invalid": isInvalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null }, (this.iconOnly
             ? {
                 'aria-label': `${item.label}${item.description ? `- ${item.description}` : ''}`,
                 'title': `${item.label}${item.description ? `- ${item.description}` : ''}`,
             }
-            : {})), h("input", { type: "radio", name: this.name, disabled: this.disabled, readOnly: this.readonly, value: item.value, checked: item.value === this.value, onClick: ev => this.handleInputClick(ev, item.value), onChange: () => this.handleInputChange(item.value), "aria-invalid": this.invalid ? 'true' : null }), item.icon && h("ds-icon", { name: item.icon }), item.svg && h("ds-icon", { svg: item.svg }), !this.iconOnly && (h("span", { id: "content" }, h("span", { class: "label" }, item.label), item.description && h("span", { class: "description" }, item.description))))))), h("div", { key: 'f0815ad652c00b772f97d335c9c03d6518116bbc' }, h("slot", { key: '1bab00d80378d7ab2c5d3a8e50df85195287fb34', onSlotchange: () => this.handleSlotChange() }))));
+            : {})), h("input", { type: "radio", name: this.name, disabled: this.disabled, readOnly: this.readonly, value: item.value, checked: item.value === this.value, onClick: ev => this.handleInputClick(ev, item.value), onChange: () => this.handleInputChange(item.value), "aria-invalid": isInvalid ? 'true' : null }), item.icon && h("ds-icon", { name: item.icon }), item.svg && h("ds-icon", { svg: item.svg }), !this.iconOnly && (h("span", { id: "content" }, h("span", { class: "label" }, item.label), item.description && h("span", { class: "description" }, item.description))))))), h("div", { key: '2c6e7599a6909c532fd343f225cacc9aee153aec' }, h("slot", { key: '9d4af895a6216a3df94a132302a0a081f5936c15', onSlotchange: () => this.handleSlotChange() }))));
     }
     static get is() { return "ds-segment"; }
     static get encapsulation() { return "shadow"; }
@@ -580,7 +587,8 @@ export class Segment {
             "language": {},
             "region": {},
             "items": {},
-            "autoVertical": {}
+            "autoVertical": {},
+            "hasInvalidTextSlotContent": {}
         };
     }
     static get events() {

package/dist/collection/components/segment/test/segment.visual.play.js

@@ -21,6 +21,7 @@ const HOST_VARIANTS = [
     'vertical',
     'disabled',
     'invalid',
+    'invalid-slot',
     'invalid-disabled',
     'wide',
     'form',

package/dist/collection/components/select/select.host.css

@@ -1 +1 @@
-:root{--ss-primary-color: #5897fb;--ss-bg-color: #ffffff;--ss-font-color: #4d4d4d;--ss-placeholder-color: #8d8d8d;--ss-disabled-color: #dcdee2;--ss-border-color: #dcdee2;--ss-highlight-color: #fffb8c;--ss-focus-color: var(--ss-primary-color);--ss-success-color: #00b755;--ss-error-color: #dc3545;--ss-main-height: 40px;--ss-content-height: 300px;--ss-modal-height: 85vh;--ss-modal-width: min(90vw, 400px);--ss-search-height: var(--ss-main-height);--ss-option-height: var(--ss-main-height);--ss-spacing-l: 9px;--ss-spacing-m: 7px;--ss-spacing-s: 5px;--ss-animation-timing: 0.2s;--ss-border-radius: 4px;--ss-modal-z-index: 1000001}@keyframes ss-valueIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes ss-valueOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}.ss-hide{display:none !important}.ss-main{display:flex;flex-direction:row;align-items:center;position:relative;user-select:none;color:var(--ss-font-color);min-height:var(--ss-main-height);width:100%;padding:0 var(--ss-spacing-s);cursor:pointer;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;box-sizing:border-box;transition:background-color var(--ss-animation-timing),border-radius var(--ss-animation-timing)}@media(prefers-reduced-motion: reduce){.ss-main{transition:background-color var(--ss-animation-timing)}}.ss-main{overflow:hidden}.ss-main:focus{box-shadow:0 0 5px var(--ss-focus-color)}.ss-main.ss-disabled{background-color:var(--ss-disabled-color);cursor:not-allowed}.ss-main.ss-disabled .ss-values .ss-disabled{color:var(--ss-font-color)}.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main.ss-dir-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main.ss-dir-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-values{display:flex;flex-wrap:wrap;align-items:center;align-content:center;align-self:stretch;gap:var(--ss-spacing-m);flex:1 1 0%;min-width:0;max-width:100%;padding:var(--ss-spacing-s) 0;box-sizing:border-box;overflow:hidden}.ss-main .ss-values:has(.ss-multi-string){flex-wrap:nowrap;gap:0}.ss-main .ss-values:has(.ss-single),.ss-main .ss-values:has(.ss-placeholder){flex-wrap:nowrap}.ss-main .ss-values .ss-single,.ss-main .ss-values .ss-placeholder,.ss-main .ss-values .ss-multi-string{display:block;flex:1 1 0%;min-width:0;width:100%;max-width:100%;margin:0;padding:0 var(--ss-spacing-m) 0 calc(var(--ss-spacing-l) - var(--ss-spacing-s));line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}.ss-main .ss-values .ss-placeholder{color:var(--ss-placeholder-color)}.ss-main .ss-values .ss-max{display:flex;user-select:none;align-items:center;width:fit-content;font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m);background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius)}.ss-main .ss-values .ss-value{display:flex;user-select:none;align-items:center;width:fit-content;max-width:100%;background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius);animation-name:ss-valueIn;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out;animation-fill-mode:both}@media(prefers-reduced-motion: reduce){.ss-main .ss-values .ss-value{animation:none}}.ss-main .ss-values .ss-value.ss-value-out{animation-name:ss-valueOut;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out}.ss-main .ss-values .ss-value .ss-value-text{flex:1;min-width:0;font-size:12px;line-height:1;color:var(--ss-bg-color);padding:var(--ss-spacing-s) var(--ss-spacing-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-main .ss-values .ss-value .ss-value-delete{display:flex;align-items:center;height:var(--ss-spacing-l);width:var(--ss-spacing-l);padding:var(--ss-spacing-s) var(--ss-spacing-m);cursor:pointer;border-left:solid 1px var(--ss-bg-color);box-sizing:content-box}.ss-main .ss-values .ss-value .ss-value-delete svg{height:var(--ss-spacing-l);width:var(--ss-spacing-l)}.ss-main .ss-values .ss-value .ss-value-delete svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-deselect{flex:0 1 auto;display:flex;align-items:center;justify-content:center;width:fit-content;height:auto;padding:0 var(--ss-spacing-m) 0 var(--ss-spacing-m)}.ss-main .ss-deselect svg{width:8px;height:8px}.ss-main .ss-deselect svg path{fill:none;stroke:var(--ss-font-color);stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-arrow{flex:0 1 auto;display:flex;align-items:center;justify-content:flex-end;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-main .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.ss-content{position:absolute;display:flex;height:auto;flex-direction:column;width:auto;max-height:var(--ss-content-height);box-sizing:border-box;border:solid 1px var(--ss-border-color);background-color:var(--ss-bg-color);min-height:0;transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);opacity:0;transform:scaleY(0);overflow:hidden;z-index:10000}@media(prefers-reduced-motion: reduce){.ss-content{transition:none}}.ss-content.ss-relative{position:relative;height:100%}.ss-content.ss-fixed{position:fixed}.ss-content.ss-dir-above{transform-origin:center bottom;flex-direction:column-reverse;border-top-left-radius:var(--ss-border-radius);border-top-right-radius:var(--ss-border-radius)}.ss-content.ss-dir-below{transform-origin:center top;border-bottom-left-radius:var(--ss-border-radius);border-bottom-right-radius:var(--ss-border-radius)}.ss-content.ss-open{opacity:1;transform:scaleY(1)}.ss-content .ss-search{flex:0 1 auto;display:flex;flex-direction:row;align-items:center;gap:var(--ss-spacing-s);min-height:var(--ss-search-height);padding:0 var(--ss-spacing-s);box-sizing:border-box;border-bottom:1px solid var(--ss-border-color)}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0;min-height:0;height:100%;padding:0 var(--ss-spacing-m);margin:0;border:none;background-color:var(--ss-bg-color);outline:0;text-align:left;box-sizing:border-box}.ss-content .ss-search input::placeholder{color:var(--ss-placeholder-color);vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:none}.ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;flex:0 0 auto;box-sizing:border-box;width:22px;height:22px;margin:auto 0;padding:0;border:none;border-radius:var(--ss-border-radius);background-color:var(--ss-primary-color)}.ss-content .ss-search .ss-addable svg{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:10px;height:10px;margin:0}.ss-content .ss-search .ss-addable svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-content.ss-dir-above .ss-search{border-bottom:none;border-top:1px solid var(--ss-border-color)}.ss-content .ss-list{flex:1 1 auto;height:auto;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-color:var(--ss-primary-color) var(--ss-bg-color)}.ss-content .ss-list .ss-error{color:var(--ss-error-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-searching{color:var(--ss-font-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-option{min-height:0;transition:max-height var(--ss-animation-timing) ease,min-height var(--ss-animation-timing) ease,opacity var(--ss-animation-timing) ease,padding-top var(--ss-animation-timing) ease,padding-bottom var(--ss-animation-timing) ease,margin-top var(--ss-animation-timing) ease,margin-bottom var(--ss-animation-timing) ease}.ss-content .ss-list .ss-optgroup:not(.ss-close):not(.ss-open) .ss-option{min-height:var(--ss-option-height)}.ss-content .ss-list .ss-optgroup.ss-open .ss-option{min-height:var(--ss-option-height);max-height:100px;opacity:1;overflow:visible}.ss-content .ss-list .ss-optgroup.ss-close .ss-option{min-height:0 !important;padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important;margin-bottom:0 !important;max-height:0;opacity:0;overflow:hidden}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:var(--ss-option-height);padding:0 var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text{flex:1 1 auto;font-weight:bold;color:var(--ss-font-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow){cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions{flex:0 1 auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ss-spacing-m)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall{flex:0 0 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall:hover{opacity:.5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path{stroke:var(--ss-error-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span{flex:0 1 auto;display:flex;align-items:center;justify-content:center;font-size:60%;text-align:center;padding:0 var(--ss-spacing-s) 0 0}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg{flex:0 1 auto;width:13px;height:13px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path{fill:none;stroke:var(--ss-success-color);stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child{stroke-width:5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child{stroke-width:11}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable{flex:0 1 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow{flex:1 1 auto;width:10px;height:10px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content .ss-list .ss-optgroup .ss-option{padding:0 var(--ss-spacing-l) 0 calc(var(--ss-spacing-l)*3)}.ss-content .ss-list .ss-option{display:flex;align-items:center;min-height:var(--ss-option-height);padding:0 var(--ss-spacing-l);white-space:normal;color:var(--ss-font-color);cursor:pointer;user-select:none;content-visibility:auto;contain-intrinsic-size:auto var(--ss-option-height)}.ss-content .ss-list .ss-option:hover:not(.ss-disabled){color:var(--ss-bg-color);background-color:var(--ss-primary-color);border-left:5px solid var(--ss-primary-color);transition:border-left var(--ss-animation-timing) ease}.ss-content .ss-list .ss-option.ss-highlighted,.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;background-color:var(--ss-disabled-color)}.ss-content .ss-list .ss-option.ss-disabled:hover{color:var(--ss-font-color)}.ss-content .ss-list .ss-option .ss-search-highlight{display:inline-block;background-color:var(--ss-highlight-color)}.ss-content .ss-list .ss-search{display:flex;flex-direction:row;align-items:center;min-height:var(--ss-search-height);padding:0 var(--ss-spacing-l)}.ss-modal-overlay{position:fixed;inset:0;z-index:var(--ss-modal-z-index);display:flex;align-items:center;justify-content:center;padding:var(--ss-spacing-l);box-sizing:border-box;background-color:rgba(0,0,0,.8);opacity:0;transition:opacity var(--ss-animation-timing)}@media(prefers-reduced-motion: reduce){.ss-modal-overlay{transition:none}}.ss-modal-overlay.ss-open{opacity:1}.ss-modal-overlay .ss-modal-dialog{position:relative;display:flex;flex-direction:column;width:100%;max-width:var(--ss-modal-width);max-height:var(--ss-modal-height);overflow:visible}.ss-modal-overlay .ss-modal-dialog .ss-modal-title{flex:0 0 auto;width:100%;padding:0 0 var(--ss-spacing-l);box-sizing:border-box;font-weight:bold;font-size:1.35em;line-height:1.3;color:#fff;text-align:left;background:none;border:none}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content{position:relative !important;top:auto !important;left:auto !important;width:100% !important;max-width:100%;max-height:var(--ss-modal-height);min-height:0;margin:0 !important;transform-origin:center center;z-index:1;border-radius:var(--ss-border-radius);overflow:visible}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-modal-close{position:absolute;top:0;right:0;z-index:2;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;margin:0;border:none;border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);color:var(--ss-font-color);cursor:pointer;outline:0;box-shadow:0 1px 4px rgba(0,0,0,.5);transform:translate(50%, -50%)}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-modal-close:hover{background-color:var(--ss-bg-color);box-shadow:0 2px 6px rgba(0,0,0,.16)}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-modal-close:focus{box-shadow:0 0 5px var(--ss-focus-color)}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-modal-close svg{width:10px;height:10px}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-modal-close svg path{fill:none;stroke:currentColor;stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-list{min-height:0;overflow-x:hidden;overflow-y:auto;border-radius:0 0 var(--ss-border-radius) var(--ss-border-radius);scrollbar-color:var(--ss-primary-color) var(--ss-bg-color)}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-search.ss-hide~.ss-list{border-radius:var(--ss-border-radius)}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content.ss-dir-above,.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content.ss-dir-below{flex-direction:column;transform-origin:center center}:host{--_form-field-gap: var(--form-field-gap, var(--mod-form-field-gap, 0.25rem));--_form-container-background: var(--form-container-background, var(--mod-form-container-background, var(--ds-form-container-color-base-background)));--_form-container-border-color: var(--form-container-border-color, var(--mod-form-container-border-color, var(--ds-form-container-color-base-border)));--_form-container-border-width: var(--form-container-border-width, var(--mod-form-container-border-width, var(--ds-form-container-border-width)));--_form-container-radius: var(--form-container-radius, var(--mod-form-container-radius, var(--ds-form-container-radius)));--_form-container-hover-background: var(--form-container-hover-background, var(--mod-form-container-hover-background, var(--ds-form-container-color-hover-background)));--_form-container-active-background: var(--form-container-active-background, var(--mod-form-container-active-background, var(--ds-form-container-color-active-background)));--_form-container-focus-background: var(--form-container-focus-background, var(--mod-form-container-focus-background, var(--ds-form-container-color-focus-background)));--_form-container-hover-border: var(--form-container-hover-border, var(--mod-form-container-hover-border, var(--ds-form-container-color-hover-border)));--_form-container-active-border: var(--form-container-active-border, var(--mod-form-container-active-border, var(--ds-form-container-color-active-border)));--_form-container-focus-border: var(--form-container-focus-border, var(--mod-form-container-focus-border, var(--ds-form-container-color-focus-border)));--_form-label-color: var(--form-label-color, var(--mod-form-label-color, var(--ds-form-label-color-base)));--_form-label-family: var(--form-label-family, var(--mod-form-label-family, var(--ds-form-label-family)));--_form-label-weight: var(--form-label-weight, var(--mod-form-label-weight, var(--ds-form-label-weight)));--_form-label-line-height: var(--form-label-line-height, var(--mod-form-label-line-height, var(--ds-form-label-line-height)));--_form-label-size: var(--form-label-size, var(--mod-form-label-size, var(--ds-form-label-size-device)));--_form-description-color: var(--form-description-color, var(--mod-form-description-color, var(--ds-form-description-color-base)));--_form-description-family: var(--form-description-family, var(--mod-form-description-family, var(--ds-form-description-family)));--_form-description-weight: var(--form-description-weight, var(--mod-form-description-weight, var(--ds-form-description-weight)));--_form-description-line-height: var(--form-description-line-height, var(--mod-form-description-line-height, var(--ds-form-description-line-height)));--_form-description-size: var(--form-description-size, var(--mod-form-description-size, var(--ds-form-description-size-device)));--_select-family: var(--select-family, var(--mod-select-family, var(--ds-form-control-family)));--_select-weight: var(--select-weight, var(--mod-select-weight, var(--ds-form-control-weight)));--_select-line-height: var(--select-line-height, var(--mod-select-line-height, var(--ds-form-control-line-height)));--_select-size: var(--select-size, var(--mod-select-size, var(--ds-form-control-size-device)));--_select-color: var(--select-color, var(--mod-select-color, var(--ds-form-control-color-value-base)));--_select-placeholder: var(--select-placeholder, var(--mod-select-placeholder, var(--ds-form-control-color-placeholder-base)));--_select-background-color: var(--select-background-color, var(--mod-select-background-color, var(--ds-select-color-background-base)));--_select-text-color: var(--select-text-color, var(--mod-select-text-color, var(--ds-select-color-text-base)));--_select-primary-color: var(--select-primary-color, var(--mod-select-primary-color, var(--ds-select-color-primary-base)));--_select-placeholder-color: var(--select-placeholder-color, var(--mod-select-placeholder-color, var(--ds-select-color-placeholder-base)));--_select-disabled-color: var(--select-disabled-color, var(--mod-select-disabled-color, var(--ds-select-color-disabled)));--_select-border-color: var(--select-border-color, var(--mod-select-border-color, var(--ds-select-color-border-base)));--_select-highlight-color: var(--select-highlight-color, var(--mod-select-highlight-color, var(--ds-select-color-highlight-base)));--_select-focus-color: var(--select-focus-color, var(--mod-select-focus-color, var(--ds-select-color-focus-base)));--_select-success-color: var(--select-success-color, var(--mod-select-success-color, var(--ds-select-color-success)));--_select-error-color: var(--select-error-color, var(--mod-select-error-color, var(--ds-select-color-error)));--_select-radius: var(--select-radius, var(--mod-select-radius, var(--ds-select-radius)));--_select-content-family: var(--select-content-family, var(--mod-select-content-family, var(--ds-select-content-family)));--_select-content-background-color: var(--select-content-background-color, var(--mod-select-content-background-color, var(--ds-select-content-color-background-base)));--_select-content-shadow: var(--select-content-shadow, var(--mod-select-content-shadow, var(--ds-select-content-shadow)));--_select-search-text-color: var(--select-search-text-color, var(--mod-select-search-text-color, var(--ds-select-search-color-text-base)));--_select-option-text-color: var(--select-option-text-color, var(--mod-select-option-text-color, var(--ds-select-option-color-text-base)));--_select-option-background-color: var(--select-option-background-color, var(--mod-select-option-background-color, var(--ds-select-option-color-background-base)));--_select-option-border-color: var(--select-option-border-color, var(--mod-select-option-border-color, var(--ds-select-option-color-border-base)));--_select-option-selected-weight: var(--select-option-selected-weight, var(--mod-select-option-selected-weight, var(--ds-select-option-weight-selected)));--_select-option-selected-icon-color: var(--select-option-selected-icon-color, var(--mod-select-option-selected-icon-color, var(--ds-select-option-color-icon-selected)));--_select-option-selected-text-color: var(--select-option-selected-text-color, var(--mod-select-option-selected-text-color, var(--ds-select-option-color-text-selected)));--_select-option-selected-background-color: var(--select-option-selected-background-color, var(--mod-select-option-selected-background-color, var(--ds-select-option-color-background-selected)));--_select-option-hover-text-color: var(--select-option-hover-text-color, var(--mod-select-option-hover-text-color, var(--ds-select-option-color-text-hover)));--_select-option-hover-background-color: var(--select-option-hover-background-color, var(--mod-select-option-hover-background-color, var(--ds-select-option-color-background-hover)));--_select-option-highlight-text-color: var(--select-option-highlight-text-color, var(--mod-select-option-highlight-text-color, var(--ds-select-option-color-text-highlight)));--_select-option-highlight-background-color: var(--select-option-highlight-background-color, var(--mod-select-option-highlight-background-color, var(--ds-select-option-color-background-highlight)));--_select-option-disabled-text-color: var(--select-option-disabled-text-color, var(--mod-select-option-disabled-text-color, var(--ds-select-option-color-text-disabled)));--_select-option-disabled-background-color: var(--select-option-disabled-background-color, var(--mod-select-option-disabled-background-color, var(--ds-select-option-color-background-disabled)));--_select-optgroup-background-color: var(--select-optgroup-background-color, var(--mod-select-optgroup-background-color, var(--ds-select-optgroup-color-background-base)));--_select-optgroup-text-color: var(--select-optgroup-text-color, var(--mod-select-optgroup-text-color, var(--ds-select-optgroup-color-text-base)));--_select-optgroup-weight: var(--select-optgroup-weight, var(--mod-select-optgroup-weight, var(--ds-select-optgroup-weight)));--_select-icon-color: var(--select-icon-color, var(--mod-select-icon-color, var(--ds-select-icon-color-base)));--_select-icon-hover-color: var(--select-icon-hover-color, var(--mod-select-icon-hover-color, var(--ds-select-icon-color-hover)));--_select-icon-active-color: var(--select-icon-active-color, var(--mod-select-icon-active-color, var(--ds-select-icon-color-active)));--_select-tag-background-color: var(--select-tag-background-color, var(--mod-select-tag-background-color, var(--ds-select-chip-color-base-background)));--_select-tag-text-color: var(--select-tag-text-color, var(--mod-select-tag-text-color, var(--ds-select-chip-color-base-text)));--_select-tag-family: var(--select-tag-family, var(--mod-select-tag-family, var(--ds-select-chip-family)));--_select-checkbox-border-color: var(--select-checkbox-border-color, var(--mod-select-checkbox-border-color, var(--ds-select-checkbox-color-border-base)));--_select-checkbox-selected-background-color: var(--select-checkbox-selected-background-color, var(--mod-select-checkbox-selected-background-color, var(--ds-select-checkbox-color-background-selected)));--_select-checkbox-selected-border-color: var(--select-checkbox-selected-border-color, var(--mod-select-checkbox-selected-border-color, var(--ds-select-checkbox-color-border-selected)));--_select-focus-ring-color: var(--select-focus-ring-color, var(--mod-select-focus-ring-color, var(--ds-select-color-focus-ring-base)));--ss-bg-color: var(--_select-background-color);--ss-font-color: var(--_select-text-color);--ss-primary-color: var(--_select-primary-color);--ss-placeholder-color: var(--_select-placeholder-color);--ss-disabled-color: var(--_select-disabled-color);--ss-border-color: var(--_select-border-color);--ss-highlight-color: var(--_select-highlight-color);--ss-focus-color: var(--_select-focus-color);--ss-success-color: var(--_select-success-color);--ss-error-color: var(--_select-error-color);--ss-main-height: 40px;--ss-content-height: 300px;--ss-modal-height: 85vh;--ss-modal-width: min(90vw, 400px);--ss-search-height: var(--ss-main-height);--ss-option-height: var(--ss-main-height);--ss-spacing-l: 8px;--ss-spacing-m: 4px;--ss-spacing-s: 2px;--ss-icon-spacing: 10px;--ss-animation-timing: 0.2s;--ss-border-radius: var(--_select-radius);--ss-modal-z-index: 1000001}:host{position:relative;display:grid;gap:var(--_form-field-gap)}:host #container{box-sizing:border-box;clear:both;display:flex;width:100%;align-items:center;min-height:3rem;gap:.25rem;padding-inline:.5rem;background:var(--_form-container-background);border:var(--_form-container-border-width) solid var(--_form-container-border-color);border-radius:var(--_form-container-radius)}@media(hover: hover)and (pointer: fine){:host #container:hover,:host #container.is-hovered{background:var(--_form-container-hover-background);border-color:var(--_form-container-hover-border)}}:host #container:active,:host #container.is-pressed{background:var(--_form-container-active-background);border-color:var(--_form-container-active-border)}:host #container:focus-within:not(:active),:host #container.is-focused:not(:active){background:var(--_form-container-focus-background);border-color:var(--_form-container-focus-border)}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_form-label-color);font-family:var(--_form-label-family);font-weight:var(--_form-label-weight);font-size:var(--_form-label-size);line-height:var(--_form-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_form-description-color);font-family:var(--_form-description-family);font-weight:var(--_form-description-weight);font-size:var(--_form-description-size);line-height:var(--_form-description-line-height)}:host #description ds-icon{--icon-color: var(--_form-description-color)}:host #inner{position:relative;display:grid;gap:var(--_form-field-gap)}:host select{display:none}:host #container{position:relative;padding-inline:0;cursor:pointer}:host(.is-danger){--mod-form-container-border-color: var(--ds-form-container-color-danger-border);--mod-form-description-color: var(--ds-form-description-color-danger);--mod-form-container-hover-border: var(--ds-form-container-color-danger-border);--mod-form-container-active-border: var(--ds-form-container-color-danger-border)}:host(.is-success){--mod-form-container-border-color: var(--ds-form-container-color-success-border);--mod-form-description-color: var(--ds-form-description-color-success);--mod-form-container-hover-border: var(--ds-form-container-color-success-border);--mod-form-container-active-border: var(--ds-form-container-color-success-border)}:host(.is-warning){--mod-form-container-border-color: var(--ds-form-container-color-warning-border);--mod-form-description-color: var(--ds-form-description-color-warning);--mod-form-container-hover-border: var(--ds-form-container-color-warning-border);--mod-form-container-active-border: var(--ds-form-container-color-warning-border)}:host(.is-disabled){pointer-events:none;cursor:default;--mod-form-container-background: var(--ds-form-container-color-disabled-background);--mod-form-container-border-color: var(--ds-form-container-color-disabled-border);--mod-form-label-color: var(--ds-form-label-color-disabled);--mod-form-description-color: var(--ds-form-description-color-disabled);--mod-select-color: var(--ds-form-control-color-value-disabled);--mod-select-placeholder: var(--ds-form-control-color-placeholder-disabled)}:host #container{position:relative}:host #popup{display:block}:host .ss-main{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media print{:host .ss-main{display:none !important}}:host .ss-main{padding:0;margin:0;border:none;box-shadow:none;font-family:var(--_select-content-family);z-index:var(--ds-alias-z-index-popup)}:host .ss-content{background-color:var(--_select-content-background-color);box-shadow:var(--_select-content-shadow);border:none;margin:0 !important;position:absolute;top:100%;left:0;width:100%;min-height:0;max-height:300px;height:auto}@media(prefers-reduced-motion: reduce){:host .ss-content{transition:none !important;animation:none !important}}:host .ss-content .ss-search{border-width:2px;border-color:var(--_form-container-border-color)}:host .ss-content .ss-search input{color:var(--_select-search-text-color)}:host .ss-content .ss-search input[type=search]::-ms-clear{display:none;width:0;height:0}:host .ss-content .ss-search input[type=search]::-ms-reveal{display:none;width:0;height:0}:host .ss-content .ss-search input[type=search]::-webkit-search-decoration,:host .ss-content .ss-search input[type=search]::-webkit-search-cancel-button,:host .ss-content .ss-search input[type=search]::-webkit-search-results-button,:host .ss-content .ss-search input[type=search]::-webkit-search-results-decoration{display:none}:host .ss-content .ss-list .ss-option .ss-search-highlight{font-weight:var(--_select-option-selected-weight);color:var(--_select-option-highlight-text-color);border-radius:var(--_select-radius)}:host .ss-content .ss-list .ss-option{color:var(--_select-option-text-color);background-color:var(--_select-option-background-color);border-left:none !important;border-bottom:2px solid var(--_select-option-border-color)}:host .ss-content .ss-list .ss-option:last-child{border-bottom:none}:host .ss-content .ss-list .ss-option::after{display:block;content:"";width:14px;height:14px;mask-size:100%;mask-repeat:no-repeat;mask-position:center;margin-left:auto}:host .ss-content .ss-list .ss-option.ss-selected{font-weight:var(--_select-option-selected-weight);background-color:var(--_select-option-selected-background-color);color:var(--_select-option-selected-text-color)}:host .ss-content .ss-list .ss-option.ss-selected::after{mask-image:url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>");mask-size:100%;mask-repeat:no-repeat;mask-position:center;background-color:var(--_select-option-selected-icon-color)}:host .ss-content .ss-list .ss-option:hover:not(.ss-disabled),:host .ss-content .ss-list .ss-option:active:not(.ss-disabled){background-color:var(--_select-option-hover-background-color);color:var(--_select-option-hover-text-color)}:host .ss-content .ss-list .ss-option.ss-highlighted{background-color:var(--_select-option-highlight-background-color);color:var(--_select-option-highlight-text-color)}:host .ss-content .ss-list .ss-option.ss-disabled{background-color:var(--_select-option-disabled-background-color);color:var(--_select-option-disabled-text-color)}:host .ss-main .ss-deselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media print{:host .ss-main .ss-deselect{display:none !important}}:host .ss-main .ss-deselect{border-radius:var(--ds-alias-radius-rounded);background:rgba(0,0,0,0);width:1.5rem;height:1.5rem;border:none;appearance:auto;position:relative;display:inline-flex;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;text-align:center;vertical-align:middle;cursor:pointer;word-break:normal;box-shadow:none;outline:none;box-sizing:border-box;text-decoration:none;user-select:none;touch-action:manipulation;transition-property:color,background-color,border-color,box-shadow,text-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host .ss-main .ss-deselect::-moz-focus-inner{border:0}:host .ss-main .ss-deselect:disabled{pointer-events:none}@media(hover: hover)and (pointer: fine){:host .ss-main .ss-deselect:hover,:host .ss-main .ss-deselect.is-hovered{--icon-color: var(--ds-alias-text-color-primary-hover);background:var(--ds-alias-background-color-highlight)}}:host .ss-main .ss-deselect:active,:host .ss-main .ss-deselect.is-pressed{--icon-color: var(--ds-alias-text-color-primary-active);background:var(--ds-alias-background-color-highlight)}@media(hover: hover)and (pointer: fine){:host .ss-main .ss-deselect:focus-visible:not(:active),:host .ss-main .ss-deselect.is-focused:not(:active){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important}}:host .ss-main .ss-deselect::after{position:absolute;content:"";display:block;width:1rem;height:1rem;margin-inline:var(--ss-icon-spacing);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill-rule='evenodd' d='M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893Z' clip-rule='evenodd'/%3E%3C/svg%3E");mask-size:80%;mask-repeat:no-repeat;mask-position:center;background-color:var(--_select-icon-color);transition:transform var(--ss-animation-timing) ease-in-out}@media(hover: hover)and (pointer: fine){:host .ss-main .ss-deselect:hover::after,:host .ss-main .ss-deselect.is-hovered::after{background-color:var(--_select-icon-hover-color)}}:host .ss-main .ss-deselect:active::after,:host .ss-main .ss-deselect.is-pressed::after{background-color:var(--_select-icon-active-color)}:host .ss-main .ss-deselect svg{display:none}:host .ss-main .ss-arrow{display:block;width:1rem;height:1rem;margin-inline:var(--ss-icon-spacing);mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%3E%3Cpath%20fill='black'%20d='M5,7.874a1.238,1.238,0,0,1-.879-.364L.206,3.393A.75.75,0,1,1,1.294,2.36L4.819,6.072a.249.249,0,0,0,.362,0L8.706,2.36A.75.75,0,1,1,9.794,3.393L5.9,7.5A1.269,1.269,0,0,1,5,7.874Z'/%3E%3C/svg%3E");mask-size:100%;mask-repeat:no-repeat;mask-position:center;background-color:var(--_select-icon-color);transition:transform var(--ss-animation-timing) ease-in-out}:host .ss-main .ss-arrow path{display:none}:host .ss-main.ss-dir-below .ss-arrow{transform:rotate(180deg)}:host .ss-main .ss-values{padding-inline:var(--ss-icon-spacing)}:host .ss-main .ss-values .ss-single{padding-inline:0}:host .ss-main .ss-values .ss-value{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;min-height:1.5rem;padding-block:var(--ds-tag-space-padding-y-sm);padding-inline:var(--ds-tag-space-padding-x-sm);border-radius:var(--ds-tag-radius-base);background-color:var(--_select-tag-background-color)}:host .ss-main .ss-values .ss-value .ss-value-text{color:var(--_select-tag-text-color);font-family:var(--_select-tag-family);line-height:1;font-size:var(--ds-tag-font-size-sm);font-weight:var(--ds-tag-font-weight-sm);padding:0}:host .ss-main .ss-values .ss-value .ss-value-delete{position:relative;margin:0;padding:0;width:20px;height:20px;border:none;border-radius:var(--ds-close-radius);background-color:var(--ds-close-color-background-base);appearance:none;outline:none;margin-left:.25rem;margin-right:-0.5rem}:host .ss-main .ss-values .ss-value .ss-value-delete::after{display:block;content:"";width:10px;height:10px;margin-left:5px;margin-right:5px;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill-rule='evenodd' d='M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893Z' clip-rule='evenodd'/%3E%3C/svg%3E");mask-size:100%;mask-repeat:no-repeat;mask-position:center;background-color:var(--ds-close-color-icon-base)}:host .ss-main .ss-values .ss-value .ss-value-delete svg{display:none}@media(hover: hover)and (pointer: fine){:host .ss-main .ss-values .ss-value .ss-value-delete:hover{background-color:var(--ds-close-color-background-hover)}}:host .ss-main .ss-values .ss-value .ss-value-delete:active{background-color:var(--ds-close-color-background-active)}@media(hover: hover)and (pointer: fine){:host .ss-main .ss-values .ss-value .ss-value-delete:focus-visible:not(:active){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_select-focus-ring-color) 0 0 0 5px !important}}:host .ss-content .ss-list .ss-optgroup .ss-optgroup-label{background-color:var(--_select-optgroup-background-color);color:var(--_select-optgroup-text-color);font-weight:var(--_select-optgroup-weight)}:host #popup.is-multiple .ss-content .ss-list .ss-option::after{display:none}:host #popup.is-multiple .ss-content .ss-list .ss-option::before{width:16px;height:16px;content:"";border:2px solid var(--_select-checkbox-border-color);border-radius:var(--_select-radius);margin-right:.5rem;flex-shrink:0}:host #popup.is-multiple .ss-content .ss-list .ss-option.ss-selected::before{background-color:var(--_select-checkbox-selected-background-color);border-color:var(--_select-checkbox-selected-border-color);background-image:url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill='%23ffffff' fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>");background-size:75%;background-repeat:no-repeat;background-position:center}
+:root{--ss-primary-color: #5897fb;--ss-bg-color: #ffffff;--ss-font-color: #4d4d4d;--ss-placeholder-color: #8d8d8d;--ss-disabled-color: #dcdee2;--ss-border-color: #dcdee2;--ss-highlight-color: #fffb8c;--ss-focus-color: var(--ss-primary-color);--ss-success-color: #00b755;--ss-error-color: #dc3545;--ss-main-height: 40px;--ss-content-height: 300px;--ss-modal-height: 85vh;--ss-modal-width: min(90vw, 400px);--ss-search-height: var(--ss-main-height);--ss-option-height: var(--ss-main-height);--ss-spacing-l: 9px;--ss-spacing-m: 7px;--ss-spacing-s: 5px;--ss-animation-timing: 0.2s;--ss-border-radius: 4px;--ss-modal-z-index: 1000001}@keyframes ss-valueIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes ss-valueOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}.ss-hide{display:none !important}.ss-main{display:flex;flex-direction:row;align-items:center;position:relative;user-select:none;color:var(--ss-font-color);min-height:var(--ss-main-height);width:100%;padding:0 var(--ss-spacing-s);cursor:pointer;border:1px solid var(--ss-border-color);border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);outline:0;box-sizing:border-box;transition:background-color var(--ss-animation-timing),border-radius var(--ss-animation-timing)}@media(prefers-reduced-motion: reduce){.ss-main{transition:background-color var(--ss-animation-timing)}}.ss-main{overflow:hidden}.ss-main:focus{box-shadow:0 0 5px var(--ss-focus-color)}.ss-main.ss-disabled{background-color:var(--ss-disabled-color);cursor:not-allowed}.ss-main.ss-disabled .ss-values .ss-disabled{color:var(--ss-font-color)}.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main.ss-dir-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main.ss-dir-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-values{display:flex;flex-wrap:wrap;align-items:center;align-content:center;align-self:stretch;gap:var(--ss-spacing-m);flex:1 1 0%;min-width:0;max-width:100%;padding:var(--ss-spacing-s) 0;box-sizing:border-box;overflow:hidden}.ss-main .ss-values:has(.ss-multi-string){flex-wrap:nowrap;gap:0}.ss-main .ss-values:has(.ss-single),.ss-main .ss-values:has(.ss-placeholder){flex-wrap:nowrap}.ss-main .ss-values .ss-single,.ss-main .ss-values .ss-placeholder,.ss-main .ss-values .ss-multi-string{display:block;flex:1 1 0%;min-width:0;width:100%;max-width:100%;margin:0;padding:0 var(--ss-spacing-m) 0 calc(var(--ss-spacing-l) - var(--ss-spacing-s));line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}.ss-main .ss-values .ss-placeholder{color:var(--ss-placeholder-color)}.ss-main .ss-values .ss-max{display:flex;user-select:none;align-items:center;width:fit-content;font-size:12px;color:var(--ss-bg-color);line-height:1;padding:var(--ss-spacing-s) var(--ss-spacing-m);background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius)}.ss-main .ss-values .ss-value{display:flex;user-select:none;align-items:center;width:fit-content;max-width:100%;background-color:var(--ss-primary-color);border-radius:var(--ss-border-radius);animation-name:ss-valueIn;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out;animation-fill-mode:both}@media(prefers-reduced-motion: reduce){.ss-main .ss-values .ss-value{animation:none}}.ss-main .ss-values .ss-value.ss-value-out{animation-name:ss-valueOut;animation-duration:var(--ss-animation-timing);animation-timing-function:ease-out}.ss-main .ss-values .ss-value .ss-value-text{flex:1;min-width:0;font-size:12px;line-height:1;color:var(--ss-bg-color);padding:var(--ss-spacing-s) var(--ss-spacing-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ss-main .ss-values .ss-value .ss-value-delete{display:flex;align-items:center;height:var(--ss-spacing-l);width:var(--ss-spacing-l);padding:var(--ss-spacing-s) var(--ss-spacing-m);cursor:pointer;border-left:solid 1px var(--ss-bg-color);box-sizing:content-box}.ss-main .ss-values .ss-value .ss-value-delete svg{height:var(--ss-spacing-l);width:var(--ss-spacing-l)}.ss-main .ss-values .ss-value .ss-value-delete svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-deselect{flex:0 1 auto;display:flex;align-items:center;justify-content:center;width:fit-content;height:auto;padding:0 var(--ss-spacing-m) 0 var(--ss-spacing-m)}.ss-main .ss-deselect svg{width:8px;height:8px}.ss-main .ss-deselect svg path{fill:none;stroke:var(--ss-font-color);stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.ss-main .ss-arrow{flex:0 1 auto;display:flex;align-items:center;justify-content:flex-end;width:12px;height:12px;margin:auto var(--ss-spacing-m) auto var(--ss-spacing-m)}.ss-main .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.ss-content{position:absolute;display:flex;height:auto;flex-direction:column;width:auto;max-height:var(--ss-content-height);box-sizing:border-box;border:solid 1px var(--ss-border-color);background-color:var(--ss-bg-color);min-height:0;transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);opacity:0;transform:scaleY(0);overflow:hidden;z-index:10000}@media(prefers-reduced-motion: reduce){.ss-content{transition:none}}.ss-content.ss-relative{position:relative;height:100%}.ss-content.ss-fixed{position:fixed}.ss-content.ss-dir-above{transform-origin:center bottom;flex-direction:column-reverse;border-top-left-radius:var(--ss-border-radius);border-top-right-radius:var(--ss-border-radius)}.ss-content.ss-dir-below{transform-origin:center top;border-bottom-left-radius:var(--ss-border-radius);border-bottom-right-radius:var(--ss-border-radius)}.ss-content.ss-open{opacity:1;transform:scaleY(1)}.ss-content .ss-search{flex:0 1 auto;display:flex;flex-direction:row;align-items:center;gap:var(--ss-spacing-s);min-height:var(--ss-search-height);padding:0 var(--ss-spacing-s);box-sizing:border-box;border-bottom:1px solid var(--ss-border-color)}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0;min-height:0;height:100%;padding:0 var(--ss-spacing-m);margin:0;border:none;background-color:var(--ss-bg-color);outline:0;text-align:left;box-sizing:border-box}.ss-content .ss-search input::placeholder{color:var(--ss-placeholder-color);vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:none}.ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;flex:0 0 auto;box-sizing:border-box;width:22px;height:22px;margin:auto 0;padding:0;border:none;border-radius:var(--ss-border-radius);background-color:var(--ss-primary-color)}.ss-content .ss-search .ss-addable svg{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:10px;height:10px;margin:0}.ss-content .ss-search .ss-addable svg path{fill:none;stroke:var(--ss-bg-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}.ss-content.ss-dir-above .ss-search{border-bottom:none;border-top:1px solid var(--ss-border-color)}.ss-content .ss-list{flex:1 1 auto;height:auto;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-color:var(--ss-primary-color) var(--ss-bg-color)}.ss-content .ss-list .ss-error{color:var(--ss-error-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-searching{color:var(--ss-font-color);padding:var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-option{min-height:0;transition:max-height var(--ss-animation-timing) ease,min-height var(--ss-animation-timing) ease,opacity var(--ss-animation-timing) ease,padding-top var(--ss-animation-timing) ease,padding-bottom var(--ss-animation-timing) ease,margin-top var(--ss-animation-timing) ease,margin-bottom var(--ss-animation-timing) ease}.ss-content .ss-list .ss-optgroup:not(.ss-close):not(.ss-open) .ss-option{min-height:var(--ss-option-height)}.ss-content .ss-list .ss-optgroup.ss-open .ss-option{min-height:var(--ss-option-height);max-height:100px;opacity:1;overflow:visible}.ss-content .ss-list .ss-optgroup.ss-close .ss-option{min-height:0 !important;padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important;margin-bottom:0 !important;max-height:0;opacity:0;overflow:hidden}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:var(--ss-option-height);padding:0 var(--ss-spacing-l)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text{flex:1 1 auto;font-weight:bold;color:var(--ss-font-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow){cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions{flex:0 1 auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ss-spacing-m)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall{flex:0 0 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall:hover{opacity:.5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path{stroke:var(--ss-error-color)}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span{flex:0 1 auto;display:flex;align-items:center;justify-content:center;font-size:60%;text-align:center;padding:0 var(--ss-spacing-s) 0 0}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg{flex:0 1 auto;width:13px;height:13px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path{fill:none;stroke:var(--ss-success-color);stroke-linecap:round;stroke-linejoin:round}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child{stroke-width:5}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child{stroke-width:11}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable{flex:0 1 auto;display:flex;flex-direction:row;cursor:pointer}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow{flex:1 1 auto;width:10px;height:10px}.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path{fill:none;stroke:var(--ss-font-color);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;transition-timing-function:ease-out;transition:var(--ss-animation-timing)}.ss-content .ss-list .ss-optgroup .ss-option{padding:0 var(--ss-spacing-l) 0 calc(var(--ss-spacing-l)*3)}.ss-content .ss-list .ss-option{display:flex;align-items:center;min-height:var(--ss-option-height);padding:0 var(--ss-spacing-l);white-space:normal;color:var(--ss-font-color);cursor:pointer;user-select:none;content-visibility:auto;contain-intrinsic-size:auto var(--ss-option-height)}.ss-content .ss-list .ss-option:hover:not(.ss-disabled){color:var(--ss-bg-color);background-color:var(--ss-primary-color);border-left:5px solid var(--ss-primary-color);transition:border-left var(--ss-animation-timing) ease}.ss-content .ss-list .ss-option.ss-highlighted,.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected{color:var(--ss-bg-color);background-color:var(--ss-primary-color)}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;background-color:var(--ss-disabled-color)}.ss-content .ss-list .ss-option.ss-disabled:hover{color:var(--ss-font-color)}.ss-content .ss-list .ss-option .ss-search-highlight{display:inline-block;background-color:var(--ss-highlight-color)}.ss-content .ss-list .ss-search{display:flex;flex-direction:row;align-items:center;min-height:var(--ss-search-height);padding:0 var(--ss-spacing-l)}.ss-modal-overlay{position:fixed;inset:0;z-index:var(--ss-modal-z-index);display:flex;align-items:center;justify-content:center;padding:var(--ss-spacing-l);box-sizing:border-box;background-color:rgba(0,0,0,.8);opacity:0;transition:opacity var(--ss-animation-timing)}@media(prefers-reduced-motion: reduce){.ss-modal-overlay{transition:none}}.ss-modal-overlay.ss-open{opacity:1}.ss-modal-overlay .ss-modal-dialog{position:relative;display:flex;flex-direction:column;width:100%;max-width:var(--ss-modal-width);max-height:var(--ss-modal-height);overflow:visible}.ss-modal-overlay .ss-modal-dialog .ss-modal-title{flex:0 0 auto;width:100%;padding:0 0 var(--ss-spacing-l);box-sizing:border-box;font-weight:bold;font-size:1.35em;line-height:1.3;color:#fff;text-align:left;background:none;border:none}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content{position:relative !important;top:auto !important;left:auto !important;width:100% !important;max-width:100%;max-height:var(--ss-modal-height);min-height:0;margin:0 !important;transform-origin:center center;z-index:1;border-radius:var(--ss-border-radius);overflow:visible}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-modal-close{position:absolute;top:0;right:0;z-index:2;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;margin:0;border:none;border-radius:var(--ss-border-radius);background-color:var(--ss-bg-color);color:var(--ss-font-color);cursor:pointer;outline:0;box-shadow:0 1px 4px rgba(0,0,0,.5);transform:translate(50%, -50%)}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-modal-close:hover{background-color:var(--ss-bg-color);box-shadow:0 2px 6px rgba(0,0,0,.16)}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-modal-close:focus{box-shadow:0 0 5px var(--ss-focus-color)}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-modal-close svg{width:10px;height:10px}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-modal-close svg path{fill:none;stroke:currentColor;stroke-width:20;stroke-linecap:round;stroke-linejoin:round}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-list{min-height:0;overflow-x:hidden;overflow-y:auto;border-radius:0 0 var(--ss-border-radius) var(--ss-border-radius);scrollbar-color:var(--ss-primary-color) var(--ss-bg-color)}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content .ss-search.ss-hide~.ss-list{border-radius:var(--ss-border-radius)}.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content.ss-dir-above,.ss-modal-overlay .ss-modal-dialog .ss-content.ss-modal-content.ss-dir-below{flex-direction:column;transform-origin:center center}:host{--_form-field-gap: var(--form-field-gap, var(--mod-form-field-gap, 0.25rem));--_form-container-background: var(--form-container-background, var(--mod-form-container-background, var(--ds-form-container-color-base-background)));--_form-container-border-color: var(--form-container-border-color, var(--mod-form-container-border-color, var(--ds-form-container-color-base-border)));--_form-container-border-width: var(--form-container-border-width, var(--mod-form-container-border-width, var(--ds-form-container-border-width)));--_form-container-radius: var(--form-container-radius, var(--mod-form-container-radius, var(--ds-form-container-radius)));--_form-container-hover-background: var(--form-container-hover-background, var(--mod-form-container-hover-background, var(--ds-form-container-color-hover-background)));--_form-container-active-background: var(--form-container-active-background, var(--mod-form-container-active-background, var(--ds-form-container-color-active-background)));--_form-container-focus-background: var(--form-container-focus-background, var(--mod-form-container-focus-background, var(--ds-form-container-color-focus-background)));--_form-container-hover-border: var(--form-container-hover-border, var(--mod-form-container-hover-border, var(--ds-form-container-color-hover-border)));--_form-container-active-border: var(--form-container-active-border, var(--mod-form-container-active-border, var(--ds-form-container-color-active-border)));--_form-container-focus-border: var(--form-container-focus-border, var(--mod-form-container-focus-border, var(--ds-form-container-color-focus-border)));--_form-label-color: var(--form-label-color, var(--mod-form-label-color, var(--ds-form-label-color-base)));--_form-label-family: var(--form-label-family, var(--mod-form-label-family, var(--ds-form-label-family)));--_form-label-weight: var(--form-label-weight, var(--mod-form-label-weight, var(--ds-form-label-weight)));--_form-label-line-height: var(--form-label-line-height, var(--mod-form-label-line-height, var(--ds-form-label-line-height)));--_form-label-size: var(--form-label-size, var(--mod-form-label-size, var(--ds-form-label-size-device)));--_form-description-color: var(--form-description-color, var(--mod-form-description-color, var(--ds-form-description-color-base)));--_form-description-family: var(--form-description-family, var(--mod-form-description-family, var(--ds-form-description-family)));--_form-description-weight: var(--form-description-weight, var(--mod-form-description-weight, var(--ds-form-description-weight)));--_form-description-line-height: var(--form-description-line-height, var(--mod-form-description-line-height, var(--ds-form-description-line-height)));--_form-description-size: var(--form-description-size, var(--mod-form-description-size, var(--ds-form-description-size-device)));--_select-family: var(--select-family, var(--mod-select-family, var(--ds-form-control-family)));--_select-weight: var(--select-weight, var(--mod-select-weight, var(--ds-form-control-weight)));--_select-line-height: var(--select-line-height, var(--mod-select-line-height, var(--ds-form-control-line-height)));--_select-size: var(--select-size, var(--mod-select-size, var(--ds-form-control-size-device)));--_select-color: var(--select-color, var(--mod-select-color, var(--ds-form-control-color-value-base)));--_select-placeholder: var(--select-placeholder, var(--mod-select-placeholder, var(--ds-form-control-color-placeholder-base)));--_select-background-color: var(--select-background-color, var(--mod-select-background-color, var(--ds-select-color-background-base)));--_select-text-color: var(--select-text-color, var(--mod-select-text-color, var(--ds-select-color-text-base)));--_select-primary-color: var(--select-primary-color, var(--mod-select-primary-color, var(--ds-select-color-primary-base)));--_select-placeholder-color: var(--select-placeholder-color, var(--mod-select-placeholder-color, var(--ds-select-color-placeholder-base)));--_select-disabled-color: var(--select-disabled-color, var(--mod-select-disabled-color, var(--ds-select-color-disabled)));--_select-border-color: var(--select-border-color, var(--mod-select-border-color, var(--ds-select-color-border-base)));--_select-highlight-color: var(--select-highlight-color, var(--mod-select-highlight-color, var(--ds-select-color-highlight-base)));--_select-focus-color: var(--select-focus-color, var(--mod-select-focus-color, var(--ds-select-color-focus-base)));--_select-success-color: var(--select-success-color, var(--mod-select-success-color, var(--ds-select-color-success)));--_select-error-color: var(--select-error-color, var(--mod-select-error-color, var(--ds-select-color-error)));--_select-radius: var(--select-radius, var(--mod-select-radius, var(--ds-select-radius)));--_select-content-family: var(--select-content-family, var(--mod-select-content-family, var(--ds-select-content-family)));--_select-content-background-color: var(--select-content-background-color, var(--mod-select-content-background-color, var(--ds-select-content-color-background-base)));--_select-content-shadow: var(--select-content-shadow, var(--mod-select-content-shadow, var(--ds-select-content-shadow)));--_select-search-text-color: var(--select-search-text-color, var(--mod-select-search-text-color, var(--ds-select-search-color-text-base)));--_select-option-text-color: var(--select-option-text-color, var(--mod-select-option-text-color, var(--ds-select-option-color-text-base)));--_select-option-background-color: var(--select-option-background-color, var(--mod-select-option-background-color, var(--ds-select-option-color-background-base)));--_select-option-border-color: var(--select-option-border-color, var(--mod-select-option-border-color, var(--ds-select-option-color-border-base)));--_select-option-selected-weight: var(--select-option-selected-weight, var(--mod-select-option-selected-weight, var(--ds-select-option-weight-selected)));--_select-option-selected-icon-color: var(--select-option-selected-icon-color, var(--mod-select-option-selected-icon-color, var(--ds-select-option-color-icon-selected)));--_select-option-selected-text-color: var(--select-option-selected-text-color, var(--mod-select-option-selected-text-color, var(--ds-select-option-color-text-selected)));--_select-option-selected-background-color: var(--select-option-selected-background-color, var(--mod-select-option-selected-background-color, var(--ds-select-option-color-background-selected)));--_select-option-hover-text-color: var(--select-option-hover-text-color, var(--mod-select-option-hover-text-color, var(--ds-select-option-color-text-hover)));--_select-option-hover-background-color: var(--select-option-hover-background-color, var(--mod-select-option-hover-background-color, var(--ds-select-option-color-background-hover)));--_select-option-highlight-text-color: var(--select-option-highlight-text-color, var(--mod-select-option-highlight-text-color, var(--ds-select-option-color-text-highlight)));--_select-option-highlight-background-color: var(--select-option-highlight-background-color, var(--mod-select-option-highlight-background-color, var(--ds-select-option-color-background-highlight)));--_select-option-disabled-text-color: var(--select-option-disabled-text-color, var(--mod-select-option-disabled-text-color, var(--ds-select-option-color-text-disabled)));--_select-option-disabled-background-color: var(--select-option-disabled-background-color, var(--mod-select-option-disabled-background-color, var(--ds-select-option-color-background-disabled)));--_select-optgroup-background-color: var(--select-optgroup-background-color, var(--mod-select-optgroup-background-color, var(--ds-select-optgroup-color-background-base)));--_select-optgroup-text-color: var(--select-optgroup-text-color, var(--mod-select-optgroup-text-color, var(--ds-select-optgroup-color-text-base)));--_select-optgroup-weight: var(--select-optgroup-weight, var(--mod-select-optgroup-weight, var(--ds-select-optgroup-weight)));--_select-icon-color: var(--select-icon-color, var(--mod-select-icon-color, var(--ds-select-icon-color-base)));--_select-icon-hover-color: var(--select-icon-hover-color, var(--mod-select-icon-hover-color, var(--ds-select-icon-color-hover)));--_select-icon-active-color: var(--select-icon-active-color, var(--mod-select-icon-active-color, var(--ds-select-icon-color-active)));--_select-tag-background-color: var(--select-tag-background-color, var(--mod-select-tag-background-color, var(--ds-select-chip-color-base-background)));--_select-tag-text-color: var(--select-tag-text-color, var(--mod-select-tag-text-color, var(--ds-select-chip-color-base-text)));--_select-tag-family: var(--select-tag-family, var(--mod-select-tag-family, var(--ds-select-chip-family)));--_select-checkbox-border-color: var(--select-checkbox-border-color, var(--mod-select-checkbox-border-color, var(--ds-select-checkbox-color-border-base)));--_select-checkbox-selected-background-color: var(--select-checkbox-selected-background-color, var(--mod-select-checkbox-selected-background-color, var(--ds-select-checkbox-color-background-selected)));--_select-checkbox-selected-border-color: var(--select-checkbox-selected-border-color, var(--mod-select-checkbox-selected-border-color, var(--ds-select-checkbox-color-border-selected)));--_select-focus-ring-color: var(--select-focus-ring-color, var(--mod-select-focus-ring-color, var(--ds-select-color-focus-ring-base)));--ss-bg-color: var(--_select-background-color);--ss-font-color: var(--_select-text-color);--ss-primary-color: var(--_select-primary-color);--ss-placeholder-color: var(--_select-placeholder-color);--ss-disabled-color: var(--_select-disabled-color);--ss-border-color: var(--_select-border-color);--ss-highlight-color: var(--_select-highlight-color);--ss-focus-color: var(--_select-focus-color);--ss-success-color: var(--_select-success-color);--ss-error-color: var(--_select-error-color);--ss-main-height: 40px;--ss-content-height: 300px;--ss-modal-height: 85vh;--ss-modal-width: min(90vw, 400px);--ss-search-height: var(--ss-main-height);--ss-option-height: var(--ss-main-height);--ss-spacing-l: 8px;--ss-spacing-m: 4px;--ss-spacing-s: 2px;--ss-icon-spacing: 10px;--ss-animation-timing: 0.2s;--ss-border-radius: var(--_select-radius);--ss-modal-z-index: 1000001}:host{position:relative;display:grid;gap:var(--_form-field-gap)}:host #container{box-sizing:border-box;clear:both;display:flex;width:100%;align-items:center;min-height:3rem;gap:.25rem;padding-inline:.5rem;background:var(--_form-container-background);border:var(--_form-container-border-width) solid var(--_form-container-border-color);border-radius:var(--_form-container-radius)}@media(hover: hover)and (pointer: fine){:host #container:hover,:host #container.is-hovered{background:var(--_form-container-hover-background);border-color:var(--_form-container-hover-border)}}:host #container:active,:host #container.is-pressed{background:var(--_form-container-active-background);border-color:var(--_form-container-active-border)}:host #container:focus-within:not(:active),:host #container.is-focused:not(:active){background:var(--_form-container-focus-background);border-color:var(--_form-container-focus-border)}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_form-label-color);font-family:var(--_form-label-family);font-weight:var(--_form-label-weight);font-size:var(--_form-label-size);line-height:var(--_form-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_form-description-color);font-family:var(--_form-description-family);font-weight:var(--_form-description-weight);font-size:var(--_form-description-size);line-height:var(--_form-description-line-height)}:host #description ds-icon{--icon-color: var(--_form-description-color)}:host #inner{position:relative;display:grid;gap:var(--_form-field-gap)}:host select{display:none}:host #container{position:relative;padding-inline:0;cursor:pointer}:host(.is-danger){--mod-form-container-border-color: var(--ds-form-container-color-danger-border);--mod-form-description-color: var(--ds-form-description-color-danger);--mod-form-container-hover-border: var(--ds-form-container-color-danger-border);--mod-form-container-active-border: var(--ds-form-container-color-danger-border)}:host(.is-success){--mod-form-container-border-color: var(--ds-form-container-color-success-border);--mod-form-description-color: var(--ds-form-description-color-success);--mod-form-container-hover-border: var(--ds-form-container-color-success-border);--mod-form-container-active-border: var(--ds-form-container-color-success-border)}:host(.is-warning){--mod-form-container-border-color: var(--ds-form-container-color-warning-border);--mod-form-description-color: var(--ds-form-description-color-warning);--mod-form-container-hover-border: var(--ds-form-container-color-warning-border);--mod-form-container-active-border: var(--ds-form-container-color-warning-border)}:host(.is-disabled){pointer-events:none;cursor:default;--mod-form-container-background: var(--ds-form-container-color-disabled-background);--mod-form-container-border-color: var(--ds-form-container-color-disabled-border);--mod-form-label-color: var(--ds-form-label-color-disabled);--mod-form-description-color: var(--ds-form-description-color-disabled);--mod-select-color: var(--ds-form-control-color-value-disabled);--mod-select-placeholder: var(--ds-form-control-color-placeholder-disabled)}:host #container{position:relative}:host #popup{display:block}:host .ss-main{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media print{:host .ss-main{display:none !important}}:host .ss-main{padding:0;margin:0;border:none;box-shadow:none;font-family:var(--_select-content-family);z-index:var(--ds-alias-z-index-popup)}:host .ss-content{background-color:var(--_select-content-background-color);box-shadow:var(--_select-content-shadow);border:none;margin:0 !important;position:absolute;top:100%;left:0;width:100%;min-height:0;max-height:300px;height:auto}@media(prefers-reduced-motion: reduce){:host .ss-content{transition:none !important;animation:none !important}}:host .ss-content .ss-search{border-width:2px;border-color:var(--_form-container-border-color)}:host .ss-content .ss-search input{color:var(--_select-search-text-color)}:host .ss-content .ss-search input[type=search]::-ms-clear{display:none;width:0;height:0}:host .ss-content .ss-search input[type=search]::-ms-reveal{display:none;width:0;height:0}:host .ss-content .ss-search input[type=search]::-webkit-search-decoration,:host .ss-content .ss-search input[type=search]::-webkit-search-cancel-button,:host .ss-content .ss-search input[type=search]::-webkit-search-results-button,:host .ss-content .ss-search input[type=search]::-webkit-search-results-decoration{display:none}:host .ss-content .ss-list .ss-option .ss-search-highlight{font-weight:var(--_select-option-selected-weight);color:var(--_select-option-highlight-text-color);border-radius:var(--_select-radius)}:host .ss-content .ss-list .ss-option{color:var(--_select-option-text-color);background-color:var(--_select-option-background-color);border-left:none !important;border-bottom:2px solid var(--_select-option-border-color)}:host .ss-content .ss-list .ss-option:last-child{border-bottom:none}:host .ss-content .ss-list .ss-option::after{display:block;content:"";width:14px;height:14px;mask-size:100%;mask-repeat:no-repeat;mask-position:center;margin-left:auto}:host .ss-content .ss-list .ss-option.ss-selected{font-weight:var(--_select-option-selected-weight);background-color:var(--_select-option-selected-background-color);color:var(--_select-option-selected-text-color)}:host .ss-content .ss-list .ss-option.ss-selected::after{mask-image:url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>");mask-size:100%;mask-repeat:no-repeat;mask-position:center;background-color:var(--_select-option-selected-icon-color)}:host .ss-content .ss-list .ss-option:hover:not(.ss-disabled),:host .ss-content .ss-list .ss-option:active:not(.ss-disabled){background-color:var(--_select-option-hover-background-color);color:var(--_select-option-hover-text-color)}:host .ss-content .ss-list .ss-option.ss-highlighted{background-color:var(--_select-option-highlight-background-color);color:var(--_select-option-highlight-text-color)}:host .ss-content .ss-list .ss-option.ss-disabled{background-color:var(--_select-option-disabled-background-color);color:var(--_select-option-disabled-text-color)}:host .ss-main .ss-deselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media print{:host .ss-main .ss-deselect{display:none !important}}:host .ss-main .ss-deselect{border-radius:var(--ds-alias-radius-rounded);background:rgba(0,0,0,0);width:1.5rem;height:1.5rem;border:none;appearance:auto;position:relative;display:inline-flex;flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;text-align:center;vertical-align:middle;cursor:pointer;word-break:normal;box-shadow:none;outline:none;box-sizing:border-box;text-decoration:none;user-select:none;touch-action:manipulation;transition-property:color,background-color,border-color,box-shadow,text-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host .ss-main .ss-deselect::-moz-focus-inner{border:0}:host .ss-main .ss-deselect:disabled{pointer-events:none}@media(hover: hover)and (pointer: fine){:host .ss-main .ss-deselect:hover,:host .ss-main .ss-deselect.is-hovered{--icon-color: var(--ds-alias-text-color-primary-hover);background:var(--ds-alias-background-color-highlight)}}:host .ss-main .ss-deselect:active,:host .ss-main .ss-deselect.is-pressed{--icon-color: var(--ds-alias-text-color-primary-active);background:var(--ds-alias-background-color-highlight)}@media(hover: hover)and (pointer: fine){:host .ss-main .ss-deselect:focus-visible:not(:active),:host .ss-main .ss-deselect.is-focused:not(:active){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important}}:host .ss-main .ss-deselect::after{position:absolute;content:"";display:block;width:1rem;height:1rem;margin-inline:var(--ss-icon-spacing);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill-rule='evenodd' d='M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893Z' clip-rule='evenodd'/%3E%3C/svg%3E");mask-size:80%;mask-repeat:no-repeat;mask-position:center;background-color:var(--_select-icon-color);transition:transform var(--ss-animation-timing) ease-in-out}@media(hover: hover)and (pointer: fine){:host .ss-main .ss-deselect:hover::after,:host .ss-main .ss-deselect.is-hovered::after{background-color:var(--_select-icon-hover-color)}}:host .ss-main .ss-deselect:active::after,:host .ss-main .ss-deselect.is-pressed::after{background-color:var(--_select-icon-active-color)}:host .ss-main .ss-deselect svg{display:none}:host .ss-main .ss-arrow{display:block;width:1rem;height:1rem;margin-inline:var(--ss-icon-spacing);mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%3E%3Cpath%20fill='black'%20d='M5,7.874a1.238,1.238,0,0,1-.879-.364L.206,3.393A.75.75,0,1,1,1.294,2.36L4.819,6.072a.249.249,0,0,0,.362,0L8.706,2.36A.75.75,0,1,1,9.794,3.393L5.9,7.5A1.269,1.269,0,0,1,5,7.874Z'/%3E%3C/svg%3E");mask-size:100%;mask-repeat:no-repeat;mask-position:center;background-color:var(--_select-icon-color);transition:transform var(--ss-animation-timing) ease-in-out}:host .ss-main .ss-arrow path{display:none}:host .ss-main.ss-dir-below .ss-arrow{transform:rotate(180deg)}:host .ss-main .ss-values{padding-inline:var(--ss-icon-spacing)}:host .ss-main .ss-values .ss-single{padding-inline:0}:host .ss-main .ss-values .ss-value{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;min-height:1.5rem;padding-block:var(--ds-tag-space-padding-y-sm);padding-inline:var(--ds-tag-space-padding-x-sm);border-radius:var(--ds-tag-radius-base);background-color:var(--_select-tag-background-color)}:host .ss-main .ss-values .ss-value .ss-value-text{color:var(--_select-tag-text-color);font-family:var(--_select-tag-family);line-height:1;font-size:var(--ds-tag-font-size-sm);font-weight:var(--ds-tag-font-weight-sm);padding:0}:host .ss-main .ss-values .ss-value .ss-value-delete{position:relative;margin:0;padding:0;width:20px;height:20px;border:none;border-radius:var(--ds-close-radius);background-color:var(--ds-close-color-background-base);appearance:none;outline:none;margin-left:.25rem;margin-right:-0.5rem}:host .ss-main .ss-values .ss-value .ss-value-delete::after{display:block;content:"";width:10px;height:10px;margin-left:5px;margin-right:5px;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill-rule='evenodd' d='M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893Z' clip-rule='evenodd'/%3E%3C/svg%3E");mask-size:100%;mask-repeat:no-repeat;mask-position:center;background-color:var(--ds-close-icon-color-base)}:host .ss-main .ss-values .ss-value .ss-value-delete svg{display:none}@media(hover: hover)and (pointer: fine){:host .ss-main .ss-values .ss-value .ss-value-delete:hover{background-color:var(--ds-close-color-background-hover)}}:host .ss-main .ss-values .ss-value .ss-value-delete:active{background-color:var(--ds-close-color-background-active)}@media(hover: hover)and (pointer: fine){:host .ss-main .ss-values .ss-value .ss-value-delete:focus-visible:not(:active){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_select-focus-ring-color) 0 0 0 5px !important}}:host .ss-content .ss-list .ss-optgroup .ss-optgroup-label{background-color:var(--_select-optgroup-background-color);color:var(--_select-optgroup-text-color);font-weight:var(--_select-optgroup-weight)}:host #popup.is-multiple .ss-content .ss-list .ss-option::after{display:none}:host #popup.is-multiple .ss-content .ss-list .ss-option::before{width:16px;height:16px;content:"";border:2px solid var(--_select-checkbox-border-color);border-radius:var(--_select-radius);margin-right:.5rem;flex-shrink:0}:host #popup.is-multiple .ss-content .ss-list .ss-option.ss-selected::before{background-color:var(--_select-checkbox-selected-background-color);border-color:var(--_select-checkbox-selected-border-color);background-image:url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill='%23ffffff' fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>");background-size:75%;background-repeat:no-repeat;background-position:center}