@baloise/ds-core 20.0.0-next.10 → 20.0.0-next.11

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

@@ -1,22 +1,23 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { N as getDefaultExportFromCjs, E as raf, F as h, D as registerInstance, J as createEvent, x as defaultConfig, M as debounceEvent, O as Fragment, I as getElement } from './index-DYOV_tWc.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-Byu4BzG4.js';
+import { N as getDefaultExportFromCjs, E as raf, F as h, D as registerInstance, J as createEvent, x as defaultConfig, M as debounceEvent, O as Fragment, I as getElement } from './index-DxEN1zze.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-CoU9H0PW.js';
 import { i as inheritAttributes } from './attributes-B62ocg4Q.js';
-import { F as FocusHandler } from './focus-54mwcmD9.js';
-import { F as FormControl } from './form-control-g2Cf81YC.js';
-import { w as watchInvalidTextSlot } from './invalid-text-slot-Dcf7YMP0.js';
+import { F as FocusHandler } from './focus-CQdRWMQM.js';
+import { F as FormControl } from './form-control-RKlnnjxO.js';
+import { w as watchInvalidTextSlot } from './invalid-text-slot-DamnLE0v.js';
 import { i as isEscapeKey } from './keyboard-BeR87vGa.js';
-import { F as Field } from './field.util-OTyuJ6iL.js';
+import { F as Field } from './field.util-DmVa8E0M.js';
 import { a as INPUT_AUTOCOMPLETES } from './input.interfaces-BRYPu0SP.js';
 import { D as DateTime } from './luxon-C1jqbZdf.js';
-import { T as Type } from './type-CZBrLp5X.js';
-import { O as OneOf } from './one-of-BExTRiXT.js';
-import { L as ListenToConfig } from './config.utils-CB-CXrKY.js';
+import { T as Type } from './type-3Im_fSnq.js';
+import { O as OneOf } from './one-of-dTNN7cqg.js';
+import { L as ListenToConfig } from './config.utils-RtLdZ8k8.js';
+import './dom-969JOO-P.js';
 import './aria-DYfTMCkl.js';
 import './label.i18n-C7I7OlaM.js';
-import './create-validator-decorator-ZDmCDTEb.js';
+import './create-validator-decorator-Da-m3zPX.js';
 
 const DATEPICKER_COLORS = ['primary', 'danger', 'success', 'warning'];
 
