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

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

@@ -1,14 +1,15 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { D as registerInstance, J as createEvent, x as defaultConfig, E as raf, 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 { s as stopEventBubbling } from './form-control-g2Cf81YC.js';
+import { D as registerInstance, J as createEvent, x as defaultConfig, E as raf, 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 { d as directChildren, b as byTagName } from './dom-969JOO-P.js';
+import { s as stopEventBubbling } from './form-control-RKlnnjxO.js';
 import { C as CAROUSEL_CONTROLS, a as CAROUSEL_VARIANTS } from './carousel.interfaces-BKyBMO1V.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 './create-validator-decorator-ZDmCDTEb.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 './create-validator-decorator-Da-m3zPX.js';
 
 const i18nDsCarousel = {
     de: {
@@ -379,7 +380,7 @@ const Carousel = class {
      * ─────────────────────────────────────────────────────
      */
     getItems() {
-        return Array.from(this.el.querySelectorAll(':scope > ds-carousel-item'));
+        return directChildren(this.el, byTagName('DS-CAROUSEL-ITEM'));
     }
     setup() {
         const items = this.getItems();
@@ -477,20 +478,20 @@ const Carousel = class {
         const isSlide = this.variant === 'slide';
         const showPagination = this.controls === 'dots';
         const showLargeArrows = this.controls === 'large';
-        const prevBtn = (h("button", { key: '5eaf6429d5f2b54f4acf58553add5f1a76f7b0db', class: "scroll-btn scroll-btn--prev", "aria-label": i18n.scrollLeft, tabIndex: -1, onClick: this.scrollPrev }, h("ds-icon", { key: '9f41191379950c8d3ea64171140ec13844767e90', name: "caret-left", size: "sm" })));
-        const nextBtn = (h("button", { key: '2d0b6973cae66152369b4a5e23935aed1d8f72a6', class: "scroll-btn scroll-btn--next", "aria-label": i18n.scrollRight, tabIndex: -1, onClick: this.scrollNext }, h("ds-icon", { key: 'c037e24cd31341ed69f547e3094f07f3a92b7b38', name: "caret-right", size: "sm" })));
-        const track = (h("div", { key: '924416faf8f8e46bdaa0512cab235a189b6ce589', class: { 'carousel-track': true, 'is-dragging': this.dragging }, part: "track", role: "region", "aria-label": this.label || i18n.scrollLeft, tabIndex: 0, onKeyDown: this.handleKeyDown, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp, ref: el => {
+        const prevBtn = (h("button", { key: 'd1d21c49f24301c539ba2046989d5ae879b8e8a0', class: "scroll-btn scroll-btn--prev", "aria-label": i18n.scrollLeft, tabIndex: -1, onClick: this.scrollPrev }, h("ds-icon", { key: '08a912c49af5033505ebbd4295c10a3f4cd8e33a', name: "caret-left", size: "sm" })));
+        const nextBtn = (h("button", { key: '6798cdf3403218a6342106d521f17907fff9cf51', class: "scroll-btn scroll-btn--next", "aria-label": i18n.scrollRight, tabIndex: -1, onClick: this.scrollNext }, h("ds-icon", { key: 'f47c79f57c8765d0897ce516be69ded5032efd50', name: "caret-right", size: "sm" })));
+        const track = (h("div", { key: 'd0234175394ffbe3c5c9a587c27d86200c533b4c', class: { 'carousel-track': true, 'is-dragging': this.dragging }, part: "track", role: "region", "aria-label": this.label || i18n.scrollLeft, tabIndex: 0, onKeyDown: this.handleKeyDown, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp, ref: el => {
                 this.trackEl = el;
-            } }, h("slot", { key: 'eb992c6f9f82c62dcbbfbcb8e967d2967fdde84c', onSlotchange: this.handleSlotChange })));
+            } }, h("slot", { key: 'fbefe08fe2fbb0c94e89883266a4e25105a0b91d', onSlotchange: this.handleSlotChange })));
         const atStart = this.activeIndex === 0;
         const atEnd = this.activeIndex === this.itemCount - 1;
-        return (h(Host, { key: '63bc8c4032b7b82b1f7253c763e514f75bbe2b69', class: {
+        return (h(Host, { key: 'dd21b056857b5ccf06439271ad1c61ad72216469', class: {
                 'is-slide': isSlide,
                 'is-tile': !isSlide,
                 'has-overflow': this.canScrollLeft || this.canScrollRight,
                 'can-scroll-left': this.canScrollLeft,
                 'can-scroll-right': this.canScrollRight,
-            } }, h("div", { key: '24803a8f4027b5a468a60e5997d2e64f8e1fe0ab', class: "carousel-outer" }, showLargeArrows && (isSlide ? !atStart && prevBtn : prevBtn), track, showLargeArrows && (isSlide ? !atEnd && nextBtn : nextBtn)), showPagination && (h("ds-pagination", { key: '7dbd19567181305dc6e1e0db984655d58ec14368', class: "pagination", variant: "dots", totalPages: this.itemCount, value: this.activeIndex + 1, textPrevious: i18n.scrollLeft, textNext: i18n.scrollRight, onDsChange: this.handlePaginationChange }))));
+            } }, h("div", { key: '43a0ba6d15f8623248e417bf1fd81062a0b6b6cf', class: "carousel-outer" }, showLargeArrows && (isSlide ? !atStart && prevBtn : prevBtn), track, showLargeArrows && (isSlide ? !atEnd && nextBtn : nextBtn)), showPagination && (h("ds-pagination", { key: '1d2e666e89517f07e3d121417043a1f182df77b8', class: "pagination", variant: "dots", totalPages: this.itemCount, value: this.activeIndex + 1, textPrevious: i18n.scrollLeft, textNext: i18n.scrollRight, onDsChange: this.handlePaginationChange }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ds-checkbox-group.entry.js

@@ -1,22 +1,23 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { D as registerInstance, J as createEvent, x as defaultConfig, j as shallowReady, h as isDescendant, K as hasTagName, 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 { F as Field } from './field.util-OTyuJ6iL.js';
-import { a as areArraysEqual } from './array-DomMhGJQ.js';
-import { s as stopEventBubbling } from './form-control-g2Cf81YC.js';
-import { h as hasValue } from './has-value-D7lYQNBK.js';
-import { w as watchInvalidTextSlot } from './invalid-text-slot-Dcf7YMP0.js';
+import { D as registerInstance, J as createEvent, x as defaultConfig, j as shallowReady, h as isDescendant, K as hasTagName, 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 { F as Field } from './field.util-DmVa8E0M.js';
+import { a as areArraysEqual } from './array-BuADVVBi.js';
+import { a as setFormValue, s as stopEventBubbling } from './form-control-RKlnnjxO.js';
+import { h as hasValue } from './has-value-uy_-jH0L.js';
+import { w as watchInvalidTextSlot } from './invalid-text-slot-DamnLE0v.js';
 import { I as INPUT_COLORS } from './input.interfaces-BRYPu0SP.js';
 import { b as CHECKBOX_GROUP_COLUMNS, C as CHECKBOX_LABEL_POSITIONS, a as CHECKBOX_TILE_COLORS } from './checkbox.interfaces-CdOIXQj9.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 './aria-DYfTMCkl.js';
 import './label.i18n-C7I7OlaM.js';
-import './isNil-DWALHtG8.js';
-import './create-validator-decorator-ZDmCDTEb.js';
+import './isNil-DxRbUK54.js';
+import './create-validator-decorator-Da-m3zPX.js';
+import './dom-969JOO-P.js';
 
 const checkboxGroupHostCss = () => `:host{--_form-label-color:var(--form-label-color, var(--mod-form-label-color, var(--ds-form-default-label-color)));--_form-label-family:var(--form-label-family, var(--mod-form-label-family, var(--ds-form-default-label-typo-font-family)));--_form-label-weight:var(--form-label-weight, var(--mod-form-label-weight, var(--ds-form-default-label-typo-font-weight)));--_form-label-line-height:var(--form-label-line-height, var(--mod-form-label-line-height, var(--ds-form-default-label-typo-line-height)));--_form-label-size:var(--form-label-size, var(--mod-form-label-size, var(--ds-form-default-label-typo-font-size)));--_form-description-color:var(--form-description-color, var(--mod-form-description-color, var(--ds-form-default-description-color)));--_form-description-family:var(--form-description-family, var(--mod-form-description-family, var(--ds-form-default-description-typo-font-family)));--_form-description-weight:var(--form-description-weight, var(--mod-form-description-weight, var(--ds-form-default-description-typo-font-weight)));--_form-description-line-height:var(--form-description-line-height, var(--mod-form-description-line-height, var(--ds-form-default-description-typo-line-height)));--_form-description-size:var(--form-description-size, var(--mod-form-description-size, var(--ds-form-default-description-typo-font-size)))}:host{display:block}:host #inner{position:relative;display:grid;gap:.25rem}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host legend{-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 #container{display:grid;gap:.25rem}@media screen and (min-width: 769px){:host #container{display:-ms-flexbox;display:flex;gap:1rem}}:host(.is-vertical) #container{display:grid;gap:.25rem}:host(.is-danger){--mod-checkbox-group-description-color:var(--ds-form-danger-description-color)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #input{pointer-events:none;cursor:default}:host(.is-disabled){--mod-checkbox-group-label-color:var(--ds-form-disabled-label-color);--mod-checkbox-group-description-color:var(--ds-form-disabled-description-color)}:host(.is-tile) #container{-ms-flex-wrap:wrap;flex-wrap:wrap}`;
 
@@ -178,7 +179,7 @@ const CheckboxGroup = class {
             this.hasInvalidTextSlotContent = hasContent;
         });
         this.passDownAttributes();
-        this.internals.setFormValue(this.internalValue.join(','));
+        setFormValue(this.internals, this.internalValue.join(','));
     }
     disconnectedCallback() {
         var _a;
@@ -305,7 +306,7 @@ const CheckboxGroup = class {
         if (!areArraysEqual(this.internalValue, newValue)) {
             this.internalValue = [...newValue];
             this.dsChange.emit(this.internalValue);
-            this.internals.setFormValue(this.internalValue.join(','));
+            setFormValue(this.internals, this.internalValue.join(','));
         }
     }
     /**
@@ -313,10 +314,10 @@ const CheckboxGroup = class {
      * ─────────────────────────────────────────────────────
      */
     render() {
-        return (h(Field, { key: 'f37b6a540ca8612b689c1b3e2bb12d887db31cdf', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid || this.hasInvalidTextSlotContent, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
+        return (h(Field, { key: '73e666bbfbab0252f67b1537d0abf61e926876f0', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid || this.hasInvalidTextSlotContent, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
                 'is-vertical': this.vertical,
                 'is-tile': this.tile,
-            } }, h("slot", { key: 'c26aacb9d4bf3bd8ed283877c190bbde40ed7b26', onSlotchange: this.handleSlotChange })));
+            } }, h("slot", { key: '4e3cbeb31602a5b1144cbb8400bb4f4002b621ae', onSlotchange: this.handleSlotChange })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

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

@@ -1,15 +1,16 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { D as registerInstance, J as createEvent, 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, J as createEvent, 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 inheritAttributes } from './attributes-B62ocg4Q.js';
-import { h as hasValue } from './has-value-D7lYQNBK.js';
+import { a as setFormValue } from './form-control-RKlnnjxO.js';
+import { h as hasValue } from './has-value-uy_-jH0L.js';
 import { C as CHECKBOX_LABEL_POSITIONS, a as CHECKBOX_TILE_COLORS, b as CHECKBOX_GROUP_COLUMNS } from './checkbox.interfaces-CdOIXQj9.js';
-import { T as Type } from './type-CZBrLp5X.js';
-import { R as Required } from './required-DIwBjh81.js';
-import { O as OneOf } from './one-of-BExTRiXT.js';
-import './create-validator-decorator-ZDmCDTEb.js';
+import { T as Type } from './type-3Im_fSnq.js';
+import { R as Required } from './required-CSFFkdXm.js';
+import { O as OneOf } from './one-of-dTNN7cqg.js';
+import './create-validator-decorator-Da-m3zPX.js';
 
 const checkboxHostCss = () => `:host{--_checkbox-gap:var(--checkbox-gap, var(--mod-checkbox-gap, 0.5rem));--_checkbox-min-height:var(--checkbox-min-height, var(--mod-checkbox-min-height, 3rem));--_checkbox-label-base-color:var(--checkbox-label-base-color, var(--mod-checkbox-label-base-color, inherit));--_checkbox-label-hover-color:var(--checkbox-label-hover-color, var(--mod-checkbox-label-hover-color, var(--ds-global-color-sky-5)));--_checkbox-label-active-color:var(--checkbox-label-active-color, var(--mod-checkbox-label-active-color, var(--ds-global-color-primary-6)));--_checkbox-label-disabled-color:var(--checkbox-label-disabled-color, var(--mod-checkbox-label-disabled-color, var(--ds-checkbox-label-color-disabled)));--_checkbox-size:var(--checkbox-size, var(--mod-checkbox-size, 1.5rem));--_checkbox-border-width:var(--checkbox-border-width, var(--mod-checkbox-border-width, var(--ds-alias-border-width-base)));--_checkbox-radius:var(--checkbox-radius, var(--mod-checkbox-radius, var(--ds-alias-radius-base)));--_checkbox-tile-radius:var(--checkbox-tile-radius, var(--mod-checkbox-tile-radius, var(--ds-alias-radius-base)));--_checkbox-tile-p:var(--checkbox-tile-p, var(--mod-checkbox-tile-p, 1rem));--_checkbox-tile-border-width:var(--checkbox-tile-border-width, var(--mod-checkbox-tile-border-width, var(--ds-alias-border-width-base)));--_checkbox-tile-base-background-color:var(--checkbox-tile-base-background-color, var(--mod-checkbox-tile-base-background-color, inherit));--_checkbox-tile-base-border-color:var(--checkbox-tile-base-border-color, var(--mod-checkbox-tile-base-border-color, var(--ds-global-color-grey-3)));--_checkbox-tile-hover-background-color:var(--checkbox-tile-hover-background-color, var(--mod-checkbox-tile-hover-background-color, var(--ds-global-color-grey-0)));--_checkbox-tile-hover-border-color:var(--checkbox-tile-hover-border-color, var(--mod-checkbox-tile-hover-border-color, var(--ds-global-color-sky-5)));--_checkbox-tile-active-background-color:var(--checkbox-tile-active-background-color, var(--mod-checkbox-tile-active-background-color, var(--ds-global-color-grey-0)));--_checkbox-tile-active-border-color:var(--checkbox-tile-active-border-color, var(--mod-checkbox-tile-active-border-color, var(--ds-global-color-primary-6)));--_checkbox-unchecked-base-color-background:var(--checkbox-unchecked-base-color-background, var(--mod-checkbox-unchecked-base-color-background, transparent));--_checkbox-unchecked-base-color-border:var(--checkbox-unchecked-base-color-border, var(--mod-checkbox-unchecked-base-color-border, var(--ds-global-color-primary-5)));--_checkbox-unchecked-hover-color-background:var(--checkbox-unchecked-hover-color-background, var(--mod-checkbox-unchecked-hover-color-background, var(--ds-global-color-grey-1)));--_checkbox-unchecked-hover-color-border:var(--checkbox-unchecked-hover-color-border, var(--mod-checkbox-unchecked-hover-color-border, var(--ds-global-color-sky-5)));--_checkbox-unchecked-active-color-background:var(--checkbox-unchecked-active-color-background, var(--mod-checkbox-unchecked-active-color-background, var(--ds-global-color-grey-2)));--_checkbox-unchecked-active-color-border:var(--checkbox-unchecked-active-color-border, var(--mod-checkbox-unchecked-active-color-border, var(--ds-global-color-primary-6)));--_checkbox-unchecked-disabled-color-background:var(--checkbox-unchecked-disabled-color-background, var(--mod-checkbox-unchecked-disabled-color-background, var(--ds-checkbox-unchecked-color-disabled-background)));--_checkbox-checked-base-color-background:var(--checkbox-checked-base-color-background, var(--mod-checkbox-checked-base-color-background, var(--ds-global-color-primary-5)));--_checkbox-checked-base-color-border:var(--checkbox-checked-base-color-border, var(--mod-checkbox-checked-base-color-border, var(--ds-global-color-primary-5)));--_checkbox-checked-base-color-icon:var(--checkbox-checked-base-color-icon, var(--mod-checkbox-checked-base-color-icon, var(--ds-global-color-white)));--_checkbox-checked-hover-color-background:var(--checkbox-checked-hover-color-background, var(--mod-checkbox-checked-hover-color-background, var(--ds-global-color-sky-5)));--_checkbox-checked-hover-color-border:var(--checkbox-checked-hover-color-border, var(--mod-checkbox-checked-hover-color-border, var(--ds-global-color-sky-5)));--_checkbox-checked-active-color-background:var(--checkbox-checked-active-color-background, var(--mod-checkbox-checked-active-color-background, var(--ds-global-color-primary-6)));--_checkbox-checked-active-color-border:var(--checkbox-checked-active-color-border, var(--mod-checkbox-checked-active-color-border, var(--ds-global-color-primary-6)))}:host{display:inline-block;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;outline:none}label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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;-ms-flex-align:center;align-items:center;gap:var(--_checkbox-gap);cursor:pointer;user-select:none;color:var(--_checkbox-label-base-color);font-family:var(--ds-alias-text-family-text);line-height:var(--ds-alias-text-line-height-text);padding-top:.25rem;padding-bottom:.25rem;min-height:var(--_checkbox-min-height)}@media (hover: hover)and (pointer: fine){label:hover{color:var(--_checkbox-label-hover-color)}}label:active{color:var(--_checkbox-label-active-color)}:host input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-flex:none;flex:none;display:-ms-inline-flexbox;display:inline-flex;width:var(--_checkbox-size);height:var(--_checkbox-size);background:var(--_checkbox-unchecked-base-color-background);border:var(--_checkbox-border-width) solid var(--_checkbox-unchecked-base-color-border);border-radius:var(--_checkbox-radius);vertical-align:top;cursor:pointer;outline:none;-webkit-transition:background .3s ease-in-out,border-color .3s ease-in-out;transition:background .3s ease-in-out,border-color .3s ease-in-out}:host input[type=checkbox]:disabled{cursor:default}@media (hover: hover)and (pointer: fine){:host input[type=checkbox]:focus-visible{-webkit-box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important;box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important}}:host input[type=checkbox]:not(:disabled):hover,:host:hover input[type=checkbox]:not(:disabled):not(:checked){background:var(--_checkbox-unchecked-hover-color-background);border-color:var(--_checkbox-unchecked-hover-color-border)}:host input[type=checkbox]:not(:disabled):active,:host:active input[type=checkbox]:not(:disabled):not(:checked){background:var(--_checkbox-unchecked-active-color-background);border-color:var(--_checkbox-unchecked-active-color-border)}:host input[type=checkbox]:checked{background:var(--_checkbox-checked-base-color-background);border-color:var(--_checkbox-checked-base-color-border)}:host input[type=checkbox]:checked:not(:disabled):hover,:host:hover input[type=checkbox]:checked:not(:disabled){background:var(--_checkbox-checked-hover-color-background);border-color:var(--_checkbox-checked-hover-color-border)}:host input[type=checkbox]:checked:not(:disabled):active,:host:active input[type=checkbox]:checked:not(:disabled){background:var(--_checkbox-checked-active-color-background);border-color:var(--_checkbox-checked-active-color-border)}:host input[type=checkbox]::after{display:block;content:"";width:100%;height:100%;-webkit-mask-size:70%;mask-size:70%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-transition:opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;transition:opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;transition:opacity .3s ease-in-out,transform .3s ease-in-out;transition:opacity .3s ease-in-out,transform .3s ease-in-out,-webkit-transform .3s ease-in-out;opacity:0;-webkit-transform:translateY(-0.5rem);transform:translateY(-0.5rem)}:host input[type=checkbox]:checked::after{background-color:var(--_checkbox-checked-base-color-icon);opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-mask-image:url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>");mask-image:url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>")}:host(.is-invalid:not(.is-disabled)){--mod-checkbox-label-base-color:var(--ds-global-color-danger-4);--mod-checkbox-label-hover-color:var(--ds-global-color-danger-5);--mod-checkbox-label-active-color:var(--ds-global-color-danger-6);--mod-checkbox-unchecked-base-color-background:transparent;--mod-checkbox-unchecked-base-color-border:var(--ds-alias-border-color-danger);--mod-checkbox-unchecked-hover-color-background:var(--ds-global-color-grey-2);--mod-checkbox-unchecked-hover-color-border:var(--ds-alias-border-color-danger-hover);--mod-checkbox-unchecked-active-color-background:var(--ds-global-color-grey-2);--mod-checkbox-unchecked-active-color-border:var(--ds-alias-border-color-danger-active);--mod-checkbox-checked-base-color-background:var(--ds-alias-border-color-danger);--mod-checkbox-checked-base-color-border:var(--ds-alias-border-color-danger);--mod-checkbox-checked-hover-color-background:var(--ds-alias-border-color-danger-hover);--mod-checkbox-checked-hover-color-border:var(--ds-alias-border-color-danger-hover);--mod-checkbox-checked-active-color-background:var(--ds-alias-border-color-danger-active);--mod-checkbox-checked-active-color-border:var(--ds-alias-border-color-danger-active)}:host(.is-disabled){cursor:default;pointer-events:none;--mod-checkbox-label-base-color:var(--_checkbox-label-disabled-color);--mod-checkbox-label-hover-color:var(--_checkbox-label-disabled-color);--mod-checkbox-label-active-color:var(--_checkbox-label-disabled-color);--mod-checkbox-unchecked-base-color-background:var(--_checkbox-unchecked-disabled-color-background);--mod-checkbox-unchecked-base-color-border:var(--ds-alias-border-color-disabled);--mod-checkbox-checked-base-color-background:var(--ds-alias-border-color-disabled);--mod-checkbox-checked-base-color-border:var(--ds-alias-border-color-disabled)}:host(.has-label-left) label{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.has-label-top) label{-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.is-tile){display:block;-ms-flex:0 0 100%;flex:0 0 100%}:host(.is-tile) label{position:relative;width:100%;height:100%;padding:var(--_checkbox-tile-p);border-style:solid;border-width:var(--_checkbox-tile-border-width);border-radius:var(--_checkbox-tile-radius);border-color:var(--_checkbox-tile-base-border-color);background:var(--_checkbox-tile-base-background-color)}@media (hover: hover)and (pointer: fine){:host(.is-tile) label:hover{border-color:var(--_checkbox-tile-hover-border-color);background:var(--_checkbox-tile-hover-background-color)}}:host(.is-tile) label:active{border-color:var(--_checkbox-tile-active-border-color);background:var(--_checkbox-tile-active-background-color)}:host(.is-tile.is-checked){--mod-checkbox-tile-base-border-color:var(--_checkbox-checked-base-color-background)}:host(.is-tile.hide-trigger) input[type=checkbox]{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}@media (hover: hover)and (pointer: fine){:host(.is-tile.hide-trigger) label:has(input[type=checkbox]:focus-visible){-webkit-box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important;box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important}}#hint{display:contents}:host(.is-tile) #hint{display:block;position:absolute;top:var(--_checkbox-tile-p);right:var(--_checkbox-tile-p)}:host(.is-tile.hide-trigger.is-checked){--mod-checkbox-tile-base-background-color:var(--ds-global-color-primary-1);--mod-checkbox-tile-hover-background-color:var(--ds-global-color-primary-1);--mod-checkbox-tile-active-background-color:var(--ds-global-color-primary-1)}:host(.is-tile.has-tile-green.is-checked){--mod-checkbox-tile-base-background-color:var(--ds-global-color-green-1);--mod-checkbox-tile-hover-background-color:var(--ds-global-color-green-1);--mod-checkbox-tile-active-background-color:var(--ds-global-color-green-1)}:host(.is-tile.has-tile-red.is-checked){--mod-checkbox-tile-base-background-color:var(--ds-global-color-red-1);--mod-checkbox-tile-hover-background-color:var(--ds-global-color-red-1);--mod-checkbox-tile-active-background-color:var(--ds-global-color-red-1)}:host(.is-tile.has-tile-yellow.is-checked){--mod-checkbox-tile-base-background-color:var(--ds-global-color-yellow-1);--mod-checkbox-tile-hover-background-color:var(--ds-global-color-yellow-1);--mod-checkbox-tile-active-background-color:var(--ds-global-color-yellow-1)}:host(.is-tile.has-tile-purple.is-checked){--mod-checkbox-tile-base-background-color:var(--ds-global-color-purple-1);--mod-checkbox-tile-hover-background-color:var(--ds-global-color-purple-1);--mod-checkbox-tile-active-background-color:var(--ds-global-color-purple-1)}:host(.is-tile.has-tile-green){--mod-brand-icon-color-level-1:var(--ds-brand-icon-color-green-level1);--mod-brand-icon-color-level-2:var(--ds-brand-icon-color-green-level2);--mod-brand-icon-color-level-3:var(--ds-brand-icon-color-green-level3);--mod-brand-icon-color-background:var(--ds-brand-icon-color-green-background)}:host(.is-tile.has-tile-red){--mod-brand-icon-color-level-1:var(--ds-brand-icon-color-red-level1);--mod-brand-icon-color-level-2:var(--ds-brand-icon-color-red-level2);--mod-brand-icon-color-level-3:var(--ds-brand-icon-color-red-level3);--mod-brand-icon-color-background:var(--ds-brand-icon-color-red-background)}:host(.is-tile.has-tile-yellow){--mod-brand-icon-color-level-1:var(--ds-brand-icon-color-yellow-level1);--mod-brand-icon-color-level-2:var(--ds-brand-icon-color-yellow-level2);--mod-brand-icon-color-level-3:var(--ds-brand-icon-color-yellow-level3);--mod-brand-icon-color-background:var(--ds-brand-icon-color-yellow-background)}:host(.is-tile.has-tile-purple){--mod-brand-icon-color-level-1:var(--ds-brand-icon-color-purple-level1);--mod-brand-icon-color-level-2:var(--ds-brand-icon-color-purple-level2);--mod-brand-icon-color-level-3:var(--ds-brand-icon-color-purple-level3);--mod-brand-icon-color-background:var(--ds-brand-icon-color-purple-background)}:host(.is-tile.is-disabled){--icon-brand-color:var(--ds-global-color-grey-5)}:host(.is-tile.is-invalid){--mod-checkbox-tile-hover-background-color:var(--ds-global-color-danger-1);--mod-checkbox-tile-active-background-color:var(--ds-global-color-danger-1);--mod-checkbox-tile-hover-border-color:var(--ds-global-color-danger-5);--mod-checkbox-tile-active-border-color:var(--ds-global-color-danger-6)}:host(.is-tile.is-invalid) label{--icon-brand-color:var(--ds-global-color-danger-4)}@media (hover: hover)and (pointer: fine){:host(.is-tile.is-invalid) label:hover{--icon-brand-color:var(--ds-global-color-danger-5)}}:host(.is-tile.is-invalid) label:active{--icon-brand-color:var(--ds-global-color-danger-6)}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2){-ms-flex:0 0 calc(50% - var(--ds-device-space-base)*1/2);flex:0 0 calc(50% - var(--ds-device-space-base)*1/2)}:host(.is-tile.has-cols-3){-ms-flex:0 0 calc(33.3333333333% - var(--ds-device-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-device-space-base)*2/3)}:host(.is-tile.has-cols-4){-ms-flex:0 0 calc(25% - var(--ds-device-space-base)*3/4);flex:0 0 calc(25% - var(--ds-device-space-base)*3/4)}}@media screen and (max-width: 768px){:host(.is-tile.has-cols-2-mobile){-ms-flex:0 0 calc(50% - var(--ds-device-space-base)*1/2);flex:0 0 calc(50% - var(--ds-device-space-base)*1/2)}:host(.is-tile.has-cols-3-mobile){-ms-flex:0 0 calc(33.3333333333% - var(--ds-device-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-device-space-base)*2/3)}:host(.is-tile.has-cols-4-mobile){-ms-flex:0 0 calc(25% - var(--ds-device-space-base)*3/4);flex:0 0 calc(25% - var(--ds-device-space-base)*3/4)}}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2-tablet){-ms-flex:0 0 calc(50% - var(--ds-device-space-base)*1/2);flex:0 0 calc(50% - var(--ds-device-space-base)*1/2)}:host(.is-tile.has-cols-3-tablet){-ms-flex:0 0 calc(33.3333333333% - var(--ds-device-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-device-space-base)*2/3)}:host(.is-tile.has-cols-4-tablet){-ms-flex:0 0 calc(25% - var(--ds-device-space-base)*3/4);flex:0 0 calc(25% - var(--ds-device-space-base)*3/4)}}@media screen and (min-width: 1024px){:host(.is-tile.has-cols-2-desktop){-ms-flex:0 0 calc(50% - var(--ds-device-space-base)*1/2);flex:0 0 calc(50% - var(--ds-device-space-base)*1/2)}:host(.is-tile.has-cols-3-desktop){-ms-flex:0 0 calc(33.3333333333% - var(--ds-device-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-device-space-base)*2/3)}:host(.is-tile.has-cols-4-desktop){-ms-flex:0 0 calc(25% - var(--ds-device-space-base)*3/4);flex:0 0 calc(25% - var(--ds-device-space-base)*3/4)}}`;
 
@@ -103,7 +104,7 @@ const Checkbox = class {
         this.handleChange = (ev) => {
             this.checked = ev.target.checked;
             this.dsChange.emit(this.checked);
-            this.internals.setFormValue(this.checked ? this.value : null);
+            setFormValue(this.internals, this.checked ? this.value : null);
         };
         this.handleClick = (ev) => {
             var _a, _b, _c;
@@ -130,7 +131,7 @@ const Checkbox = class {
             (_c = this.nativeInput) === null || _c === void 0 ? void 0 : _c.focus();
             this.checked = !this.checked;
             this.dsChange.emit(this.checked);
-            this.internals.setFormValue(this.checked ? this.value : null);
+            setFormValue(this.internals, this.checked ? this.value : null);
         };
         this.handleFocus = (ev) => {
             if (this.disabled || this.readonly)
@@ -154,10 +155,10 @@ const Checkbox = class {
      */
     connectedCallback() {
         this.initialValue = this.checked;
-        this.internals.setFormValue(this.checked ? this.value : null);
+        setFormValue(this.internals, this.checked ? this.value : null);
     }
     componentWillLoad() {
-        this.internals.setFormValue(this.checked ? this.value : null);
+        setFormValue(this.internals, this.checked ? this.value : null);
         this.inheritAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
     }
     /**
@@ -182,7 +183,7 @@ const Checkbox = class {
      * ─────────────────────────────────────────────────────
      */
     render() {
-        return (h(Host, { key: '7dc441b7f630f5a0b91719a2281ee341d15e3e52', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
+        return (h(Host, { key: '6e0bd92a3acc0364daab05942f040271d77f3ca5', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
                 'is-disabled': this.disabled || this.readonly,
                 'is-invalid': this.invalid,
                 'is-checked': this.checked,
@@ -194,7 +195,7 @@ const Checkbox = class {
                 [`has-cols-${this.cols}`]: this.tile && this.cols > 1,
                 [`has-cols-${this.colsTablet}-tablet`]: this.tile && this.colsTablet > 1,
                 [`has-cols-${this.colsMobile}-mobile`]: this.tile && this.colsMobile > 1,
-            }, onClick: this.handleClick }, h("label", { key: 'ace06ccccb4e95be76d73821ad2db66d4f2ca899', id: "label", part: "label" }, h("input", Object.assign({ key: '2e32e208e7b8c37d01fd8a24783ff93c2ad42267', type: "checkbox", part: "input", id: this.inputId, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, "aria-invalid": this.invalid ? 'true' : null, onChange: ev => this.handleChange(ev), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: inputEl => (this.nativeInput = inputEl) }, this.inheritAttributes)), h("div", { key: '866ea48e894130680479c89be08af5caf2c914a7', id: "slot", part: "slot" }, h("slot", { key: 'ef8b3e60f98a2fc29b241b8075cbdddc2810a1aa' }, this.label)), this.hasHint() && (h("div", { key: 'da68dd08802ef6a60c85a45a35b8198c605df3b7', id: "hint", part: "hint" }, h("slot", { key: '5f1f53934c6b651139f722f8ba0ad664b7f847e3', name: "hint" }))))));
+            }, onClick: this.handleClick }, h("label", { key: '7498403fe53342c52d8f81bd860ba70379f017a7', id: "label", part: "label" }, h("input", Object.assign({ key: 'a4c135eea49e823d9c7b60a605f0306d0ca5e11e', type: "checkbox", part: "input", id: this.inputId, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, "aria-invalid": this.invalid ? 'true' : null, onChange: ev => this.handleChange(ev), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: inputEl => (this.nativeInput = inputEl) }, this.inheritAttributes)), h("div", { key: '284ea952e032ae3f408e48318eb0f38d2a15c5ad', id: "slot", part: "slot" }, h("slot", { key: '06b7fef64aa19747c1093f2d4044cfdaa492f61d' }, this.label)), this.hasHint() && (h("div", { key: 'efc62239bc1114e2efe7d666651db2e6e2300126', id: "hint", part: "hint" }, h("slot", { key: '819aba03a1502a97b6d43ab5b7d5a7c98dc5dc07', name: "hint" }))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

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

@@ -1,13 +1,13 @@
 /*!
  * (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 { h as hasValue } from './has-value-D7lYQNBK.js';
-import { O as OneOf } from './one-of-BExTRiXT.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';
+import { h as hasValue } from './has-value-uy_-jH0L.js';
+import { O as OneOf } from './one-of-dTNN7cqg.js';
 import { n as normalizeDeprecatedTShirtSize } from './t-shirt-DR5LIaCn.js';
-import { T as Type } from './type-CZBrLp5X.js';
-import './create-validator-decorator-ZDmCDTEb.js';
+import { T as Type } from './type-3Im_fSnq.js';
+import './create-validator-decorator-Da-m3zPX.js';
 
 const STACK_LAYOUTS = ['horizontal', 'vertical', 'horizontal-reverse', 'vertical-reverse'];
 const STACK_SPACES = ['auto', 'none', '2xs', 'xs', 'sm', 'base', 'md', 'lg', 'xl', 'xxl'];
@@ -65,14 +65,14 @@ const Content = class {
                 direction = 'row-reverse';
             }
         }
-        return (h(Host, { key: '9cfefab43b15ea09bb3002b1d6a59995c061f72e', class: {
+        return (h(Host, { key: '9db1ada951bdf32a045b624204f528d9b815b402', class: {
                 'ds-stack-content': true,
                 'as-row': direction === 'row',
                 'as-col': direction === 'column',
                 [`align-${alignValue}`]: align || alignment,
                 [`text-${this.textAlign}`]: hasValue(this.textAlign),
                 [`has-space-${this.space}`]: hasValue(this.space),
-            } }, h("slot", { key: 'eefac82202fc3210dd14c0c9c8470ea8525bb490' })));
+            } }, h("slot", { key: 'abc5e0b224522a742635ce58f701c55b8bf2f65a' })));
     }
     get el() { return getElement(this); }
 };
@@ -150,7 +150,7 @@ const Stack = class {
         if (this.alignment) {
             alignValue = this.alignment.split(' ').join('-');
         }
-        return (h(Host, { key: '73884ae9532b20df0e384a66bd4a67b79d0bae4a', class: {
+        return (h(Host, { key: '9d2f5fd3de8f6cf59064882572af921214b1e046', class: {
                 'ds-stack': true,
                 'as-row': this.direction === 'row',
                 'as-col': this.direction === 'column',
@@ -163,7 +163,7 @@ const Stack = class {
                 [`p-${p}`]: hasValue(this.p),
                 [`px-${px}`]: hasValue(this.px),
                 [`py-${py}`]: hasValue(this.py),
-            } }, h("slot", { key: '30047db44964b8f2782a759e4ebf192a2daf6688' })));
+            } }, h("slot", { key: '1dfe4af03e413819e9f0091fed1045806e2ea858' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,16 +1,17 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { D as registerInstance, J as createEvent, x as defaultConfig, L as rIC, M as debounceEvent, 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 { D as registerInstance, J as createEvent, x as defaultConfig, L as rIC, M as debounceEvent, 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 { i as isValueEmpty } from './create-validator-decorator-ZDmCDTEb.js';
+import { a as setFormValue } from './form-control-RKlnnjxO.js';
+import { i as isValueEmpty } from './create-validator-decorator-Da-m3zPX.js';
 import { f as formatLocaleNumber } from './number-B08yyDMo.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 } 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 './aria-DYfTMCkl.js';
 import './label.i18n-C7I7OlaM.js';
 
@@ -1105,9 +1106,11 @@ function stepMinus(value, step) {
     return new Big(value).minus(step).toNumber();
 }
 
-const counterHostCss = () => `:host{--_form-field-gap:var(--form-field-gap, var(--mod-form-field-gap, 0.25rem));--_form-label-color:var(--form-label-color, var(--mod-form-label-color, var(--ds-form-default-label-color)));--_form-label-family:var(--form-label-family, var(--mod-form-label-family, var(--ds-form-default-label-typo-font-family)));--_form-label-weight:var(--form-label-weight, var(--mod-form-label-weight, var(--ds-form-default-label-typo-font-weight)));--_form-label-line-height:var(--form-label-line-height, var(--mod-form-label-line-height, var(--ds-form-default-label-typo-line-height)));--_form-label-size:var(--form-label-size, var(--mod-form-label-size, var(--ds-form-default-label-typo-font-size)));--_form-description-color:var(--form-description-color, var(--mod-form-description-color, var(--ds-form-default-description-color)));--_form-description-family:var(--form-description-family, var(--mod-form-description-family, var(--ds-form-default-description-typo-font-family)));--_form-description-weight:var(--form-description-weight, var(--mod-form-description-weight, var(--ds-form-default-description-typo-font-weight)));--_form-description-line-height:var(--form-description-line-height, var(--mod-form-description-line-height, var(--ds-form-default-description-typo-line-height)));--_form-description-size:var(--form-description-size, var(--mod-form-description-size, var(--ds-form-default-description-typo-font-size)));--_counter-gap:var(--counter-gap, var(--mod-counter-gap, 0.5rem));--_counter-value-min-width:var(--counter-value-min-width, var(--mod-counter-value-min-width, 3rem));--_counter-value-font-weight:var(--counter-value-font-weight, var(--mod-counter-value-font-weight, var(--ds-alias-text-weight-bold)));--_counter-value-font-family:var(--counter-value-font-family, var(--mod-counter-value-font-family, var(--ds-alias-text-family-text)));--_counter-value-color:var(--counter-value-color, var(--mod-counter-value-color, var(--ds-form-default-label-color)))}: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}: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{display:block}:host #counter{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;gap:var(--_counter-gap)}:host [part=value]{min-width:var(--_counter-value-min-width);text-align:center;font-weight:var(--_counter-value-font-weight);font-family:var(--_counter-value-font-family);color:var(--_counter-value-color);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.is-danger){--mod-form-description-color:var(--ds-form-danger-description-color);--mod-counter-value-color:var(--ds-alias-text-color-danger)}:host(.is-success){--mod-form-description-color:var(--ds-form-success-description-color)}:host(.is-warning){--mod-form-description-color:var(--ds-form-warning-description-color)}:host(.is-disabled){--mod-form-label-color:var(--ds-form-disabled-label-color);--mod-form-description-color:var(--ds-form-disabled-description-color);--mod-counter-value-color:var(--ds-form-disabled-label-color)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #counter,:host(.is-disabled) [part=value]{pointer-events:none;cursor:default}`;
+const counterHostCss = () => `: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-default-container-background)));--_form-container-border:var(--form-container-border, var(--mod-form-container-border, var(--ds-form-default-container-border)));--_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-hover-container-background)));--_form-container-active-background:var(--form-container-active-background, var(--mod-form-container-active-background, var(--ds-form-active-container-background)));--_form-container-focus-background:var(--form-container-focus-background, var(--mod-form-container-focus-background, var(--ds-form-focus-container-background)));--_form-container-hover-border:var(--form-container-hover-border, var(--mod-form-container-hover-border, var(--ds-form-hover-container-border)));--_form-container-active-border:var(--form-container-active-border, var(--mod-form-container-active-border, var(--ds-form-active-container-border)));--_form-container-focus-border:var(--form-container-focus-border, var(--mod-form-container-focus-border, var(--ds-form-focus-container-border)));--_form-label-color:var(--form-label-color, var(--mod-form-label-color, var(--ds-form-default-label-color)));--_form-label-family:var(--form-label-family, var(--mod-form-label-family, var(--ds-form-default-label-typo-font-family)));--_form-label-weight:var(--form-label-weight, var(--mod-form-label-weight, var(--ds-form-default-label-typo-font-weight)));--_form-label-line-height:var(--form-label-line-height, var(--mod-form-label-line-height, var(--ds-form-default-label-typo-line-height)));--_form-label-size:var(--form-label-size, var(--mod-form-label-size, var(--ds-form-default-label-typo-font-size)));--_form-description-color:var(--form-description-color, var(--mod-form-description-color, var(--ds-form-default-description-color)));--_form-description-family:var(--form-description-family, var(--mod-form-description-family, var(--ds-form-default-description-typo-font-family)));--_form-description-weight:var(--form-description-weight, var(--mod-form-description-weight, var(--ds-form-default-description-typo-font-weight)));--_form-description-line-height:var(--form-description-line-height, var(--mod-form-description-line-height, var(--ds-form-default-description-typo-line-height)));--_form-description-size:var(--form-description-size, var(--mod-form-description-size, var(--ds-form-default-description-typo-font-size)));--_counter-gap:var(--counter-gap, var(--mod-counter-gap, 0.125rem));--_counter-value-min-width:var(--counter-value-min-width, var(--mod-counter-value-min-width, 3rem));--_counter-value-font-weight:var(--counter-value-font-weight, var(--mod-counter-value-font-weight, var(--ds-alias-text-weight-bold)));--_counter-value-font-family:var(--counter-value-font-family, var(--mod-counter-value-font-family, var(--ds-alias-text-family-text)));--_counter-value-color:var(--counter-value-color, var(--mod-counter-value-color, var(--ds-form-default-label-color)));--_counter-value-animation-duration:var(--counter-value-animation-duration, var(--mod-counter-value-animation-duration, 260ms));--_counter-value-animation-easing:var(--counter-value-animation-easing, var(--mod-counter-value-animation-easing, cubic-bezier(0.22, 1, 0.36, 1)))}: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);border-radius:var(--_form-container-radius)}: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{display:block}:host #inner{position:relative;display:grid;gap:var(--_form-field-gap)}:host #container{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host #counter{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;gap:var(--_counter-gap)}:host [part=value]{display:inline-grid;grid-template-columns:1fr;min-width:var(--_counter-value-min-width);text-align:center;font-weight:var(--_counter-value-font-weight);font-family:var(--_counter-value-font-family);color:var(--_counter-value-color);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden}.value-slide{grid-area:1/1}@media (prefers-reduced-motion: no-preference){.value-slide.value-out.is-increase{-webkit-animation:ds-counter-value-out-up var(--_counter-value-animation-duration) var(--_counter-value-animation-easing) forwards;animation:ds-counter-value-out-up var(--_counter-value-animation-duration) var(--_counter-value-animation-easing) forwards}.value-slide.value-out.is-decrease{-webkit-animation:ds-counter-value-out-down var(--_counter-value-animation-duration) var(--_counter-value-animation-easing) forwards;animation:ds-counter-value-out-down var(--_counter-value-animation-duration) var(--_counter-value-animation-easing) forwards}.value-slide.value-in.is-increase{-webkit-animation:ds-counter-value-in-up var(--_counter-value-animation-duration) var(--_counter-value-animation-easing) forwards;animation:ds-counter-value-in-up var(--_counter-value-animation-duration) var(--_counter-value-animation-easing) forwards}.value-slide.value-in.is-decrease{-webkit-animation:ds-counter-value-in-down var(--_counter-value-animation-duration) var(--_counter-value-animation-easing) forwards;animation:ds-counter-value-in-down var(--_counter-value-animation-duration) var(--_counter-value-animation-easing) forwards}}@-webkit-keyframes ds-counter-value-out-up{to{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}}@keyframes ds-counter-value-out-up{to{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}}@-webkit-keyframes ds-counter-value-in-up{from{-webkit-transform:translateY(100%);transform:translateY(100%);opacity:0}}@keyframes ds-counter-value-in-up{from{-webkit-transform:translateY(100%);transform:translateY(100%);opacity:0}}@-webkit-keyframes ds-counter-value-out-down{to{-webkit-transform:translateY(100%);transform:translateY(100%);opacity:0}}@keyframes ds-counter-value-out-down{to{-webkit-transform:translateY(100%);transform:translateY(100%);opacity:0}}@-webkit-keyframes ds-counter-value-in-down{from{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}}@keyframes ds-counter-value-in-down{from{-webkit-transform:translateY(-100%);transform:translateY(-100%);opacity:0}}:host(.is-danger){--mod-form-description-color:var(--ds-form-danger-description-color);--mod-counter-value-color:var(--ds-alias-text-color-danger)}:host(.is-success){--mod-form-description-color:var(--ds-form-success-description-color)}:host(.is-warning){--mod-form-description-color:var(--ds-form-warning-description-color)}:host(.is-disabled){--mod-form-label-color:var(--ds-form-disabled-label-color);--mod-form-description-color:var(--ds-form-disabled-description-color);--mod-counter-value-color:var(--ds-form-disabled-label-color)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #counter,:host(.is-disabled) [part=value]{pointer-events:none;cursor:default}`;
 
 const STEP_FALLBACK = 1;
+// Must match the CSS animation duration in counter.host.scss (`.value-slide` `animation-duration`).
+const VALUE_ANIMATION_MS = 260;
 const Counter = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -1132,6 +1135,15 @@ const Counter = class {
         this.increaseHasFocus = false;
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
+        /**
+         * The value the animation is transitioning away from. Set for the duration of `VALUE_ANIMATION_MS`
+         * after a step, then cleared so the outgoing digit is removed from the DOM again.
+         */
+        this.previousValue = null;
+        /**
+         * Direction of the current value step, driving which way the outgoing/incoming digits slide.
+         */
+        this.valueDirection = null;
         /**
          * PUBLIC PROPERTY API
          * ─────────────────────────────────────────────────────
@@ -1315,6 +1327,9 @@ const Counter = class {
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
     }
+    disconnectedCallback() {
+        clearTimeout(this.valueAnimationTimer);
+    }
     /**
      * PUBLIC LISTENERS
      * ─────────────────────────────────────────────────────
@@ -1371,7 +1386,7 @@ const Counter = class {
         }
     }
     syncFormValue(value) {
-        this.internals.setFormValue(String(value));
+        setFormValue(this.internals, String(value));
     }
     effectiveStep() {
         if (!Number.isFinite(this.step) || this.step <= 0) {
@@ -1384,10 +1399,25 @@ const Counter = class {
         return this.step;
     }
     commit(next) {
+        this.animateValueChange(next);
         this.value = next;
         this.dsInput.emit(next);
         this.dsChange.emit(next);
     }
+    // Slides the outgoing digit out and the incoming one in from the opposite side (up on increase,
+    // down on decrease) — see counter.host.scss `.value-slide`. Purely cosmetic: the previous value is
+    // kept around just long enough to animate, then dropped so it doesn't linger in the DOM/a11y tree.
+    animateValueChange(next) {
+        if (next === this.value)
+            return;
+        this.previousValue = this.value;
+        this.valueDirection = next > this.value ? 'increase' : 'decrease';
+        clearTimeout(this.valueAnimationTimer);
+        this.valueAnimationTimer = setTimeout(() => {
+            this.previousValue = null;
+            this.valueDirection = null;
+        }, VALUE_ANIMATION_MS);
+    }
     /**
      * RENDER
      * ─────────────────────────────────────────────────────
@@ -1397,15 +1427,25 @@ const Counter = class {
         const increaseLabel = i18nDsCounter[this.language].increase;
         const decreaseDisabled = this.disabled || this.readonly || this.value <= this.min;
         const increaseDisabled = this.disabled || this.readonly || this.value >= this.max;
-        return (h(Field, { key: 'ebfd77152d34cbe93df3299a8523bfd580b11339', disabled: this.disabled || this.readonly, color: this.color, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("div", Object.assign({ key: '278eaf87f2e994a8cb4a77ca2ab48c20e59829a7', id: "counter", part: "counter", onKeyDown: this.handleKeyDown }, this.inheritedAttributes), h("ds-button", { key: 'c41090975dfc3590cbc08ca8e5b60fdbc7140f35', ref: el => (this.decreaseButtonEl = el), part: "decrease", "data-testid": "ds-counter-decrease", color: this.invalid
+        return (h(Field, { key: '635a8c44149e5f08cc6682d2196698d8fd4b3dba', disabled: this.disabled || this.readonly, color: this.color, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("div", Object.assign({ key: '7e0eb54dc1a2825c44892046b507e71008f2d0ad', id: "counter", part: "counter", onKeyDown: this.handleKeyDown }, this.inheritedAttributes), h("ds-button", { key: 'b04c95d286b09bfc778a8e92e16c0ceb5fbaefd0', ref: el => (this.decreaseButtonEl = el), part: "decrease", "data-testid": "ds-counter-decrease", color: this.invalid
                 ? 'danger'
                 : this.color === 'danger' || this.color === 'warning' || this.color === 'success'
                     ? this.color
-                    : 'secondary', size: "sm", square: true, icon: "minus", a11yLabel: decreaseLabel, a11yTitle: decreaseLabel, disabled: decreaseDisabled, onClick: this.handleDecrease, onDsFocus: this.handleFocusDecrease, onDsBlur: this.handleBlurDecrease }), h("span", { key: '79d7407db378bdc18c4c2cfffc77e92f60ef3352', part: "value", "data-testid": "ds-counter-value" }, formatLocaleNumber(this.value)), h("ds-button", { key: '084f967ddaf523be0fc36b50721a5439f70dfac5', ref: el => (this.increaseButtonEl = el), part: "increase", "data-testid": "ds-counter-increase", color: this.invalid
+                    : 'ghost', size: "sm", square: true, icon: "minus", a11yLabel: decreaseLabel, a11yTitle: decreaseLabel, disabled: decreaseDisabled, onClick: this.handleDecrease, onDsFocus: this.handleFocusDecrease, onDsBlur: this.handleBlurDecrease }), h("span", { key: '4faef5385c53c5abadd242fd837583af3221434f', id: "value", part: "value", "data-testid": "ds-counter-value" }, this.previousValue !== null && (h("span", { key: `prev-${this.previousValue}`, "aria-hidden": "true", class: {
+                'value-slide': true,
+                'value-out': true,
+                'is-increase': this.valueDirection === 'increase',
+                'is-decrease': this.valueDirection === 'decrease',
+            } }, formatLocaleNumber(this.previousValue))), h("span", { key: `current-${this.value}`, class: {
+                'value-slide': true,
+                'value-in': this.previousValue !== null,
+                'is-increase': this.valueDirection === 'increase',
+                'is-decrease': this.valueDirection === 'decrease',
+            } }, formatLocaleNumber(this.value))), h("ds-button", { key: 'ca7098858e2df051efbaea9fffeff61886098cd0', ref: el => (this.increaseButtonEl = el), part: "increase", "data-testid": "ds-counter-increase", color: this.invalid
                 ? 'danger'
                 : this.color === 'danger' || this.color === 'warning' || this.color === 'success'
                     ? this.color
-                    : 'secondary', size: "sm", square: true, icon: "plus", a11yLabel: increaseLabel, a11yTitle: increaseLabel, disabled: increaseDisabled, onClick: this.handleIncrease, onDsFocus: this.handleFocusIncrease, onDsBlur: this.handleBlurIncrease }))));
+                    : 'ghost', size: "sm", square: true, icon: "plus", a11yLabel: increaseLabel, a11yTitle: increaseLabel, disabled: increaseDisabled, onClick: this.handleIncrease, onDsFocus: this.handleFocusIncrease, onDsBlur: this.handleBlurIncrease }))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

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

@@ -1,11 +1,11 @@
 /*!
  * (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 { T as Type } from './type-CZBrLp5X.js';
-import { L as ListenToConfig } from './config.utils-CB-CXrKY.js';
-import './create-validator-decorator-ZDmCDTEb.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 { T as Type } from './type-3Im_fSnq.js';
+import { L as ListenToConfig } from './config.utils-RtLdZ8k8.js';
+import './create-validator-decorator-Da-m3zPX.js';
 
 const i18nDsDataItem = {
     de: {
@@ -102,11 +102,11 @@ const DataItem = class {
         this.hasCustomLabel = (labelSlotContent === null || labelSlotContent === void 0 ? void 0 : labelSlotContent.tagName) === 'LABEL';
     }
     render() {
-        return (h(Host, { key: '7a783034db37d63ddd29c575e7e88f5bf01e9d33', class: {
+        return (h(Host, { key: '65df3b195f52c26e136be800ba83543982e96726', class: {
                 'is-disabled': this.disabled,
                 'is-multiline': this.multiline,
                 'is-editable': this.editable,
-            } }, h("div", { key: '00204b38b8416a5ca2dd25a5d910fc45720ee316', class: "item-container" }, this.hasCustomLabel ? (h("div", { class: "label-container" }, h("slot", { name: "label" }))) : (h("label", { id: this.labelId, class: "label-container" }, h("slot", { name: "label" }))), h("div", { key: '49116f2f45cfa264887203e4f4388e3236285b0f', id: this.valueId, class: "value-container", "aria-labelledby": this.hasCustomLabel ? undefined : this.labelId }, h("slot", { key: '1c1208ad99a9a123c6a9110c3cd976a502bc5cca' }), this.editable && (h("ds-button", { key: '436610d80c748a0cefd4467b4b249c379b7932e4', class: "edit-button", color: "tertiary", size: "sm", icon: "edit", square: true, a11yLabel: this.editLabel || this.innerEditLabel, a11yTitle: this.editLabel || this.innerEditLabel }))))));
+            } }, h("div", { key: '94549cce34bbd4c696beb50d6b4eae2cb5a06437', class: "item-container" }, this.hasCustomLabel ? (h("div", { class: "label-container" }, h("slot", { name: "label" }))) : (h("label", { id: this.labelId, class: "label-container" }, h("slot", { name: "label" }))), h("div", { key: '17c3d94b5dc271ca1199c55122b534e7377077d2', id: this.valueId, class: "value-container", "aria-labelledby": this.hasCustomLabel ? undefined : this.labelId }, h("slot", { key: '4084af358296358b4ccd8b9efd8c276582d15f89' }), this.editable && (h("ds-button", { key: '51a96d59fcb00cabd90c98bc3330ad3da44a3cfa', class: "edit-button", color: "tertiary", size: "sm", icon: "edit", square: true, a11yLabel: this.editLabel || this.innerEditLabel, a11yTitle: this.editLabel || this.innerEditLabel }))))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,10 +1,10 @@
 /*!
  * (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 { T as Type } from './type-CZBrLp5X.js';
-import './create-validator-decorator-ZDmCDTEb.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';
+import { T as Type } from './type-3Im_fSnq.js';
+import './create-validator-decorator-Da-m3zPX.js';
 
 const dataLabelHostCss = () => `:host{display:contents}`;
 
@@ -20,7 +20,7 @@ const DataLabel = class {
         this.log = log;
     }
     render() {
-        return (h(Host, { key: '1c48dad53f4aafa7c27ff943b011c881376ccf69' }, h("slot", { key: '74709b6412e015b3f126c527189f3efc4c4e5ed1' }), this.required ? h("span", null, "*") : ''));
+        return (h(Host, { key: '090f3ac69156b3a97098292c484b4c39c4e35665' }, h("slot", { key: 'ddc4df599178c220534454ff1ca68a6bd778d902' }), this.required ? h("span", null, "*") : ''));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ds-data-value.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 dataValueHostCss = () => `:host{display:contents}`;
 
@@ -14,7 +14,7 @@ const DataValue = class {
         this.log = log;
     }
     render() {
-        return (h(Host, { key: 'ccacc7d7ecfc5a0801f8886fa2a70f4ebf8bc7e9' }, h("slot", { key: '98fb7da83d032dfce1b8ef9c5af4291aa80502e2' })));
+        return (h(Host, { key: '992cf9491ea35b3e96b27fb73e1770f9e3d6941f' }, h("slot", { key: '9f94c95fe9013ba780756052c5257677839a896a' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,10 +1,10 @@
 /*!
  * (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 { T as Type } from './type-CZBrLp5X.js';
-import './create-validator-decorator-ZDmCDTEb.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';
+import { T as Type } from './type-3Im_fSnq.js';
+import './create-validator-decorator-Da-m3zPX.js';
 
 const dataHostCss = () => `:host{display:block}.data-container{display:grid;grid-template-columns:1fr;width:100%}:host(.is-horizontal) .data-container{gap:1rem}@media screen and (min-width: 769px){:host(.is-horizontal) .data-container{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}}`;
 
@@ -20,9 +20,9 @@ const Data = class {
         this.log = log;
     }
     render() {
-        return (h(Host, { key: '28ec9d68740e4c864cf280fd62c9c63dfed9acd6', class: {
+        return (h(Host, { key: '837939fef2377958393189d819bf60260df8b4d9', class: {
                 'is-horizontal': this.horizontal,
-            } }, h("div", { key: '66e01cacad3ce29659694a255b650db222281b0c', class: "data-container" }, h("slot", { key: '1b137f724447d4fac3489e8d7be5666b9a51fc96' }))));
+            } }, h("div", { key: 'eaadc8fa343475ff32408141a3633d4ba4481eda', class: "data-container" }, h("slot", { key: '9d4175d949543c7b59e8184dd8601cef28eeac85' }))));
     }
     get el() { return getElement(this); }
 };