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

package/dist/esm/ds-icon_2.entry.js

@@ -1,19 +1,19 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, v as defaultConfig, E as h, F as Host, G as getElement, D as raf, L as rOnLoad } from './index-B-v2Wm-V.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { B as registerInstance, v as defaultConfig, E as h, F as Host, G as getElement, D as raf, L as rOnLoad } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-Duhf3ymL.js';
 import { c as require_baseGetTag, b as requireIsObjectLike, a as require_Symbol } from './isObjectLike-BnBXjF_n.js';
 import { r as requireIsArray } from './isArray-B8PCdo6e.js';
-import { h as hasValue } from './has-value-Dmsj8ZQw.js';
-import { f as fetchSvg, s as sanitizeSvg } from './svg-B8KVoKrH.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
+import { f as fetchSvg, s as sanitizeSvg } from './svg-D-_px2sY.js';
 import { n as normalizeDeprecatedTShirtSize } from './t-shirt-DR5LIaCn.js';
-import { T as Type } from './type-7qEQcw90.js';
-import { O as OneOf } from './one-of-CjRvS2Tk.js';
-import { L as ListenToConfig } from './config.decorator-CRYVBTkX.js';
-import './create-validator-decorator-fUav5byo.js';
-import './config.utils-CR4Xudpz.js';
+import { T as Type } from './type-Bqge296W.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
+import './create-validator-decorator-g9TfAa1g.js';
+import './config.utils-Db2OSTX3.js';
 
 /**
  * A specialized version of `_.map` for arrays without support for iteratee
@@ -1184,7 +1184,7 @@ Icon.style = iconHostCss();
 
 const SPINNER_COLORS = ['blue', 'white'];
 const SPINNER_VARIATIONS = ['logo', 'circle'];
-const SPINNER_SIZES = ['sm', ''];
+const SPINNER_SIZES = ['sm'];
 const SPINNER_LABEL_POSITIONS = ['right', 'bottom'];
 
 const i18nDsSpinner = {
@@ -1220,7 +1220,7 @@ const i18nDsSpinner = {
     },
 };
 
-const spinnerHostCss = () => `:host{--_spinner-position:var(--spinner-position, var(--mod-spinner-position, static));--_spinner-top:var(--spinner-top, var(--mod-spinner-top));--_spinner-right:var(--spinner-right, var(--mod-spinner-right));--_spinner-bottom:var(--spinner-bottom, var(--mod-spinner-bottom));--_spinner-left:var(--spinner-left, var(--mod-spinner-left));position:var(--_spinner-position);top:var(--_spinner-top);right:var(--_spinner-right);bottom:var(--_spinner-bottom);left:var(--_spinner-left);--_spinner-m:var(--spinner-m, var(--mod-spinner-m, 0));--_spinner-my:var(--spinner-my, var(--mod-spinner-my));--_spinner-mx:var(--spinner-mx, var(--mod-spinner-mx));--_spinner-ml:var(--spinner-ml, var(--mod-spinner-ml));--_spinner-mr:var(--spinner-mr, var(--mod-spinner-mr));--_spinner-mt:var(--spinner-mt, var(--mod-spinner-mt));--_spinner-mb:var(--spinner-mb, var(--mod-spinner-mb));margin:var(--_spinner-m);margin-inline:var(--_spinner-mx);margin-block:var(--_spinner-my);margin-left:var(--_spinner-ml);margin-right:var(--_spinner-mr);margin-top:var(--_spinner-mt);margin-bottom:var(--_spinner-mb);--_spinner-size:var(--spinner-size, var(--mod-spinner-size, var(--ds-spinner-size)));--_spinner-circle-size:var(--spinner-circle-size, var(--mod-spinner-circle-size, var(--ds-spinner-circle-size)));--_spinner-circle-border-width:var(--spinner-circle-border-width, var(--mod-spinner-circle-border-width, var(--ds-spinner-circle-border-width)));--_spinner-circle-color-border-background:var(--spinner-circle-color-border-background, var(--mod-spinner-circle-color-border-background, var(--ds-spinner-circle-color-background)));--_spinner-circle-color-border-progress:var(--spinner-circle-color-border-progress, var(--mod-spinner-circle-color-border-progress, var(--ds-spinner-circle-color-progress)))}:host{-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}:host,:host>div{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;text-align:center}:host svg{-webkit-transform:unset !important;transform:unset !important}:host(:not(.is-circle))>div{width:var(--_spinner-size)}:host(.is-circle) #inner{border-radius:50%;border-style:solid;border-width:var(--_spinner-circle-border-width);border-color:var(--_spinner-circle-color-border-background);border-top-color:var(--_spinner-circle-color-border-progress);width:var(--_spinner-circle-size);height:var(--_spinner-circle-size)}:host(.is-animated) #inner{-webkit-animation:spinner 1.6s linear infinite;animation:spinner 1.6s linear infinite}:host(.is-sm){--mod-spinner-size:2rem;--mod-spinner-circle-size:1.125rem;--mod-spinner-circle-border-width:0.2rem}:host(.is-white){--mod-spinner-circle-color-border-background:var(--ds-spinner-circle-color-inverted-background);--mod-spinner-circle-color-border-progress:var(--ds-spinner-circle-color-progress-inverted)}:host(.is-label-right){-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:.5rem;width:auto}:host(.is-label-bottom){-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;gap:.25rem;width:auto}::part(label){font-family:var(--ds-global-font-family-text);line-height:var(--ds-typography-line-height-base)}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;
+const spinnerHostCss = () => `:host{--_spinner-position:var(--spinner-position, var(--mod-spinner-position, static));--_spinner-top:var(--spinner-top, var(--mod-spinner-top));--_spinner-right:var(--spinner-right, var(--mod-spinner-right));--_spinner-bottom:var(--spinner-bottom, var(--mod-spinner-bottom));--_spinner-left:var(--spinner-left, var(--mod-spinner-left));position:var(--_spinner-position);top:var(--_spinner-top);right:var(--_spinner-right);bottom:var(--_spinner-bottom);left:var(--_spinner-left);--_spinner-m:var(--spinner-m, var(--mod-spinner-m, 0));--_spinner-my:var(--spinner-my, var(--mod-spinner-my));--_spinner-mx:var(--spinner-mx, var(--mod-spinner-mx));--_spinner-ml:var(--spinner-ml, var(--mod-spinner-ml));--_spinner-mr:var(--spinner-mr, var(--mod-spinner-mr));--_spinner-mt:var(--spinner-mt, var(--mod-spinner-mt));--_spinner-mb:var(--spinner-mb, var(--mod-spinner-mb));margin:var(--_spinner-m);margin-inline:var(--_spinner-mx);margin-block:var(--_spinner-my);margin-left:var(--_spinner-ml);margin-right:var(--_spinner-mr);margin-top:var(--_spinner-mt);margin-bottom:var(--_spinner-mb);--_spinner-size:var(--spinner-size, var(--mod-spinner-size, var(--ds-spinner-size)));--_spinner-circle-size:var(--spinner-circle-size, var(--mod-spinner-circle-size, var(--ds-spinner-circle-size)));--_spinner-circle-border-width:var(--spinner-circle-border-width, var(--mod-spinner-circle-border-width, var(--ds-spinner-circle-border-width)));--_spinner-circle-color-border-background:var(--spinner-circle-color-border-background, var(--mod-spinner-circle-color-border-background, var(--ds-spinner-circle-color-background)));--_spinner-circle-color-border-progress:var(--spinner-circle-color-border-progress, var(--mod-spinner-circle-color-border-progress, var(--ds-spinner-circle-color-progress)))}:host{-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}:host,:host>div{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;text-align:center}:host svg{-webkit-transform:unset !important;transform:unset !important}:host(:not(.is-circle))>div{width:var(--_spinner-size)}:host(.is-circle) #inner{border-radius:50%;border-style:solid;border-width:var(--_spinner-circle-border-width);border-color:var(--_spinner-circle-color-border-background);border-top-color:var(--_spinner-circle-color-border-progress);width:var(--_spinner-circle-size);height:var(--_spinner-circle-size)}:host(.is-animated) #inner{-webkit-animation:spinner 1.6s linear infinite;animation:spinner 1.6s linear infinite}:host(.is-sm){--mod-spinner-size:2rem;--mod-spinner-circle-size:1.125rem;--mod-spinner-circle-border-width:0.2rem}:host(.is-white){--mod-spinner-circle-color-border-background:var(--ds-spinner-inverted-circle-color-background);--mod-spinner-circle-color-border-progress:var(--ds-spinner-inverted-circle-color-progress)}:host(.is-label-right){-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:.5rem;width:auto}:host(.is-label-bottom){-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;gap:.25rem;width:auto}::part(label){font-family:var(--ds-global-font-family-text);line-height:var(--ds-typography-line-height-base)}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;
 
 const Spinner = class {
     constructor(hostRef) {
@@ -1230,7 +1230,7 @@ const Spinner = class {
         this.region = defaultConfig.region;
         /**
          * PUBLIC PROPERTY API
-         * ------------------------------------------------------
+         * ─────────────────────────────────────────────────────
          */
         /**
          * **Deprecated:** Use inverted="true" for white spinner instead.
@@ -1244,10 +1244,6 @@ const Spinner = class {
          * If `true` the component can be used on dark background
          */
         this.inverted = false;
