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

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

@@ -1,14 +1,14 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { B as registerInstance, I as createEvent, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 import { i as inheritAttributes } from './attributes-B62ocg4Q.js';
-import { h as hasValue } from './has-value-Dmsj8ZQw.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
 import { n as normalizeDeprecatedTShirtSize } from './t-shirt-DR5LIaCn.js';
-import { T as Type } from './type-7qEQcw90.js';
-import { O as OneOf } from './one-of-CjRvS2Tk.js';
-import './create-validator-decorator-fUav5byo.js';
+import { T as Type } from './type-Bqge296W.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import './create-validator-decorator-g9TfAa1g.js';
 
 const TAG_COLORS = [
     'primary',
@@ -35,7 +35,7 @@ const TAG_SHAPES = ['square', 'pill', ''];
 const TAG_SIZES = ['sm', 'md', 'lg', 'small', 'medium', 'large', ''];
 const TAG_PLACEMENTS = ['left', 'center', 'right', ''];
 
-const tagHostCss = () => `:host{--_tag-position:var(--tag-position, var(--mod-tag-position, static));--_tag-top:var(--tag-top, var(--mod-tag-top));--_tag-right:var(--tag-right, var(--mod-tag-right));--_tag-bottom:var(--tag-bottom, var(--mod-tag-bottom));--_tag-left:var(--tag-left, var(--mod-tag-left));position:var(--_tag-position);top:var(--_tag-top);right:var(--_tag-right);bottom:var(--_tag-bottom);left:var(--_tag-left);--_tag-m:var(--tag-m, var(--mod-tag-m, 0));--_tag-my:var(--tag-my, var(--mod-tag-my));--_tag-mx:var(--tag-mx, var(--mod-tag-mx));--_tag-ml:var(--tag-ml, var(--mod-tag-ml));--_tag-mr:var(--tag-mr, var(--mod-tag-mr));--_tag-mt:var(--tag-mt, var(--mod-tag-mt));--_tag-mb:var(--tag-mb, var(--mod-tag-mb));margin:var(--_tag-m);margin-inline:var(--_tag-mx);margin-block:var(--_tag-my);margin-left:var(--_tag-ml);margin-right:var(--_tag-mr);margin-top:var(--_tag-mt);margin-bottom:var(--_tag-mb);--_tag-min-height:var(--tag-min-height, var(--mod-tag-min-height, 2rem));--_tag-gap:var(--tag-gap, var(--mod-tag-gap, 0.25rem));--_tag-px:var(--tag-px, var(--mod-tag-px, var(--ds-tag-space-padding-x-base)));--_tag-py:var(--tag-py, var(--mod-tag-py, var(--ds-tag-space-padding-y-base)));--_tag-radius:var(--tag-radius, var(--mod-tag-radius, var(--ds-tag-radius-base)));--_tag-color:var(--tag-color, var(--mod-tag-color, var(--ds-tag-default-color-text-base)));--_tag-bg:var(--tag-bg, var(--mod-tag-bg, var(--ds-tag-default-color-bg-base)));--_tag-line-height:var(--tag-line-height, var(--mod-tag-line-height, 1));--_tag-font-family:var(--tag-font-family, var(--mod-tag-font-family, var(--ds-tag-font-family)));--_tag-font-size:var(--tag-font-size, var(--mod-tag-font-size, var(--ds-tag-font-size-base)));--_tag-font-weight:var(--tag-font-weight, var(--mod-tag-font-weight, var(--ds-tag-font-weight-base)));--_tag-close-mr:var(--tag-close-mr, var(--mod-tag-close-mr, -0.25rem))}: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;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;vertical-align:bottom;-webkit-box-sizing:border-box;box-sizing:border-box;gap:var(--_tag-gap);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-height:var(--_tag-min-height);padding-block:var(--_tag-py);padding-inline:var(--_tag-px);border-radius:var(--_tag-radius);color:var(--_tag-color);background-color:var(--_tag-bg);font-family:var(--_tag-font-family);line-height:var(--_tag-line-height);font-size:var(--_tag-font-size);font-weight:var(--_tag-font-weight)}:host>.close,:host>ds-close{--close-mr:var(--_tag-close-mr)}:host>ds-icon{--icon-size:0.875rem}:host::part(label){display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;vertical-align:middle;gap:var(--_tag-gap)}:host(.is-primary){--icon-color:var(--ds-tag-primary-color-text-base);--mod-tag-color:var(--ds-tag-primary-color-text-base);--mod-tag-bg:var(--ds-tag-primary-color-bg-base)}:host(.is-grey){--icon-color:var(--ds-tag-grey-color-text-base);--mod-tag-color:var(--ds-tag-grey-color-text-base);--mod-tag-bg:var(--ds-tag-grey-color-bg-base)}:host(.is-success){--icon-color:var(--ds-tag-success-color-text-base);--mod-tag-color:var(--ds-tag-success-color-text-base);--mod-tag-bg:var(--ds-tag-success-color-bg-base)}:host(.is-info){--icon-color:var(--ds-tag-info-color-text-base);--mod-tag-color:var(--ds-tag-info-color-text-base);--mod-tag-bg:var(--ds-tag-info-color-bg-base)}:host(.is-warning){--icon-color:var(--ds-tag-warning-color-text-base);--mod-tag-color:var(--ds-tag-warning-color-text-base);--mod-tag-bg:var(--ds-tag-warning-color-bg-base)}:host(.is-danger){--icon-color:var(--ds-tag-danger-color-text-base);--mod-tag-color:var(--ds-tag-danger-color-text-base);--mod-tag-bg:var(--ds-tag-danger-color-bg-base)}:host(.is-purple){--icon-color:var(--ds-tag-purple-color-text-base);--mod-tag-color:var(--ds-tag-purple-color-text-base);--mod-tag-bg:var(--ds-tag-purple-color-bg-base)}:host(.is-red){--icon-color:var(--ds-tag-red-color-text-base);--mod-tag-color:var(--ds-tag-red-color-text-base);--mod-tag-bg:var(--ds-tag-red-color-bg-base)}:host(.is-yellow){--icon-color:var(--ds-tag-yellow-color-text-base);--mod-tag-color:var(--ds-tag-yellow-color-text-base);--mod-tag-bg:var(--ds-tag-yellow-color-bg-base)}:host(.is-green){--icon-color:var(--ds-tag-green-color-text-base);--mod-tag-color:var(--ds-tag-green-color-text-base);--mod-tag-bg:var(--ds-tag-green-color-bg-base)}:host(.is-purple-dark){--icon-color:var(--ds-tag-purple-dark-color-text-base);--mod-tag-color:var(--ds-tag-purple-dark-color-text-base);--mod-tag-bg:var(--ds-tag-purple-dark-color-bg-base)}:host(.is-red-dark){--icon-color:var(--ds-tag-red-dark-color-text-base);--mod-tag-color:var(--ds-tag-red-dark-color-text-base);--mod-tag-bg:var(--ds-tag-red-dark-color-bg-base)}:host(.is-yellow-dark){--icon-color:var(--ds-tag-yellow-dark-color-text-base);--mod-tag-color:var(--ds-tag-yellow-dark-color-text-base);--mod-tag-bg:var(--ds-tag-yellow-dark-color-bg-base)}:host(.is-green-dark){--icon-color:var(--ds-tag-green-dark-color-text-base);--mod-tag-color:var(--ds-tag-green-dark-color-text-base);--mod-tag-bg:var(--ds-tag-green-dark-color-bg-base)}:host(.is-purple-light){--icon-color:var(--ds-tag-purple-light-color-text-base);--mod-tag-color:var(--ds-tag-purple-light-color-text-base);--mod-tag-bg:var(--ds-tag-purple-light-color-bg-base)}:host(.is-red-light){--icon-color:var(--ds-tag-red-light-color-text-base);--mod-tag-color:var(--ds-tag-red-light-color-text-base);--mod-tag-bg:var(--ds-tag-red-light-color-bg-base)}:host(.is-yellow-light){--icon-color:var(--ds-tag-yellow-light-color-text-base);--mod-tag-color:var(--ds-tag-yellow-light-color-text-base);--mod-tag-bg:var(--ds-tag-yellow-light-color-bg-base)}:host(.is-green-light){--icon-color:var(--ds-tag-green-light-color-text-base);--mod-tag-color:var(--ds-tag-green-light-color-text-base);--mod-tag-bg:var(--ds-tag-green-light-color-bg-base)}:host(.is-primary){--close-color-icon:var(--ds-close-color-icon-inverted);--close-color-background-hover:var(--ds-close-color-background-inverted-hover);--close-color-background-active:var(--ds-close-color-background-inverted-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-grey){--close-color-icon:var(--ds-close-color-icon-inverted);--close-color-background-hover:var(--ds-close-color-background-inverted-hover);--close-color-background-active:var(--ds-close-color-background-inverted-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-info){--close-color-icon:var(--ds-close-color-icon-inverted);--close-color-background-hover:var(--ds-close-color-background-inverted-hover);--close-color-background-active:var(--ds-close-color-background-inverted-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-success){--close-color-icon:var(--ds-close-color-icon-inverted);--close-color-background-hover:var(--ds-close-color-background-inverted-hover);--close-color-background-active:var(--ds-close-color-background-inverted-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-danger){--close-color-icon:var(--ds-close-color-icon-inverted);--close-color-background-hover:var(--ds-close-color-background-inverted-hover);--close-color-background-active:var(--ds-close-color-background-inverted-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-purple-dark){--close-color-icon:var(--ds-close-color-icon-inverted);--close-color-background-hover:var(--ds-close-color-background-inverted-hover);--close-color-background-active:var(--ds-close-color-background-inverted-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-red-dark){--close-color-icon:var(--ds-close-color-icon-inverted);--close-color-background-hover:var(--ds-close-color-background-inverted-hover);--close-color-background-active:var(--ds-close-color-background-inverted-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-yellow-dark){--close-color-icon:var(--ds-close-color-icon-inverted);--close-color-background-hover:var(--ds-close-color-background-inverted-hover);--close-color-background-active:var(--ds-close-color-background-inverted-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-green-dark){--close-color-icon:var(--ds-close-color-icon-inverted);--close-color-background-hover:var(--ds-close-color-background-inverted-hover);--close-color-background-active:var(--ds-close-color-background-inverted-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-square){--mod-tag-radius:var(--ds-tag-radius-square)}:host(.is-pill){--mod-tag-radius:var(--ds-tag-radius-pill)}:host(.is-sm){--mod-tag-min-height:1.5rem;--mod-tag-py:var(--ds-tag-space-padding-y-sm);--mod-tag-px:var(--ds-tag-space-padding-x-sm);--mod-tag-font-size:var(--ds-tag-font-size-sm);--mod-tag-font-weight:var(--ds-tag-font-weight-sm)}:host(.is-sm)>.close,:host(.is-sm)>ds-close{--close-padding:0.25rem;--close-size-icon:10px}:host(.is-md){--mod-tag-min-height:2.5rem;--mod-tag-py:var(--ds-tag-space-padding-y-md);--mod-tag-px:var(--ds-tag-space-padding-x-md);--mod-tag-font-size:var(--ds-tag-font-size-md);--mod-tag-font-weight:var(--ds-tag-font-weight-md)}:host(.is-lg){--mod-tag-min-height:3rem;--mod-tag-py:var(--ds-tag-space-padding-y-lg);--mod-tag-px:var(--ds-tag-space-padding-x-lg);--mod-tag-font-size:var(--ds-tag-font-size-lg);--mod-tag-font-weight:var(--ds-tag-font-weight-lg)}:host{display:-ms-inline-flexbox;display:inline-flex}`;
+const tagHostCss = () => `:host{--_tag-position:var(--tag-position, var(--mod-tag-position, static));--_tag-top:var(--tag-top, var(--mod-tag-top));--_tag-right:var(--tag-right, var(--mod-tag-right));--_tag-bottom:var(--tag-bottom, var(--mod-tag-bottom));--_tag-left:var(--tag-left, var(--mod-tag-left));position:var(--_tag-position);top:var(--_tag-top);right:var(--_tag-right);bottom:var(--_tag-bottom);left:var(--_tag-left);--_tag-m:var(--tag-m, var(--mod-tag-m, 0));--_tag-my:var(--tag-my, var(--mod-tag-my));--_tag-mx:var(--tag-mx, var(--mod-tag-mx));--_tag-ml:var(--tag-ml, var(--mod-tag-ml));--_tag-mr:var(--tag-mr, var(--mod-tag-mr));--_tag-mt:var(--tag-mt, var(--mod-tag-mt));--_tag-mb:var(--tag-mb, var(--mod-tag-mb));margin:var(--_tag-m);margin-inline:var(--_tag-mx);margin-block:var(--_tag-my);margin-left:var(--_tag-ml);margin-right:var(--_tag-mr);margin-top:var(--_tag-mt);margin-bottom:var(--_tag-mb);--_tag-min-height:var(--tag-min-height, var(--mod-tag-min-height, 2rem));--_tag-gap:var(--tag-gap, var(--mod-tag-gap, 0.25rem));--_tag-px:var(--tag-px, var(--mod-tag-px, var(--ds-tag-space-padding-x-base)));--_tag-py:var(--tag-py, var(--mod-tag-py, var(--ds-tag-space-padding-y-base)));--_tag-radius:var(--tag-radius, var(--mod-tag-radius, var(--ds-tag-radius-base)));--_tag-color:var(--tag-color, var(--mod-tag-color, var(--ds-tag-base-color-text-base)));--_tag-bg:var(--tag-bg, var(--mod-tag-bg, var(--ds-tag-base-color-bg-base)));--_tag-line-height:var(--tag-line-height, var(--mod-tag-line-height, 1));--_tag-font-family:var(--tag-font-family, var(--mod-tag-font-family, var(--ds-tag-font-family)));--_tag-font-size:var(--tag-font-size, var(--mod-tag-font-size, var(--ds-tag-font-size-base)));--_tag-font-weight:var(--tag-font-weight, var(--mod-tag-font-weight, var(--ds-tag-font-weight-base)));--_tag-close-mr:var(--tag-close-mr, var(--mod-tag-close-mr, -0.25rem))}: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;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;vertical-align:bottom;-webkit-box-sizing:border-box;box-sizing:border-box;gap:var(--_tag-gap);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-height:var(--_tag-min-height);padding-block:var(--_tag-py);padding-inline:var(--_tag-px);border-radius:var(--_tag-radius);color:var(--_tag-color);background-color:var(--_tag-bg);font-family:var(--_tag-font-family);line-height:var(--_tag-line-height);font-size:var(--_tag-font-size);font-weight:var(--_tag-font-weight)}:host>.close,:host>ds-close{--close-mr:var(--_tag-close-mr)}:host>ds-icon{--icon-size:0.875rem}:host::part(label){display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;vertical-align:middle;gap:var(--_tag-gap)}:host(.is-primary){--icon-color:var(--ds-tag-primary-color-text-base);--mod-tag-color:var(--ds-tag-primary-color-text-base);--mod-tag-bg:var(--ds-tag-primary-color-bg-base)}:host(.is-grey){--icon-color:var(--ds-tag-grey-color-text-base);--mod-tag-color:var(--ds-tag-grey-color-text-base);--mod-tag-bg:var(--ds-tag-grey-color-bg-base)}:host(.is-success){--icon-color:var(--ds-tag-success-color-text-base);--mod-tag-color:var(--ds-tag-success-color-text-base);--mod-tag-bg:var(--ds-tag-success-color-bg-base)}:host(.is-info){--icon-color:var(--ds-tag-info-color-text-base);--mod-tag-color:var(--ds-tag-info-color-text-base);--mod-tag-bg:var(--ds-tag-info-color-bg-base)}:host(.is-warning){--icon-color:var(--ds-tag-warning-color-text-base);--mod-tag-color:var(--ds-tag-warning-color-text-base);--mod-tag-bg:var(--ds-tag-warning-color-bg-base)}:host(.is-danger){--icon-color:var(--ds-tag-danger-color-text-base);--mod-tag-color:var(--ds-tag-danger-color-text-base);--mod-tag-bg:var(--ds-tag-danger-color-bg-base)}:host(.is-purple){--icon-color:var(--ds-tag-purple-color-text-base);--mod-tag-color:var(--ds-tag-purple-color-text-base);--mod-tag-bg:var(--ds-tag-purple-color-bg-base)}:host(.is-red){--icon-color:var(--ds-tag-red-color-text-base);--mod-tag-color:var(--ds-tag-red-color-text-base);--mod-tag-bg:var(--ds-tag-red-color-bg-base)}:host(.is-yellow){--icon-color:var(--ds-tag-yellow-color-text-base);--mod-tag-color:var(--ds-tag-yellow-color-text-base);--mod-tag-bg:var(--ds-tag-yellow-color-bg-base)}:host(.is-green){--icon-color:var(--ds-tag-green-color-text-base);--mod-tag-color:var(--ds-tag-green-color-text-base);--mod-tag-bg:var(--ds-tag-green-color-bg-base)}:host(.is-purple-dark){--icon-color:var(--ds-tag-purple-dark-color-text-base);--mod-tag-color:var(--ds-tag-purple-dark-color-text-base);--mod-tag-bg:var(--ds-tag-purple-dark-color-bg-base)}:host(.is-red-dark){--icon-color:var(--ds-tag-red-dark-color-text-base);--mod-tag-color:var(--ds-tag-red-dark-color-text-base);--mod-tag-bg:var(--ds-tag-red-dark-color-bg-base)}:host(.is-yellow-dark){--icon-color:var(--ds-tag-yellow-dark-color-text-base);--mod-tag-color:var(--ds-tag-yellow-dark-color-text-base);--mod-tag-bg:var(--ds-tag-yellow-dark-color-bg-base)}:host(.is-green-dark){--icon-color:var(--ds-tag-green-dark-color-text-base);--mod-tag-color:var(--ds-tag-green-dark-color-text-base);--mod-tag-bg:var(--ds-tag-green-dark-color-bg-base)}:host(.is-purple-light){--icon-color:var(--ds-tag-purple-light-color-text-base);--mod-tag-color:var(--ds-tag-purple-light-color-text-base);--mod-tag-bg:var(--ds-tag-purple-light-color-bg-base)}:host(.is-red-light){--icon-color:var(--ds-tag-red-light-color-text-base);--mod-tag-color:var(--ds-tag-red-light-color-text-base);--mod-tag-bg:var(--ds-tag-red-light-color-bg-base)}:host(.is-yellow-light){--icon-color:var(--ds-tag-yellow-light-color-text-base);--mod-tag-color:var(--ds-tag-yellow-light-color-text-base);--mod-tag-bg:var(--ds-tag-yellow-light-color-bg-base)}:host(.is-green-light){--icon-color:var(--ds-tag-green-light-color-text-base);--mod-tag-color:var(--ds-tag-green-light-color-text-base);--mod-tag-bg:var(--ds-tag-green-light-color-bg-base)}:host(.is-primary){--close-color-icon:var(--ds-close-inverted-icon-color-base);--close-color-background-hover:var(--ds-close-inverted-color-background-hover);--close-color-background-active:var(--ds-close-inverted-color-background-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-grey){--close-color-icon:var(--ds-close-inverted-icon-color-base);--close-color-background-hover:var(--ds-close-inverted-color-background-hover);--close-color-background-active:var(--ds-close-inverted-color-background-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-info){--close-color-icon:var(--ds-close-inverted-icon-color-base);--close-color-background-hover:var(--ds-close-inverted-color-background-hover);--close-color-background-active:var(--ds-close-inverted-color-background-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-success){--close-color-icon:var(--ds-close-inverted-icon-color-base);--close-color-background-hover:var(--ds-close-inverted-color-background-hover);--close-color-background-active:var(--ds-close-inverted-color-background-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-danger){--close-color-icon:var(--ds-close-inverted-icon-color-base);--close-color-background-hover:var(--ds-close-inverted-color-background-hover);--close-color-background-active:var(--ds-close-inverted-color-background-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-purple-dark){--close-color-icon:var(--ds-close-inverted-icon-color-base);--close-color-background-hover:var(--ds-close-inverted-color-background-hover);--close-color-background-active:var(--ds-close-inverted-color-background-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-red-dark){--close-color-icon:var(--ds-close-inverted-icon-color-base);--close-color-background-hover:var(--ds-close-inverted-color-background-hover);--close-color-background-active:var(--ds-close-inverted-color-background-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-yellow-dark){--close-color-icon:var(--ds-close-inverted-icon-color-base);--close-color-background-hover:var(--ds-close-inverted-color-background-hover);--close-color-background-active:var(--ds-close-inverted-color-background-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-green-dark){--close-color-icon:var(--ds-close-inverted-icon-color-base);--close-color-background-hover:var(--ds-close-inverted-color-background-hover);--close-color-background-active:var(--ds-close-inverted-color-background-active);--close-color-focus:var(--ds-alias-interaction-focus-color-inverted)}:host(.is-square){--mod-tag-radius:var(--ds-tag-radius-square)}:host(.is-pill){--mod-tag-radius:var(--ds-tag-radius-pill)}:host(.is-sm){--mod-tag-min-height:1.5rem;--mod-tag-py:var(--ds-tag-space-padding-y-sm);--mod-tag-px:var(--ds-tag-space-padding-x-sm);--mod-tag-font-size:var(--ds-tag-font-size-sm);--mod-tag-font-weight:var(--ds-tag-font-weight-sm)}:host(.is-sm)>.close,:host(.is-sm)>ds-close{--close-padding:0.25rem;--close-size-icon:10px}:host(.is-md){--mod-tag-min-height:2.5rem;--mod-tag-py:var(--ds-tag-space-padding-y-md);--mod-tag-px:var(--ds-tag-space-padding-x-md);--mod-tag-font-size:var(--ds-tag-font-size-md);--mod-tag-font-weight:var(--ds-tag-font-weight-md)}:host(.is-lg){--mod-tag-min-height:3rem;--mod-tag-py:var(--ds-tag-space-padding-y-lg);--mod-tag-px:var(--ds-tag-space-padding-x-lg);--mod-tag-font-size:var(--ds-tag-font-size-lg);--mod-tag-font-weight:var(--ds-tag-font-weight-lg)}:host{display:-ms-inline-flexbox;display:inline-flex}`;
 
 const Tag = class {
     constructor(hostRef) {

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

@@ -1,12 +1,12 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
-import { h as hasValue } from './has-value-Dmsj8ZQw.js';
-import { O as OneOf } from './one-of-CjRvS2Tk.js';
-import { T as Type } from './type-7qEQcw90.js';
-import './create-validator-decorator-fUav5byo.js';
+import { B as registerInstance, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { T as Type } from './type-Bqge296W.js';
+import './create-validator-decorator-g9TfAa1g.js';
 
 const TEXT_ALIGNS = ['', 'left', 'right', 'center', 'justify'];
 const TEXT_SIZES = [

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

@@ -1,19 +1,19 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, v as defaultConfig, N as debounceEvent, E as h, G as getElement } from './index-B-v2Wm-V.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { B as registerInstance, I as createEvent, v as defaultConfig, N as debounceEvent, E as h, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 import { i as inheritAttributes } from './attributes-B62ocg4Q.js';
-import { F as FormControl } from './form-control-DhinyMa9.js';
-import { F as Field } from './field.util-neIQBS-h.js';
+import { F as FormControl } from './form-control-BAP86QSm.js';
+import { w as watchInvalidTextSlot, F as Field } from './field.util-Dl02gvlr.js';
 import { I as INPUT_COLORS, d as INPUT_INPUT_MODES } from './input.interfaces-BMM6Nxeh.js';
-import { T as Type } from './type-7qEQcw90.js';
-import { O as OneOf } from './one-of-CjRvS2Tk.js';
-import { L as ListenToConfig } from './config.decorator-CRYVBTkX.js';
+import { T as Type } from './type-Bqge296W.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
 import './aria-DYfTMCkl.js';
 import './label.i18n-C7I7OlaM.js';
-import './create-validator-decorator-fUav5byo.js';
-import './config.utils-CR4Xudpz.js';
+import './create-validator-decorator-g9TfAa1g.js';
+import './config.utils-Db2OSTX3.js';
 
 const TEXTAREA_WRAPS = ['', 'hard', 'soft', 'off'];
 
@@ -39,6 +39,7 @@ const Textarea = class {
         this.inheritedAttributes = {};
         this.control = new FormControl(this);
         this.focused = false;
+        this.hasInvalidTextSlotContent = false;
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
         /**
@@ -147,6 +148,13 @@ const Textarea = class {
     connectedCallback() {
         this.debounceChanged();
         this.control.connectedCallback();
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title', 'data-hj-allow']);
@@ -199,7 +207,8 @@ const Textarea = class {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: '2e1e2729ed8faa5ccc854162ce77328251481a13', inputId: 'textarea', disabled: this.disabled, color: this.color, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("textarea", Object.assign({ key: '8c037403989369aa837282250192ca463157262a', id: "textarea", part: "textarea", name: this.name, ref: el => (this.control.nativeEl = el), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autofocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, inputMode: this.inputmode, cols: this.cols, rows: this.rows, wrap: this.wrap ? this.wrap : undefined, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onInput: ev => this.handleInput(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes))));
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
+        return (h(Field, { key: '49d0b6396fe85413e395b50d5e09efca92db51f8', inputId: 'textarea', disabled: this.disabled, color: this.color, invalid: isInvalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("textarea", Object.assign({ key: '0a963e803a8e9341869b3b25336c092d8f25b65e', id: "textarea", part: "textarea", name: this.name, ref: el => (this.control.nativeEl = el), "aria-describedby": "description", "aria-invalid": isInvalid ? 'true' : 'false', disabled: this.disabled, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autofocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, inputMode: this.inputmode, cols: this.cols, rows: this.rows, wrap: this.wrap ? this.wrap : undefined, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onInput: ev => this.handleInput(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

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

@@ -1,22 +1,22 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, D as raf, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
-import { s as stopEventBubbling } from './form-control-DhinyMa9.js';
-import { h as hasValue } from './has-value-Dmsj8ZQw.js';
-import { s as sanitizeSvg } from './svg-B8KVoKrH.js';
-import { O as OneOf } from './one-of-CjRvS2Tk.js';
-import { T as Type } from './type-7qEQcw90.js';
-import { R as Required } from './required-Dtml5IID.js';
-import { L as ListenToConfig } from './config.decorator-CRYVBTkX.js';
-import './create-validator-decorator-fUav5byo.js';
-import './config.utils-CR4Xudpz.js';
+import { B as registerInstance, I as createEvent, D as raf, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { s as stopEventBubbling } from './form-control-BAP86QSm.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
+import { s as sanitizeSvg } from './svg-D-_px2sY.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { T as Type } from './type-Bqge296W.js';
+import { R as Required } from './required-BsfIY-qW.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
+import './create-validator-decorator-g9TfAa1g.js';
+import './config.utils-Db2OSTX3.js';
 
 const TOAST_COLORS = ['base', 'info', 'success', 'warning', 'danger'];
 const TOAST_TARGETS = ['_blank', '_parent', '_self', '_top'];
 
-const toastHostCss = () => `:host{--_toast-position:var(--toast-position, var(--mod-toast-position, static));--_toast-top:var(--toast-top, var(--mod-toast-top));--_toast-right:var(--toast-right, var(--mod-toast-right));--_toast-bottom:var(--toast-bottom, var(--mod-toast-bottom));--_toast-left:var(--toast-left, var(--mod-toast-left));position:var(--_toast-position);top:var(--_toast-top);right:var(--_toast-right);bottom:var(--_toast-bottom);left:var(--_toast-left);--_toast-m:var(--toast-m, var(--mod-toast-m, 0));--_toast-my:var(--toast-my, var(--mod-toast-my));--_toast-mx:var(--toast-mx, var(--mod-toast-mx));--_toast-ml:var(--toast-ml, var(--mod-toast-ml));--_toast-mr:var(--toast-mr, var(--mod-toast-mr));--_toast-mt:var(--toast-mt, var(--mod-toast-mt));--_toast-mb:var(--toast-mb, var(--mod-toast-mb));margin:var(--_toast-m);margin-inline:var(--_toast-mx);margin-block:var(--_toast-my);margin-left:var(--_toast-ml);margin-right:var(--_toast-mr);margin-top:var(--_toast-mt);margin-bottom:var(--_toast-mb);--_toast-shadow:var(--toast-shadow, var(--mod-toast-shadow, var(--ds-alias-shadow-box-base)));--_toast-radius:var(--toast-radius, var(--mod-toast-radius, var(--ds-toast-radius)));--_toast-bg:var(--toast-bg, var(--mod-toast-bg, var(--ds-toast-default-color-bg-base)));--_toast-color:var(--toast-color, var(--mod-toast-color, var(--ds-toast-default-color-text-base)));--_toast-icon-color:var(--toast-icon-color, var(--mod-toast-icon-color, var(--ds-toast-default-color-icon-base)));--_toast-progress-duration:var(--toast-progress-duration, var(--mod-toast-progress-duration, 0));--_toast-progress-bar-bg:var(--toast-progress-bar-bg, var(--mod-toast-progress-bar-bg, var(--ds-toast-default-color-progress-bar-base)));--_toast-progress-bg:var(--toast-progress-bg, var(--mod-toast-progress-bg, var(--ds-toast-default-color-progress-bg-base)));--_toast-heading-font-family:var(--toast-heading-font-family, var(--mod-toast-heading-font-family, var(--ds-alias-text-family-heading)));--_toast-heading-font-weight:var(--toast-heading-font-weight, var(--mod-toast-heading-font-weight, var(--ds-alias-text-weight-bold)));--_toast-heading-font-size:var(--toast-heading-font-size, var(--mod-toast-heading-font-size, var(--ds-alias-text-size-base-device)));--_toast-heading-line-height:var(--toast-heading-line-height, var(--mod-toast-heading-line-height, var(--ds-alias-text-line-height-heading)));--_toast-content-font-family:var(--toast-content-font-family, var(--mod-toast-content-font-family, var(--ds-alias-text-family-body)));--_toast-content-font-weight:var(--toast-content-font-weight, var(--mod-toast-content-font-weight, inherit));--_toast-content-font-size:var(--toast-content-font-size, var(--mod-toast-content-font-size, var(--ds-alias-text-size-sm-device)));--_toast-content-line-height:var(--toast-content-line-height, var(--mod-toast-content-line-height, var(--ds-alias-text-line-height-body)));--_toast-gap:var(--toast-gap, var(--mod-toast-gap, 0.125rem));--_toast-p:var(--toast-p, var(--mod-toast-p, 1rem));--_toast-animation-start-opacity:var(--toast-animation-start-opacity, var(--mod-toast-animation-start-opacity, 1));--_toast-animation-start-transform:var(--toast-animation-start-transform, var(--mod-toast-animation-start-transform, none));--_toast-animation-transition:var(--toast-animation-transition, var(--mod-toast-animation-transition, none));--_toast-animation-end-opacity:var(--toast-animation-end-opacity, var(--mod-toast-animation-end-opacity, 1));--_toast-animation-end-transform:var(--toast-animation-end-transform, var(--mod-toast-animation-end-transform, none))}:host{-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}@media print{:host{display:none !important}}:host{opacity:var(--_toast-animation-start-opacity);-webkit-transform:var(--_toast-animation-start-transform);transform:var(--_toast-animation-start-transform);-ms-flex:1;flex:1;position:relative;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--_toast-color);background:var(--_toast-bg);border-radius:var(--_toast-radius);-webkit-box-shadow:var(--_toast-shadow);box-shadow:var(--_toast-shadow);padding:var(--_toast-p);-webkit-column-gap:calc(var(--_toast-gap)*4);-moz-column-gap:calc(var(--_toast-gap)*4);column-gap:calc(var(--_toast-gap)*4);row-gap:var(--_toast-gap);-ms-flex-align:center;align-items:center;width:100%}:host ds-icon:not([name]){--icon-color:null;--icon-size:var(--ds-icon-size-lg)}:host #icon{grid-area:icon}:host #content{margin:0 !important;grid-area:content;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_toast-heading-font-family);font-weight:var(--_toast-heading-font-weight);line-height:var(--_toast-heading-line-height);font-size:var(--_toast-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_toast-content-font-family);font-size:var(--_toast-content-font-size);font-weight:var(--_toast-content-font-weight);line-height:var(--_toast-content-line-height)}:host ds-button,:host .button{--button-mt:0;grid-area:action;align-self:center}:host .close,:host ds-close{grid-area:close;align-self:center}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content"}:host(.is-closable:not(.is-action)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close"}:host(.is-action:not(.is-closable)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content action"}:host(.is-action.is-closable){grid-template-columns:auto 1fr auto auto;grid-template-areas:"icon content action close"}:host(.is-ready){-webkit-transition:var(--_toast-animation-transition);transition:var(--_toast-animation-transition)}:host(.is-visible){opacity:var(--_toast-animation-end-opacity);-webkit-transform:var(--_toast-animation-end-transform);transform:var(--_toast-animation-end-transform)}:host(.has-progress-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_toast-progress-bg);border-bottom-left-radius:var(--_toast-radius);border-bottom-right-radius:var(--_toast-radius)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);-webkit-animation:progress var(--_toast-progress-duration) linear forwards;animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-info){--mod-toast-color:var(--ds-toast-info-color-text-base);--mod-toast-border-color:var(--ds-toast-info-color-border-base);--mod-toast-bg:var(--ds-toast-info-color-bg-base);--mod-toast-icon-color:var(--ds-toast-info-color-icon-base);--mod-toast-progress-bar-bg:var(--ds-toast-info-color-progress-bar-base);--mod-toast-progress-bg:var(--ds-toast-info-color-progress-bg-base)}:host(.is-success){--mod-toast-color:var(--ds-toast-success-color-text-base);--mod-toast-border-color:var(--ds-toast-success-color-border-base);--mod-toast-bg:var(--ds-toast-success-color-bg-base);--mod-toast-icon-color:var(--ds-toast-success-color-icon-base);--mod-toast-progress-bar-bg:var(--ds-toast-success-color-progress-bar-base);--mod-toast-progress-bg:var(--ds-toast-success-color-progress-bg-base)}:host(.is-warning){--mod-toast-color:var(--ds-toast-warning-color-text-base);--mod-toast-border-color:var(--ds-toast-warning-color-border-base);--mod-toast-bg:var(--ds-toast-warning-color-bg-base);--mod-toast-icon-color:var(--ds-toast-warning-color-icon-base);--mod-toast-progress-bar-bg:var(--ds-toast-warning-color-progress-bar-base);--mod-toast-progress-bg:var(--ds-toast-warning-color-progress-bg-base)}:host(.is-danger){--mod-toast-color:var(--ds-toast-danger-color-text-base);--mod-toast-border-color:var(--ds-toast-danger-color-border-base);--mod-toast-bg:var(--ds-toast-danger-color-bg-base);--mod-toast-icon-color:var(--ds-toast-danger-color-icon-base);--mod-toast-progress-bar-bg:var(--ds-toast-danger-color-progress-bar-base);--mod-toast-progress-bg:var(--ds-toast-danger-color-progress-bg-base)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);-webkit-animation:progress var(--_toast-progress-duration) linear forwards;animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-paused)::after{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_toast-radius)}}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_toast-radius)}}`;
+const toastHostCss = () => `:host{--_toast-position:var(--toast-position, var(--mod-toast-position, static));--_toast-top:var(--toast-top, var(--mod-toast-top));--_toast-right:var(--toast-right, var(--mod-toast-right));--_toast-bottom:var(--toast-bottom, var(--mod-toast-bottom));--_toast-left:var(--toast-left, var(--mod-toast-left));position:var(--_toast-position);top:var(--_toast-top);right:var(--_toast-right);bottom:var(--_toast-bottom);left:var(--_toast-left);--_toast-m:var(--toast-m, var(--mod-toast-m, 0));--_toast-my:var(--toast-my, var(--mod-toast-my));--_toast-mx:var(--toast-mx, var(--mod-toast-mx));--_toast-ml:var(--toast-ml, var(--mod-toast-ml));--_toast-mr:var(--toast-mr, var(--mod-toast-mr));--_toast-mt:var(--toast-mt, var(--mod-toast-mt));--_toast-mb:var(--toast-mb, var(--mod-toast-mb));margin:var(--_toast-m);margin-inline:var(--_toast-mx);margin-block:var(--_toast-my);margin-left:var(--_toast-ml);margin-right:var(--_toast-mr);margin-top:var(--_toast-mt);margin-bottom:var(--_toast-mb);--_toast-shadow:var(--toast-shadow, var(--mod-toast-shadow, var(--ds-alias-shadow-box-base)));--_toast-radius:var(--toast-radius, var(--mod-toast-radius, var(--ds-toast-radius)));--_toast-bg:var(--toast-bg, var(--mod-toast-bg, var(--ds-toast-primary-color-bg-base)));--_toast-color:var(--toast-color, var(--mod-toast-color, var(--ds-toast-primary-color-text-base)));--_toast-icon-color:var(--toast-icon-color, var(--mod-toast-icon-color, var(--ds-toast-primary-color-icon-base)));--_toast-progress-duration:var(--toast-progress-duration, var(--mod-toast-progress-duration, 0));--_toast-progress-bar-bg:var(--toast-progress-bar-bg, var(--mod-toast-progress-bar-bg, var(--ds-toast-primary-color-progress-bar-base)));--_toast-progress-bg:var(--toast-progress-bg, var(--mod-toast-progress-bg, var(--ds-toast-primary-color-progress-bg-base)));--_toast-heading-font-family:var(--toast-heading-font-family, var(--mod-toast-heading-font-family, var(--ds-alias-text-family-heading)));--_toast-heading-font-weight:var(--toast-heading-font-weight, var(--mod-toast-heading-font-weight, var(--ds-alias-text-weight-bold)));--_toast-heading-font-size:var(--toast-heading-font-size, var(--mod-toast-heading-font-size, var(--ds-alias-text-size-base-device)));--_toast-heading-line-height:var(--toast-heading-line-height, var(--mod-toast-heading-line-height, var(--ds-alias-text-line-height-heading)));--_toast-content-font-family:var(--toast-content-font-family, var(--mod-toast-content-font-family, var(--ds-alias-text-family-body)));--_toast-content-font-weight:var(--toast-content-font-weight, var(--mod-toast-content-font-weight, inherit));--_toast-content-font-size:var(--toast-content-font-size, var(--mod-toast-content-font-size, var(--ds-alias-text-size-sm-device)));--_toast-content-line-height:var(--toast-content-line-height, var(--mod-toast-content-line-height, var(--ds-alias-text-line-height-body)));--_toast-gap:var(--toast-gap, var(--mod-toast-gap, 0.125rem));--_toast-p:var(--toast-p, var(--mod-toast-p, 1rem));--_toast-animation-start-opacity:var(--toast-animation-start-opacity, var(--mod-toast-animation-start-opacity, 1));--_toast-animation-start-transform:var(--toast-animation-start-transform, var(--mod-toast-animation-start-transform, none));--_toast-animation-transition:var(--toast-animation-transition, var(--mod-toast-animation-transition, none));--_toast-animation-end-opacity:var(--toast-animation-end-opacity, var(--mod-toast-animation-end-opacity, 1));--_toast-animation-end-transform:var(--toast-animation-end-transform, var(--mod-toast-animation-end-transform, none))}:host{-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}@media print{:host{display:none !important}}:host{opacity:var(--_toast-animation-start-opacity);-webkit-transform:var(--_toast-animation-start-transform);transform:var(--_toast-animation-start-transform);-ms-flex:1;flex:1;position:relative;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--_toast-color);background:var(--_toast-bg);border-radius:var(--_toast-radius);-webkit-box-shadow:var(--_toast-shadow);box-shadow:var(--_toast-shadow);padding:var(--_toast-p);-webkit-column-gap:calc(var(--_toast-gap)*4);-moz-column-gap:calc(var(--_toast-gap)*4);column-gap:calc(var(--_toast-gap)*4);row-gap:var(--_toast-gap);-ms-flex-align:center;align-items:center;width:100%}:host ds-icon:not([name]){--icon-color:null;--icon-size:var(--ds-icon-size-lg)}:host #icon{grid-area:icon}:host #content{margin:0 !important;grid-area:content;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_toast-heading-font-family);font-weight:var(--_toast-heading-font-weight);line-height:var(--_toast-heading-line-height);font-size:var(--_toast-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_toast-content-font-family);font-size:var(--_toast-content-font-size);font-weight:var(--_toast-content-font-weight);line-height:var(--_toast-content-line-height)}:host ds-button,:host .button{--button-mt:0;grid-area:action;align-self:center}:host .close,:host ds-close{grid-area:close;align-self:center}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content"}:host(.is-closable:not(.is-action)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close"}:host(.is-action:not(.is-closable)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content action"}:host(.is-action.is-closable){grid-template-columns:auto 1fr auto auto;grid-template-areas:"icon content action close"}:host(.is-ready){-webkit-transition:var(--_toast-animation-transition);transition:var(--_toast-animation-transition)}:host(.is-visible){opacity:var(--_toast-animation-end-opacity);-webkit-transform:var(--_toast-animation-end-transform);transform:var(--_toast-animation-end-transform)}:host(.has-progress-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_toast-progress-bg);border-bottom-left-radius:var(--_toast-radius);border-bottom-right-radius:var(--_toast-radius)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);-webkit-animation:progress var(--_toast-progress-duration) linear forwards;animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-info){--mod-toast-color:var(--ds-toast-info-color-text-base);--mod-toast-border-color:var(--ds-toast-info-color-border-base);--mod-toast-bg:var(--ds-toast-info-color-bg-base);--mod-toast-icon-color:var(--ds-toast-info-color-icon-base);--mod-toast-progress-bar-bg:var(--ds-toast-info-color-progress-bar-base);--mod-toast-progress-bg:var(--ds-toast-info-color-progress-bg-base)}:host(.is-success){--mod-toast-color:var(--ds-toast-success-color-text-base);--mod-toast-border-color:var(--ds-toast-success-color-border-base);--mod-toast-bg:var(--ds-toast-success-color-bg-base);--mod-toast-icon-color:var(--ds-toast-success-color-icon-base);--mod-toast-progress-bar-bg:var(--ds-toast-success-color-progress-bar-base);--mod-toast-progress-bg:var(--ds-toast-success-color-progress-bg-base)}:host(.is-warning){--mod-toast-color:var(--ds-toast-warning-color-text-base);--mod-toast-border-color:var(--ds-toast-warning-color-border-base);--mod-toast-bg:var(--ds-toast-warning-color-bg-base);--mod-toast-icon-color:var(--ds-toast-warning-color-icon-base);--mod-toast-progress-bar-bg:var(--ds-toast-warning-color-progress-bar-base);--mod-toast-progress-bg:var(--ds-toast-warning-color-progress-bg-base)}:host(.is-danger){--mod-toast-color:var(--ds-toast-danger-color-text-base);--mod-toast-border-color:var(--ds-toast-danger-color-border-base);--mod-toast-bg:var(--ds-toast-danger-color-bg-base);--mod-toast-icon-color:var(--ds-toast-danger-color-icon-base);--mod-toast-progress-bar-bg:var(--ds-toast-danger-color-progress-bar-base);--mod-toast-progress-bg:var(--ds-toast-danger-color-progress-bg-base)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);-webkit-animation:progress var(--_toast-progress-duration) linear forwards;animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-paused)::after{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_toast-radius)}}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_toast-radius)}}`;
 
 const Toast = class {
     constructor(hostRef) {

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

@@ -1,12 +1,12 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { B as registerInstance, I as createEvent, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 import { i as inheritAttributes } from './attributes-B62ocg4Q.js';
-import { T as Type } from './type-7qEQcw90.js';
-import { O as OneOf } from './one-of-CjRvS2Tk.js';
-import './create-validator-decorator-fUav5byo.js';
+import { T as Type } from './type-Bqge296W.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import './create-validator-decorator-g9TfAa1g.js';
 
 const TOGGLE_GROUP_COLUMNS = [1, 2, 3, 4];
 const TOGGLE_TILE_COLORS = ['', 'purple', 'green', 'yellow', 'red'];

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

@@ -1,11 +1,11 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, d as dsBrowser, E as h, F as Host, G as getElement } from './index-B-v2Wm-V.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { B as registerInstance, I as createEvent, d as dsBrowser, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 import { a as autoUpdate, c as computePosition, s as shift, f as flip, o as offset } from './floating-ui.dom-BqY0KzJC.js';
-import { O as OneOf } from './one-of-CjRvS2Tk.js';
-import './create-validator-decorator-fUav5byo.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import './create-validator-decorator-g9TfAa1g.js';
 
 const TOOLTIP_PLACEMENTS = ['top', 'right', 'bottom', 'left'];
 

package/dist/esm/{field.util-neIQBS-h.js → field.util-Dl02gvlr.js}

@@ -1,17 +1,46 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { E as h, F as Host } from './index-B-v2Wm-V.js';
+import { E as h, F as Host } from './index-MUUOiuTm.js';
 import { a as ariaBooleanToString } from './aria-DYfTMCkl.js';
 import { I as I18nDsLabel } from './label.i18n-C7I7OlaM.js';
 
+/**
+ * Watches the host's `slot="invalid-text"` light-DOM child for content, calling
+ * `onChange` whenever "has non-empty content" flips. Covers both the node being
+ * added/removed/replaced and its text being mutated in place (e.g. AEM writing a
+ * validation message into an otherwise-empty node it owns).
+ *
+ * Returns a disconnect function to call from `disconnectedCallback`.
+ */
+function watchInvalidTextSlot(el, onChange) {
+    let contentObserver;
+    const check = () => {
+        var _a;
+        const slotted = el.querySelector(':scope > [slot="invalid-text"]');
+        onChange(!!slotted && ((_a = slotted.textContent) !== null && _a !== void 0 ? _a : '').trim().length > 0);
+        contentObserver === null || contentObserver === void 0 ? void 0 : contentObserver.disconnect();
+        if (slotted) {
+            contentObserver = new MutationObserver(check);
+            contentObserver.observe(slotted, { childList: true, characterData: true, subtree: true });
+        }
+    };
+    const hostObserver = new MutationObserver(check);
+    hostObserver.observe(el, { childList: true });
+    check();
+    return () => {
+        hostObserver.disconnect();
+        contentObserver === null || contentObserver === void 0 ? void 0 : contentObserver.disconnect();
+    };
+}
+
 const Field = (props, children) => {
     var _a;
     const inputId = (_a = props.inputId) !== null && _a !== void 0 ? _a : 'input';
     const role = props.role === 'fieldset' ? 'group' : undefined;
     const RoleTag = props.role === 'fieldset' ? 'fieldset' : 'div';
     return (h(Host, { class: Object.assign({ 'ds-field ': true, 'is-disabled': !!props.disabled, 'is-danger': props.color === 'danger' || !!props.invalid, 'is-success': props.color === 'success' && !props.invalid, 'is-warning': props.color === 'warning' && !props.invalid }, props.cssClasses) }, h(RoleTag, { id: "inner", part: "inner", role: role, "aria-disabled": ariaBooleanToString(props.disabled), "aria-invalid": ariaBooleanToString(props.invalid), "aria-labelledby": "label", "aria-describedby": "description", onClick: (ev) => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, ev); } }, props.label &&
-        (props.role === 'fieldset' ? (h("legend", { part: "label", id: "label" }, h("slot", { name: "label" }, props.label), !props.required && h("span", null, I18nDsLabel[props.language].optional || ''))) : (h("label", { htmlFor: inputId, part: "label", id: "label" }, h("slot", { name: "label" }, props.label), !props.required && h("span", null, I18nDsLabel[props.language].optional || '')))), h("div", { id: "container", part: "control" }, h("slot", { name: "start" }), children, h("slot", { name: "end" }), props.loading === true && (h("ds-spinner", { small: true, variation: "circle", color: props.disabled ? 'white' : 'blue' }))), props.label && (h("span", { id: "description", part: "description", role: props.invalid && props.invalidText ? 'alert' : undefined }, props.invalid && props.invalidText && h("ds-icon", { name: "alert" }), h("slot", { name: "description" }, props.invalid && props.invalidText ? props.invalidText : props.description))))));
+        (props.role === 'fieldset' ? (h("legend", { part: "label", id: "label" }, h("slot", { name: "label" }, props.label), !props.required && h("span", null, I18nDsLabel[props.language].optional || ''))) : (h("label", { htmlFor: inputId, part: "label", id: "label" }, h("slot", { name: "label" }, props.label), !props.required && h("span", null, I18nDsLabel[props.language].optional || '')))), h("div", { id: "container", part: "control" }, h("slot", { name: "start" }), children, h("slot", { name: "end" }), props.loading === true && (h("ds-spinner", { small: true, variation: "circle", color: props.disabled ? 'white' : 'blue' }))), props.label && (h("span", { id: "description", part: "description", role: props.invalid && props.invalidText ? 'alert' : undefined }, props.invalid && props.invalidText && h("ds-icon", { name: "alert" }), props.invalid ? (h("slot", { name: "invalid-text" }, props.invalidText || props.description)) : (h("slot", { name: "description" }, props.description)))))));
 };
 
-export { Field as F };
+export { Field as F, watchInvalidTextSlot as w };

package/dist/esm/{focus-6OAqvfus.js → focus-C1_jVoAm.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { d as dsBrowser } from './index-B-v2Wm-V.js';
+import { d as dsBrowser } from './index-MUUOiuTm.js';
 
 /*!
 * tabbable 6.5.0

package/dist/esm/{form-control-DhinyMa9.js → form-control-BAP86QSm.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { k as waitAfterIdleCallback } from './index-B-v2Wm-V.js';
+import { k as waitAfterIdleCallback } from './index-MUUOiuTm.js';
 
 class FormControl {
     constructor(component) {

package/dist/esm/{has-value-Dmsj8ZQw.js → has-value-CADjf9QZ.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { i as isValueEmpty } from './create-validator-decorator-fUav5byo.js';
+import { i as isValueEmpty } from './create-validator-decorator-g9TfAa1g.js';
 
 function hasValue(value) {
     return !isValueEmpty(value);

package/dist/esm/{heading.interfaces-Ceu7FIWM.js → heading.interfaces-BdLq-Ecc.js}

@@ -17,11 +17,10 @@ const HEADING_VISUAL_LEVELS = [
     'lg',
     'md',
     'base',
-    '',
 ];
-const HEADING_COLORS = ['primary', 'info', 'success', 'warning', 'danger', 'blue', 'white', ''];
+const HEADING_COLORS = ['primary', 'info', 'success', 'warning', 'danger', 'blue', 'white'];
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'span', 'p'];
 const HEADING_LEVELS = ['display', 'display-2', 'h1', 'h2', 'h3', 'h4', 'h5', 'span', 'p', ''];
-const HEADING_SPACES = ['none', 'bottom', 'top', 'all', ''];
+const HEADING_SPACES = ['none', 'bottom', 'top', 'all'];
 
 export { HEADING_COLORS as H, HEADING_TAGS as a, HEADING_VISUAL_LEVELS as b, HEADING_LEVELS as c, HEADING_SPACES as d };

package/dist/esm/{index-B-v2Wm-V.js → index-MUUOiuTm.js}

@@ -353,7 +353,7 @@ const runHighPrioritizedTask = (callback) => {
 };
 
 // generated by .build/version.js
-const VERSION = '20.0.0-next.7';
+const VERSION = '20.0.0-next.8';
 
 const DS_ANIMATION_KEY = 'ds-animated';
 const DS_CONFIG_META_NAME = 'design-system-config';
@@ -945,8 +945,82 @@ const generateHydrateForCustomElementsOutput = (cmpTags = []) => {
     }
 };
 
+/**
+ * Live token preview: applies token changes posted by an embedding parent window (Toky's live
+ * preview sidebar) directly to `document.documentElement.style`, so a component's rendered
+ * output reflects in-progress token edits without a rebuild. No-ops outside an iframe, so it
+ * never activates during normal component consumption or Playwright visual-regression runs.
+ * No origin allowlist yet - MVP is localhost-only (see packages/core/CONTEXT.md).
+ */
+const initializeTokenPreview = (win = window) => {
+    if (win.parent === win) {
+        return;
+    }
+    const appliedProperties = new Set();
+    const injectedBrandStylesheets = new Set();
+    const applyTokens = (tokens) => {
+        for (const { name, value } of tokens) {
+            if (value === null) {
+                win.document.documentElement.style.removeProperty(name);
+                appliedProperties.delete(name);
+            }
+            else {
+                win.document.documentElement.style.setProperty(name, value);
+                appliedProperties.add(name);
+            }
+        }
+    };
+    const applyBrand = (brand) => {
+        if (!brand || brand === 'Base') {
+            delete win.document.documentElement.dataset['theme'];
+            return;
+        }
+        const href = `/assets/tokens/${brand.toLowerCase()}.tokens.css`;
+        if (!injectedBrandStylesheets.has(href)) {
+            const link = win.document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = href;
+            win.document.head.appendChild(link);
+            injectedBrandStylesheets.add(href);
+        }
+        // packages/tokens emits the brand stylesheet's selector lowercased (config.brand.ts:
+        // `[data-theme="${mode.toLowerCase()}"]`) - matching that here is what makes the injected
+        // stylesheet above actually apply.
+        win.document.documentElement.dataset['theme'] = brand.toLowerCase();
+    };
+    const reset = () => {
+        for (const name of appliedProperties) {
+            win.document.documentElement.style.removeProperty(name);
+        }
+        appliedProperties.clear();
+        delete win.document.documentElement.dataset['theme'];
+    };
+    win.addEventListener('message', (event) => {
+        if (event.source !== win.parent) {
+            return;
+        }
+        const message = event.data;
+        if (!message || message.source !== 'ds-token-preview') {
+            return;
+        }
+        switch (message.type) {
+            case 'set-tokens':
+                applyTokens(message.tokens);
+                break;
+            case 'set-brand':
+                applyBrand(message.brand);
+                break;
+            case 'reset':
+                reset();
+                break;
+        }
+    });
+    win.parent.postMessage({ source: 'ds-token-preview', type: 'ready' }, '*');
+};
+
 function global () {
     initializeDesignSystem();
+    initializeTokenPreview();
 }
 
 const appGlobalScript = global || (() => {});

package/dist/esm/index.js

@@ -5,17 +5,17 @@ export { F as FOOTER_CONTAINERS, i as i18nDsFooter } from './footer.i18n-BrJFPhM
 export { i as i18nDsClose } from './close.i18n-Bbn3sYo5.js';
 export { I as I18nDsLabel } from './label.i18n-C7I7OlaM.js';
 export { i as i18nControlLabel } from './pagination.i18n-BR1SYpQO.js';
-export { C as Config, c as componentOnReady, r as config, t as configFromLocalStorage, u as configFromMetaTag, a as deepReady, v as defaultConfig, x as defaultLocale, d as dsBrowser, y as dsModalController, A as dsSnackbarController, z as dsToastController, e as getAppRoot, i as initialize, i as initializeDesignSystem, f as isDescendant, q as setupDsConfig, h as shallowReady, w as wait, j as waitAfterFramePaint, k as waitAfterIdleCallback, l as waitAfterLargestContentfulPaintCallback, m as waitForComponent, n as waitForDesignSystem, o as waitOnLoadEventCallback } from './index-B-v2Wm-V.js';
-import { d as dsDevice } from './device-CapioAfe.js';
-export { D as DsDevice } from './device-CapioAfe.js';
-export { S as ScrollHandler } from './scroll-v2MaEkiZ.js';
-import { W as WindowResizeListener } from './breakpoints.subject-DHZ7TzYV.js';
-export { D as DsBreakpointSubject, b as DsBreakpointsUtil, a as dsBreakpointSubject, d as dsBreakpoints } from './breakpoints.subject-DHZ7TzYV.js';
+export { C as Config, c as componentOnReady, r as config, t as configFromLocalStorage, u as configFromMetaTag, a as deepReady, v as defaultConfig, x as defaultLocale, d as dsBrowser, y as dsModalController, A as dsSnackbarController, z as dsToastController, e as getAppRoot, i as initialize, i as initializeDesignSystem, f as isDescendant, q as setupDsConfig, h as shallowReady, w as wait, j as waitAfterFramePaint, k as waitAfterIdleCallback, l as waitAfterLargestContentfulPaintCallback, m as waitForComponent, n as waitForDesignSystem, o as waitOnLoadEventCallback } from './index-MUUOiuTm.js';
+import { d as dsDevice } from './device-CtidwsPr.js';
+export { D as DsDevice } from './device-CtidwsPr.js';
+export { S as ScrollHandler } from './scroll-D4cC-Fsr.js';
+import { W as WindowResizeListener } from './breakpoints.subject-CUVOWezN.js';
+export { D as DsBreakpointSubject, b as DsBreakpointsUtil, a as dsBreakpointSubject, d as dsBreakpoints } from './breakpoints.subject-CUVOWezN.js';
 import { D as DateTime, I as Info, S as Settings } from './luxon-C1jqbZdf.js';
-import { u as useDsConfig } from './config.utils-CR4Xudpz.js';
-export { b as attachComponentToConfig, a as attachToConfig, c as detachComponentFromConfig, d as detachFromConfig, o as onDsConfigChange, g as updateDsAllowedLanguages, i as updateDsAnimated, h as updateDsIcons, e as updateDsLanguage, j as updateDsLogger, f as updateDsRegion } from './config.utils-CR4Xudpz.js';
-import { S as Subject } from './listener-DIZDQOuO.js';
-export { L as ListenToConfig } from './config.decorator-CRYVBTkX.js';
+import { u as useDsConfig } from './config.utils-Db2OSTX3.js';
+export { b as attachComponentToConfig, a as attachToConfig, c as detachComponentFromConfig, d as detachFromConfig, o as onDsConfigChange, g as updateDsAllowedLanguages, i as updateDsAnimated, h as updateDsIcons, e as updateDsLanguage, j as updateDsLogger, f as updateDsRegion } from './config.utils-Db2OSTX3.js';
+import { S as Subject } from './listener-DiVrGAqj.js';
+export { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
 
 /**
  * Returns the char which separates day form month and year.

package/dist/esm/{listener-DIZDQOuO.js → listener-DiVrGAqj.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { d as dsBrowser } from './index-B-v2Wm-V.js';
+import { d as dsBrowser } from './index-MUUOiuTm.js';
 
 class Subject {
     constructor(notifyCallback) {