@@ -5344,7 +5345,7 @@ const DsDatepicker = class {
         // instead of disabling every control piecemeal, fall back to the regular input+popup markup —
         // same as the non-inline disabled state, just with the popup unreachable (no trigger renders).
         const showInlineCalendar = this.inline && !this.disabled;
-        return (h(Field, { key: '8e70da58d53235d396245a3fa2ffd6c8a163d9be', cssClasses: { 'is-inline': showInlineCalendar }, 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, inputId: "input" }, showInlineCalendar && (h("div", { key: '3ef0323e7f2bd8743553763a449e389038aa7bdb', id: "inline", role: "group", "aria-label": chooseDateLabel, ref: el => (this.popupHostEl = el) })), !showInlineCalendar && (h(Fragment, { key: 'e2d917a5e02ad5e2cde6c52b72e5e26a8d60d611' }, h("input", Object.assign({ key: 'e91153761adcb6ec60440f0d81dc3bec4420e6e9', id: "input", part: "input", name: this.name, type: "text", inputMode: "numeric", ref: inputEl => (this.control.nativeEl = inputEl), "aria-describedby": "description", "aria-invalid": isInvalid ? 'true' : 'false', disabled: this.disabled, autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, value: this.displayValue, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes)), h(ClearButton, { key: '9e0590bcb6778c77f5a211f8cc5df650e59e179d', value: this.value, disabled: this.disabled, readonly: this.readonly, language: this.language, onClick: this.handleClearClick }), !this.freeSolo && !this.disabled && !this.readonly && (h("button", { key: '19968ac5c145ecd112ba552f5bc7396583ad4a92', id: "trigger", part: "trigger", type: "button", ref: el => (this.triggerEl = el), "aria-label": triggerLabel, title: triggerLabel, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": "popup", onClick: this.handleTriggerClick }, h("ds-icon", { key: '20c65fef403c72f31d963db80c52caa28c050cac', name: "date" }))), !this.freeSolo && (h("div", { key: 'd71f2c6166e363a372aec8285b57e8343cc680e5', id: "popup", role: "dialog", "aria-modal": "true", "aria-label": chooseDateLabel, "aria-hidden": this.isOpen ? 'false' : 'true', inert: this.isOpen ? undefined : true, ref: el => (this.popupHostEl = el) }))))));
+        return (h(Field, { key: '36285800f9b4adf94506b497361ee70d2a29c702', cssClasses: { 'is-inline': showInlineCalendar }, 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, inputId: "input" }, showInlineCalendar && (h("div", { key: 'a036be47262a9378d1fed472a3e1a1810428d991', id: "inline", role: "group", "aria-label": chooseDateLabel, ref: el => (this.popupHostEl = el) })), !showInlineCalendar && (h(Fragment, { key: '63720ca1153f3400673badeac69bfb4c39367bf7' }, h("input", Object.assign({ key: '38199ef1db2139aff0b2fc362197649eeecde1d6', id: "input", part: "input", name: this.name, type: "text", inputMode: "numeric", ref: inputEl => (this.control.nativeEl = inputEl), "aria-describedby": "description", "aria-invalid": isInvalid ? 'true' : 'false', disabled: this.disabled, autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, value: this.displayValue, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes)), h(ClearButton, { key: 'c207abaae54b135f922b1cb1fa0cac000022bb4e', value: this.value, disabled: this.disabled, readonly: this.readonly, language: this.language, onClick: this.handleClearClick }), !this.freeSolo && !this.disabled && !this.readonly && (h("button", { key: '7b5f85b03e3ef8654f4a9b626a021b599dddc019', id: "trigger", part: "trigger", type: "button", ref: el => (this.triggerEl = el), "aria-label": triggerLabel, title: triggerLabel, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": "popup", onClick: this.handleTriggerClick }, h("ds-icon", { key: '1ff02d0f239bde057ce344fa8b0f7d13db9ed6b6', name: "date" }))), !this.freeSolo && (h("div", { key: 'ca7e48eaaaecdb1cdcd4c6a368a1105abab71e3e', id: "popup", role: "dialog", "aria-modal": "true", "aria-label": chooseDateLabel, "aria-hidden": this.isOpen ? 'false' : 'true', inert: this.isOpen ? undefined : true, ref: el => (this.popupHostEl = el) }))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -5353,7 +5354,7 @@ const DsDatepicker = class {
                 "isOpenChanged": 0
             }],
         "value": [{
-                "valueChanged": 0
+                "valueChanged": 1
             }],
         "debounce": [{
                 "debounceChanged": 0

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

@@ -1,18 +1,18 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { D as registerInstance, F as h, G as Host, I as getElement, a2 as rOnLoad } from './index-DYOV_tWc.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-Byu4BzG4.js';
-import { h as hasValue } from './has-value-D7lYQNBK.js';
+import { D as registerInstance, F as h, G as Host, I as getElement, a2 as rOnLoad } from './index-DxEN1zze.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-CoU9H0PW.js';
+import { h as hasValue } from './has-value-uy_-jH0L.js';
 import { n as normalizeDeprecatedTShirtSize } from './t-shirt-DR5LIaCn.js';
-import { O as OneOf } from './one-of-BExTRiXT.js';
-import { T as Type } from './type-CZBrLp5X.js';
-import { d as dsBreakpoints, c as DsComponentLogoColorInverted, e as DsComponentLogoColorPrimary, f as DsComponentLogoSizeSmMobile, g as DsComponentLogoSizeSmDesktop, h as DsComponentLogoSizeLgMobile, j as DsComponentLogoSizeLgDesktop, k as DsComponentLogoSizeBaseMobile, l as DsComponentLogoSizeBaseDesktop } from './breakpoints.subject-CgNq7C9X.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-CTZphYok.js';
-import { L as ListenToConfig } from './config.utils-CB-CXrKY.js';
-import './create-validator-decorator-ZDmCDTEb.js';
-import './listener-nZ8kL6Qe.js';
-import './device-ckOLnxX9.js';
+import { O as OneOf } from './one-of-dTNN7cqg.js';
+import { T as Type } from './type-3Im_fSnq.js';
+import { d as dsBreakpoints, c as DsComponentLogoColorInverted, e as DsComponentLogoColorPrimary, f as DsComponentLogoSizeSmMobile, g as DsComponentLogoSizeSmDesktop, h as DsComponentLogoSizeLgMobile, j as DsComponentLogoSizeLgDesktop, k as DsComponentLogoSizeBaseMobile, l as DsComponentLogoSizeBaseDesktop } from './breakpoints.subject-Dft-o__O.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-BVrXmMXt.js';
+import { L as ListenToConfig } from './config.utils-RtLdZ8k8.js';
+import './create-validator-decorator-Da-m3zPX.js';
+import './listener-CAqZogmy.js';
+import './device-DNizTY2o.js';
 
 const DIVIDER_LAYOUTS = ['horizontal', 'vertical'];
 const DIVIDER_COLORS = ['primary', 'secondary', 'default', 'inverted'];
@@ -54,7 +54,7 @@ const Divider = class {
      */
     render() {
         const space = normalizeDeprecatedTShirtSize(this.space) || '';
-        return (h(Host, { key: 'a63e23eb941fb171960ce90901d626de50f2ff4e', role: "separator", class: {
+        return (h(Host, { key: '5990e6d2937498c9dc20b3e606d3068c1deb3f65', role: "separator", class: {
                 [`is-${this.layout}`]: hasValue(this.layout),
                 [`is-${this.color}`]: hasValue(this.color),
                 [`has-space-${space}`]: hasValue(this.space),
@@ -191,7 +191,7 @@ const Logo = class {
             }
             else {
                 rOnLoad(async () => {
-                    import(/* @vite-ignore */ './logo.animation-CqFA7bc6.js')
+                    import(/* @vite-ignore */ './logo.animation-8yIYvVix.js')
                         .then(module => {
                         this.animationFunction = module.animate;
                         resolve();
@@ -227,12 +227,12 @@ const Logo = class {
      */
     render() {
         const LogoElement = this.brand === 'helvetia' || (!hasValue(this.brand) && this.configBrand === 'helvetia') ? (h(LogoHelvetia, { onlyText: this.animated, height: this.getHeight() })) : (h(LogoBaloise, { onlyText: this.animated, height: this.getHeight() }));
-        return (h(Host, { key: '95d91823297007c4cc903da869f261c1984fabc1', class: {
+        return (h(Host, { key: '3996b383de8a1aa58b2ce94259424532508c972e', class: {
                 'is-animated': this.isAnimated,
                 'is-inverted': this.color === 'inverted',
                 'is-sm': this.size === 'sm',
                 'is-lg': this.size === 'lg',
-            } }, h("div", { key: '95d119b8bcaa85076794c471ffbe55cc2da435df', id: "animated", part: "animated", ref: el => (this.animatedLogoElement = el), "aria-hidden": "true", style: {
+            } }, h("div", { key: '1a097c061d5ca9ecb605a6bfa229af5ec50edb60', id: "animated", part: "animated", ref: el => (this.animatedLogoElement = el), "aria-hidden": "true", style: {
                 display: this.isAnimated ? 'block' : 'none',
                 width: this.getHeight() + 'px',
                 height: this.getHeight() + 'px',

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

@@ -1,17 +1,17 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { D as registerInstance, J as createEvent, w as wait, F as h, G as Host, I as getElement, d as dsBrowser } from './index-DYOV_tWc.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-Byu4BzG4.js';
-import { S as ScrollHandler } from './scroll-DsSOuPzW.js';
-import { T as Type } from './type-CZBrLp5X.js';
-import { O as OneOf } from './one-of-BExTRiXT.js';
-import { L as ListenToConfig } from './config.utils-CB-CXrKY.js';
+import { D as registerInstance, J as createEvent, w as wait, F as h, G as Host, I as getElement, d as dsBrowser } from './index-DxEN1zze.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-CoU9H0PW.js';
+import { S as ScrollHandler } from './scroll-BQR4AN2V.js';
+import { T as Type } from './type-3Im_fSnq.js';
+import { O as OneOf } from './one-of-dTNN7cqg.js';
+import { L as ListenToConfig } from './config.utils-RtLdZ8k8.js';
 import { a as autoUpdate, c as computePosition, s as shift, f as flip, o as offset, b as arrow } from './floating-ui.dom-BqY0KzJC.js';
-import { F as FocusHandler } from './focus-54mwcmD9.js';
+import { F as FocusHandler } from './focus-CQdRWMQM.js';
 import { i as isEscapeKey } from './keyboard-BeR87vGa.js';
 import { P as POPUP_PLACEMENTS, a as POPUP_ROLES } from './popup.interfaces-BAY6Z8bT.js';
-import './create-validator-decorator-ZDmCDTEb.js';
+import './create-validator-decorator-Da-m3zPX.js';
 
 const DRAWER_CONTAINERS = ['default', 'fluid', 'compact'];
 
@@ -163,11 +163,11 @@ const Drawer = class {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: 'abfda739f019ab905d27dabacd358a3fe3625e3e', class: { 'is-open': this.isOpen, 'is-animated': this.animated } }, h("dialog", { key: 'c71c8767daf78c9ab0c3d00f1fe31254779aa215', part: "dialog", ref: el => (this.dialogEl = el), "aria-label": this.label || undefined, onClick: this.handleBackdropClick }, h("div", { key: '7dc4928fed9cb1743c2678d48f55d3ed468a62ba', class: {
+        return (h(Host, { key: '148b3071e52aa73f5860894c0498d3eccbcb7424', class: { 'is-open': this.isOpen, 'is-animated': this.animated } }, h("dialog", { key: '120491d7a155d06ce44131823176eab806f8e692', part: "dialog", ref: el => (this.dialogEl = el), "aria-label": this.label || undefined, onClick: this.handleBackdropClick }, h("div", { key: '63768e5098b1312368667d5a589c5bd2d657ca82', class: {
                 'ds-container': true,
                 'is-fluid': this.container === 'fluid',
                 'is-compact': this.container === 'compact',
-            } }, this.closable && h("ds-close", { key: '579e8bc0b7110e1083e15af8375ca43defc2a377', part: "close", onClick: this.handleCloseClick }), h("slot", { key: '090e2bdbe14ccdad86fa1ecbdcb5ac303701e4e7' })))));
+            } }, this.closable && h("ds-close", { key: 'a7e3ff650ebe73948027d41859c98a92639a4389', part: "close", onClick: this.handleCloseClick }), h("slot", { key: '7769da23ecd0d903909cfe4b333ff8f41e100ad3' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -525,7 +525,7 @@ const Popup = class {
      * ─────────────────────────────────────────────────────
      */
     render() {
-        return (h(Host, { key: '72bbf60a6bc9410137e5d6297567deb36dde832e', class: { 'is-open': this.isOpen, 'is-animated': this.animated, 'is-closable': this.closable } }, this.backdrop && h("div", { key: 'f0df870cf5cefe02625f8601be2d9ca2d79ee0a1', part: "backdrop" }), h("div", { key: '0469a9af2690b337b51f2c1778e36214ff85f17c', part: "panel", ref: el => (this.panelEl = el), role: this.role, "aria-modal": this.role === 'dialog' ? 'true' : undefined, "aria-label": this.label || undefined, tabindex: "-1", "data-testid": "ds-popup-panel" }, this.arrow && h("div", { key: '5b6b7b125996515687883668fe9145a6776cce08', part: "arrow", ref: el => (this.arrowEl = el) }), this.closable && h("ds-close", { key: 'a6e7ad1d67220a7c809a0379ae19d7f05a64ed93', part: "close", onClick: this.handleCloseClick }), h("slot", { key: 'c7924bf2de2567bb31d3ac2add33854ea3f0b218' }))));
+        return (h(Host, { key: 'fbcc73545dbe44938d0a26ece77f85858c652b71', class: { 'is-open': this.isOpen, 'is-animated': this.animated, 'is-closable': this.closable } }, this.backdrop && h("div", { key: '6c78f88d7af762d56b580fac1ba9aa264ae69073', part: "backdrop" }), h("div", { key: '31f233c1a59254655c8b90aa9c42cd99a9a57fa0', part: "panel", ref: el => (this.panelEl = el), role: this.role, "aria-modal": this.role === 'dialog' ? 'true' : undefined, "aria-label": this.label || undefined, tabindex: "-1", "data-testid": "ds-popup-panel" }, this.arrow && h("div", { key: '8ac2486a85fbf11448c851493ba3d452059fa65e', part: "arrow", ref: el => (this.arrowEl = el) }), this.closable && h("ds-close", { key: '83393ec4be0971eb48dcadf76b2341b6e94e71e7', part: "close", onClick: this.handleCloseClick }), h("slot", { key: '53a0d290554605dbafd3192c7bf086b752e81808' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ds-file-upload.entry.js

@@ -1,20 +1,21 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { D as registerInstance, J as createEvent, x as defaultConfig, F as h, I as getElement } from './index-DYOV_tWc.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-Byu4BzG4.js';
-import { a as areArraysEqual } from './array-DomMhGJQ.js';
-import { s as stopEventBubbling } from './form-control-g2Cf81YC.js';
-import { w as watchInvalidTextSlot } from './invalid-text-slot-Dcf7YMP0.js';
-import { F as Field } from './field.util-OTyuJ6iL.js';
+import { D as registerInstance, J as createEvent, x as defaultConfig, F as h, I as getElement } from './index-DxEN1zze.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-CoU9H0PW.js';
+import { a as areArraysEqual } from './array-BuADVVBi.js';
+import { s as stopEventBubbling } from './form-control-RKlnnjxO.js';
+import { w as watchInvalidTextSlot } from './invalid-text-slot-DamnLE0v.js';
+import { F as Field } from './field.util-DmVa8E0M.js';
 import { I as INPUT_COLORS } from './input.interfaces-BRYPu0SP.js';
-import { T as Type } from './type-CZBrLp5X.js';
-import { O as OneOf } from './one-of-BExTRiXT.js';
-import { L as ListenToConfig } from './config.utils-CB-CXrKY.js';
-import './isNil-DWALHtG8.js';
+import { T as Type } from './type-3Im_fSnq.js';
+import { O as OneOf } from './one-of-dTNN7cqg.js';
+import { L as ListenToConfig } from './config.utils-RtLdZ8k8.js';
+import './isNil-DxRbUK54.js';
+import './dom-969JOO-P.js';
 import './aria-DYfTMCkl.js';
 import './label.i18n-C7I7OlaM.js';
-import './create-validator-decorator-ZDmCDTEb.js';
+import './create-validator-decorator-Da-m3zPX.js';
 
 const toFileArray = (list) => {
     return Array.from(list !== null && list !== void 0 ? list : []);
@@ -404,11 +405,11 @@ const FileUpload = class {
         const selectedFilesLabel = i18nDsFileUpload[this.language].selectedFilesLabel;
         const removeFileLabel = i18nDsFileUpload[this.language].removeFileLabel;
         const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
-        return (h(Field, { key: 'ba48506b55e97dea724c5c4fcd75f0496ec2deec', color: this.color, disabled: this.disabled, invalid: isInvalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, inputId: this.fileUploadId }, h("div", { key: 'bd3c54a1c3debc156f644505e51bbe68ce803be3', id: "drop-zone", part: "drop-zone", ref: el => (this.dropZoneEl = el), class: {
+        return (h(Field, { key: 'd8d52ceff5997721222bc1e5611f7ad03ede9e91', color: this.color, disabled: this.disabled, invalid: isInvalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, inputId: this.fileUploadId }, h("div", { key: 'b15da0bcdf55de2f591e72292fa70bf71a8ec6d8', id: "drop-zone", part: "drop-zone", ref: el => (this.dropZoneEl = el), class: {
                 'file-upload-drop-zone': true,
                 'is-dragover': this.isDragOver,
                 'is-disabled': isDisabled,
-            }, onClick: () => { var _a; return !isDisabled && ((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click()); } }, h("span", { key: 'd000d84961259ab6e43ccd63be2e1260b9ca1dd5', id: "drop-zone-status", role: "status", "aria-live": "polite" }, this.isDragOver ? 'Drop files here' : ''), h("input", { key: 'ff267497b43f107a63aef12b1e7bc9bb83cad829', part: "input", ref: el => (this.nativeInput = el), id: this.fileUploadId, type: "file", name: this.name, multiple: this.multiple, disabled: isDisabled, required: this.required, accept: this.accept || undefined, "aria-invalid": isInvalid ? 'true' : 'false', "aria-describedby": "description", onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, "data-testid": "ds-file-upload-input" }), h("div", { key: '7b4854efac11d8a8421ba3e3e3a07952b02d3c77', id: "drop-zone-content", class: { 'is-disabled': isDisabled } }, h("slot", { key: '444433f2d5192f22943739e798c1b148b29ca17b' }, h("div", { key: '82e938f30c2fd8da7f376591bf5671e73ad9ad47', id: "drop-zone-placeholder", class: { 'is-disabled': isDisabled } }, !this.loading && h("ds-icon", { key: 'fcd5549c2cac21b3dd2fb87e20a50e2d1b0bdb5b', name: "upload", size: "lg" }), this.loading && h("ds-spinner", { key: '2d6039c0db76188da9a671e07b60a2a5a16923b8', variation: "circle" }), h("span", { key: 'e5a69a4fadb1f5800d937627cf687f06a61d1028' }, dropZoneLabel))))), this.hasFileList && this.files.length > 0 && (h("ul", { key: '8ddb7e2c904fd1d47dad83a557070c69451e3ff0', id: "file-list", part: "file-list", role: "list", "aria-label": selectedFilesLabel, class: {
+            }, onClick: () => { var _a; return !isDisabled && ((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click()); } }, h("span", { key: '974484b45f2a8bdb02770f16f2fe4e73c93bafb3', id: "drop-zone-status", role: "status", "aria-live": "polite" }, this.isDragOver ? 'Drop files here' : ''), h("input", { key: '8260339f8d22f370bdeb1f10f92f045e1aba82e7', part: "input", ref: el => (this.nativeInput = el), id: this.fileUploadId, type: "file", name: this.name, multiple: this.multiple, disabled: isDisabled, required: this.required, accept: this.accept || undefined, "aria-invalid": isInvalid ? 'true' : 'false', "aria-describedby": "description", onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, "data-testid": "ds-file-upload-input" }), h("div", { key: '366b17cfabd3731f44b2cb2cb4c0ea6409d73a60', id: "drop-zone-content", class: { 'is-disabled': isDisabled } }, h("slot", { key: '17e2fe0c22ddc983489268cbecd90e77983227d0' }, h("div", { key: '62cd16b3d5dba3beff8615f1d23e8321a8d147e6', id: "drop-zone-placeholder", class: { 'is-disabled': isDisabled } }, !this.loading && h("ds-icon", { key: 'ecaa07458add12dca20a66f4b7ca969a758937a3', name: "upload", size: "lg" }), this.loading && h("ds-spinner", { key: '7fc10a51c15ff9becf3c1c720f13b8bfaaf7ce25', variation: "circle" }), h("span", { key: '432007bedeb6d9efcf432251bfbf736966738b67' }, dropZoneLabel))))), this.hasFileList && this.files.length > 0 && (h("ul", { key: 'fda56d7f439f592b00ddeca5860893bfb12cf32d', id: "file-list", part: "file-list", role: "list", "aria-label": selectedFilesLabel, class: {
                 'file-list': true,
                 'is-disabled': isDisabled,
             } }, this.files.map((file, index) => (h("li", { id: `file-list-item-${index}`, key: file.name, class: "file-list-item" }, h("ds-stack", { direction: "row", align: "center" }, h("ds-icon", { name: "document", size: "md" }), h("ds-content", { space: "none" }, h("span", { class: "file-name", title: file.name }, file.name), h("span", { class: "file-size" }, formatFileSize(file.size))), h("ds-button", { size: "sm", icon: "trash", square: true, color: "secondary", title: `${removeFileLabel} ${file.name}`, a11yLabel: `${removeFileLabel} ${file.name}`, disabled: isDisabled, onKeyDown: (ev) => {
@@ -420,7 +421,7 @@ const FileUpload = class {
     get el() { return getElement(this); }
     static get watchers() { return {
         "value": [{
-                "valueChanged": 0
+                "valueChanged": 1
             }]
     }; }
 };

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

@@ -1,13 +1,13 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { D as registerInstance, d as dsBrowser, F as h, G as Host, I as getElement } from './index-DYOV_tWc.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-Byu4BzG4.js';
-import { h as hasValue } from './has-value-D7lYQNBK.js';
+import { D as registerInstance, d as dsBrowser, F as h, G as Host, I as getElement } from './index-DxEN1zze.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-CoU9H0PW.js';
+import { h as hasValue } from './has-value-uy_-jH0L.js';
 import { c as HEADING_LEVELS, b as HEADING_VISUAL_LEVELS, d as HEADING_SPACES, H as HEADING_COLORS } from './heading.interfaces-C4g1DHqm.js';
-import { O as OneOf } from './one-of-BExTRiXT.js';
-import { T as Type } from './type-CZBrLp5X.js';
-import './create-validator-decorator-ZDmCDTEb.js';
+import { O as OneOf } from './one-of-dTNN7cqg.js';
+import { T as Type } from './type-3Im_fSnq.js';
+import './create-validator-decorator-Da-m3zPX.js';
 
 const HEADING_TAG_MAP = {
     'display': 'h1',
@@ -167,14 +167,14 @@ const Heading = class {
         //   'base': 'level5',
         // }
         // const level = `is-${this.subtitle ? 'light' : 'bold'}-${levelMap[this.autoFontSize || '3xl']}`
-        return (h(Host, { key: '37b97b8512d88773369718abb8858422962208d4', class: {
+        return (h(Host, { key: 'eb6a9d39d3060e7776363272e86413b0c95a807a', class: {
                 [`is-${this.autoFontSize}`]: this.autoFontSize !== undefined,
                 [`is-${this.fontColor}`]: hasValue(this.fontColor),
                 'is-subtitle': this.subtitle,
                 [`has-space-${this.space}`]: hasValue(this.space),
                 'has-no-wrap': this.noWrap,
                 'has-shadow': this.shadow,
-            } }, h(Heading, { key: '9f2f53f631a6cef280848634888eb9ed79df5485', id: "heading", part: "heading", ref: (headingEl) => (this.headingEl = headingEl) }, h("slot", { key: '2e95c5ad4d6c65be00b3644b5de3e3ade1c5fe86' }))));
+            } }, h(Heading, { key: '961c539735e2a0719ae8e2369ebf568718226385', id: "heading", part: "heading", ref: (headingEl) => (this.headingEl = headingEl) }, h("slot", { key: '911e161ed5bb682cfcffc8ee7f6242c1984dfe23' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ds-hint-text.entry.js

@@ -1,8 +1,8 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { D as registerInstance, F as h, G as Host, I as getElement } from './index-DYOV_tWc.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-Byu4BzG4.js';
+import { D as registerInstance, F as h, G as Host, I as getElement } from './index-DxEN1zze.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-CoU9H0PW.js';
 
 const HintText = class {
     constructor(hostRef) {
@@ -16,7 +16,7 @@ const HintText = class {
      * ─────────────────────────────────────────────────────
      */
     render() {
-        return (h(Host, { key: '78262f7ea2121d329f098cc49b64caffd7b140fe', style: { display: 'contents' } }, h("slot", { key: '9b6b2e58f4c0ae79b7702b093b21810302d3219c' })));
+        return (h(Host, { key: 'bf1e0f62ef116c379b457f211ae033220a2f64a3', style: { display: 'contents' } }, h("slot", { key: '661556d3ce0faa0af973fd3bcc2ff6d5dca4056a' })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ds-hint-title.entry.js

@@ -1,8 +1,8 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { D as registerInstance, F as h, G as Host, I as getElement } from './index-DYOV_tWc.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-Byu4BzG4.js';
+import { D as registerInstance, F as h, G as Host, I as getElement } from './index-DxEN1zze.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-CoU9H0PW.js';
 
 const HintTitle = class {
     constructor(hostRef) {
@@ -19,7 +19,7 @@ const HintTitle = class {
      * ─────────────────────────────────────────────────────
      */
     render() {
-        return (h(Host, { key: '339dd5679d95a750f541d0d2e67e183e68260f5d', style: { display: 'contents' } }, h("slot", { key: 'ebcb497763835bf38cf755971ebf93e7001acc55' })));
+        return (h(Host, { key: '51e10abad99fe4652c91809388f116caa8128177', style: { display: 'contents' } }, h("slot", { key: '608b6bb7921defbba19d7e0ba164b8e2eb43f959' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,18 +1,18 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { D as registerInstance, x as defaultConfig, F as h, G as Host, I as getElement } from './index-DYOV_tWc.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-Byu4BzG4.js';
+import { D as registerInstance, x as defaultConfig, F as h, G as Host, I as getElement } from './index-DxEN1zze.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-CoU9H0PW.js';
 import { i as isEscapeKey } from './keyboard-BeR87vGa.js';
 import { P as POPUP_PLACEMENTS } from './popup.interfaces-BAY6Z8bT.js';
-import { O as OneOf } from './one-of-BExTRiXT.js';
-import { T as Type } from './type-CZBrLp5X.js';
-import { L as ListenToConfig } from './config.utils-CB-CXrKY.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-CTZphYok.js';
-import './create-validator-decorator-ZDmCDTEb.js';
-import './breakpoints.subject-CgNq7C9X.js';
-import './listener-nZ8kL6Qe.js';
-import './device-ckOLnxX9.js';
+import { O as OneOf } from './one-of-dTNN7cqg.js';
+import { T as Type } from './type-3Im_fSnq.js';
+import { L as ListenToConfig } from './config.utils-RtLdZ8k8.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-BVrXmMXt.js';
+import './create-validator-decorator-Da-m3zPX.js';
+import './breakpoints.subject-Dft-o__O.js';
+import './listener-CAqZogmy.js';
+import './device-DNizTY2o.js';
 
 const i18nDsHint = {
     de: {
@@ -201,7 +201,7 @@ const Hint = class {
     render() {
         const closeLabel = this.closeLabel || this.innerCloseLabel;
         const triggerLabel = this.triggerLabel || i18nDsHint[this.language].triggerLabel;
-        return (h(Host, { key: 'd27470debac5dae396292312ef0089e07f83b29f' }, h("button", { key: '8478223566986335d0df50ae3f73d256100c72f8', part: "trigger", type: "button", "aria-expanded": String(this.isOpen), "aria-haspopup": "dialog", "aria-label": triggerLabel, ref: el => (this.triggerButtonEl = el), onClick: this.handleTriggerClick }, h("ds-icon", { key: '528f0356caaca7478a0c6b250ec9b3b5e060040e', name: "info-circle", "aria-hidden": "true" })), this.isTouch ? (h("ds-drawer", { ref: el => (this.drawerEl = el), closable: false, backdropDismiss: true, onDsWillPresent: this.handleWillPresent, onDsWillDismiss: this.handleWillDismiss }, h("div", { class: "hint-content" }, (this.label || this.hasTitle()) && (h("div", { class: "hint-header" }, h("div", { class: "hint-title" }, this.label || h("slot", { name: "title" })))), h("div", { class: "hint-body" }, h("slot", null))), h("ds-button", { color: "primary", class: "hint-close-btn", onClick: this.handleCloseClick }, closeLabel))) : (h("ds-popup", { ref: el => (this.popupEl = el), closable: false, placement: this.placement, backdropDismiss: true, role: "dialog", onDsWillPresent: this.handleWillPresent, onDsWillDismiss: this.handleWillDismiss }, h("div", { class: "hint-content" }, (this.label || this.hasTitle()) && (h("div", { class: "hint-header" }, h("div", { class: "hint-title" }, this.label || h("slot", { name: "title" })), h("ds-close", { onClick: this.handleCloseClick }))), h("div", { class: "hint-body" }, h("slot", null)))))));
+        return (h(Host, { key: '1f179a8d66f676405699236e3ee06edc8ccddb08' }, h("button", { key: '1389354186c9df5729b4cf35072ba9c295001179', part: "trigger", type: "button", "aria-expanded": String(this.isOpen), "aria-haspopup": "dialog", "aria-label": triggerLabel, ref: el => (this.triggerButtonEl = el), onClick: this.handleTriggerClick }, h("ds-icon", { key: 'fd3701741b25edb942282839ebf5b23f6464e2e4', name: "info-circle", "aria-hidden": "true" })), this.isTouch ? (h("ds-drawer", { ref: el => (this.drawerEl = el), closable: false, backdropDismiss: true, onDsWillPresent: this.handleWillPresent, onDsWillDismiss: this.handleWillDismiss }, h("div", { class: "hint-content" }, (this.label || this.hasTitle()) && (h("div", { class: "hint-header" }, h("div", { class: "hint-title" }, this.label || h("slot", { name: "title" })))), h("div", { class: "hint-body" }, h("slot", null))), h("ds-button", { color: "primary", class: "hint-close-btn", onClick: this.handleCloseClick }, closeLabel))) : (h("ds-popup", { ref: el => (this.popupEl = el), closable: false, placement: this.placement, backdropDismiss: true, role: "dialog", onDsWillPresent: this.handleWillPresent, onDsWillDismiss: this.handleWillDismiss }, h("div", { class: "hint-content" }, (this.label || this.hasTitle()) && (h("div", { class: "hint-header" }, h("div", { class: "hint-title" }, this.label || h("slot", { name: "title" })), h("ds-close", { onClick: this.handleCloseClick }))), h("div", { class: "hint-body" }, h("slot", null)))))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,15 +1,15 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { a0 as require_baseGetTag, a1 as requireIsObjectLike, a3 as require_Symbol, _ as requireIsArray, N as getDefaultExportFromCjs, D as registerInstance, x as defaultConfig, F as h, G as Host, I as getElement, E as raf, a2 as rOnLoad } from './index-DYOV_tWc.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-Byu4BzG4.js';
-import { h as hasValue } from './has-value-D7lYQNBK.js';
-import { f as fetchSvg, s as sanitizeSvg } from './svg-DTldskay.js';
+import { a0 as require_baseGetTag, a1 as requireIsObjectLike, a3 as require_Symbol, _ as requireIsArray, N as getDefaultExportFromCjs, D as registerInstance, x as defaultConfig, F as h, G as Host, I as getElement, E as raf, a2 as rOnLoad } from './index-DxEN1zze.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-CoU9H0PW.js';
+import { h as hasValue } from './has-value-uy_-jH0L.js';
+import { f as fetchSvg, s as sanitizeSvg } from './svg-D7y4TSm5.js';
 import { n as normalizeDeprecatedTShirtSize } from './t-shirt-DR5LIaCn.js';
-import { T as Type } from './type-CZBrLp5X.js';
-import { O as OneOf } from './one-of-BExTRiXT.js';
-import { L as ListenToConfig } from './config.utils-CB-CXrKY.js';
-import './create-validator-decorator-ZDmCDTEb.js';
+import { T as Type } from './type-3Im_fSnq.js';
+import { O as OneOf } from './one-of-dTNN7cqg.js';
+import { L as ListenToConfig } from './config.utils-RtLdZ8k8.js';
+import './create-validator-decorator-Da-m3zPX.js';
 
 /**
  * A specialized version of `_.map` for arrays without support for iteratee
@@ -915,7 +915,7 @@ var upperFirst = /*@__PURE__*/getDefaultExportFromCjs(upperFirstExports);
 const ICON_COLORS = ['primary', 'info', 'grey', 'success', 'danger', 'info', 'warning'];
 const ICON_SIZES = ['sm', 'md', 'lg', 'xl'];
 
-const iconHostCss = () => `:host{--_icon-position:var(--icon-position, var(--mod-icon-position, static));--_icon-top:var(--icon-top, var(--mod-icon-top));--_icon-right:var(--icon-right, var(--mod-icon-right));--_icon-bottom:var(--icon-bottom, var(--mod-icon-bottom));--_icon-left:var(--icon-left, var(--mod-icon-left));position:var(--_icon-position);top:var(--_icon-top);right:var(--_icon-right);bottom:var(--_icon-bottom);left:var(--_icon-left);--_icon-m:var(--icon-m, var(--mod-icon-m, 0));--_icon-my:var(--icon-my, var(--mod-icon-my));--_icon-mx:var(--icon-mx, var(--mod-icon-mx));--_icon-ml:var(--icon-ml, var(--mod-icon-ml));--_icon-mr:var(--icon-mr, var(--mod-icon-mr));--_icon-mt:var(--icon-mt, var(--mod-icon-mt));--_icon-mb:var(--icon-mb, var(--mod-icon-mb));margin:var(--_icon-m);margin-inline:var(--_icon-mx);margin-block:var(--_icon-my);margin-left:var(--_icon-ml);margin-right:var(--_icon-mr);margin-top:var(--_icon-mt);margin-bottom:var(--_icon-mb);--_icon-size:var(--icon-size, var(--mod-icon-size, var(--ds-icon-size-base)));--_icon-inner-size:var(--icon-inner-size, var(--mod-icon-inner-size, var(--ds-icon-size-base)));--_icon-inner-mt:var(--icon-inner-mt, var(--mod-icon-inner-mt, 0));--_icon-color:var(--icon-color, var(--mod-icon-color, var(--ds-icon-color-primary)))}: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;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;vertical-align:middle;pointer-events:visible;width:var(--_icon-size);height:var(--_icon-size);max-height:var(--_icon-size)}:host #inner{display:block;position:static;z-index:1;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out, -webkit-transform .2s ease-in-out;margin-top:var(--_icon-inner-mt);padding:calc(.0625*var(--_icon-size));width:var(--_icon-inner-size);height:var(--_icon-inner-size);max-height:var(--_icon-inner-size)}:host #inner>svg{vertical-align:top}:host(.is-filled) svg svg,:host(.is-filled) svg g,:host(.is-filled) svg path,:host(.is-filled) svg circle{fill:var(--_icon-color)}:host(:not(.is-filled)) svg path[fill="#E9FBF7"]{fill:var(--icon-brand-color, #E9FBF7)}:host(:not(.is-filled)) svg path[fill="#e9fbf7"]{fill:var(--icon-brand-color, #e9fbf7)}:host(:not(.is-filled)) svg path[fill="#CBF2EC"]{fill:var(--icon-brand-color, #CBF2EC)}:host(:not(.is-filled)) svg path[fill="#cbf2ec"]{fill:var(--icon-brand-color, #cbf2ec)}:host(:not(.is-filled)) svg path[fill="#94E3D4"]{fill:var(--icon-brand-color, #94E3D4)}:host(:not(.is-filled)) svg path[fill="#94e3d4"]{fill:var(--icon-brand-color, #94e3d4)}:host(:not(.is-filled)) svg path[fill="#21D9AC"]{fill:var(--icon-brand-color, #21D9AC)}:host(:not(.is-filled)) svg path[fill="#21d9ac"]{fill:var(--icon-brand-color, #21d9ac)}:host(:not(.is-filled)) svg path[fill="#00B28F"]{fill:var(--icon-brand-color, #00B28F)}:host(:not(.is-filled)) svg path[fill="#00b28f"]{fill:var(--icon-brand-color, #00b28f)}:host(:not(.is-filled)) svg path[fill="#1B5951"]{fill:var(--icon-brand-color, #1B5951)}:host(:not(.is-filled)) svg path[fill="#1b5951"]{fill:var(--icon-brand-color, #1b5951)}:host(:not(.is-filled)) svg path[fill="#FFF9E8"]{fill:var(--icon-brand-color, #FFF9E8)}:host(:not(.is-filled)) svg path[fill="#fff9e8"]{fill:var(--icon-brand-color, #fff9e8)}:host(:not(.is-filled)) svg path[fill="#FFECBC"]{fill:var(--icon-brand-color, #FFECBC)}:host(:not(.is-filled)) svg path[fill="#ffecbc"]{fill:var(--icon-brand-color, #ffecbc)}:host(:not(.is-filled)) svg path[fill="#FAE052"]{fill:var(--icon-brand-color, #FAE052)}:host(:not(.is-filled)) svg path[fill="#fae052"]{fill:var(--icon-brand-color, #fae052)}:host(:not(.is-filled)) svg path[fill="#FFBE19"]{fill:var(--icon-brand-color, #FFBE19)}:host(:not(.is-filled)) svg path[fill="#ffbe19"]{fill:var(--icon-brand-color, #ffbe19)}:host(:not(.is-filled)) svg path[fill="#FA9319"]{fill:var(--icon-brand-color, #FA9319)}:host(:not(.is-filled)) svg path[fill="#fa9319"]{fill:var(--icon-brand-color, #fa9319)}:host(:not(.is-filled)) svg path[fill="#B24A00"]{fill:var(--icon-brand-color, #B24A00)}:host(:not(.is-filled)) svg path[fill="#b24a00"]{fill:var(--icon-brand-color, #b24a00)}:host(:not(.is-filled)) svg path[fill="#FFEEF1"]{fill:var(--icon-brand-color, #FFEEF1)}:host(:not(.is-filled)) svg path[fill="#ffeef1"]{fill:var(--icon-brand-color, #ffeef1)}:host(:not(.is-filled)) svg path[fill="#FFD7D7"]{fill:var(--icon-brand-color, #FFD7D7)}:host(:not(.is-filled)) svg path[fill="#ffd7d7"]{fill:var(--icon-brand-color, #ffd7d7)}:host(:not(.is-filled)) svg path[fill="#FFACA6"]{fill:var(--icon-brand-color, #FFACA6)}:host(:not(.is-filled)) svg path[fill="#ffaca6"]{fill:var(--icon-brand-color, #ffaca6)}:host(:not(.is-filled)) svg path[fill="#FF596F"]{fill:var(--icon-brand-color, #FF596F)}:host(:not(.is-filled)) svg path[fill="#ff596f"]{fill:var(--icon-brand-color, #ff596f)}:host(:not(.is-filled)) svg path[fill="#D9304C"]{fill:var(--icon-brand-color, #D9304C)}:host(:not(.is-filled)) svg path[fill="#d9304c"]{fill:var(--icon-brand-color, #d9304c)}:host(:not(.is-filled)) svg path[fill="#99172D"]{fill:var(--icon-brand-color, #99172D)}:host(:not(.is-filled)) svg path[fill="#99172d"]{fill:var(--icon-brand-color, #99172d)}:host(:not(.is-filled)) svg path[fill="#F9F3FF"]{fill:var(--icon-brand-color, #F9F3FF)}:host(:not(.is-filled)) svg path[fill="#f9f3ff"]{fill:var(--icon-brand-color, #f9f3ff)}:host(:not(.is-filled)) svg path[fill="#E1D9FF"]{fill:var(--icon-brand-color, #E1D9FF)}:host(:not(.is-filled)) svg path[fill="#e1d9ff"]{fill:var(--icon-brand-color, #e1d9ff)}:host(:not(.is-filled)) svg path[fill="#B8B2FF"]{fill:var(--icon-brand-color, #B8B2FF)}:host(:not(.is-filled)) svg path[fill="#b8b2ff"]{fill:var(--icon-brand-color, #b8b2ff)}:host(:not(.is-filled)) svg path[fill="#BE82FA"]{fill:var(--icon-brand-color, #BE82FA)}:host(:not(.is-filled)) svg path[fill="#be82fa"]{fill:var(--icon-brand-color, #be82fa)}:host(:not(.is-filled)) svg path[fill="#9F52CC"]{fill:var(--icon-brand-color, #9F52CC)}:host(:not(.is-filled)) svg path[fill="#9f52cc"]{fill:var(--icon-brand-color, #9f52cc)}:host(:not(.is-filled)) svg path[fill="#6C2273"]{fill:var(--icon-brand-color, #6C2273)}:host(:not(.is-filled)) svg path[fill="#6c2273"]{fill:var(--icon-brand-color, #6c2273)}:host(:not(.is-filled)) svg path[fill="#000D6E"]{fill:var(--icon-brand-color, #000D6E)}:host(:not(.is-filled)) svg path[fill="#000d6e"]{fill:var(--icon-brand-color, #000d6e)}:host(.is-inline){display:-ms-inline-flexbox;display:inline-flex;line-height:1}:host(.has-shadow) svg{-webkit-filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5));filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5))}:host(.turn-plus) #inner{-webkit-transform:rotate(225deg);transform:rotate(225deg)}:host(.turn-nav-go-down) #inner,:host(.turn-caret-down) #inner,:host(.turn-caret-up) #inner{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.is-tile){background:var(--_icon-tile-color-background);border-radius:var(--_icon-tile-radius);height:var(--_icon-tile-size);--mod-icon-size:var(--_icon-tile-size);--mod-icon-inner-size:var(--_icon-tile-size)}@media screen and (min-width: 769px){:host(.is-tile){height:var(--_icon-tile-size-tablet);--mod-icon-size:var(--_icon-tile-size-tablet);--mod-icon-inner-size:var(--_icon-tile-size-tablet)}}:host(.is-sm){--mod-icon-size:var(--ds-icon-size-sm);--mod-icon-inner-size:var(--ds-icon-size-sm)}:host(.is-md){--mod-icon-size:var(--ds-icon-size-md);--mod-icon-inner-size:var(--ds-icon-size-md)}:host(.is-lg){--mod-icon-size:var(--ds-icon-size-lg);--mod-icon-inner-size:var(--ds-icon-size-lg)}:host(.is-xl){--mod-icon-size:var(--ds-icon-size-xl);--mod-icon-inner-size:var(--ds-icon-size-xl)}:host(.is-primary:not(.is-inverted,.is-invalid,.is-disabled)){--mod-icon-color:var(--ds-icon-color-primary)}:host(.is-primary-light:not(.is-inverted,.is-invalid,.is-disabled)){--mod-icon-color:var(--ds-icon-color-primary-light)}:host(.is-info:not(.is-inverted,.is-invalid,.is-disabled)){--mod-icon-color:var(--ds-icon-color-info)}:host(.is-success:not(.is-inverted,.is-invalid,.is-disabled)){--mod-icon-color:var(--ds-icon-color-success)}:host(.is-danger:not(.is-inverted,.is-invalid,.is-disabled)){--mod-icon-color:var(--ds-icon-color-danger)}:host(.is-warning:not(.is-inverted,.is-invalid,.is-disabled)){--mod-icon-color:var(--ds-icon-color-warning)}:host(.is-grey:not(.is-inverted,.is-invalid,.is-disabled)){--mod-icon-color:var(--ds-icon-color-grey)}:host(.is-inverted){--mod-icon-color:var(--ds-icon-color-inverted)}:host(.is-invalid){--mod-icon-color:var(--ds-icon-color-danger)}:host(.is-disabled){--mod-icon-color:var(--ds-icon-color-disabled)}`;
+const iconHostCss = () => `:host{--_icon-position:var(--icon-position, var(--mod-icon-position, static));--_icon-top:var(--icon-top, var(--mod-icon-top));--_icon-right:var(--icon-right, var(--mod-icon-right));--_icon-bottom:var(--icon-bottom, var(--mod-icon-bottom));--_icon-left:var(--icon-left, var(--mod-icon-left));position:var(--_icon-position);top:var(--_icon-top);right:var(--_icon-right);bottom:var(--_icon-bottom);left:var(--_icon-left);--_icon-m:var(--icon-m, var(--mod-icon-m, 0));--_icon-my:var(--icon-my, var(--mod-icon-my));--_icon-mx:var(--icon-mx, var(--mod-icon-mx));--_icon-ml:var(--icon-ml, var(--mod-icon-ml));--_icon-mr:var(--icon-mr, var(--mod-icon-mr));--_icon-mt:var(--icon-mt, var(--mod-icon-mt));--_icon-mb:var(--icon-mb, var(--mod-icon-mb));margin:var(--_icon-m);margin-inline:var(--_icon-mx);margin-block:var(--_icon-my);margin-left:var(--_icon-ml);margin-right:var(--_icon-mr);margin-top:var(--_icon-mt);margin-bottom:var(--_icon-mb);--_icon-size:var(--icon-size, var(--mod-icon-size, var(--ds-icon-size-base)));--_icon-inner-size:var(--icon-inner-size, var(--mod-icon-inner-size, var(--ds-icon-size-base)));--_icon-inner-mt:var(--icon-inner-mt, var(--mod-icon-inner-mt, 0));--_icon-color:var(--icon-color, var(--mod-icon-color, var(--ds-icon-color-primary)))}: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;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;vertical-align:middle;pointer-events:visible;width:var(--_icon-size);height:var(--_icon-size);max-height:var(--_icon-size)}:host #inner{display:block;position:static;z-index:1;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out, -webkit-transform .2s ease-in-out;margin-top:var(--_icon-inner-mt);padding:calc(.0625*var(--_icon-size));width:var(--_icon-inner-size);height:var(--_icon-inner-size);max-height:var(--_icon-inner-size)}:host #inner>svg{vertical-align:top}:host(.is-filled) svg svg,:host(.is-filled) svg g,:host(.is-filled) svg path,:host(.is-filled) svg circle{fill:var(--_icon-color)}:host(:not(.is-filled)) svg path[fill="#E9FBF7"]{fill:var(--icon-brand-color, #E9FBF7)}:host(:not(.is-filled)) svg path[fill="#e9fbf7"]{fill:var(--icon-brand-color, #e9fbf7)}:host(:not(.is-filled)) svg path[fill="#CBF2EC"]{fill:var(--icon-brand-color, #CBF2EC)}:host(:not(.is-filled)) svg path[fill="#cbf2ec"]{fill:var(--icon-brand-color, #cbf2ec)}:host(:not(.is-filled)) svg path[fill="#94E3D4"]{fill:var(--icon-brand-color, #94E3D4)}:host(:not(.is-filled)) svg path[fill="#94e3d4"]{fill:var(--icon-brand-color, #94e3d4)}:host(:not(.is-filled)) svg path[fill="#21D9AC"]{fill:var(--icon-brand-color, #21D9AC)}:host(:not(.is-filled)) svg path[fill="#21d9ac"]{fill:var(--icon-brand-color, #21d9ac)}:host(:not(.is-filled)) svg path[fill="#00B28F"]{fill:var(--icon-brand-color, #00B28F)}:host(:not(.is-filled)) svg path[fill="#00b28f"]{fill:var(--icon-brand-color, #00b28f)}:host(:not(.is-filled)) svg path[fill="#1B5951"]{fill:var(--icon-brand-color, #1B5951)}:host(:not(.is-filled)) svg path[fill="#1b5951"]{fill:var(--icon-brand-color, #1b5951)}:host(:not(.is-filled)) svg path[fill="#FFF9E8"]{fill:var(--icon-brand-color, #FFF9E8)}:host(:not(.is-filled)) svg path[fill="#fff9e8"]{fill:var(--icon-brand-color, #fff9e8)}:host(:not(.is-filled)) svg path[fill="#FFECBC"]{fill:var(--icon-brand-color, #FFECBC)}:host(:not(.is-filled)) svg path[fill="#ffecbc"]{fill:var(--icon-brand-color, #ffecbc)}:host(:not(.is-filled)) svg path[fill="#FAE052"]{fill:var(--icon-brand-color, #FAE052)}:host(:not(.is-filled)) svg path[fill="#fae052"]{fill:var(--icon-brand-color, #fae052)}:host(:not(.is-filled)) svg path[fill="#FFBE19"]{fill:var(--icon-brand-color, #FFBE19)}:host(:not(.is-filled)) svg path[fill="#ffbe19"]{fill:var(--icon-brand-color, #ffbe19)}:host(:not(.is-filled)) svg path[fill="#FA9319"]{fill:var(--icon-brand-color, #FA9319)}:host(:not(.is-filled)) svg path[fill="#fa9319"]{fill:var(--icon-brand-color, #fa9319)}:host(:not(.is-filled)) svg path[fill="#B24A00"]{fill:var(--icon-brand-color, #B24A00)}:host(:not(.is-filled)) svg path[fill="#b24a00"]{fill:var(--icon-brand-color, #b24a00)}:host(:not(.is-filled)) svg path[fill="#FFEEF1"]{fill:var(--icon-brand-color, #FFEEF1)}:host(:not(.is-filled)) svg path[fill="#ffeef1"]{fill:var(--icon-brand-color, #ffeef1)}:host(:not(.is-filled)) svg path[fill="#FFD7D7"]{fill:var(--icon-brand-color, #FFD7D7)}:host(:not(.is-filled)) svg path[fill="#ffd7d7"]{fill:var(--icon-brand-color, #ffd7d7)}:host(:not(.is-filled)) svg path[fill="#FFACA6"]{fill:var(--icon-brand-color, #FFACA6)}:host(:not(.is-filled)) svg path[fill="#ffaca6"]{fill:var(--icon-brand-color, #ffaca6)}:host(:not(.is-filled)) svg path[fill="#FF596F"]{fill:var(--icon-brand-color, #FF596F)}:host(:not(.is-filled)) svg path[fill="#ff596f"]{fill:var(--icon-brand-color, #ff596f)}:host(:not(.is-filled)) svg path[fill="#D9304C"]{fill:var(--icon-brand-color, #D9304C)}:host(:not(.is-filled)) svg path[fill="#d9304c"]{fill:var(--icon-brand-color, #d9304c)}:host(:not(.is-filled)) svg path[fill="#99172D"]{fill:var(--icon-brand-color, #99172D)}:host(:not(.is-filled)) svg path[fill="#99172d"]{fill:var(--icon-brand-color, #99172d)}:host(:not(.is-filled)) svg path[fill="#F9F3FF"]{fill:var(--icon-brand-color, #F9F3FF)}:host(:not(.is-filled)) svg path[fill="#f9f3ff"]{fill:var(--icon-brand-color, #f9f3ff)}:host(:not(.is-filled)) svg path[fill="#E1D9FF"]{fill:var(--icon-brand-color, #E1D9FF)}:host(:not(.is-filled)) svg path[fill="#e1d9ff"]{fill:var(--icon-brand-color, #e1d9ff)}:host(:not(.is-filled)) svg path[fill="#B8B2FF"]{fill:var(--icon-brand-color, #B8B2FF)}:host(:not(.is-filled)) svg path[fill="#b8b2ff"]{fill:var(--icon-brand-color, #b8b2ff)}:host(:not(.is-filled)) svg path[fill="#BE82FA"]{fill:var(--icon-brand-color, #BE82FA)}:host(:not(.is-filled)) svg path[fill="#be82fa"]{fill:var(--icon-brand-color, #be82fa)}:host(:not(.is-filled)) svg path[fill="#9F52CC"]{fill:var(--icon-brand-color, #9F52CC)}:host(:not(.is-filled)) svg path[fill="#9f52cc"]{fill:var(--icon-brand-color, #9f52cc)}:host(:not(.is-filled)) svg path[fill="#6C2273"]{fill:var(--icon-brand-color, #6C2273)}:host(:not(.is-filled)) svg path[fill="#6c2273"]{fill:var(--icon-brand-color, #6c2273)}:host(:not(.is-filled)) svg path[fill="#000D6E"]{fill:var(--icon-brand-color, #000D6E)}:host(:not(.is-filled)) svg path[fill="#000d6e"]{fill:var(--icon-brand-color, #000d6e)}:host(.is-inline){display:-ms-inline-flexbox;display:inline-flex;line-height:1}:host(.has-shadow) svg{-webkit-filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5));filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5))}:host(.turn-plus) #inner{-webkit-transform:rotate(225deg);transform:rotate(225deg)}:host(.turn-caret-down) #inner,:host(.turn-caret-up) #inner{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host(.is-tile){background:var(--_icon-tile-color-background);border-radius:var(--_icon-tile-radius);height:var(--_icon-tile-size);--mod-icon-size:var(--_icon-tile-size);--mod-icon-inner-size:var(--_icon-tile-size)}@media screen and (min-width: 769px){:host(.is-tile){height:var(--_icon-tile-size-tablet);--mod-icon-size:var(--_icon-tile-size-tablet);--mod-icon-inner-size:var(--_icon-tile-size-tablet)}}:host(.is-sm){--mod-icon-size:var(--ds-icon-size-sm);--mod-icon-inner-size:var(--ds-icon-size-sm)}:host(.is-md){--mod-icon-size:var(--ds-icon-size-md);--mod-icon-inner-size:var(--ds-icon-size-md)}:host(.is-lg){--mod-icon-size:var(--ds-icon-size-lg);--mod-icon-inner-size:var(--ds-icon-size-lg)}:host(.is-xl){--mod-icon-size:var(--ds-icon-size-xl);--mod-icon-inner-size:var(--ds-icon-size-xl)}:host(.is-primary:not(.is-inverted,.is-invalid,.is-disabled)){--mod-icon-color:var(--ds-icon-color-primary)}:host(.is-primary-light:not(.is-inverted,.is-invalid,.is-disabled)){--mod-icon-color:var(--ds-icon-color-primary-light)}:host(.is-info:not(.is-inverted,.is-invalid,.is-disabled)){--mod-icon-color:var(--ds-icon-color-info)}:host(.is-success:not(.is-inverted,.is-invalid,.is-disabled)){--mod-icon-color:var(--ds-icon-color-success)}:host(.is-danger:not(.is-inverted,.is-invalid,.is-disabled)){--mod-icon-color:var(--ds-icon-color-danger)}:host(.is-warning:not(.is-inverted,.is-invalid,.is-disabled)){--mod-icon-color:var(--ds-icon-color-warning)}:host(.is-grey:not(.is-inverted,.is-invalid,.is-disabled)){--mod-icon-color:var(--ds-icon-color-grey)}:host(.is-inverted){--mod-icon-color:var(--ds-icon-color-inverted)}:host(.is-invalid){--mod-icon-color:var(--ds-icon-color-danger)}:host(.is-disabled){--mod-icon-color:var(--ds-icon-color-disabled)}`;
 
 const Icon = class {
     constructor(hostRef) {
@@ -1026,7 +1026,7 @@ const Icon = class {
      */
     render() {
         const size = normalizeDeprecatedTShirtSize(this.size) || '';
-        return (h(Host, { key: '72b9d71b2cb222fd9e0f0bd32f493cc72bd0e443', "aria-hidden": "true", class: {
+        return (h(Host, { key: 'c498a71856bb9fd4c511746b33318481cae0ab7c', "aria-hidden": "true", class: {
                 'is-filled': !this.svg && !this.src,
                 [`is-${this.color}`]: hasValue(this.color),
                 [`is-${size}`]: hasValue(this.size),
@@ -1036,7 +1036,7 @@ const Icon = class {
                 'has-shadow': this.shadow,
                 'is-disabled': this.disabled,
                 'is-invalid': this.invalid,
-            } }, h("div", { key: '3eacfe777c17e5ab80e66ccd60341e31eba11839', id: "inner", part: "inner", innerHTML: this.svgContent })));
+            } }, h("div", { key: '156b8c3453e656bc06549b1b4c4ed80ef70aa15e', id: "inner", part: "inner", innerHTML: this.svgContent })));
     }
     get el() { return getElement(this); }
 };
@@ -1214,7 +1214,7 @@ const Spinner = class {
                 }
                 else {
                     rOnLoad(async () => {
-                        import(/* @vite-ignore */ './spinner.animation-CP1wfHUl.js')
+                        import(/* @vite-ignore */ './spinner.animation-C2JtTvoK.js')
                             .then(module => {
                             this.animationFunction = module.animate;
                             resolve();
@@ -1300,14 +1300,14 @@ const Spinner = class {
      */
     render() {
         const ariaLabel = this.label || i18nDsSpinner[this.language].loading;
-        return (h(Host, { key: '7b874bab7e18c81e89e5bdbee35a9fcf51bb7328', role: "progressbar", "aria-label": ariaLabel, class: {
+        return (h(Host, { key: '97699a6dcb5b12459aeb6bbecac421a520ec7337', role: "progressbar", "aria-label": ariaLabel, class: {
                 'is-animated': this.animated,
                 'is-circle': this.variation === 'circle',
                 'is-sm': this.size === 'sm',
                 'is-inverted': this.inverted,
                 'is-label-right': hasValue(this.label) && this.labelPosition === 'right',
                 'is-label-bottom': hasValue(this.label) && this.labelPosition === 'bottom',
-            } }, h("div", { key: 'ef17ad7fa62b4b59f12f88c2e9376d6b5c517fe1' }, h("div", { key: '64a58d5c42136a6a076ed5f8eaeed06e90ba9e57', id: "inner", part: "inner", ref: el => (this.innerEl = el) })), hasValue(this.label) && h("span", { key: 'bc4582fe03d308023167b10818739622a0242ea9', part: "label" }, this.label)));
+            } }, h("div", { key: '5a9359ca8dada1131bd484b69c7e07f2e78834f4' }, h("div", { key: '4149b46e4b72b5943d72649d2aeafccdc7eb2d60', id: "inner", part: "inner", ref: el => (this.innerEl = el) })), hasValue(this.label) && h("span", { key: '4732e5723f369db046a2cc5ed154a82791399ebf', part: "label" }, this.label)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,20 +1,21 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { P as getAssetPath, D as registerInstance, J as createEvent, x as defaultConfig, F as h, I as getElement } from './index-DYOV_tWc.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-Byu4BzG4.js';
+import { P as getAssetPath, D as registerInstance, J as createEvent, x as defaultConfig, F as h, I as getElement } from './index-DxEN1zze.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-CoU9H0PW.js';
 import { i as inheritAttributes } from './attributes-B62ocg4Q.js';
-import { s as stopEventBubbling } from './form-control-g2Cf81YC.js';
-import { w as watchInvalidTextSlot } from './invalid-text-slot-Dcf7YMP0.js';
+import { s as stopEventBubbling, a as setFormValue } from './form-control-RKlnnjxO.js';
+import { w as watchInvalidTextSlot } from './invalid-text-slot-DamnLE0v.js';
 import { a as isEnterKey, b as isSpaceKey, c as isArrowDownKey, i as isEscapeKey, d as isTabKey, e as isArrowUpKey, f as isHomeKey, g as isEndKey } from './keyboard-BeR87vGa.js';
-import { F as Field } from './field.util-OTyuJ6iL.js';
+import { F as Field } from './field.util-DmVa8E0M.js';
 import { I as INPUT_COLORS } from './input.interfaces-BRYPu0SP.js';
-import { T as Type$1 } from './type-CZBrLp5X.js';
-import { O as OneOf } from './one-of-BExTRiXT.js';
-import { L as ListenToConfig } from './config.utils-CB-CXrKY.js';
+import { T as Type$1 } from './type-3Im_fSnq.js';
+import { O as OneOf } from './one-of-dTNN7cqg.js';
+import { L as ListenToConfig } from './config.utils-RtLdZ8k8.js';
+import './dom-969JOO-P.js';
 import './aria-DYfTMCkl.js';
 import './label.i18n-C7I7OlaM.js';
-import './create-validator-decorator-ZDmCDTEb.js';
+import './create-validator-decorator-Da-m3zPX.js';
 
 const i18nDsInputPhone = {
     de: {
@@ -5461,7 +5462,7 @@ const InputPhone = class {
         this.syncFormValue();
     }
     syncFormValue() {
-        this.internals.setFormValue(this.value);
+        setFormValue(this.internals, this.value);
     }
     eventDetail() {
         var _a;
@@ -5556,7 +5557,7 @@ const InputPhone = class {
         const selectedName = selected ? getCountryName(selected.code, this.language) : '';
         const pickerDisabled = this.disabled || this.readonly;
         const inputPlaceholder = this.placeholder || getExamplePlaceholder(this.resolvedCountry);
-        return (h(Field, { key: 'dda89804db28c680ccf96ba7ea13a9811eb1ae30', disabled: this.disabled, color: this.color, invalid: isInvalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, inputId: "input", cssClasses: { 'is-open': this.pickerOpen } }, h("button", { key: '53445efb17b9da9dd7f90dad9ade7dc624145fdf', id: "country-trigger", part: "country-trigger", type: "button", ref: el => (this.triggerEl = el), disabled: pickerDisabled, "aria-haspopup": "listbox", "aria-expanded": this.pickerOpen ? 'true' : 'false', "aria-controls": "country-list", "aria-labelledby": this.label ? 'label country-trigger-label' : 'country-trigger-label', onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, selected ? (h("img", { class: "flag", src: getFlagUrl(selected.code), alt: "", "aria-hidden": "true", draggable: false })) : (h("span", { class: "flag is-empty", "aria-hidden": "true" })), h("span", { key: '87ed5d98c47ff03854664e50e30e06c4a2466561', class: "calling-code" }, selected ? `+${selected.callingCode}` : ''), h("span", { key: '9cf5764cae9c574cc4bb44ce998f370489af4369', id: "country-trigger-label", class: "sr-only" }, this.triggerAccessibleName(selected, selectedName)), h("span", { key: '7740bce6549fc3423947947f68d7e8950baa440d', class: "chevron", "aria-hidden": "true" })), h("div", { key: 'a39265591bf6abba31b290344ece4590be85d49c', id: "input-segment" }, h("input", Object.assign({ key: 'a74e9d96424c0bbbb155246a2761559d4c731c5c', id: "input", part: "input", name: this.name, ref: el => (this.inputEl = el), type: "text", inputMode: "tel", autocomplete: "tel-national", "aria-describedby": "description", "aria-invalid": isInvalid ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: inputPlaceholder, value: this.displayValue, onInput: ev => this.handleInput(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev) }, this.inheritedAttributes))), h("div", { key: 'ce82e35225b8ba30ddf977745db26f9bff9bccfe', id: "popup", "aria-hidden": this.pickerOpen ? 'false' : 'true', inert: this.pickerOpen ? undefined : true }, h("div", { key: 'd2859f611710002643b1b75f9a09988010aeb98c', class: "filter" }, h("label", { key: '7d5fadfe32af18f7be597aadb38a463da8453a3f', class: "sr-only", htmlFor: "country-filter" }, i18n.filterCountries), h("input", { key: 'fa69e7e0673a9a8cf64a0b53ed4cf7e9f89990e4', id: "country-filter", ref: el => (this.filterEl = el), type: "text", autocomplete: "off", "aria-controls": "country-list", placeholder: i18n.filterCountries, value: this.filterQuery, onInput: ev => this.handleFilterInput(ev), onKeyDown: this.handleFilterKeyDown })), h("span", { key: 'e66d643c5fd4ef0908d3ca2949635cf4ca3349a4', id: "country-list-label", class: "sr-only" }, i18n.selectCountry), h("div", { key: '7e85529702180bbe46048104d9387875c1ccc219', id: "country-list", role: "listbox", tabIndex: 0, "aria-labelledby": "country-list-label", "aria-activedescendant": this.activeCode ? this.optionId(this.activeCode) : undefined }, this.pickerOpen && visible.length === 0 && h("div", { key: '9feb019423945faaa341c0d0d1961b495233137d', class: "no-results" }, i18n.noResults), this.pickerOpen &&
+        return (h(Field, { key: '6d0ceb775d5968899e7a9097c2700eba55e227bb', disabled: this.disabled, color: this.color, invalid: isInvalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, inputId: "input", cssClasses: { 'is-open': this.pickerOpen } }, h("button", { key: '63bd920ffa5d7165692ecad37b384e658826fac6', id: "country-trigger", part: "country-trigger", type: "button", ref: el => (this.triggerEl = el), disabled: pickerDisabled, "aria-haspopup": "listbox", "aria-expanded": this.pickerOpen ? 'true' : 'false', "aria-controls": "country-list", "aria-labelledby": this.label ? 'label country-trigger-label' : 'country-trigger-label', onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, selected ? (h("img", { class: "flag", src: getFlagUrl(selected.code), alt: "", "aria-hidden": "true", draggable: false })) : (h("span", { class: "flag is-empty", "aria-hidden": "true" })), h("span", { key: '01812f28d318b3e4d4bf3c7874125d9e2ab05311', class: "calling-code" }, selected ? `+${selected.callingCode}` : ''), h("span", { key: '9b89e40c8bc9d851aba73d2ed4e4ea830302d1cc', id: "country-trigger-label", class: "sr-only" }, this.triggerAccessibleName(selected, selectedName)), h("span", { key: '803aca7fe0090202616c0d577133a54bee9c6805', class: "chevron", "aria-hidden": "true" })), h("div", { key: '6019eb70d988b571232ce8342b8c359625655482', id: "input-segment" }, h("input", Object.assign({ key: '0d27c1811c44df9c65202c8f2aba52db968b9430', id: "input", part: "input", name: this.name, ref: el => (this.inputEl = el), type: "text", inputMode: "tel", autocomplete: "tel-national", "aria-describedby": "description", "aria-invalid": isInvalid ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: inputPlaceholder, value: this.displayValue, onInput: ev => this.handleInput(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev) }, this.inheritedAttributes))), h("div", { key: '823ed25901df39bd3c2217fbb4cf8dda8ebe6121', id: "popup", "aria-hidden": this.pickerOpen ? 'false' : 'true', inert: this.pickerOpen ? undefined : true }, h("div", { key: 'aa79fb85b8f30f3abe564f4614b41d0129ebc42e', class: "filter" }, h("label", { key: 'c07b482115a34bfe87e08c19eaceeb1a8a6437ed', class: "sr-only", htmlFor: "country-filter" }, i18n.filterCountries), h("input", { key: '4beee14c655b9ebfdea33fc31fe08d18c3746d1b', id: "country-filter", ref: el => (this.filterEl = el), type: "text", autocomplete: "off", "aria-controls": "country-list", placeholder: i18n.filterCountries, value: this.filterQuery, onInput: ev => this.handleFilterInput(ev), onKeyDown: this.handleFilterKeyDown })), h("span", { key: '84452743fc5c88032e48cd98388db6868d6b8487', id: "country-list-label", class: "sr-only" }, i18n.selectCountry), h("div", { key: 'bad57f20f2e2417d2bcfe1ddf3cd8731741e46dd', id: "country-list", role: "listbox", tabIndex: 0, "aria-labelledby": "country-list-label", "aria-activedescendant": this.activeCode ? this.optionId(this.activeCode) : undefined }, this.pickerOpen && visible.length === 0 && h("div", { key: '45044f4a00d65b80e59182daa14c0c9296b31e78', class: "no-results" }, i18n.noResults), this.pickerOpen &&
             visible.map(country => {
                 const name = getCountryName(country.code, this.language);
                 const selectedOption = country.code === this.resolvedCountry;
@@ -5572,7 +5573,7 @@ const InputPhone = class {
     get el() { return getElement(this); }
     static get watchers() { return {
         "value": [{
-                "valueChanged": 0
+                "valueChanged": 1
             }],
         "countries": [{
                 "countriesChanged": 0