-        /**
-         * Defines the size of the spinner. If `sm` the spinner is smaller.
-         */
-        this.size = '';
         /**
          * **Deprecated:** Use size="sm" instead.
          */
@@ -1266,7 +1262,7 @@ const Spinner = class {
         this.variation = 'logo';
         /**
          * PRIVATE METHODS
-         * ------------------------------------------------------
+         * ─────────────────────────────────────────────────────
          */
         this.animate = async () => {
             if (!this.animated) {
@@ -1347,7 +1343,7 @@ const Spinner = class {
     }
     /**
      * LIFECYCLE
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     componentDidLoad() {
         if (this.variation === 'logo') {
@@ -1363,8 +1359,8 @@ const Spinner = class {
         }
     }
     /**
-     * PUBLIC LISTENERS
-     * ------------------------------------------------------
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
      */
     /**
      * @internal define config for the component
@@ -1393,7 +1389,7 @@ const Spinner = class {
     }
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render() {
         const ariaLabel = this.label || i18nDsSpinner[this.language].loading;
@@ -1401,14 +1397,14 @@ const Spinner = class {
         if (this.small === true) {
             size = 'sm';
         }
-        return (h(Host, { key: '90ffeeb92884b2408cc07d2a3d254ae640bfba9f', role: "progressbar", "aria-label": ariaLabel, class: {
+        return (h(Host, { key: 'c11982bbe6a51010b4cefd97da2636ce308eddcf', role: "progressbar", "aria-label": ariaLabel, class: {
                 'is-animated': this.animated,
                 'is-circle': this.variation === 'circle',
                 'is-sm': size === 'sm',
                 'is-white': this.color === 'white',
                 'is-label-right': hasValue(this.label) && this.labelPosition === 'right',
                 'is-label-bottom': hasValue(this.label) && this.labelPosition === 'bottom',
-            } }, h("div", { key: '35831f8f32b083aef384956258f386ebb4de288c' }, h("div", { key: 'fad87eada8cabe36f7cfadc69767bb6251621226', id: "inner", part: "inner", ref: el => (this.innerEl = el) })), hasValue(this.label) && h("span", { key: 'f2f8a4f600fd5f1f53d54d7dec71578348520f2a', part: "label" }, this.label)));
+            } }, h("div", { key: 'ee9d575d084dd4232309bb2e0dcf9e7b404b8e63' }, h("div", { key: 'f65ca901cb36d8503fdd55ab6f2d920bc2a0368d', id: "inner", part: "inner", ref: el => (this.innerEl = el) })), hasValue(this.label) && h("span", { key: '63e189e67f42307211fcf4300f8ba854f2cbe41c', part: "label" }, this.label)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ds-input-slider.entry.js

@@ -1,22 +1,22 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, v as defaultConfig, N as debounceEvent, E as h, G as getElement } from './index-B-v2Wm-V.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { B as registerInstance, I as createEvent, v as defaultConfig, N as debounceEvent, E as h, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 import { i as isNaN$1 } from './isNaN-BrbqGXXw.js';
 import { i as inheritAttributes } from './attributes-B62ocg4Q.js';
-import { h as hasValue } from './has-value-Dmsj8ZQw.js';
-import { F as Field } from './field.util-neIQBS-h.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
+import { w as watchInvalidTextSlot, F as Field } from './field.util-Dl02gvlr.js';
 import { I as INPUT_COLORS } from './input.interfaces-BMM6Nxeh.js';
-import { T as Type } from './type-7qEQcw90.js';
-import { O as OneOf } from './one-of-CjRvS2Tk.js';
-import { L as ListenToConfig } from './config.decorator-CRYVBTkX.js';
+import { T as Type } from './type-Bqge296W.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
 import './_commonjsHelpers-Duhf3ymL.js';
 import './isObjectLike-BnBXjF_n.js';
-import './create-validator-decorator-fUav5byo.js';
+import './create-validator-decorator-g9TfAa1g.js';
 import './aria-DYfTMCkl.js';
 import './label.i18n-C7I7OlaM.js';
-import './config.utils-CR4Xudpz.js';
+import './config.utils-Db2OSTX3.js';
 
 const INPUT_SLIDER_BRAND_COLORS = ['yellow', 'purple', 'red', 'green', ''];
 
@@ -2521,6 +2521,7 @@ const InputSlider = class {
         this.focused = false;
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
+        this.hasInvalidTextSlotContent = false;
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -2629,7 +2630,7 @@ const InputSlider = class {
     }
     invalidChanged() {
         var _a;
-        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.setInvalid(this.invalid);
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.setInvalid(this.invalid || this.hasInvalidTextSlotContent);
     }
     minChanged() {
         var _a;
@@ -2660,6 +2661,11 @@ const InputSlider = class {
         this.value = clampValue(resolveInitialValue(this.value, this.min), this.min, this.max);
         this.initialValue = this.value;
         this.syncFormValue(this.value);
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            var _a;
+            this.hasInvalidTextSlotContent = hasContent;
+            (_a = this.picker) === null || _a === void 0 ? void 0 : _a.setInvalid(this.invalid || hasContent);
+        });
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
@@ -2676,7 +2682,7 @@ const InputSlider = class {
             step: this.step,
             value: this.value,
             disabled: this.disabled || this.readonly,
-            invalid: this.invalid,
+            invalid: this.invalid || this.hasInvalidTextSlotContent,
             onInput: value => {
                 this.dsInput.emit(value);
             },
@@ -2688,9 +2694,10 @@ const InputSlider = class {
         (_b = this.picker.handleEl) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', this.handleBlur);
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_a = this.picker) === null || _a === void 0 ? void 0 : _a.destroy();
         this.picker = undefined;
+        (_b = this.disconnectInvalidTextSlotWatcher) === null || _b === void 0 ? void 0 : _b.call(this);
     }
     /**
      * PUBLIC LISTENERS
@@ -2765,12 +2772,12 @@ const InputSlider = class {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: '673117fa1520455f38ee39c6f2218468e6ca8150', disabled: this.disabled || this.readonly, color: this.color, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
+        return (h(Field, { key: '69b0dc7ea5f958598cee12e42879d5e4f025bd2e', disabled: this.disabled || this.readonly, color: this.color, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
                 'is-brand-yellow': hasValue(this.brandColor) && this.brandColor === 'yellow',
                 'is-brand-purple': hasValue(this.brandColor) && this.brandColor === 'purple',
                 'is-brand-red': hasValue(this.brandColor) && this.brandColor === 'red',
                 'is-brand-green': hasValue(this.brandColor) && this.brandColor === 'green',
-            } }, h("div", Object.assign({ key: 'b760944d8141876484054f1454b453e087bc7eda', id: "slider", part: "slider", ref: el => (this.sliderEl = el), onClick: this.handleClick }, this.inheritedAttributes))));
+            } }, h("div", Object.assign({ key: 'b89ecd4c3ac4f8c11c05b3de1e79215d4c076766', id: "slider", part: "slider", ref: el => (this.sliderEl = el), onClick: this.handleClick }, this.inheritedAttributes))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/ds-input.entry.js

@@ -1,23 +1,23 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, v as defaultConfig, N as debounceEvent, E as h, G as getElement } from './index-B-v2Wm-V.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { B as registerInstance, I as createEvent, v as defaultConfig, N as debounceEvent, E as h, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 import { i as isNil } from './isNil--HeEBNs3.js';
 import { i as inheritAttributes } from './attributes-B62ocg4Q.js';
-import { s as stopEventBubbling, F as FormControl } from './form-control-DhinyMa9.js';
-import { h as hasValue } from './has-value-Dmsj8ZQw.js';
+import { s as stopEventBubbling, F as FormControl } from './form-control-BAP86QSm.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
+import { w as watchInvalidTextSlot, F as Field } from './field.util-Dl02gvlr.js';
 import { i as isCtrlOrCommandKey, N as NUMBER_KEYS, A as ACTION_KEYS } from './keys.constant-D86WpWIE.js';
-import { F as Field } from './field.util-neIQBS-h.js';
 import { I as INPUT_COLORS, b as INPUT_INPUT_TYPES, a as INPUT_AUTOCOMPLETES, c as INPUT_AUTOCORRECTS, d as INPUT_INPUT_MODES, e as INPUT_MASKS } from './input.interfaces-BMM6Nxeh.js';
-import { T as Type } from './type-7qEQcw90.js';
-import { O as OneOf } from './one-of-CjRvS2Tk.js';
-import { L as ListenToConfig } from './config.decorator-CRYVBTkX.js';
+import { T as Type } from './type-Bqge296W.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
 import './_commonjsHelpers-Duhf3ymL.js';
-import './create-validator-decorator-fUav5byo.js';
+import './create-validator-decorator-g9TfAa1g.js';
 import './aria-DYfTMCkl.js';
 import './label.i18n-C7I7OlaM.js';
-import './config.utils-CR4Xudpz.js';
+import './config.utils-Db2OSTX3.js';
 
 class InputMaskUtil {
     constructor(component) {
@@ -439,6 +439,7 @@ const Input = class {
         this.focused = false;
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
+        this.hasInvalidTextSlotContent = false;
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -617,6 +618,13 @@ const Input = class {
         this.debounceChanged();
         this.maskChanged();
         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', 'data-hj-allow']);
@@ -679,7 +687,8 @@ const Input = class {
         if (hasValue(this.pattern)) {
             inputProps = { pattern: this.pattern };
         }
-        return (h(Field, { key: 'babef5825e546b7b80315ed7b83240d2b82562c0', 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 }, h("input", Object.assign({ key: '57f52c5591d793be3c19ab144f497d793bffbeed', id: "input", part: "input", name: this.name, ref: inputEl => (this.control.nativeEl = inputEl), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, accept: this.accept, inputMode: this.inputmode, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autocorrect: this.autocorrect, autofocus: this.autofocus, min: this.min, max: this.max, minLength: this.minLength, maxLength: this.maxLength, multiple: this.multiple, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: value, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onInput: ev => this.handleInput(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, inputProps, this.inheritedAttributes))));
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
+        return (h(Field, { key: '60462d9ab4b551b6ea128c4bae45f729cf939eed', disabled: this.disabled, color: this.color, invalid: isInvalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("input", Object.assign({ key: '2557655b7d70ffc1605f20dd3b2887bee85db005', id: "input", part: "input", name: this.name, ref: inputEl => (this.control.nativeEl = inputEl), "aria-describedby": "description", "aria-invalid": isInvalid ? 'true' : 'false', disabled: this.disabled, accept: this.accept, inputMode: this.inputmode, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autocorrect: this.autocorrect, autofocus: this.autofocus, min: this.min, max: this.max, minLength: this.minLength, maxLength: this.maxLength, multiple: this.multiple, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: value, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onInput: ev => this.handleInput(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, inputProps, this.inheritedAttributes))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/ds-item.entry.js

@@ -1,20 +1,20 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { B as registerInstance, I as createEvent, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 import { A as ACCORDION_MARKERS, a as ACCORDION_MARKER_POSITIONS } from './accordion.interfaces-C7u0gyLh.js';
-import { B as BUTTON_TARGETS } from './button.interfaces-BPGfTrrM.js';
-import { T as Type } from './type-7qEQcw90.js';
-import { O as OneOf } from './one-of-CjRvS2Tk.js';
-import './create-validator-decorator-fUav5byo.js';
+import { B as BUTTON_TARGETS } from './button.interfaces-C6AmBSV7.js';
+import { T as Type } from './type-Bqge296W.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import './create-validator-decorator-g9TfAa1g.js';
 
 const ITEM_VARIANTS = ['default', 'link', 'button', 'accordion'];
 const ITEM_ACTION_ICONS = ['', 'default', 'link', 'link-external', 'download'];
 const ITEM_LABEL_LEVELS = ['', 'h1', 'h2', 'h3', 'h4', 'h5'];
 const ITEM_LABEL_SIZES = ['', 'h1', 'h2', 'h3', 'h4', 'h5', '3xl', '2xl', 'xl', 'lg', 'base'];
 
-const itemHostCss = () => `:host{--_list-item-focus:var(--list-item-focus, var(--mod-list-item-focus, var(--ds-alias-interaction-focus-color-base)));--_list-item-grid-template-columns:var(--list-item-grid-template-columns, var(--mod-list-item-grid-template-columns, 1fr));--_list-item-min-height:var(--list-item-min-height, var(--mod-list-item-min-height, 3.5rem));--_list-item-gap:var(--list-item-gap, var(--mod-list-item-gap, 1rem));--_list-item-space:var(--list-item-space, var(--mod-list-item-space, 0.5rem));--_list-item-content-gap:var(--list-item-content-gap, var(--mod-list-item-content-gap, 1px));--_list-item-color:var(--list-item-color, var(--mod-list-item-color, inherit));--_list-item-border-color-base:var(--list-item-border-color-base, var(--mod-list-item-border-color-base, var(--ds-list-item-border-color)));--_list-item-border-color-hover:var(--list-item-border-color-hover, var(--mod-list-item-border-color-hover, var(--ds-link-color-base)));--_list-item-border-color-active:var(--list-item-border-color-active, var(--mod-list-item-border-color-active, var(--ds-link-color-base-active)));--_list-item-border-width:var(--list-item-border-width, var(--mod-list-item-border-width, var(--ds-list-item-border-width, 2px)));--_list-item-border-radius:var(--list-item-border-radius, var(--mod-list-item-border-radius, 12px));--_list-item-background-base:var(--list-item-background-base, var(--mod-list-item-background-base, transparent));--_list-item-background-hover:var(--list-item-background-hover, var(--mod-list-item-background-hover, var(--ds-alias-background-color-primary-lighter)));--_list-item-background-active:var(--list-item-background-active, var(--mod-list-item-background-active, var(--ds-alias-background-color-primary-lighter)));--_list-item-accordion-py:var(--list-item-accordion-py, var(--mod-list-item-accordion-py, var(--ds-alias-space-base-device)));--_list-item-action-icon-size:var(--list-item-action-icon-size, var(--mod-list-item-action-icon-size, var(--ds-icon-size-xs)));--_list-item-title-size:var(--list-item-title-size, var(--mod-list-item-title-size, var(--ds-heading-5-size-device)));--_list-item-title-weight:var(--list-item-title-weight, var(--mod-list-item-title-weight, var(--ds-alias-text-weight-bold)));--_list-item-title-family:var(--list-item-title-family, var(--mod-list-item-title-family, var(--ds-global-font-family-heading)));--_list-item-text-family:var(--list-item-text-family, var(--mod-list-item-text-family, var(--ds-global-font-family-body)));--_list-item-text-weight:var(--list-item-text-weight, var(--mod-list-item-text-weight, var(--ds-alias-text-weight-regular)));--_list-item-text-size:var(--list-item-text-size, var(--mod-list-item-text-size, var(--ds-alias-text-size-sm-device)))}:host{position:relative;display:grid;-webkit-box-sizing:border-box;box-sizing:border-box;grid-template-columns:var(--_list-item-grid-template-columns)}:host ::slotted([slot=content]){min-height:46px}:host #item{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center;gap:var(--_list-item-gap);width:100%;color:var(--_list-item-color);background:inherit;border:none;-ms-flex-item-align:stretch;align-self:stretch;text-align:left;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--_list-item-title-family);padding:var(--_list-item-space) .25rem;padding-bottom:calc(var(--_list-item-space) + 2px);min-height:var(--_list-item-min-height)}:host #item ds-icon{-ms-flex-negative:0;flex-shrink:0}:host #item #content+ds-icon{--icon-size:var(--_list-item-action-icon-size);--icon-inner-size:var(--_list-item-action-icon-size)}:host #item #content{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--_list-item-content-gap);font-family:var(--_list-item-text-family);font-weight:var(--_list-item-text-weight)}:host #item #label{font-family:var(--_list-item-title-family);font-weight:var(--_list-item-title-weight);font-size:var(--_list-item-title-size);margin:0}:host #item #description{font-family:var(--_list-item-text-family);font-weight:var(--_list-item-text-weight);font-size:var(--_list-item-text-size);margin:0}:host #item:after{content:"";border-radius:var(--_list-item-border-radius);width:100%;position:absolute;bottom:0;left:0;right:0;height:var(--_list-item-border-width);background:var(--_list-item-border-color-base)}:host(.has-label-h1){--mod-list-item-title-size:var(--ds-heading-1-size-device)}:host(.has-label-3xl){--mod-list-item-title-size:var(--ds-heading-1-size-device)}:host(.has-label-h2){--mod-list-item-title-size:var(--ds-heading-2-size-device)}:host(.has-label-2xl){--mod-list-item-title-size:var(--ds-heading-2-size-device)}:host(.has-label-h3){--mod-list-item-title-size:var(--ds-heading-3-size-device)}:host(.has-label-xl){--mod-list-item-title-size:var(--ds-heading-3-size-device)}:host(.has-label-h4){--mod-list-item-title-size:var(--ds-heading-4-size-device)}:host(.has-label-lg){--mod-list-item-title-size:var(--ds-heading-4-size-device)}:host(.has-label-h5){--mod-list-item-title-size:var(--ds-heading-5-size-device)}:host(.has-label-base){--mod-list-item-title-size:var(--ds-heading-5-size-device)}:host(.is-link) #item,:host(.is-button) #item{-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;text-decoration:none;outline:none;cursor:pointer;background:var(--_list-item-background-base)}:host(.is-link) #item::-moz-focus-inner,:host(.is-button) #item::-moz-focus-inner{border:0}:host(.is-link) #item #content,:host(.is-button) #item #content{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word;font-family:var(--_list-item-title-family);font-weight:var(--_list-item-title-weight);font-size:var(--_list-item-title-size);color:var(--ds-link-color-base)}@media (hover: hover)and (pointer: fine){:host(.is-link) #item:hover,:host(.is-link) #item.is-hovered,:host(.is-button) #item:hover,:host(.is-button) #item.is-hovered{background:var(--_list-item-background-hover)}}:host(.is-link) #item:active,:host(.is-link) #item.is-pressed,:host(.is-button) #item:active,:host(.is-button) #item.is-pressed{background:var(--_list-item-background-active);color:var(--ds-link-color-base-active)}:host(.is-link) #item:active #content,:host(.is-link) #item.is-pressed #content,:host(.is-button) #item:active #content,:host(.is-button) #item.is-pressed #content{color:var(--ds-link-color-base-active)}:host(.is-link) #item:active ds-icon,:host(.is-link) #item:active ::slotted(ds-icon),:host(.is-link) #item:active ::slotted(ds-badge),:host(.is-link) #item.is-pressed ds-icon,:host(.is-link) #item.is-pressed ::slotted(ds-icon),:host(.is-link) #item.is-pressed ::slotted(ds-badge),:host(.is-button) #item:active ds-icon,:host(.is-button) #item:active ::slotted(ds-icon),:host(.is-button) #item:active ::slotted(ds-badge),:host(.is-button) #item.is-pressed ds-icon,:host(.is-button) #item.is-pressed ::slotted(ds-icon),:host(.is-button) #item.is-pressed ::slotted(ds-badge){--icon-color:var(--ds-link-color-base-active)}:host(.is-link) #item:before,:host(.is-button) #item:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;border-radius:var(--ds-alias-radius-base);-ms-touch-action:manipulation;touch-action:manipulation;-webkit-transition-property:-webkit-box-shadow;transition-property:-webkit-box-shadow;transition-property:box-shadow;transition-property:box-shadow, -webkit-box-shadow;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host(.is-link) #item:focus-visible:not(:active):before,:host(.is-link) #item.is-focused:not(:active):before,:host(.is-button) #item:focus-visible:not(:active):before,:host(.is-button) #item.is-focused:not(:active):before{-webkit-box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_list-item-focus) 0 0 0 5px !important;box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_list-item-focus) 0 0 0 5px !important}@media (hover: hover)and (pointer: fine){:host(.is-link) #item:hover:after,:host(.is-link) #item.is-hovered:after,:host(.is-button) #item:hover:after,:host(.is-button) #item.is-hovered:after,:host(.is-accordion) #item:hover:after,:host(.is-accordion) #item.is-hovered:after{background:var(--_list-item-border-color-hover)}}:host(.is-link) #item:active:after,:host(.is-link) #item.is-pressed:after,:host(.is-button) #item:active:after,:host(.is-button) #item.is-pressed:after,:host(.is-accordion) #item:active:after,:host(.is-accordion) #item.is-pressed:after{background:var(--_list-item-border-color-active)}:host(.is-accordion) ::slotted(p){padding-block:var(--_list-item-accordion-py)}:host(.is-accordion) ds-accordion{--accordion-summary-color-hover:var(--ds-link-color-base)}:host(.is-accordion) ds-accordion::part(header){background:var(--_list-item-background-base)}:host(.is-accordion) ds-accordion::part(summary){padding-right:.25rem}:host(.is-accordion) ds-accordion::part(summary):hover{background:var(--_list-item-background-hover)}:host(.is-accordion) ds-accordion::part(summary):active{background:var(--_list-item-background-active)}:host(.is-accordion) #accordion-content:after{content:"";border-radius:var(--_list-item-border-radius);width:100%;position:absolute;bottom:0;left:0;right:0;height:var(--_list-item-border-width);background:var(--_list-item-border-color-base)}:host(.is-disabled) #item{pointer-events:none !important;cursor:default !important;color:var(--ds-list-item-disabled)}:host(.is-disabled) #item #content{color:var(--ds-list-item-disabled)}:host(.is-disabled) #item ds-icon,:host(.is-disabled) #item ds-badge,:host(.is-disabled) #item ::slotted(ds-icon),:host(.is-disabled) #item ::slotted(ds-badge){--icon-color:var(--ds-list-item-disabled)}:host(.is-disabled) #item ds-badge,:host(.is-disabled) #item ::slotted(ds-badge){--badge-color-background:var(--ds-badge-color-grey-background);--badge-color-text:var(--ds-badge-color-grey-text)}`;
+const itemHostCss = () => `:host{--_list-item-focus:var(--list-item-focus, var(--mod-list-item-focus, var(--ds-alias-interaction-focus-color-base)));--_list-item-grid-template-columns:var(--list-item-grid-template-columns, var(--mod-list-item-grid-template-columns, 1fr));--_list-item-min-height:var(--list-item-min-height, var(--mod-list-item-min-height, 3.5rem));--_list-item-gap:var(--list-item-gap, var(--mod-list-item-gap, 1rem));--_list-item-space:var(--list-item-space, var(--mod-list-item-space, 0.5rem));--_list-item-content-gap:var(--list-item-content-gap, var(--mod-list-item-content-gap, 1px));--_list-item-color:var(--list-item-color, var(--mod-list-item-color, inherit));--_list-item-border-color-base:var(--list-item-border-color-base, var(--mod-list-item-border-color-base, var(--ds-list-item-border-color)));--_list-item-border-color-hover:var(--list-item-border-color-hover, var(--mod-list-item-border-color-hover, var(--ds-link-color-base)));--_list-item-border-color-active:var(--list-item-border-color-active, var(--mod-list-item-border-color-active, var(--ds-link-color-base-active)));--_list-item-border-width:var(--list-item-border-width, var(--mod-list-item-border-width, var(--ds-list-item-border-width, 2px)));--_list-item-border-radius:var(--list-item-border-radius, var(--mod-list-item-border-radius, 12px));--_list-item-background-base:var(--list-item-background-base, var(--mod-list-item-background-base, transparent));--_list-item-background-hover:var(--list-item-background-hover, var(--mod-list-item-background-hover, var(--ds-alias-background-color-primary-lighter)));--_list-item-background-active:var(--list-item-background-active, var(--mod-list-item-background-active, var(--ds-alias-background-color-primary-lighter)));--_list-item-accordion-py:var(--list-item-accordion-py, var(--mod-list-item-accordion-py, var(--ds-alias-space-base-device)));--_list-item-action-icon-size:var(--list-item-action-icon-size, var(--mod-list-item-action-icon-size, var(--ds-icon-size-xs)));--_list-item-title-size:var(--list-item-title-size, var(--mod-list-item-title-size, var(--ds-heading-5-size-device)));--_list-item-title-weight:var(--list-item-title-weight, var(--mod-list-item-title-weight, var(--ds-alias-text-weight-bold)));--_list-item-title-family:var(--list-item-title-family, var(--mod-list-item-title-family, var(--ds-global-font-family-heading)));--_list-item-text-family:var(--list-item-text-family, var(--mod-list-item-text-family, var(--ds-global-font-family-body)));--_list-item-text-weight:var(--list-item-text-weight, var(--mod-list-item-text-weight, var(--ds-alias-text-weight-regular)));--_list-item-text-size:var(--list-item-text-size, var(--mod-list-item-text-size, var(--ds-alias-text-size-sm-device)))}:host{position:relative;display:grid;-webkit-box-sizing:border-box;box-sizing:border-box;grid-template-columns:var(--_list-item-grid-template-columns)}:host ::slotted([slot=content]){min-height:46px}:host #item{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center;gap:var(--_list-item-gap);width:100%;color:var(--_list-item-color);background:inherit;border:none;-ms-flex-item-align:stretch;align-self:stretch;text-align:left;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--_list-item-title-family);padding:var(--_list-item-space) .25rem;padding-bottom:calc(var(--_list-item-space) + 2px);min-height:var(--_list-item-min-height)}:host #item ds-icon{-ms-flex-negative:0;flex-shrink:0}:host #item #content+ds-icon{--icon-size:var(--_list-item-action-icon-size);--icon-inner-size:var(--_list-item-action-icon-size)}:host #item #content{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--_list-item-content-gap);font-family:var(--_list-item-text-family);font-weight:var(--_list-item-text-weight)}:host #item #label{font-family:var(--_list-item-title-family);font-weight:var(--_list-item-title-weight);font-size:var(--_list-item-title-size);margin:0}:host #item #description{font-family:var(--_list-item-text-family);font-weight:var(--_list-item-text-weight);font-size:var(--_list-item-text-size);margin:0}:host #item:after{content:"";border-radius:var(--_list-item-border-radius);width:100%;position:absolute;bottom:0;left:0;right:0;height:var(--_list-item-border-width);background:var(--_list-item-border-color-base)}:host(.has-label-h1){--mod-list-item-title-size:var(--ds-heading-1-size-device)}:host(.has-label-3xl){--mod-list-item-title-size:var(--ds-heading-1-size-device)}:host(.has-label-h2){--mod-list-item-title-size:var(--ds-heading-2-size-device)}:host(.has-label-2xl){--mod-list-item-title-size:var(--ds-heading-2-size-device)}:host(.has-label-h3){--mod-list-item-title-size:var(--ds-heading-3-size-device)}:host(.has-label-xl){--mod-list-item-title-size:var(--ds-heading-3-size-device)}:host(.has-label-h4){--mod-list-item-title-size:var(--ds-heading-4-size-device)}:host(.has-label-lg){--mod-list-item-title-size:var(--ds-heading-4-size-device)}:host(.has-label-h5){--mod-list-item-title-size:var(--ds-heading-5-size-device)}:host(.has-label-base){--mod-list-item-title-size:var(--ds-heading-5-size-device)}:host(.is-link) #item,:host(.is-button) #item{-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;text-decoration:none;outline:none;cursor:pointer;background:var(--_list-item-background-base)}:host(.is-link) #item::-moz-focus-inner,:host(.is-button) #item::-moz-focus-inner{border:0}:host(.is-link) #item #content,:host(.is-button) #item #content{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word;font-family:var(--_list-item-title-family);font-weight:var(--_list-item-title-weight);font-size:var(--_list-item-title-size);color:var(--ds-link-color-base)}@media (hover: hover)and (pointer: fine){:host(.is-link) #item:hover,:host(.is-link) #item.is-hovered,:host(.is-button) #item:hover,:host(.is-button) #item.is-hovered{background:var(--_list-item-background-hover)}}:host(.is-link) #item:active,:host(.is-link) #item.is-pressed,:host(.is-button) #item:active,:host(.is-button) #item.is-pressed{background:var(--_list-item-background-active);color:var(--ds-link-color-base-active)}:host(.is-link) #item:active #content,:host(.is-link) #item.is-pressed #content,:host(.is-button) #item:active #content,:host(.is-button) #item.is-pressed #content{color:var(--ds-link-color-base-active)}:host(.is-link) #item:active ds-icon,:host(.is-link) #item:active ::slotted(ds-icon),:host(.is-link) #item:active ::slotted(ds-badge),:host(.is-link) #item.is-pressed ds-icon,:host(.is-link) #item.is-pressed ::slotted(ds-icon),:host(.is-link) #item.is-pressed ::slotted(ds-badge),:host(.is-button) #item:active ds-icon,:host(.is-button) #item:active ::slotted(ds-icon),:host(.is-button) #item:active ::slotted(ds-badge),:host(.is-button) #item.is-pressed ds-icon,:host(.is-button) #item.is-pressed ::slotted(ds-icon),:host(.is-button) #item.is-pressed ::slotted(ds-badge){--icon-color:var(--ds-link-color-base-active)}:host(.is-link) #item:before,:host(.is-button) #item:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;border-radius:var(--ds-alias-radius-base);-ms-touch-action:manipulation;touch-action:manipulation;-webkit-transition-property:-webkit-box-shadow;transition-property:-webkit-box-shadow;transition-property:box-shadow;transition-property:box-shadow, -webkit-box-shadow;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host(.is-link) #item:focus-visible:not(:active):before,:host(.is-link) #item.is-focused:not(:active):before,:host(.is-button) #item:focus-visible:not(:active):before,:host(.is-button) #item.is-focused:not(:active):before{-webkit-box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_list-item-focus) 0 0 0 5px !important;box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_list-item-focus) 0 0 0 5px !important}@media (hover: hover)and (pointer: fine){:host(.is-link) #item:hover:after,:host(.is-link) #item.is-hovered:after,:host(.is-button) #item:hover:after,:host(.is-button) #item.is-hovered:after,:host(.is-accordion) #item:hover:after,:host(.is-accordion) #item.is-hovered:after{background:var(--_list-item-border-color-hover)}}:host(.is-link) #item:active:after,:host(.is-link) #item.is-pressed:after,:host(.is-button) #item:active:after,:host(.is-button) #item.is-pressed:after,:host(.is-accordion) #item:active:after,:host(.is-accordion) #item.is-pressed:after{background:var(--_list-item-border-color-active)}:host(.is-accordion) ::slotted(p){padding-block:var(--_list-item-accordion-py)}:host(.is-accordion) ds-accordion{--accordion-summary-color-hover:var(--ds-link-color-base)}:host(.is-accordion) ds-accordion::part(header){background:var(--_list-item-background-base)}:host(.is-accordion) ds-accordion::part(summary){padding-right:.25rem}:host(.is-accordion) ds-accordion::part(summary):hover{background:var(--_list-item-background-hover)}:host(.is-accordion) ds-accordion::part(summary):active{background:var(--_list-item-background-active)}:host(.is-accordion) #accordion-content:after{content:"";border-radius:var(--_list-item-border-radius);width:100%;position:absolute;bottom:0;left:0;right:0;height:var(--_list-item-border-width);background:var(--_list-item-border-color-base)}:host(.is-disabled) #item{pointer-events:none !important;cursor:default !important;color:var(--ds-list-item-disabled)}:host(.is-disabled) #item #content{color:var(--ds-list-item-disabled)}:host(.is-disabled) #item ds-icon,:host(.is-disabled) #item ds-badge,:host(.is-disabled) #item ::slotted(ds-icon),:host(.is-disabled) #item ::slotted(ds-badge){--icon-color:var(--ds-list-item-disabled)}:host(.is-disabled) #item ds-badge,:host(.is-disabled) #item ::slotted(ds-badge){--badge-color-background:var(--ds-badge-grey-color-background);--badge-color-text:var(--ds-badge-grey-color-text)}`;
 
 const Item = class {
     constructor(hostRef) {

package/dist/esm/ds-label.entry.js

@@ -1,16 +1,16 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, v as defaultConfig, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
-import { h as hasValue } from './has-value-Dmsj8ZQw.js';
+import { B as registerInstance, v as defaultConfig, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
 import { n as normalizeDeprecatedTShirtSize } from './t-shirt-DR5LIaCn.js';
 import { I as I18nDsLabel } from './label.i18n-C7I7OlaM.js';
-import { T as Type } from './type-7qEQcw90.js';
-import { O as OneOf } from './one-of-CjRvS2Tk.js';
-import { L as ListenToConfig } from './config.decorator-CRYVBTkX.js';
-import './create-validator-decorator-fUav5byo.js';
-import './config.utils-CR4Xudpz.js';
+import { T as Type } from './type-Bqge296W.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
+import './create-validator-decorator-g9TfAa1g.js';
+import './config.utils-Db2OSTX3.js';
 
 const LABEL_SIZES = [
     '',

package/dist/esm/ds-list.entry.js

@@ -1,10 +1,10 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
-import { T as Type } from './type-7qEQcw90.js';
-import './create-validator-decorator-fUav5byo.js';
+import { B as registerInstance, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { T as Type } from './type-Bqge296W.js';
+import './create-validator-decorator-g9TfAa1g.js';
 
 const listHostCss = () => `:host{display:block;margin:0;padding:0}:host ul,:host ol{display:block;margin:0;padding:0;list-style-type:none}`;
 

package/dist/esm/ds-modal-body.entry.js

@@ -1,8 +1,8 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { B as registerInstance, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 
 const modalBodyHostCss = () => `:host{display:contents}`;
 

package/dist/esm/ds-modal-header.entry.js

@@ -1,8 +1,8 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { B as registerInstance, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 
 const ModalHeader = class {
     constructor(hostRef) {

package/dist/esm/ds-modal.entry.js

@@ -1,13 +1,13 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, w as wait, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
-import { S as ScrollHandler } from './scroll-v2MaEkiZ.js';
-import { T as Type } from './type-7qEQcw90.js';
-import { L as ListenToConfig } from './config.decorator-CRYVBTkX.js';
-import './create-validator-decorator-fUav5byo.js';
-import './config.utils-CR4Xudpz.js';
+import { B as registerInstance, I as createEvent, w as wait, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { S as ScrollHandler } from './scroll-D4cC-Fsr.js';
+import { T as Type } from './type-Bqge296W.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
+import './create-validator-decorator-g9TfAa1g.js';
+import './config.utils-Db2OSTX3.js';
 
 const modalHostCss = () => `:host{--_modal-background:var(--modal-background, var(--mod-modal-background, var(--ds-modal-color-base-background)));--_modal-radius:var(--modal-radius, var(--mod-modal-radius, var(--ds-modal-radius-base)));--_modal-backdrop-opacity:var(--modal-backdrop-opacity, var(--mod-modal-backdrop-opacity, var(--ds-backdrop-opacity)));--_modal-heading-family:var(--modal-heading-family, var(--mod-modal-heading-family, var(--ds-modal-heading-family)));--_modal-heading-weight:var(--modal-heading-weight, var(--mod-modal-heading-weight, var(--ds-modal-heading-weight)));--_modal-heading-size:var(--modal-heading-size, var(--mod-modal-heading-size, var(--ds-modal-heading-size-device)));--_modal-heading-line-height:var(--modal-heading-line-height, var(--mod-modal-heading-line-height, var(--ds-modal-heading-line-height)));--_modal-width:var(--modal-width, var(--mod-modal-width, var(--ds-modal-width)));display:contents}:host dialog{all:unset;-webkit-box-sizing:border-box;box-sizing:border-box;position:fixed;top:50%;left:50%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:calc(100% - 1rem);max-height:calc(100vh - 1rem);overflow:hidden;background:var(--_modal-background);border-radius:var(--_modal-radius);padding:1rem;opacity:0;-webkit-transform:translate(-50%, calc(-50% - 1rem));transform:translate(-50%, calc(-50% - 1rem));pointer-events:none}@media screen and (min-width: 769px){:host dialog{width:var(--_modal-width);max-height:calc(100vh - 6rem);padding:1.5rem}}@media screen and (min-width: 1024px){:host dialog{padding:2.5rem}}:host(.is-open) dialog{opacity:1;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);pointer-events:auto}:host(.is-animated) dialog{-webkit-transition:opacity 300ms ease,-webkit-transform 300ms ease;transition:opacity 300ms ease,-webkit-transform 300ms ease;transition:opacity 300ms ease,transform 300ms ease;transition:opacity 300ms ease,transform 300ms ease,-webkit-transform 300ms ease}@media (prefers-reduced-motion: reduce){:host dialog{-webkit-transition:none !important;transition:none !important}}:host dialog::-webkit-backdrop{background-color:rgba(0,7,57,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:var(--_modal-backdrop-opacity)}:host dialog::-ms-backdrop{background-color:rgba(0,7,57,.5);backdrop-filter:blur(4px);opacity:var(--_modal-backdrop-opacity)}:host dialog::backdrop{background-color:rgba(0,7,57,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:var(--_modal-backdrop-opacity)}:host(.is-fullscreen) dialog{top:0;left:0;width:100%;max-height:100%;height:100%;border-radius:0;-webkit-transform:translateY(1rem);transform:translateY(1rem)}:host(.is-fullscreen.is-open) dialog{-webkit-transform:translateY(0);transform:translateY(0)}:host ds-close{position:absolute;top:1rem;right:1rem}@media screen and (min-width: 769px){:host ds-close{top:1.5rem;right:1.5rem}}@media screen and (min-width: 1024px){:host ds-close{top:2.5rem;right:2.5rem}}:host #modal-title{padding-right:3rem;margin:0 0 1rem;font-family:var(--_modal-heading-family);font-weight:var(--_modal-heading-weight);font-size:var(--_modal-heading-size);line-height:var(--_modal-heading-line-height)}@media screen and (min-width: 769px){:host #modal-title{padding-right:3.5rem;margin-bottom:1.5rem}}@media screen and (min-width: 1024px){:host #modal-title{padding-right:4.5rem;margin-bottom:2.5rem}}:host #modal-body{-ms-flex:1;flex:1;min-height:0;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px){:host #modal-body{margin-left:-1.5rem;margin-right:-1.5rem;padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 1024px){:host #modal-body{margin-left:-2.5rem;margin-right:-2.5rem;padding-left:2.5rem;padding-right:2.5rem}}:host #modal-actions{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;gap:.5rem;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:1rem}@media screen and (min-width: 769px){:host #modal-actions{margin-top:1.5rem}}@media screen and (min-width: 1024px){:host #modal-actions{margin-top:2.5rem}}:host #modal-actions:empty{display:none}::slotted(*){display:block}`;
 

package/dist/esm/ds-navbar.entry.js

@@ -1,20 +1,20 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, v as defaultConfig, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
-import { F as FocusHandler } from './focus-6OAqvfus.js';
-import { S as ScrollHandler } from './scroll-v2MaEkiZ.js';
-import { d as dsBreakpoints } from './breakpoints.subject-DHZ7TzYV.js';
-import { L as ListenToResize } from './resize.decorator-eogZBBk6.js';
-import { T as Type } from './type-7qEQcw90.js';
-import { O as OneOf } from './one-of-CjRvS2Tk.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-D9M4v98c.js';
-import { L as ListenToConfig } from './config.decorator-CRYVBTkX.js';
-import './listener-DIZDQOuO.js';
-import './device-CapioAfe.js';
-import './create-validator-decorator-fUav5byo.js';
-import './config.utils-CR4Xudpz.js';
+import { B as registerInstance, I as createEvent, v as defaultConfig, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { F as FocusHandler } from './focus-C1_jVoAm.js';
+import { S as ScrollHandler } from './scroll-D4cC-Fsr.js';
+import { d as dsBreakpoints } from './breakpoints.subject-CUVOWezN.js';
+import { L as ListenToResize } from './resize.decorator-BNy5tJCt.js';
+import { T as Type } from './type-Bqge296W.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-CIweMjJQ.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
+import './listener-DiVrGAqj.js';
+import './device-CtidwsPr.js';
+import './create-validator-decorator-g9TfAa1g.js';
+import './config.utils-Db2OSTX3.js';
 
 const i18nDsNavbar = {
     de: {