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

package/dist/collection/components/stack/stack.js

@@ -12,23 +12,6 @@ import { STACK_SPACES, STACK_PADDINGS, STACK_ALIGNMENTS, STACK_DIRECTIONS, } fro
  */
 export class Stack {
     constructor() {
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * Defines the text positioning like center, right or default to start.
-         */
-        this.align = '';
-        /**
-         * @internal
-         * Please use align instead.
-         */
-        this.alignment = '';
-        /**
-         * Defines the direction of the child elements. Default is column.
-         */
-        this.direction = '';
         /**
          * Defines the width of the stack to be exactly the width of the content.
          */
@@ -62,11 +45,11 @@ export class Stack {
         const p = normalizeDeprecatedTShirtSize(this.p) || '';
         const px = normalizeDeprecatedTShirtSize(this.px) || '';
         const py = normalizeDeprecatedTShirtSize(this.py) || '';
-        let alignValue = hasValue(this.align) ? this.align.split(' ').join('-') : undefined;
-        if (hasValue(this.alignment)) {
+        let alignValue = this.align ? this.align.split(' ').join('-') : undefined;
+        if (this.alignment) {
             alignValue = this.alignment.split(' ').join('-');
         }
-        return (h(Host, { key: '7ec517c74a36f5cefa0768e200a0e0b9a4f07254', class: {
+        return (h(Host, { key: 'dd0bd9e7c80b67577eb65ff49703788eff026835', class: {
                 'stack': true,
                 'as-row': this.direction === 'row',
                 'as-col': this.direction === 'column',
@@ -79,7 +62,7 @@ export class Stack {
                 [`p-${p}`]: hasValue(this.p),
                 [`px-${px}`]: hasValue(this.px),
                 [`py-${py}`]: hasValue(this.py),
-            } }, h("slot", { key: 'cbf33c8419308c4ce410cb0a059386425c5333b4' })));
+            } }, h("slot", { key: 'efab6583321216d1b9674b3d959ca347d9aacfb6' })));
     }
     static get is() { return "ds-stack"; }
     static get originalStyleUrls() {
@@ -99,7 +82,7 @@ export class Stack {
                 "mutable": false,
                 "complexType": {
                     "original": "StackAlignment",
-                    "resolved": "\"\" | \"bottom center\" | \"bottom end\" | \"bottom start\" | \"center\" | \"end\" | \"start\" | \"top center\" | \"top end\" | \"top start\"",
+                    "resolved": "\"bottom center\" | \"bottom end\" | \"bottom start\" | \"center\" | \"end\" | \"start\" | \"top center\" | \"top end\" | \"top start\" | undefined",
                     "references": {
                         "StackAlignment": {
                             "location": "import",
@@ -110,7 +93,7 @@ export class Stack {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Defines the text positioning like center, right or default to start."
@@ -118,15 +101,14 @@ export class Stack {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "align",
-                "defaultValue": "''"
+                "attribute": "align"
             },
             "alignment": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "StackAlignment",
-                    "resolved": "\"\" | \"bottom center\" | \"bottom end\" | \"bottom start\" | \"center\" | \"end\" | \"start\" | \"top center\" | \"top end\" | \"top start\"",
+                    "resolved": "\"bottom center\" | \"bottom end\" | \"bottom start\" | \"center\" | \"end\" | \"start\" | \"top center\" | \"top end\" | \"top start\" | undefined",
                     "references": {
                         "StackAlignment": {
                             "location": "import",
@@ -137,7 +119,7 @@ export class Stack {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "internal",
@@ -148,15 +130,14 @@ export class Stack {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "alignment",
-                "defaultValue": "''"
+                "attribute": "alignment"
             },
             "direction": {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
                     "original": "StackDirection",
-                    "resolved": "\"\" | \"column\" | \"column-reverse\" | \"row\" | \"row-reverse\"",
+                    "resolved": "\"column\" | \"column-reverse\" | \"row\" | \"row-reverse\" | undefined",
                     "references": {
                         "StackDirection": {
                             "location": "import",
@@ -167,7 +148,7 @@ export class Stack {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Defines the direction of the child elements. Default is column."
@@ -175,8 +156,7 @@ export class Stack {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "direction",
-                "defaultValue": "''"
+                "attribute": "direction"
             },
             "fitContent": {
                 "type": "boolean",

package/dist/collection/components/steps/step-panel/step-panel.js

@@ -28,7 +28,7 @@ export class StepPanel {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '9100c4970632362a24e7556dad16a9ae78c26c99', role: "tabpanel", class: { 'is-selected': this.selected }, "aria-hidden": this.selected ? null : 'true', tabIndex: this.selected ? 0 : -1 }, h("slot", { key: '0e5d9adbdb99773a528ee99c4f74830ace3bd6e4' })));
+        return (h(Host, { key: '069c37c16fab0a456e81b3994a5f130f555a1943', role: "tabpanel", class: { 'is-selected': this.selected }, "aria-hidden": this.selected ? null : 'true', tabIndex: this.selected ? 0 : -1 }, h("slot", { key: 'd5e51ed65c86e3b1f50f7978918ca48a760594bf' })));
     }
     static get is() { return "ds-step-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tab-panel/tab-panel.js

@@ -28,7 +28,7 @@ export class TabPanel {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: 'ea4a246545d0c21beaae274d7b5cbb16d8ddb85d', role: "tabpanel", class: { 'is-selected': this.selected }, "aria-hidden": this.selected ? null : 'true', tabIndex: this.selected ? 0 : -1 }, h("slot", { key: '05489a1a0f725057ca6abf569222a242a60e16cf' })));
+        return (h(Host, { key: '86e6f7c744c989963959401612dcee1e962bdb02', role: "tabpanel", class: { 'is-selected': this.selected }, "aria-hidden": this.selected ? null : 'true', tabIndex: this.selected ? 0 : -1 }, h("slot", { key: '9ddf8ff34a1293622f32abbcd7c40a6607aa59e3' })));
     }
     static get is() { return "ds-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs/tabs.js

@@ -240,14 +240,14 @@ export class Tabs {
      */
     render() {
         const isNav = this.isNavigation();
-        const tablistDiv = (h("div", { key: '245fdce72c8ec78a305aba63b4aad162baf56660', id: "tablist", part: "tablist", role: isNav ? undefined : 'tablist', "aria-orientation": !isNav && this.vertical ? 'vertical' : undefined, onKeyDown: this.handleKeyDown, ref: el => {
+        const tablistDiv = (h("div", { key: 'b3b8934a8997c4ee17e2738c000b9df17e2db0c2', id: "tablist", part: "tablist", role: isNav ? undefined : 'tablist', "aria-orientation": !isNav && this.vertical ? 'vertical' : undefined, onKeyDown: this.handleKeyDown, ref: el => {
                 this.tablistEl = el;
-            } }, h("slot", { key: '0216104ce661ec5341ced772c623903b1a0d7b69', name: "tab", onSlotchange: this.handleSlotChange }), h("div", { key: 'e155a48e10ecc834a37c0831b683146851f20eae', class: "indicator", "aria-hidden": "true", ref: el => {
+            } }, h("slot", { key: 'dd98a77986591a17f0b627019dd5f2076dfcc4c6', name: "tab", onSlotchange: this.handleSlotChange }), h("div", { key: '34697c2c75688748ea5b2c2ea3ad83a4ee40efcf', class: "indicator", "aria-hidden": "true", ref: el => {
                 this.indicatorEl = el;
             } })));
         const i18n = i18nDsTabs[this.language];
         const tablistContainer = this.vertical ? (tablistDiv) : (h("div", { class: "tablist-outer" }, h("button", { class: "scroll-btn scroll-btn--prev", "aria-label": i18n.scrollLeft, "aria-hidden": "true", tabIndex: -1, onClick: this.scrollPrev }, h("ds-icon", { name: "caret-left", size: "sm" })), tablistDiv, h("button", { class: "scroll-btn scroll-btn--next", "aria-label": i18n.scrollRight, "aria-hidden": "true", tabIndex: -1, onClick: this.scrollNext }, h("ds-icon", { name: "caret-right", size: "sm" }))));
-        return (h(Host, { key: '9d12012542b086c78eb96c57582cc7a633f498bd', class: {
+        return (h(Host, { key: 'a4509a1ab21b938602815e4d928a9c5925250472', class: {
                 'is-fullwidth': this.fullwidth,
                 'is-inverted': this.inverted,
                 'is-purple': this.color === 'purple',
@@ -260,7 +260,7 @@ export class Tabs {
                 'has-overflow': this.canScrollLeft || this.canScrollRight,
                 'can-scroll-left': this.canScrollLeft,
                 'can-scroll-right': this.canScrollRight,
-            } }, isNav ? h("nav", { "aria-label": this.label || undefined }, tablistContainer) : tablistContainer, h("slot", { key: '482832affe4d974a55db8e2b07d79316c0176701', onSlotchange: this.handleSlotChange })));
+            } }, isNav ? h("nav", { "aria-label": this.label || undefined }, tablistContainer) : tablistContainer, h("slot", { key: '1d7f1a3897cd57c4f1fdc72aa581373f24c80637', onSlotchange: this.handleSlotChange })));
     }
     static get is() { return "ds-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tag/tag-group/tag-group.js

@@ -18,7 +18,7 @@ export class TagGroup {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: 'bfd564c13597394e0c6d534b0f47fd0df4d2d1cd' }, h("slot", { key: '06a2320d225785d7aafe5b4a3f79c698dfcc39ff' })));
+        return (h(Host, { key: 'a96c877fa4249aacb365574331462b5269347506' }, h("slot", { key: '7d0a574edd2fc4b6d2e7e64b309ccbfe6b3bc86f' })));
     }
     static get is() { return "ds-tag-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tag/tag.host.css

@@ -1 +1 @@
-: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:inline-flex;align-items:center;justify-content:center;vertical-align:bottom;box-sizing:border-box;gap:var(--_tag-gap);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:inline-flex;justify-content: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:inline-flex}
+: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:inline-flex;align-items:center;justify-content:center;vertical-align:bottom;box-sizing:border-box;gap:var(--_tag-gap);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:inline-flex;justify-content: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:inline-flex}

package/dist/collection/components/tag/tag.js

@@ -63,14 +63,14 @@ export class Tag {
      */
     render() {
         const size = normalizeDeprecatedTShirtSize(this.size) || '';
-        return (h(Host, { key: 'f725d01419ff0d95f1539115a9c294bc0530891d', class: {
+        return (h(Host, { key: 'b5661eb0f112158f6322cb7f68e8b2bc70b5539d', class: {
                 [`is-${this.color}`]: hasValue(this.color),
                 [`is-${size}`]: hasValue(this.size),
                 [`is-shape-${this.shape}`]: hasValue(this.shape),
                 'is-closable': this.closable,
                 'is-disabled': this.disabled,
                 'is-invalid': this.invalid,
-            } }, h("span", { key: '27a70b6402bce1bed3ada2b36a378a444f6dde59', part: "label" }, h("slot", { key: '77021c9a9ab7e596d3cc0917165b916f5e3d8621' })), this.closable && !this.disabled ? (h("ds-close", Object.assign({}, this.inheritedAttributesClose, { onClick: (ev) => this.dsCloseClick.emit(ev) }))) : ('')));
+            } }, h("span", { key: '79a20487f389ed804a44e1a85596e7499a755282', part: "label" }, h("slot", { key: '012168b23c6da831bdaca31a514156da9d618b8d' })), this.closable && !this.disabled ? (h("ds-close", Object.assign({}, this.inheritedAttributesClose, { onClick: (ev) => this.dsCloseClick.emit(ev) }))) : ('')));
     }
     static get is() { return "ds-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/text.host.css

@@ -1 +1 @@
-:host{--_text-position: var(--text-position, var(--mod-text-position, static));--_text-top: var(--text-top, var(--mod-text-top));--_text-right: var(--text-right, var(--mod-text-right));--_text-bottom: var(--text-bottom, var(--mod-text-bottom));--_text-left: var(--text-left, var(--mod-text-left));position:var(--_text-position);top:var(--_text-top);right:var(--_text-right);bottom:var(--_text-bottom);left:var(--_text-left);--_text-m: var(--text-m, var(--mod-text-m, 0));--_text-my: var(--text-my, var(--mod-text-my));--_text-mx: var(--text-mx, var(--mod-text-mx));--_text-ml: var(--text-ml, var(--mod-text-ml));--_text-mr: var(--text-mr, var(--mod-text-mr));--_text-mt: var(--text-mt, var(--mod-text-mt));--_text-mb: var(--text-mb, var(--mod-text-mb));margin:var(--_text-m);margin-inline:var(--_text-mx);margin-block:var(--_text-my);margin-left:var(--_text-ml);margin-right:var(--_text-mr);margin-top:var(--_text-mt);margin-bottom:var(--_text-mb);--_text-color: var(--text-color, var(--mod-text-color, inherit));--_text-align: var(--text-align, var(--mod-text-align, inherit));--_text-family: var(--text-family, var(--mod-text-family, var(--ds-body-family)));--_text-weight: var(--text-weight, var(--mod-text-weight, var(--ds-body-weight)));--_text-line-height: var(--text-line-height, var(--mod-text-line-height, var(--ds-body-line-height)));--_text-size: var(--text-size, var(--mod-text-size, var(--ds-text-size-base-device)));--_text-shadow: var(--text-shadow, var(--mod-text-shadow, var(--ds-alias-shadow-text)));--_text-space: var(--text-space, var(--mod-text-space, var(--ds-body-space)));--_text-shadow: var(--text-shadow, var(--mod-text-shadow, none))}#text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;text-align:var(--_text-align);color:var(--_text-color);font-family:var(--_text-family);font-weight:var(--_text-weight);line-height:var(--_text-line-height);font-size:var(--_text-size);text-shadow:var(--_text-shadow)}#text b,#text strong,#text .is-bold{font-weight:var(--ds-text-weight-bold)}:host(.has-no-wrap) #text.is-centered{--mod-text-align: center}:host(.has-no-wrap) #text.is-right{--mod-text-align: right}:host(.has-no-wrap) #text.is-justified{--mod-text-align: justify}:host(.has-no-wrap) #text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host(.is-bold){--mod-text-weight: var(--ds-text-weight-bold)}:host(.has-shadow){--mod-text-shadow: var(--ds-text-shadow)}:host(.is-inline){display:inline}:host(.is-white){--mod-text-color: var(--ds-text-color-white)}:host(.is-black){--mod-text-color: var(--ds-text-color-black)}:host(.is-primary){--mod-text-color: var(--ds-text-color-primary)}:host(.is-primary-hover){--mod-text-color: var(--ds-text-color-primary-hover)}:host(.is-primary-active){--mod-text-color: var(--ds-text-color-primary-active)}:host(.is-inverted-primary){--mod-text-color: var(--ds-text-color-inverted-primary)}:host(.is-inverted-primary-hover){--mod-text-color: var(--ds-text-color-inverted-primary-hover)}:host(.is-inverted-primary-active){--mod-text-color: var(--ds-text-color-inverted-primary-active)}:host(.is-primary-light){--mod-text-color: var(--ds-text-color-primary-light)}:host(.is-hint){--mod-text-color: var(--ds-text-color-hint)}:host(.is-grey-light){--mod-text-color: var(--ds-text-color-grey-light)}:host(.is-grey){--mod-text-color: var(--ds-text-color-grey)}:host(.is-grey-dark){--mod-text-color: var(--ds-text-color-grey-dark)}:host(.is-disabled){--mod-text-color: var(--ds-text-color-disabled)}:host(.is-inverted-disabled){--mod-text-color: var(--ds-text-color-inverted-disabled)}:host(.is-info){--mod-text-color: var(--ds-text-color-info)}:host(.is-warning){--mod-text-color: var(--ds-text-color-warning)}:host(.is-success){--mod-text-color: var(--ds-text-color-success)}:host(.is-danger){--mod-text-color: var(--ds-text-color-danger)}:host(.is-danger-hover){--mod-text-color: var(--ds-text-color-danger-hover)}:host(.is-danger-active){--mod-text-color: var(--ds-text-color-danger-active)}:host(.is-xs){--mod-text-size: var(--ds-text-size-xs-device)}:host(.is-sm){--mod-text-size: var(--ds-text-size-sm-device)}:host(.is-base){--mod-text-size: var(--ds-text-size-base-device)}:host(.is-md){--mod-text-size: var(--ds-text-size-md-device)}:host(.is-lg){--mod-text-size: var(--ds-text-size-lg-device)}:host(.is-xl){--mod-text-size: var(--ds-text-size-xl-device)}:host(.is-2xl){--mod-text-size: var(--ds-text-size-2xl-device)}:host(.is-3xl){--mod-text-size: var(--ds-text-size-3xl-device)}:host(.is-4xl){--mod-text-size: var(--ds-text-size-4xl-device)}:host(.is-5xl){--mod-text-size: var(--ds-text-size-5xl-device)}:host(.is-small){--mod-text-size: var(--ds-text-size-sm-device)}:host(.is-lead){--mod-text-size: var(--ds-text-size-lg-device)}:host(.is-block){--mod-text-size: var(--ds-text-size-md-device)}:host(.is-heading){--mod-text-family: var(--ds-text-family-heading);--mod-text-weight: var(--ds-text-weight-bold);--mod-text-line-height: var(--ds-text-line-height-heading)}:host(.is-subtitle){--mod-text-family: var(--ds-text-family-heading);--mod-text-weight: var(--ds-text-weight-light);--mod-text-line-height: var(--ds-text-line-height-heading)}:host(.has-space-all){--text-mt: var(--_text-space);--text-mb: var(--_text-space)}:host(.has-space-top){--text-mt: var(--_text-space);--text-mb: 0}:host(.has-space-bottom){--text-mt: 0;--text-mb: var(--_text-space)}:host(.has-space-none){--text-mt: 0;--text-mb: 0}:host{display:block}
+:host{--_text-position: var(--text-position, var(--mod-text-position, static));--_text-top: var(--text-top, var(--mod-text-top));--_text-right: var(--text-right, var(--mod-text-right));--_text-bottom: var(--text-bottom, var(--mod-text-bottom));--_text-left: var(--text-left, var(--mod-text-left));position:var(--_text-position);top:var(--_text-top);right:var(--_text-right);bottom:var(--_text-bottom);left:var(--_text-left);--_text-m: var(--text-m, var(--mod-text-m, 0));--_text-my: var(--text-my, var(--mod-text-my));--_text-mx: var(--text-mx, var(--mod-text-mx));--_text-ml: var(--text-ml, var(--mod-text-ml));--_text-mr: var(--text-mr, var(--mod-text-mr));--_text-mt: var(--text-mt, var(--mod-text-mt));--_text-mb: var(--text-mb, var(--mod-text-mb));margin:var(--_text-m);margin-inline:var(--_text-mx);margin-block:var(--_text-my);margin-left:var(--_text-ml);margin-right:var(--_text-mr);margin-top:var(--_text-mt);margin-bottom:var(--_text-mb);--_text-color: var(--text-color, var(--mod-text-color, inherit));--_text-align: var(--text-align, var(--mod-text-align, inherit));--_text-family: var(--text-family, var(--mod-text-family, var(--ds-body-family)));--_text-weight: var(--text-weight, var(--mod-text-weight, var(--ds-body-weight)));--_text-line-height: var(--text-line-height, var(--mod-text-line-height, var(--ds-body-line-height)));--_text-size: var(--text-size, var(--mod-text-size, var(--ds-alias-text-size-base-device)));--_text-shadow: var(--text-shadow, var(--mod-text-shadow, var(--ds-alias-shadow-text)));--_text-space: var(--text-space, var(--mod-text-space, var(--ds-body-space)));--_text-shadow: var(--text-shadow, var(--mod-text-shadow, none))}#text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;text-align:var(--_text-align);color:var(--_text-color);font-family:var(--_text-family);font-weight:var(--_text-weight);line-height:var(--_text-line-height);font-size:var(--_text-size);text-shadow:var(--_text-shadow)}#text b,#text strong,#text .is-bold{font-weight:var(--ds-alias-text-weight-bold)}:host(.has-no-wrap) #text.is-centered{--mod-text-align: center}:host(.has-no-wrap) #text.is-right{--mod-text-align: right}:host(.has-no-wrap) #text.is-justified{--mod-text-align: justify}:host(.has-no-wrap) #text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host(.is-bold){--mod-text-weight: var(--ds-alias-text-weight-bold)}:host(.has-shadow){--mod-text-shadow: var(--ds-alias-text-shadow)}:host(.is-inline){display:inline}:host(.is-white){--mod-text-color: var(--ds-alias-text-color-white)}:host(.is-black){--mod-text-color: var(--ds-alias-text-color-black)}:host(.is-primary){--mod-text-color: var(--ds-alias-text-color-primary)}:host(.is-primary-hover){--mod-text-color: var(--ds-alias-text-color-primary-hover)}:host(.is-primary-active){--mod-text-color: var(--ds-alias-text-color-primary-active)}:host(.is-inverted-primary){--mod-text-color: var(--ds-alias-text-color-inverted-primary)}:host(.is-inverted-primary-hover){--mod-text-color: var(--ds-alias-text-color-inverted-primary-hover)}:host(.is-inverted-primary-active){--mod-text-color: var(--ds-alias-text-color-inverted-primary-active)}:host(.is-primary-light){--mod-text-color: var(--ds-alias-text-color-primary-light)}:host(.is-hint){--mod-text-color: var(--ds-alias-text-color-hint)}:host(.is-grey-light){--mod-text-color: var(--ds-alias-text-color-grey-light)}:host(.is-grey){--mod-text-color: var(--ds-alias-text-color-grey)}:host(.is-grey-dark){--mod-text-color: var(--ds-alias-text-color-grey-dark)}:host(.is-disabled){--mod-text-color: var(--ds-alias-text-color-disabled)}:host(.is-inverted-disabled){--mod-text-color: var(--ds-alias-text-color-inverted-disabled)}:host(.is-info){--mod-text-color: var(--ds-alias-text-color-info)}:host(.is-warning){--mod-text-color: var(--ds-alias-text-color-warning)}:host(.is-success){--mod-text-color: var(--ds-alias-text-color-success)}:host(.is-danger){--mod-text-color: var(--ds-alias-text-color-danger)}:host(.is-danger-hover){--mod-text-color: var(--ds-alias-text-color-danger-hover)}:host(.is-danger-active){--mod-text-color: var(--ds-alias-text-color-danger-active)}:host(.is-xs){--mod-text-size: var(--ds-alias-text-size-xs-device)}:host(.is-sm){--mod-text-size: var(--ds-alias-text-size-sm-device)}:host(.is-base){--mod-text-size: var(--ds-alias-text-size-base-device)}:host(.is-md){--mod-text-size: var(--ds-alias-text-size-md-device)}:host(.is-lg){--mod-text-size: var(--ds-alias-text-size-lg-device)}:host(.is-xl){--mod-text-size: var(--ds-alias-text-size-xl-device)}:host(.is-2xl){--mod-text-size: var(--ds-alias-text-size-2xl-device)}:host(.is-3xl){--mod-text-size: var(--ds-alias-text-size-3xl-device)}:host(.is-4xl){--mod-text-size: var(--ds-alias-text-size-4xl-device)}:host(.is-5xl){--mod-text-size: var(--ds-alias-text-size-5xl-device)}:host(.is-small){--mod-text-size: var(--ds-alias-text-size-sm-device)}:host(.is-lead){--mod-text-size: var(--ds-alias-text-size-lg-device)}:host(.is-block){--mod-text-size: var(--ds-alias-text-size-md-device)}:host(.is-heading){--mod-text-family: var(--ds-alias-text-family-heading);--mod-text-weight: var(--ds-alias-text-weight-bold);--mod-text-line-height: var(--ds-alias-text-line-height-heading)}:host(.is-subtitle){--mod-text-family: var(--ds-alias-text-family-heading);--mod-text-weight: var(--ds-alias-text-weight-light);--mod-text-line-height: var(--ds-alias-text-line-height-heading)}:host(.has-space-all){--text-mt: var(--_text-space);--text-mb: var(--_text-space)}:host(.has-space-top){--text-mt: var(--_text-space);--text-mb: 0}:host(.has-space-bottom){--text-mt: 0;--text-mb: var(--_text-space)}:host(.has-space-none){--text-mt: 0;--text-mb: 0}:host{display:block}

package/dist/collection/components/text/text.js

@@ -112,7 +112,7 @@ export class Text {
     render() {
         const Text = this.inline ? 'span' : 'p';
         const color = this.parseColor();
-        return (h(Host, { key: '101acafa36573cc60a9fd5a325f0c2385dd97e16', class: {
+        return (h(Host, { key: 'aeb2a4c195c26472a6b220e9bf6b467fbb3c08b7', class: {
                 [`is-${color}`]: hasValue(color),
                 'is-bold': this.bold,
                 'has-shadow': this.shadow,
@@ -122,9 +122,9 @@ export class Text {
                 'has-no-wrap': this.noWrap,
                 [`has-space-${this.space}`]: hasValue(this.space),
                 [`is-${this.size}`]: hasValue(this.size),
-            } }, h(Text, { key: 'deccf1ef96652a71578d30e31b3f638c75cabda8', id: "text", part: "text", class: {
+            } }, h(Text, { key: '89cd8bb57e660ea18a684bb5e39722db7c488083', id: "text", part: "text", class: {
                 [`is-${this.align}`]: hasValue(this.align),
-            } }, h("slot", { key: '1779627b8463bf67bf4b99e1050c9e3bad6567b9' }))));
+            } }, h("slot", { key: '27869591db1ec7e90acfcca7630f2bc3955f32be' }))));
     }
     static get is() { return "ds-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/test/textarea.visual.play.js

@@ -3,13 +3,13 @@
  */
 import { expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
 const TAG = 'textarea';
-const VARIANTS = ['basic', 'disabled', 'invalid', 'valid', 'warning', 'rows', 'long-content'];
+const VARIANTS = ['basic', 'disabled', 'invalid', 'invalid-slot', 'valid', 'warning', 'rows', 'long-content'];
 const image = screenshot(TAG);
 test.describe('style', () => {
     test.beforeEach('Setup', async ({ page }) => {
         await page.setupVisualTest(`/components/${TAG}/test/${TAG}.style.html`);
     });
-    VARIANTS.filter(v => !['rows', 'long-content'].includes(v)).forEach(variant => {
+    VARIANTS.filter(v => !['rows', 'long-content', 'invalid-slot'].includes(v)).forEach(variant => {
         test(variant, async ({ page }) => {
             const el = page.getByTestId(variant);
             await expectScreenshot(el, image(`style-${variant}`));

package/dist/collection/components/textarea/textarea.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, } from "@stencil/core";
-import { inheritAttributes, FormControl, debounceEvent, Logger, OneOf, Type, } from "../../utils/index";
+import { inheritAttributes, FormControl, debounceEvent, Logger, OneOf, Type, watchInvalidTextSlot, } from "../../utils/index";
 import { defaultConfig, ListenToConfig } from "../../global/index";
 import { Field } from "../input/field.util";
 import { INPUT_COLORS, INPUT_INPUT_MODES } from "../input/input.interfaces";
@@ -12,6 +12,7 @@ import { TEXTAREA_WRAPS, } from "./textarea.interfaces";
  * Textarea renders a multi-line text input field with validation, resizing, and optional help/error messaging.
  *
  * @slot - The textarea field content and surrounding elements.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part textarea - The native HTML textarea element.
  * @part prefix - The prefix wrapper (if used).
  * @part suffix - The suffix wrapper (if used).
@@ -22,6 +23,7 @@ export class Textarea {
         this.inheritedAttributes = {};
         this.control = new FormControl(this);
         this.focused = false;
+        this.hasInvalidTextSlotContent = false;
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
         /**
@@ -130,6 +132,13 @@ export class Textarea {
     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']);
@@ -182,7 +191,8 @@ export class Textarea {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: 'eed94ad65298572829562a0d13d3decd677c2fbb', 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: 'e8030aee2620ae0384945396cc794981a017287a', 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 is() { return "ds-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -668,6 +678,7 @@ export class Textarea {
     static get states() {
         return {
             "focused": {},
+            "hasInvalidTextSlotContent": {},
             "language": {},
             "region": {}
         };

package/dist/collection/components/toggle/toggle.js

@@ -142,7 +142,7 @@ export class Toggle {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '1b7d121632acd52923b9fde51d6c960b13d0660b', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
+        return (h(Host, { key: '82e0075aa3e76cc231d0e507de6f6abbc6947fbd', "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,
@@ -153,7 +153,7 @@ export class Toggle {
                 [`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,
-            } }, h("label", { key: '02ab5607ab4e4df86bb693d4d17f6b92bcaaffe1', id: "label", part: "label" }, h("input", Object.assign({ key: '67cbba07cd0f24182220936effbcf4e226fe59a5', 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: '9d95926646c9f3f9fee266ddc2a6b2755ba720a8', id: "slot", part: "slot" }, h("slot", { key: '398da82c7431036f155fd81cb3ce1bf80e49deeb' })))));
+            } }, h("label", { key: '0a6ec1155840f00f9cba605ed1436744d7ea5c44', id: "label", part: "label" }, h("input", Object.assign({ key: 'fce712af56287d341b3e096b87338e75aa078e7e', 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: 'ddabd79fa0110eb5d3bf25023814af1cd75c4c28', id: "slot", part: "slot" }, h("slot", { key: '05f2ca777a6d522ecc30e5bff1fba852ef32b3a5' })))));
     }
     static get is() { return "ds-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -155,7 +155,7 @@ export class Tooltip {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '4b6018fca5ddd89e53f8cefcc90af9ac530679dc', id: this.tooltipId, role: "tooltip", "aria-hidden": `${!this.presented}` }, h("div", { key: 'abb02eb66ea7991879fdbd8275e4638e050b3ec6', part: "container", ref: el => (this.containerEl = el) }, h("div", { key: '4087e11edcd4728524d59b08c173668d69d0d146', part: "content", "data-testid": "ds-tooltip-content" }, h("slot", { key: 'e50b739cabe6e2a2c892def29bbd860a38c60369' })))));
+        return (h(Host, { key: '70f12c4635b8547887442ac1be6a3384f0754f01', id: this.tooltipId, role: "tooltip", "aria-hidden": `${!this.presented}` }, h("div", { key: '6934ecd48ac24eabd34e190c9d00f7c40346102e', part: "container", ref: el => (this.containerEl = el) }, h("div", { key: 'c85391dbfa57c220d5176c6a65ccad6d88ecb135', part: "content", "data-testid": "ds-tooltip-content" }, h("slot", { key: '88af144938af076f3278e0a8579c75dccd71f36f' })))));
     }
     static get is() { return "ds-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/global/constants/tags.constant.js

@@ -36,6 +36,7 @@ export const tags = [
     "ds-hint-title",
     "ds-icon",
     "ds-input",
+    "ds-input-slider",
     "ds-item",
     "ds-label",
     "ds-list",

package/dist/collection/global/constants/version.constant.js

@@ -2,4 +2,4 @@
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
 // generated by .build/version.js
-export const VERSION = '20.0.0-next.6';
+export const VERSION = '20.0.0-next.8';

package/dist/collection/global/global.js

@@ -2,6 +2,8 @@
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
 import { initializeDesignSystem } from "./initialize";
+import { initializeTokenPreview } from "./token-preview";
 export default function () {
     initializeDesignSystem();
+    initializeTokenPreview();
 }

package/dist/collection/global/token-preview.js

@@ -0,0 +1,75 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+/**
+ * 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).
+ */
+export 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' }, '*');
+};

package/dist/collection/global/token-preview.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/index.js

@@ -13,6 +13,7 @@ export * from './form-control';
 export * from './has-value';
 export * from './helpers';
 export * from './is-iso-date';
+export * from './invalid-text-slot';
 export * from './is-value-empty';
 export * from './log';
 export * from './number';

package/dist/collection/utils/invalid-text-slot.js

@@ -0,0 +1,31 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+/**
+ * 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`.
+ */
+export 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();
+    };
+}