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

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

@@ -1,20 +1,23 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, x as defaultConfig, M as debounceEvent, E as h, G as getElement } from './index-CuwLeg-T.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-tdchDLyb.js';
+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 { 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-D2O-sb65.js';
-import { s as setupValidation, V as ValidateType, a as ValidateOneOf } from './validate.decorator-82RSSk25.js';
+import { s as stopEventBubbling, F as FormControl } from './form-control-DhinyMa9.js';
+import { h as hasValue } from './has-value-Dmsj8ZQw.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-BXxRO7CD.js';
-import { I as INPUT_COLORS, a as INPUT_INPUT_TYPES, b as INPUT_AUTOCOMPLETES, c as INPUT_AUTOCORRECTS, d as INPUT_INPUT_MODES, e as INPUT_MASKS } from './input.interfaces-C7EnKCpl.js';
-import { L as ListenToConfig } from './config.decorator-BQNIja4k.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 './_commonjsHelpers-Duhf3ymL.js';
+import './create-validator-decorator-fUav5byo.js';
 import './aria-DYfTMCkl.js';
 import './label.i18n-C7I7OlaM.js';
-import './config.utils-COlKFRlV.js';
+import './config.utils-CR4Xudpz.js';
 
 class InputMaskUtil {
     constructor(component) {
@@ -411,7 +414,7 @@ const masks = [
 ];
 const getMask = (name) => masks.find(m => m.name === name);
 
-const inputHostCss = () => `:host{--_input-field-gap:var(--input-field-gap, var(--mod-input-field-gap, 0.25rem));--_input-family:var(--input-family, var(--mod-input-family, var(--ds-input-control-family)));--_input-weight:var(--input-weight, var(--mod-input-weight, var(--ds-input-control-weight)));--_input-line-height:var(--input-line-height, var(--mod-input-line-height, var(--ds-input-control-line-height)));--_input-size:var(--input-size, var(--mod-input-size, var(--ds-input-control-size-device)));--_input-color:var(--input-color, var(--mod-input-color, var(--ds-input-control-color-value-base)));--_input-placeholder:var(--input-placeholder, var(--mod-input-placeholder, var(--ds-input-control-color-placeholder-base)));--_input-container-background:var(--input-container-background, var(--mod-input-container-background, var(--ds-input-container-color-base-background)));--_input-container-border-color:var(--input-container-border-color, var(--mod-input-container-border-color, var(--ds-input-container-color-base-border)));--_input-container-border-width:var(--input-container-border-width, var(--mod-input-container-border-width, var(--ds-input-container-border-width)));--_input-container-radius:var(--input-container-radius, var(--mod-input-container-radius, var(--ds-input-container-radius)));--_input-container-hover-background:var(--input-container-hover-background, var(--mod-input-container-hover-background, var(--ds-input-container-color-hover-background)));--_input-container-active-background:var(--input-container-active-background, var(--mod-input-container-active-background, var(--ds-input-container-color-active-background)));--_input-container-focus-background:var(--input-container-focus-background, var(--mod-input-container-focus-background, var(--ds-input-container-color-focus-background)));--_input-container-hover-border:var(--input-container-hover-border, var(--mod-input-container-hover-border, var(--ds-input-container-color-hover-border)));--_input-container-active-border:var(--input-container-active-border, var(--mod-input-container-active-border, var(--ds-input-container-color-active-border)));--_input-container-focus-border:var(--input-container-focus-border, var(--mod-input-container-focus-border, var(--ds-input-container-color-focus-border)));--_input-label-color:var(--input-label-color, var(--mod-input-label-color, var(--ds-input-label-color-base)));--_input-label-family:var(--input-label-family, var(--mod-input-label-family, var(--ds-input-label-family)));--_input-label-weight:var(--input-label-weight, var(--mod-input-label-weight, var(--ds-input-label-weight)));--_input-label-line-height:var(--input-label-line-height, var(--mod-input-label-line-height, var(--ds-input-label-line-height)));--_input-label-size:var(--input-label-size, var(--mod-input-label-size, var(--ds-input-label-size-device)));--_input-description-color:var(--input-description-color, var(--mod-input-description-color, var(--ds-input-description-color-base)));--_input-description-family:var(--input-description-family, var(--mod-input-description-family, var(--ds-input-description-family)));--_input-description-weight:var(--input-description-weight, var(--mod-input-description-weight, var(--ds-input-description-weight)));--_input-description-line-height:var(--input-description-line-height, var(--mod-input-description-line-height, var(--ds-input-description-line-height)));--_input-description-size:var(--input-description-size, var(--mod-input-description-size, var(--ds-input-description-size-device)))}:host{position:relative;display:grid;gap:var(--_input-field-gap)}:host #input{border:none;outline:none;-webkit-box-shadow:none;box-shadow:none;position:relative;background:inherit;-ms-flex:1;flex:1;color:var(--_input-color);font-family:var(--_input-family);font-weight:var(--_input-weight);font-size:var(--_input-size);line-height:var(--_input-line-height);border-radius:var(--_input-container-radius)}:host #input::-webkit-input-placeholder{color:var(--_input-placeholder)}:host #input::-moz-placeholder{color:var(--_input-placeholder)}:host #input:-ms-input-placeholder{color:var(--_input-placeholder)}:host #input::-ms-input-placeholder{color:var(--_input-placeholder)}:host #input::placeholder{color:var(--_input-placeholder)}:host #input::-moz-placeholder{color:var(--_input-placeholder)}:host #input::-webkit-input-placeholder{color:var(--_input-placeholder)}:host #input:-moz-placeholder{color:var(--_input-placeholder)}:host #input:-ms-input-placeholder{color:var(--_input-placeholder)}:host #container{-webkit-box-sizing:border-box;box-sizing:border-box;clear:both;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;min-height:3rem;gap:.25rem;padding-inline:.5rem;background:var(--_input-container-background);border:var(--_input-container-border-width) solid var(--_input-container-border-color);border-radius:var(--_input-container-radius)}@media (hover: hover)and (pointer: fine){:host #container:hover,:host #container.is-hovered{background:var(--_input-container-hover-background);border-color:var(--_input-container-hover-border)}}:host #container:active,:host #container.is-pressed{background:var(--_input-container-active-background);border-color:var(--_input-container-active-border)}:host #container:focus-within:not(:active),:host #container.is-focused:not(:active){background:var(--_input-container-focus-background);border-color:var(--_input-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;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_input-label-color);font-family:var(--_input-label-family);font-weight:var(--_input-label-weight);font-size:var(--_input-label-size);line-height:var(--_input-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_input-description-color);font-family:var(--_input-description-family);font-weight:var(--_input-description-weight);font-size:var(--_input-description-size);line-height:var(--_input-description-line-height)}:host #description ds-icon{--icon-color:var(--_input-description-color)}:host #inner{position:relative;display:grid;gap:var(--_input-field-gap)}:host(.is-danger){--mod-input-container-border-color:var(--ds-input-container-color-danger-border);--mod-input-description-color:var(--ds-input-description-color-danger);--mod-input-container-hover-border:var(--ds-input-container-color-danger-border);--mod-input-container-active-border:var(--ds-input-container-color-danger-border)}:host(.is-success){--mod-input-container-border-color:var(--ds-input-container-color-success-border);--mod-input-description-color:var(--ds-input-description-color-success);--mod-input-container-hover-border:var(--ds-input-container-color-success-border);--mod-input-container-active-border:var(--ds-input-container-color-success-border)}:host(.is-warning){--mod-input-container-border-color:var(--ds-input-container-color-warning-border);--mod-input-description-color:var(--ds-input-description-color-warning);--mod-input-container-hover-border:var(--ds-input-container-color-warning-border);--mod-input-container-active-border:var(--ds-input-container-color-warning-border)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #input{pointer-events:none;cursor:default}:host(.is-disabled){--mod-input-container-background:var(--ds-input-container-color-disabled-background);--mod-input-container-border-color:var(--ds-input-container-color-disabled-border);--mod-input-label-color:var(--ds-input-label-color-disabled);--mod-input-description-color:var(--ds-input-description-color-disabled);--mod-input-color:var(--ds-input-control-color-value-disabled);--mod-input-placeholder:var(--ds-input-control-color-placeholder-disabled)}`;
+const inputHostCss = () => `: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)));--_input-family:var(--input-family, var(--mod-input-family, var(--ds-form-control-family)));--_input-weight:var(--input-weight, var(--mod-input-weight, var(--ds-form-control-weight)));--_input-line-height:var(--input-line-height, var(--mod-input-line-height, var(--ds-form-control-line-height)));--_input-size:var(--input-size, var(--mod-input-size, var(--ds-form-control-size-device)));--_input-color:var(--input-color, var(--mod-input-color, var(--ds-form-control-color-value-base)));--_input-placeholder:var(--input-placeholder, var(--mod-input-placeholder, var(--ds-form-control-color-placeholder-base)))}:host{position:relative;display:grid;gap:var(--_form-field-gap)}:host #container{-webkit-box-sizing:border-box;box-sizing:border-box;clear:both;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;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;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;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:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;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 #input{border:none;outline:none;-webkit-box-shadow:none;box-shadow:none;position:relative;background:inherit;-ms-flex:1;flex:1;color:var(--_input-color);font-family:var(--_input-family);font-weight:var(--_input-weight);font-size:var(--_input-size);line-height:var(--_input-line-height);border-radius:var(--_input-container-radius)}:host #input::-webkit-input-placeholder{color:var(--_input-placeholder)}:host #input::-moz-placeholder{color:var(--_input-placeholder)}:host #input:-ms-input-placeholder{color:var(--_input-placeholder)}:host #input::-ms-input-placeholder{color:var(--_input-placeholder)}:host #input::placeholder{color:var(--_input-placeholder)}:host #input::-moz-placeholder{color:var(--_input-placeholder)}:host #input::-webkit-input-placeholder{color:var(--_input-placeholder)}:host #input:-moz-placeholder{color:var(--_input-placeholder)}:host #input:-ms-input-placeholder{color:var(--_input-placeholder)}:host #inner{position:relative;display:grid;gap:var(--_form-field-gap)}: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),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #input{pointer-events:none;cursor:default}:host(.is-disabled){--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-input-color:var(--ds-form-control-color-value-disabled);--mod-input-placeholder:var(--ds-form-control-color-placeholder-disabled)}`;
 
 const Input = class {
     constructor(hostRef) {
@@ -611,7 +614,6 @@ const Input = class {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
         this.debounceChanged();
         this.maskChanged();
         this.control.connectedCallback();
@@ -657,7 +659,7 @@ const Input = class {
     }
     getFormattedValue() {
         const value = this.getRawValue();
-        const suffix = this.suffix !== undefined && value !== undefined && value !== '' ? ' ' + this.suffix : '';
+        const suffix = hasValue(this.suffix) && hasValue(value) ? ' ' + this.suffix : '';
         return `${value}${suffix}`;
     }
     /**
@@ -667,17 +669,17 @@ const Input = class {
     render() {
         var _a;
         let value;
-        if (this.mask) {
+        if (hasValue(this.mask)) {
             value = (_a = this.maskUtil.format(this.getRawValue())) !== null && _a !== void 0 ? _a : this.getRawValue();
         }
         else {
             value = this.focused ? this.getRawValue() : this.getFormattedValue();
         }
         let inputProps = {};
-        if (this.pattern) {
+        if (hasValue(this.pattern)) {
             inputProps = { pattern: this.pattern };
         }
-        return (h(Field, { key: '812474583ab9af7ac3156efe5bd7e44f904733e6', 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: '5c94b1ed5a483ccda801c984552a73c6f352cb1f', 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))));
+        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))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -697,123 +699,123 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Input.prototype, "createLogger", null);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", Object)
 ], Input.prototype, "value", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "name", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "label", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "description", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_COLORS),
+    OneOf(INPUT_COLORS),
     __metadata("design:type", String)
 ], Input.prototype, "color", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "loading", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "invalid", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "invalidText", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_INPUT_TYPES),
+    OneOf(INPUT_INPUT_TYPES),
     __metadata("design:type", String)
 ], Input.prototype, "type", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "accept", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "autocapitalize", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_AUTOCOMPLETES),
+    OneOf(INPUT_AUTOCOMPLETES),
     __metadata("design:type", String)
 ], Input.prototype, "autocomplete", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_AUTOCORRECTS),
+    OneOf(INPUT_AUTOCORRECTS),
     __metadata("design:type", String)
 ], Input.prototype, "autocorrect", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "autofocus", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], Input.prototype, "debounce", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "placeholder", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "max", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], Input.prototype, "maxLength", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "min", void 0);
 __decorate([
-    ValidateType('number'),
+    Type('number'),
     __metadata("design:type", Number)
 ], Input.prototype, "minLength", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "multiple", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "pattern", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "allowedKeyPress", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "required", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "spellcheck", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Input.prototype, "readonly", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Input.prototype, "suffix", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_INPUT_MODES),
+    OneOf(INPUT_INPUT_MODES),
     __metadata("design:type", String)
 ], Input.prototype, "inputmode", void 0);
 __decorate([
-    ValidateOneOf(...INPUT_MASKS),
+    OneOf(INPUT_MASKS),
     __metadata("design:type", String)
 ], Input.prototype, "mask", void 0);
 __decorate([

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

@@ -1,18 +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-CuwLeg-T.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-tdchDLyb.js';
-import { s as setupValidation, V as ValidateType, a as ValidateOneOf } from './validate.decorator-82RSSk25.js';
+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 { A as ACCORDION_MARKERS, a as ACCORDION_MARKER_POSITIONS } from './accordion.interfaces-C7u0gyLh.js';
-import { B as BUTTON_TARGETS } from './button.interfaces-BkESlUMc.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';
 
 const ITEM_VARIANTS = ['default', 'link', 'button', 'accordion'];
-const ITEM_ACTION_ICONS = ['default', 'link', 'link-external', 'download'];
+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:var(--list-item-border-color, var(--mod-list-item-border-color, var(--ds-list-item-border-color)));--_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-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-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-text-weight-regular)));--_list-item-text-size:var(--list-item-text-size, var(--mod-list-item-text-size, var(--ds-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) 0;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)}: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}: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:after,:host(.is-link) #item.is-hovered:after,:host(.is-button) #item:hover:after,:host(.is-button) #item.is-hovered:after{background:var(--ds-link-color-base-hover)}:host(.is-link) #item:hover,:host(.is-link) #item.is-hovered,:host(.is-button) #item:hover,:host(.is-button) #item.is-hovered{color:var(--ds-link-color-base-hover)}:host(.is-link) #item:hover #content,:host(.is-link) #item.is-hovered #content,:host(.is-button) #item:hover #content,:host(.is-button) #item.is-hovered #content{color:var(--ds-link-color-base-hover)}:host(.is-link) #item:hover ds-icon,:host(.is-link) #item:hover ::slotted(ds-icon),:host(.is-link) #item:hover ::slotted(ds-badge),:host(.is-link) #item.is-hovered ds-icon,:host(.is-link) #item.is-hovered ::slotted(ds-icon),:host(.is-link) #item.is-hovered ::slotted(ds-badge),:host(.is-button) #item:hover ds-icon,:host(.is-button) #item:hover ::slotted(ds-icon),:host(.is-button) #item:hover ::slotted(ds-badge),:host(.is-button) #item.is-hovered ds-icon,:host(.is-button) #item.is-hovered ::slotted(ds-icon),:host(.is-button) #item.is-hovered ::slotted(ds-badge){--icon-color:var(--ds-link-color-base-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{background:var(--ds-link-color-base-active)}:host(.is-link) #item:active,:host(.is-link) #item.is-pressed,:host(.is-button) #item:active,:host(.is-button) #item.is-pressed{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: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;content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;border-radius:var(--ds-alias-radius-base)}:host(.is-accordion) ::slotted(p){padding-block:var(--_list-item-accordion-py)}: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)}: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-color-grey-background);--badge-color-text:var(--ds-badge-color-grey-text)}`;
 
 const Item = class {
     constructor(hostRef) {
@@ -47,7 +49,7 @@ const Item = class {
         /**
          * The action icon variant. Controls which icon is displayed for `link` and `button` variants.
          */
-        this.actionIcon = 'default';
+        this.actionIcon = '';
         /**
          * The description text displayed below the label.
          */
@@ -74,7 +76,7 @@ const Item = class {
         /**
          * The semantic heading level of the label element.
          */
-        this.labelLevel = 'h5';
+        this.labelLevel = '';
         /**
          * The visual size of the label. Defaults to `labelLevel` if not set.
          */
@@ -88,7 +90,7 @@ const Item = class {
          * Specifies where to display the linked URL.
          * Only applies when an `href` is provided.
          */
-        this.target = '_self';
+        this.target = '';
         /**
          * The visual and functional variant of the item.
          */
@@ -104,13 +106,6 @@ const Item = class {
     createLogger(log) {
         this.log = log;
     }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        setupValidation(this);
-    }
     /**
      * RENDER
      * ------------------------------------------------------
@@ -125,13 +120,13 @@ const Item = class {
             if (this.actionIcon === 'link') {
                 actionIconName = 'nav-go-right';
             }
-            if (this.actionIcon === 'link-external') {
+            else if (this.actionIcon === 'link-external') {
                 actionIconName = 'link';
             }
-            if (this.actionIcon === 'download') {
+            else if (this.actionIcon === 'download') {
                 actionIconName = 'download';
             }
-            if (this.actionIcon === 'default') {
+            else if (this.actionIcon === 'default' || this.actionIcon === '') {
                 if (this.variant === 'link' || this.variant === 'button') {
                     actionIconName = 'nav-go-right';
                 }
@@ -192,63 +187,63 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Item.prototype, "createLogger", null);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Item.prototype, "accordionGroup", void 0);
 __decorate([
-    ValidateOneOf(...ACCORDION_MARKERS),
+    OneOf(ACCORDION_MARKERS),
     __metadata("design:type", String)
 ], Item.prototype, "accordionMarker", void 0);
 __decorate([
-    ValidateOneOf(...ACCORDION_MARKER_POSITIONS),
+    OneOf(ACCORDION_MARKER_POSITIONS),
     __metadata("design:type", String)
 ], Item.prototype, "accordionMarkerPosition", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Item.prototype, "accordionOpen", void 0);
 __decorate([
-    ValidateOneOf(...ITEM_ACTION_ICONS),
+    OneOf(ITEM_ACTION_ICONS),
     __metadata("design:type", String)
 ], Item.prototype, "actionIcon", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Item.prototype, "description", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Item.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Item.prototype, "download", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Item.prototype, "href", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Item.prototype, "label", void 0);
 __decorate([
-    ValidateOneOf(...ITEM_LABEL_LEVELS),
+    OneOf(ITEM_LABEL_LEVELS),
     __metadata("design:type", String)
 ], Item.prototype, "labelLevel", void 0);
 __decorate([
-    ValidateOneOf(...ITEM_LABEL_SIZES),
+    OneOf(ITEM_LABEL_SIZES),
     __metadata("design:type", String)
 ], Item.prototype, "labelSize", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Item.prototype, "rel", void 0);
 __decorate([
-    ValidateOneOf(...BUTTON_TARGETS),
+    OneOf(BUTTON_TARGETS),
     __metadata("design:type", String)
 ], Item.prototype, "target", void 0);
 __decorate([
-    ValidateOneOf(...ITEM_VARIANTS),
+    OneOf(ITEM_VARIANTS),
     __metadata("design:type", String)
 ], Item.prototype, "variant", void 0);
 Item.style = itemHostCss();

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

@@ -1,13 +1,16 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, x as defaultConfig, E as h, F as Host, G as getElement } from './index-CuwLeg-T.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-tdchDLyb.js';
+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 { n as normalizeDeprecatedTShirtSize } from './t-shirt-DR5LIaCn.js';
-import { s as setupValidation, V as ValidateType, a as ValidateOneOf } from './validate.decorator-82RSSk25.js';
 import { I as I18nDsLabel } from './label.i18n-C7I7OlaM.js';
-import { L as ListenToConfig } from './config.decorator-BQNIja4k.js';
-import './config.utils-COlKFRlV.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';
 
 const LABEL_SIZES = [
     '',
@@ -23,7 +26,7 @@ const LABEL_SIZES = [
     'xxx-large',
 ];
 
-const labelHostCss = () => `:host{--_label-position:var(--label-position, var(--mod-label-position, static));--_label-top:var(--label-top, var(--mod-label-top));--_label-right:var(--label-right, var(--mod-label-right));--_label-bottom:var(--label-bottom, var(--mod-label-bottom));--_label-left:var(--label-left, var(--mod-label-left));position:var(--_label-position);top:var(--_label-top);right:var(--_label-right);bottom:var(--_label-bottom);left:var(--_label-left);--_label-m:var(--label-m, var(--mod-label-m, 0));--_label-my:var(--label-my, var(--mod-label-my));--_label-mx:var(--label-mx, var(--mod-label-mx));--_label-ml:var(--label-ml, var(--mod-label-ml));--_label-mr:var(--label-mr, var(--mod-label-mr));--_label-mt:var(--label-mt, var(--mod-label-mt));--_label-mb:var(--label-mb, var(--mod-label-mb));margin:var(--_label-m);margin-inline:var(--_label-mx);margin-block:var(--_label-my);margin-left:var(--_label-ml);margin-right:var(--_label-mr);margin-top:var(--_label-mt);margin-bottom:var(--_label-mb);--_label-color:var(--label-color, var(--mod-label-color, inherit));--_label-family:var(--label-family, var(--mod-label-family, var(--ds-label-family)));--_label-weight:var(--label-weight, var(--mod-label-weight, var(--ds-label-weight)));--_label-line-height:var(--label-line-height, var(--mod-label-line-height, var(--ds-label-line-height)));--_label-size:var(--label-size, var(--mod-label-size, var(--ds-label-size-base-device)))}:host label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_label-color);font-family:var(--_label-family);font-weight:var(--_label-weight);font-size:var(--_label-size);line-height:var(--_label-line-height)}:host(.has-no-wrap) label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host(.is-lg){--mod-label-family:var(--ds-text-family-heading)}:host(.is-xl){--mod-label-family:var(--ds-text-family-heading)}:host(.is-2xl){--mod-label-family:var(--ds-text-family-heading)}:host(.is-3xl){--mod-label-family:var(--ds-text-family-heading)}:host(.is-sm){--mod-label-size:var(--ds-label-size-sm-device)}:host(.is-base){--mod-label-size:var(--ds-label-size-base-device)}:host(.is-lg){--mod-label-size:var(--ds-label-size-lg-device)}:host(.is-xl){--mod-label-size:var(--ds-label-size-xl-device)}:host(.is-2xl){--mod-label-size:var(--ds-label-size-2xl-device)}:host(.is-3xl){--mod-label-size:var(--ds-label-size-3xl-device)}:host(.is-hovered){--mod-label-color:var(--ds-label-color-base-hover)}:host(.is-pressed){--mod-label-color:var(--ds-label-color-base-active)}:host(.is-valid){--mod-label-color:var(--ds-label-color-success)}:host(.is-invalid){--mod-label-color:var(--ds-label-color-danger)}:host(.is-disabled){--mod-label-color:var(--ds-label-color-disabled) !important}:host{display:block}`;
+const labelHostCss = () => `:host{--_label-position:var(--label-position, var(--mod-label-position, static));--_label-top:var(--label-top, var(--mod-label-top));--_label-right:var(--label-right, var(--mod-label-right));--_label-bottom:var(--label-bottom, var(--mod-label-bottom));--_label-left:var(--label-left, var(--mod-label-left));position:var(--_label-position);top:var(--_label-top);right:var(--_label-right);bottom:var(--_label-bottom);left:var(--_label-left);--_label-m:var(--label-m, var(--mod-label-m, 0));--_label-my:var(--label-my, var(--mod-label-my));--_label-mx:var(--label-mx, var(--mod-label-mx));--_label-ml:var(--label-ml, var(--mod-label-ml));--_label-mr:var(--label-mr, var(--mod-label-mr));--_label-mt:var(--label-mt, var(--mod-label-mt));--_label-mb:var(--label-mb, var(--mod-label-mb));margin:var(--_label-m);margin-inline:var(--_label-mx);margin-block:var(--_label-my);margin-left:var(--_label-ml);margin-right:var(--_label-mr);margin-top:var(--_label-mt);margin-bottom:var(--_label-mb);--_label-color:var(--label-color, var(--mod-label-color, inherit));--_label-family:var(--label-family, var(--mod-label-family, var(--ds-label-family)));--_label-weight:var(--label-weight, var(--mod-label-weight, var(--ds-label-weight)));--_label-line-height:var(--label-line-height, var(--mod-label-line-height, var(--ds-label-line-height)));--_label-size:var(--label-size, var(--mod-label-size, var(--ds-label-size-base-device)))}:host label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_label-color);font-family:var(--_label-family);font-weight:var(--_label-weight);font-size:var(--_label-size);line-height:var(--_label-line-height)}:host(.has-no-wrap) label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host(.is-lg){--mod-label-family:var(--ds-alias-text-family-heading)}:host(.is-xl){--mod-label-family:var(--ds-alias-text-family-heading)}:host(.is-2xl){--mod-label-family:var(--ds-alias-text-family-heading)}:host(.is-3xl){--mod-label-family:var(--ds-alias-text-family-heading)}:host(.is-sm){--mod-label-size:var(--ds-label-size-sm-device)}:host(.is-base){--mod-label-size:var(--ds-label-size-base-device)}:host(.is-lg){--mod-label-size:var(--ds-label-size-lg-device)}:host(.is-xl){--mod-label-size:var(--ds-label-size-xl-device)}:host(.is-2xl){--mod-label-size:var(--ds-label-size-2xl-device)}:host(.is-3xl){--mod-label-size:var(--ds-label-size-3xl-device)}:host(.is-hovered){--mod-label-color:var(--ds-label-color-base-hover)}:host(.is-pressed){--mod-label-color:var(--ds-label-color-base-active)}:host(.is-valid){--mod-label-color:var(--ds-label-color-success)}:host(.is-invalid){--mod-label-color:var(--ds-label-color-danger)}:host(.is-disabled){--mod-label-color:var(--ds-label-color-disabled) !important}:host{display:block}`;
 
 const Label = class {
     constructor(hostRef) {
@@ -79,17 +82,10 @@ const Label = class {
     createLogger(log) {
         this.log = log;
     }
-    sizeChanged(newValue) {
-        this.size = normalizeDeprecatedTShirtSize(newValue);
-    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
-    connectedCallback() {
-        setupValidation(this);
-        this.size = normalizeDeprecatedTShirtSize(this.size);
-    }
     /**
      * PUBLIC LISTENERS
      * ------------------------------------------------------
@@ -109,22 +105,18 @@ const Label = class {
         const suffix = this.required === false ? I18nDsLabel[this.language].optional || '' : '';
         const id = this.htmlId;
         const htmlFor = this.htmlFor;
-        return (h(Host, { key: '937c19a2183d9c56279e88e37395b4da1fbb7206', class: {
+        const size = normalizeDeprecatedTShirtSize(this.size) || '';
+        return (h(Host, { key: 'fc8da311fddaf6d546b260a8bf2ae9cec5f39321', class: {
                 'is-hovered': this.hovered,
                 'is-pressed': this.pressed,
                 'is-disabled': this.disabled,
                 'is-valid': this.valid,
                 'is-invalid': this.invalid,
                 'has-no-wrap': this.noWrap,
-                [`is-${this.size}`]: !!this.size,
-            } }, h("label", { key: 'b059b0022e370ce5b202b6c0cd432a3950e0e798', id: id, part: "label", htmlFor: htmlFor }, h("slot", { key: 'c5a1f6741d468abf8d48549aad8f2d43160684cb' }), suffix)));
+                [`is-${size}`]: hasValue(this.size),
+            } }, h("label", { key: '56e31495cbe7d6fd512a0fb5a6b708774116ae25', id: id, part: "label", htmlFor: htmlFor }, h("slot", { key: '062163754a076d54d253c895d5d3d54de0be0127' }), suffix)));
     }
     get el() { return getElement(this); }
-    static get watchers() { return {
-        "size": [{
-                "sizeChanged": 0
-            }]
-    }; }
 };
 __decorate([
     Logger('label'),
@@ -133,43 +125,43 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Label.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Label.prototype, "htmlFor", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], Label.prototype, "htmlId", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "hovered", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "invalid", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "noWrap", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "pressed", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "required", void 0);
 __decorate([
-    ValidateOneOf(...LABEL_SIZES),
+    OneOf(LABEL_SIZES),
     __metadata("design:type", String)
 ], Label.prototype, "size", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Label.prototype, "valid", void 0);
 __decorate([