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

package/dist/collection/components/popup/popup.js

@@ -328,7 +328,7 @@ export class Popup {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '1acef99537a662beb11707ea44705635eb093f85', class: { 'is-open': this.isOpen, 'is-animated': this.animated, 'is-closable': this.closable } }, this.backdrop && h("div", { key: '229be10bffd71308a8050f748990d277969c7555', part: "backdrop" }), h("div", { key: 'ddc418c04afeca07d97763a576f3c76928977c55', part: "panel", ref: el => (this.panelEl = el), role: this.role, "aria-modal": this.role === 'dialog' ? 'true' : undefined, "aria-label": this.label || undefined, tabindex: "-1", "data-testid": "ds-popup-panel" }, this.arrow && h("div", { key: '04bd45355d808e0246c3501056edfcb74a8dd941', part: "arrow", ref: el => (this.arrowEl = el) }), this.closable && h("ds-close", { key: 'd324a0c8cff055c82f0b907159a8d17cc55d9898', part: "close", onClick: this.handleCloseClick }), h("slot", { key: '06ad646944b283c6337a32ad17267f947ab9be8f' }))));
+        return (h(Host, { key: '63b4cf37af2e73b271f9c7fee523e7c68986081f', class: { 'is-open': this.isOpen, 'is-animated': this.animated, 'is-closable': this.closable } }, this.backdrop && h("div", { key: '208a95330c83c4dd2328ce9e87a06b7aab7ab404', part: "backdrop" }), h("div", { key: '969fde6073490ce0803c0cadcaa9ec06a7704361', part: "panel", ref: el => (this.panelEl = el), role: this.role, "aria-modal": this.role === 'dialog' ? 'true' : undefined, "aria-label": this.label || undefined, tabindex: "-1", "data-testid": "ds-popup-panel" }, this.arrow && h("div", { key: '228d1a47041090c57e395e240f2ebb5678f9c8e1', part: "arrow", ref: el => (this.arrowEl = el) }), this.closable && h("ds-close", { key: 'd18c4ac4848e7ee31256384be4e7e8dd2b8b5a49', part: "close", onClick: this.handleCloseClick }), h("slot", { key: 'ad9430d619bccde71bfeee2faffd1dde34dc43bd' }))));
     }
     static get is() { return "ds-popup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.js

@@ -85,7 +85,7 @@ export class ProgressBar {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: 'a62c9348298ce8a4d17ada8d666433060930c5dd', role: "progressbar", "aria-label": `${i18nDsProgressBar[this.language].progress}: ${this.value}%`, "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100", class: {
+        return (h(Host, { key: 'f58b0f36bace8a5e6afa02993dd51b9f22c02ec8', role: "progressbar", "aria-label": `${i18nDsProgressBar[this.language].progress}: ${this.value}%`, "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100", class: {
                 'is-light': hasValue(this.background) && this.background === 'light',
                 'is-dark': !hasValue(this.background) || this.background === 'dark',
                 'is-primary': !hasValue(this.color) || this.color === 'primary',
@@ -93,7 +93,7 @@ export class ProgressBar {
                 'is-yellow': hasValue(this.color) && this.color === 'yellow',
                 'is-red': hasValue(this.color) && this.color === 'red',
                 'is-green': hasValue(this.color) && this.color === 'green',
-            } }, h("div", { key: '7bfac5f71dd4ff19597606a588477658d0cff944', id: "line", part: "line", class: {
+            } }, h("div", { key: '512721ca39c4c559b40bdd0a4d7d51da7d5ef6f2', id: "line", part: "line", class: {
                 'is-animated': this.animated,
             }, ref: lineEl => (this.lineEl = lineEl) })));
     }

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

@@ -86,6 +86,10 @@ export class RadioGroup {
          * Defines the layout of the input
          */
         this.tile = false;
+        /**
+         * If `true` and `tile` is set, the radio circle is visually hidden on every radio in the group.
+         */
+        this.hideTrigger = false;
         /**
          * Defines the color of the tile checkbox.
          */
@@ -102,6 +106,10 @@ export class RadioGroup {
             this.setRadioTabindex(this.value);
             this.setRadioChecked();
         };
+        this.handleSlotChange = () => {
+            this.passDownAttributes();
+            this.handleValueChange();
+        };
         this.handleClick = (ev) => {
             const element = ev.target;
             if (element.href) {
@@ -144,6 +152,9 @@ export class RadioGroup {
     componentWillUpdate() {
         this.passDownAttributes();
     }
+    componentDidLoad() {
+        this.handleSlotChange();
+    }
     /**
      * PUBLIC LISTENERS
      * ------------------------------------------------------
@@ -232,6 +243,7 @@ export class RadioGroup {
      */
     passDownAttributes() {
         this.getRadios().forEach(radio => {
+            var _a;
             if (this.disabled !== undefined) {
                 radio.disabled = this.disabled;
             }
@@ -243,7 +255,8 @@ export class RadioGroup {
             }
             radio.labelPosition = this.labelPosition;
             radio.tile = this.tile;
-            radio.tileColor = this.tileColor;
+            radio.hideTrigger = this.hideTrigger;
+            radio.tileColor = (_a = radio.getAttribute('tile-color')) !== null && _a !== void 0 ? _a : this.tileColor;
             radio.cols = this.cols;
             radio.colsTablet = this.colsTablet;
             radio.colsMobile = this.colsMobile;
@@ -280,10 +293,10 @@ export class RadioGroup {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: '6b73d9b9050aea5ad17c934f5c57667aa36b65e4', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
+        return (h(Field, { key: 'e52d1c8b0aafdbf523cd91bae9dfc0d563eb5002', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
                 'is-vertical': this.vertical,
                 'is-tile': this.tile,
-            }, onClick: this.handleClick }, h("slot", { key: '6c090a936fab5b14946544e52cf30890f719c2ff' })));
+            }, onClick: this.handleClick }, h("slot", { key: 'd235eec63f1e13a9de4988b841ea124f05d9a2a3', onSlotchange: this.handleSlotChange })));
     }
     static get is() { return "ds-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -655,6 +668,26 @@ export class RadioGroup {
                 "attribute": "tile",
                 "defaultValue": "false"
             },
+            "hideTrigger": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` and `tile` is set, the radio circle is visually hidden on every radio in the group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-trigger",
+                "defaultValue": "false"
+            },
             "tileColor": {
                 "type": "string",
                 "mutable": false,
@@ -968,6 +1001,10 @@ __decorate([
     Type('boolean'),
     __metadata("design:type", Boolean)
 ], RadioGroup.prototype, "tile", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], RadioGroup.prototype, "hideTrigger", void 0);
 __decorate([
     OneOf(RADIO_TILE_COLORS),
     __metadata("design:type", String)

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

@@ -1 +1 @@
-:host{--_radio-gap: var(--radio-gap, var(--mod-radio-gap, 0.5rem));--_radio-label-base-color: var(--radio-label-base-color, var(--mod-radio-label-base-color, inherit));--_radio-label-hover-color: var(--radio-label-hover-color, var(--mod-radio-label-hover-color, var(--ds-global-color-sky-5)));--_radio-label-active-color: var(--radio-label-active-color, var(--mod-radio-label-active-color, var(--ds-global-color-primary-6)));--_radio-size: var(--radio-size, var(--mod-radio-size, 1.5rem));--_radio-border-width: var(--radio-border-width, var(--mod-radio-border-width, var(--ds-alias-border-width-base)));--_radio-radius: var(--radio-radius, var(--mod-radio-radius, var(--ds-alias-radius-rounded)));--_radio-tile-radius: var(--radio-tile-radius, var(--mod-radio-tile-radius, var(--ds-alias-radius-base)));--_radio-tile-padding: var(--radio-tile-padding, var(--mod-radio-tile-padding, 1rem));--_radio-tile-border-width: var(--radio-tile-border-width, var(--mod-radio-tile-border-width, var(--ds-alias-border-width-base)));--_radio-tile-base-background-color: var(--radio-tile-base-background-color, var(--mod-radio-tile-base-background-color, inherit));--_radio-tile-base-border-color: var(--radio-tile-base-border-color, var(--mod-radio-tile-base-border-color, var(--ds-global-color-grey-3)));--_radio-tile-hover-background-color: var(--radio-tile-hover-background-color, var(--mod-radio-tile-hover-background-color, var(--ds-global-color-grey-2)));--_radio-tile-hover-border-color: var(--radio-tile-hover-border-color, var(--mod-radio-tile-hover-border-color, var(--ds-global-color-sky-5)));--_radio-tile-active-background-color: var(--radio-tile-active-background-color, var(--mod-radio-tile-active-background-color, var(--ds-global-color-grey-2)));--_radio-tile-active-border-color: var(--radio-tile-active-border-color, var(--mod-radio-tile-active-border-color, var(--ds-global-color-primary-6)));--_radio-unchecked-base-color-background: var(--radio-unchecked-base-color-background, var(--mod-radio-unchecked-base-color-background, transparent));--_radio-unchecked-base-color-border: var(--radio-unchecked-base-color-border, var(--mod-radio-unchecked-base-color-border, var(--ds-global-color-primary-5)));--_radio-unchecked-hover-color-background: var(--radio-unchecked-hover-color-background, var(--mod-radio-unchecked-hover-color-background, var(--ds-global-color-grey-2)));--_radio-unchecked-hover-color-border: var(--radio-unchecked-hover-color-border, var(--mod-radio-unchecked-hover-color-border, var(--ds-global-color-sky-5)));--_radio-unchecked-active-color-background: var(--radio-unchecked-active-color-background, var(--mod-radio-unchecked-active-color-background, var(--ds-global-color-grey-2)));--_radio-unchecked-active-color-border: var(--radio-unchecked-active-color-border, var(--mod-radio-unchecked-active-color-border, var(--ds-global-color-primary-6)));--_radio-checked-base-color-background: var(--radio-checked-base-color-background, var(--mod-radio-checked-base-color-background, var(--ds-global-color-primary-5)));--_radio-checked-base-color-border: var(--radio-checked-base-color-border, var(--mod-radio-checked-base-color-border, var(--ds-global-color-primary-5)));--_radio-checked-base-color-icon: var(--radio-checked-base-color-icon, var(--mod-radio-checked-base-color-icon, var(--ds-global-color-white)));--_radio-checked-hover-color-background: var(--radio-checked-hover-color-background, var(--mod-radio-checked-hover-color-background, var(--ds-global-color-sky-5)));--_radio-checked-hover-color-border: var(--radio-checked-hover-color-border, var(--mod-radio-checked-hover-color-border, var(--ds-global-color-sky-5)));--_radio-checked-active-color-background: var(--radio-checked-active-color-background, var(--mod-radio-checked-active-color-background, var(--ds-global-color-primary-6)));--_radio-checked-active-color-border: var(--radio-checked-active-color-border, var(--mod-radio-checked-active-color-border, var(--ds-global-color-primary-6)))}:host{display:inline-block;box-sizing:border-box !important;outline:none}label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;display:inline-flex;align-items:center;gap:var(--_radio-gap);cursor:pointer;user-select:none;color:var(--_radio-label-base-color);font-family:var(--ds-global-font-family-text);line-height:var(--ds-typography-line-height-base);padding-top:.25rem;padding-bottom:.25rem;min-height:3rem}@media(hover: hover)and (pointer: fine){label:hover{color:var(--_radio-label-hover-color)}}label:active{color:var(--_radio-label-active-color)}label #slot{flex:1}:host input[type=radio]{position:relative;appearance:none;flex:none;display:inline-flex;width:var(--_radio-size);height:var(--_radio-size);background:var(--_radio-unchecked-base-color-background);border:var(--_radio-border-width) solid var(--_radio-unchecked-base-color-border);border-radius:var(--_radio-radius);vertical-align:top;cursor:pointer;transition:background .3s ease-in-out,border-color .3s ease-in-out}:host input[type=radio]:disabled{cursor:default}:host input[type=radio]:focus-visible{outline:var(--ds-alias-interaction-focus-width, 2px) solid var(--ds-alias-interaction-focus-color-base);outline-offset:2px;border-radius:var(--_radio-radius)}:host input[type=radio]:not(:disabled):hover,:host:hover input[type=radio]:not(:disabled):not(:checked){background:var(--_radio-unchecked-hover-color-background);border-color:var(--_radio-unchecked-hover-color-border)}:host input[type=radio]:not(:disabled):active,:host:active input[type=radio]:not(:disabled):not(:checked){background:var(--_radio-unchecked-active-color-background);border-color:var(--_radio-unchecked-active-color-border)}:host input[type=radio]:checked{background:var(--_radio-checked-base-color-background);border-color:var(--_radio-checked-base-color-border)}:host input[type=radio]:checked:not(:disabled):hover,:host:hover input[type=radio]:checked:not(:disabled){background:var(--_radio-checked-hover-color-background);border-color:var(--_radio-checked-hover-color-border)}:host input[type=radio]:checked:not(:disabled):active,:host:active input[type=radio]:checked:not(:disabled){background:var(--_radio-checked-active-color-background);border-color:var(--_radio-checked-active-color-border)}:host input[type=radio]::after{content:"";display:block;border-radius:var(--_radio-radius);height:0;width:0;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);opacity:0;background:rgba(0,0,0,0);transition:opacity .3s ease-in-out,width .3s ease-in-out,height .3s ease-in-out}:host input[type=radio]:checked::after{background-color:var(--_radio-checked-base-color-icon);height:.5rem;width:.5rem;opacity:1}:host(.is-invalid:not(.is-disabled)){--mod-radio-label-base-color: var(--ds-global-color-danger-4);--mod-radio-label-hover-color: var(--ds-global-color-danger-5);--mod-radio-label-active-color: var(--ds-global-color-danger-6);--mod-radio-unchecked-base-color-background: transparent;--mod-radio-unchecked-base-color-border: var(--ds-divider-color-danger);--mod-radio-unchecked-hover-color-background: var(--ds-global-color-danger-1);--mod-radio-unchecked-hover-color-border: var(--ds-divider-color-danger-dark);--mod-radio-unchecked-active-color-background: var(--ds-global-color-danger-1);--mod-radio-unchecked-active-color-border: var(--ds-divider-color-danger-darker);--mod-radio-checked-base-color-background: var(--ds-divider-color-danger);--mod-radio-checked-base-color-border: var(--ds-divider-color-danger);--mod-radio-checked-hover-color-background: var(--ds-divider-color-danger-dark);--mod-radio-checked-hover-color-border: var(--ds-divider-color-danger-dark);--mod-radio-checked-active-color-background: var(--ds-divider-color-danger-darker);--mod-radio-checked-active-color-border: var(--ds-divider-color-danger-darker)}:host(.is-disabled){cursor:default;pointer-events:none;--mod-radio-label-base-color: var(--ds-global-color-grey-5);--mod-radio-label-hover-color: var(--ds-global-color-grey-5);--mod-radio-label-active-color: var(--ds-global-color-grey-5);--mod-radio-unchecked-base-color-background: var(--ds-global-color-grey-2);--mod-radio-unchecked-base-color-border: var(--ds-alias-border-color-disabled);--mod-radio-checked-base-color-background: var(--ds-alias-border-color-disabled);--mod-radio-checked-base-color-border: var(--ds-alias-border-color-disabled)}:host(.has-label-left) label{flex-direction:row-reverse}:host(.has-label-top) label{flex-direction:column-reverse}:host(.is-tile){display:block;flex:0 0 100%}:host(.is-tile) label{width:100%;height:100%;padding:var(--_radio-tile-padding);border-style:solid;border-width:var(--_radio-tile-border-width);border-radius:var(--_radio-tile-radius);border-color:var(--_radio-tile-base-border-color);background:var(--_radio-tile-base-background-color)}@media(hover: hover)and (pointer: fine){:host(.is-tile) label:hover{border-color:var(--_radio-tile-hover-border-color);background:var(--_radio-tile-hover-background-color)}}:host(.is-tile) label:active{border-color:var(--_radio-tile-active-border-color);background:var(--_radio-tile-active-background-color)}:host(.is-tile.is-checked){--mod-radio-tile-base-border-color: var(--_radio-checked-base-color-background)}:host(.is-tile.has-tile-green.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-green-1)}:host(.is-tile.has-tile-red.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-red-1)}:host(.is-tile.has-tile-yellow.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-yellow-1)}:host(.is-tile.has-tile-purple.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-purple-1)}:host(.is-tile.is-disabled){--icon-brand-color: var(--ds-global-color-grey-5)}:host(.is-tile.is-invalid){--mod-radio-tile-hover-background-color: var(--ds-global-color-danger-1);--mod-radio-tile-active-background-color: var(--ds-global-color-danger-1);--mod-radio-tile-hover-border-color: var(--ds-global-color-danger-5);--mod-radio-tile-active-border-color: var(--ds-global-color-danger-6)}:host(.is-tile.is-invalid) label{--icon-brand-color: var(--ds-global-color-danger-4)}@media(hover: hover)and (pointer: fine){:host(.is-tile.is-invalid) label:hover{--icon-brand-color: var(--ds-global-color-danger-5)}}:host(.is-tile.is-invalid) label:active{--icon-brand-color: var(--ds-global-color-danger-6)}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (max-width: 768px){:host(.is-tile.has-cols-2-mobile){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-mobile){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-mobile){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2-tablet){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-tablet){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-tablet){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 1024px){:host(.is-tile.has-cols-2-desktop){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-desktop){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-desktop){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}
+:host{--_radio-gap: var(--radio-gap, var(--mod-radio-gap, 0.5rem));--_radio-label-base-color: var(--radio-label-base-color, var(--mod-radio-label-base-color, inherit));--_radio-label-hover-color: var(--radio-label-hover-color, var(--mod-radio-label-hover-color, var(--ds-global-color-sky-5)));--_radio-label-active-color: var(--radio-label-active-color, var(--mod-radio-label-active-color, var(--ds-global-color-primary-6)));--_radio-size: var(--radio-size, var(--mod-radio-size, 1.5rem));--_radio-border-width: var(--radio-border-width, var(--mod-radio-border-width, var(--ds-alias-border-width-base)));--_radio-radius: var(--radio-radius, var(--mod-radio-radius, var(--ds-alias-radius-rounded)));--_radio-tile-radius: var(--radio-tile-radius, var(--mod-radio-tile-radius, var(--ds-alias-radius-base)));--_radio-tile-padding: var(--radio-tile-padding, var(--mod-radio-tile-padding, 1rem));--_radio-tile-border-width: var(--radio-tile-border-width, var(--mod-radio-tile-border-width, var(--ds-alias-border-width-base)));--_radio-tile-base-background-color: var(--radio-tile-base-background-color, var(--mod-radio-tile-base-background-color, inherit));--_radio-tile-base-border-color: var(--radio-tile-base-border-color, var(--mod-radio-tile-base-border-color, var(--ds-global-color-grey-3)));--_radio-tile-hover-background-color: var(--radio-tile-hover-background-color, var(--mod-radio-tile-hover-background-color, var(--ds-global-color-grey-0)));--_radio-tile-hover-border-color: var(--radio-tile-hover-border-color, var(--mod-radio-tile-hover-border-color, var(--ds-global-color-sky-5)));--_radio-tile-active-background-color: var(--radio-tile-active-background-color, var(--mod-radio-tile-active-background-color, var(--ds-global-color-grey-0)));--_radio-tile-active-border-color: var(--radio-tile-active-border-color, var(--mod-radio-tile-active-border-color, var(--ds-global-color-primary-6)));--_radio-unchecked-base-color-background: var(--radio-unchecked-base-color-background, var(--mod-radio-unchecked-base-color-background, transparent));--_radio-unchecked-base-color-border: var(--radio-unchecked-base-color-border, var(--mod-radio-unchecked-base-color-border, var(--ds-global-color-primary-5)));--_radio-unchecked-hover-color-background: var(--radio-unchecked-hover-color-background, var(--mod-radio-unchecked-hover-color-background, var(--ds-global-color-grey-1)));--_radio-unchecked-hover-color-border: var(--radio-unchecked-hover-color-border, var(--mod-radio-unchecked-hover-color-border, var(--ds-global-color-sky-5)));--_radio-unchecked-active-color-background: var(--radio-unchecked-active-color-background, var(--mod-radio-unchecked-active-color-background, var(--ds-global-color-grey-2)));--_radio-unchecked-active-color-border: var(--radio-unchecked-active-color-border, var(--mod-radio-unchecked-active-color-border, var(--ds-global-color-primary-6)));--_radio-checked-base-color-background: var(--radio-checked-base-color-background, var(--mod-radio-checked-base-color-background, var(--ds-global-color-primary-5)));--_radio-checked-base-color-border: var(--radio-checked-base-color-border, var(--mod-radio-checked-base-color-border, var(--ds-global-color-primary-5)));--_radio-checked-base-color-icon: var(--radio-checked-base-color-icon, var(--mod-radio-checked-base-color-icon, var(--ds-global-color-white)));--_radio-checked-hover-color-background: var(--radio-checked-hover-color-background, var(--mod-radio-checked-hover-color-background, var(--ds-global-color-sky-5)));--_radio-checked-hover-color-border: var(--radio-checked-hover-color-border, var(--mod-radio-checked-hover-color-border, var(--ds-global-color-sky-5)));--_radio-checked-active-color-background: var(--radio-checked-active-color-background, var(--mod-radio-checked-active-color-background, var(--ds-global-color-primary-6)));--_radio-checked-active-color-border: var(--radio-checked-active-color-border, var(--mod-radio-checked-active-color-border, var(--ds-global-color-primary-6)))}:host{display:inline-block;box-sizing:border-box !important;outline:none}label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;display:inline-flex;align-items:center;gap:var(--_radio-gap);cursor:pointer;user-select:none;color:var(--_radio-label-base-color);font-family:var(--ds-global-font-family-text);line-height:var(--ds-typography-line-height-base);padding-top:.25rem;padding-bottom:.25rem;min-height:3rem}@media(hover: hover)and (pointer: fine){label:hover{color:var(--_radio-label-hover-color)}}label:active{color:var(--_radio-label-active-color)}label #slot{flex:1}:host input[type=radio]{position:relative;appearance:none;flex:none;display:inline-flex;width:var(--_radio-size);height:var(--_radio-size);background:var(--_radio-unchecked-base-color-background);border:var(--_radio-border-width) solid var(--_radio-unchecked-base-color-border);border-radius:var(--_radio-radius);vertical-align:top;cursor:pointer;transition:background .3s ease-in-out,border-color .3s ease-in-out}:host input[type=radio]:disabled{cursor:default}:host input[type=radio]:focus-visible{outline:var(--ds-alias-interaction-focus-width, 2px) solid var(--ds-alias-interaction-focus-color-base);outline-offset:2px;border-radius:var(--_radio-radius)}:host input[type=radio]:not(:disabled):hover,:host:hover input[type=radio]:not(:disabled):not(:checked){background:var(--_radio-unchecked-hover-color-background);border-color:var(--_radio-unchecked-hover-color-border)}:host input[type=radio]:not(:disabled):active,:host:active input[type=radio]:not(:disabled):not(:checked){background:var(--_radio-unchecked-active-color-background);border-color:var(--_radio-unchecked-active-color-border)}:host input[type=radio]:checked{background:var(--_radio-checked-base-color-background);border-color:var(--_radio-checked-base-color-border)}:host input[type=radio]:checked:not(:disabled):hover,:host:hover input[type=radio]:checked:not(:disabled){background:var(--_radio-checked-hover-color-background);border-color:var(--_radio-checked-hover-color-border)}:host input[type=radio]:checked:not(:disabled):active,:host:active input[type=radio]:checked:not(:disabled){background:var(--_radio-checked-active-color-background);border-color:var(--_radio-checked-active-color-border)}:host input[type=radio]::after{content:"";display:block;border-radius:var(--_radio-radius);height:0;width:0;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);opacity:0;background:rgba(0,0,0,0);transition:opacity .3s ease-in-out,width .3s ease-in-out,height .3s ease-in-out}:host input[type=radio]:checked::after{background-color:var(--_radio-checked-base-color-icon);height:.5rem;width:.5rem;opacity:1}:host(.is-invalid:not(.is-disabled)){--mod-radio-label-base-color: var(--ds-global-color-danger-4);--mod-radio-label-hover-color: var(--ds-global-color-danger-5);--mod-radio-label-active-color: var(--ds-global-color-danger-6);--mod-radio-unchecked-base-color-background: transparent;--mod-radio-unchecked-base-color-border: var(--ds-divider-color-danger);--mod-radio-unchecked-hover-color-background: var(--ds-global-color-danger-1);--mod-radio-unchecked-hover-color-border: var(--ds-divider-color-danger-dark);--mod-radio-unchecked-active-color-background: var(--ds-global-color-danger-1);--mod-radio-unchecked-active-color-border: var(--ds-divider-color-danger-darker);--mod-radio-checked-base-color-background: var(--ds-divider-color-danger);--mod-radio-checked-base-color-border: var(--ds-divider-color-danger);--mod-radio-checked-hover-color-background: var(--ds-divider-color-danger-dark);--mod-radio-checked-hover-color-border: var(--ds-divider-color-danger-dark);--mod-radio-checked-active-color-background: var(--ds-divider-color-danger-darker);--mod-radio-checked-active-color-border: var(--ds-divider-color-danger-darker)}:host(.is-disabled){cursor:default;pointer-events:none;--mod-radio-label-base-color: var(--ds-global-color-grey-5);--mod-radio-label-hover-color: var(--ds-global-color-grey-5);--mod-radio-label-active-color: var(--ds-global-color-grey-5);--mod-radio-unchecked-base-color-background: var(--ds-global-color-grey-2);--mod-radio-unchecked-base-color-border: var(--ds-alias-border-color-disabled);--mod-radio-checked-base-color-background: var(--ds-alias-border-color-disabled);--mod-radio-checked-base-color-border: var(--ds-alias-border-color-disabled)}:host(.has-label-left) label{flex-direction:row-reverse}:host(.has-label-top) label{flex-direction:column-reverse}:host(.is-tile){display:block;flex:0 0 100%}:host(.is-tile) label{width:100%;height:100%;padding:var(--_radio-tile-padding);border-style:solid;border-width:var(--_radio-tile-border-width);border-radius:var(--_radio-tile-radius);border-color:var(--_radio-tile-base-border-color);background:var(--_radio-tile-base-background-color)}@media(hover: hover)and (pointer: fine){:host(.is-tile) label:hover{border-color:var(--_radio-tile-hover-border-color);background:var(--_radio-tile-hover-background-color)}}:host(.is-tile) label:active{border-color:var(--_radio-tile-active-border-color);background:var(--_radio-tile-active-background-color)}:host(.is-tile.is-checked){--mod-radio-tile-base-border-color: var(--_radio-checked-base-color-background)}:host(.is-tile.hide-trigger) label{position:relative}:host(.is-tile.hide-trigger) input[type=radio]{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(.is-tile.hide-trigger.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-primary-1);--mod-radio-tile-hover-background-color: var(--ds-global-color-primary-1);--mod-radio-tile-active-background-color: var(--ds-global-color-primary-1)}:host(.is-tile.has-tile-green.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-green-1);--mod-radio-tile-hover-background-color: var(--ds-global-color-green-1);--mod-radio-tile-active-background-color: var(--ds-global-color-green-1)}:host(.is-tile.has-tile-red.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-red-1);--mod-radio-tile-hover-background-color: var(--ds-global-color-red-1);--mod-radio-tile-active-background-color: var(--ds-global-color-red-1)}:host(.is-tile.has-tile-yellow.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-yellow-1);--mod-radio-tile-hover-background-color: var(--ds-global-color-yellow-1);--mod-radio-tile-active-background-color: var(--ds-global-color-yellow-1)}:host(.is-tile.has-tile-purple.is-checked){--mod-radio-tile-base-background-color: var(--ds-global-color-purple-1);--mod-radio-tile-hover-background-color: var(--ds-global-color-purple-1);--mod-radio-tile-active-background-color: var(--ds-global-color-purple-1)}:host(.is-tile.is-disabled){--icon-brand-color: var(--ds-global-color-grey-5)}:host(.is-tile.is-invalid){--mod-radio-tile-hover-background-color: var(--ds-global-color-danger-1);--mod-radio-tile-active-background-color: var(--ds-global-color-danger-1);--mod-radio-tile-hover-border-color: var(--ds-global-color-danger-5);--mod-radio-tile-active-border-color: var(--ds-global-color-danger-6)}:host(.is-tile.is-invalid) label{--icon-brand-color: var(--ds-global-color-danger-4)}@media(hover: hover)and (pointer: fine){:host(.is-tile.is-invalid) label:hover{--icon-brand-color: var(--ds-global-color-danger-5)}}:host(.is-tile.is-invalid) label:active{--icon-brand-color: var(--ds-global-color-danger-6)}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (max-width: 768px){:host(.is-tile.has-cols-2-mobile){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-mobile){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-mobile){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2-tablet){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-tablet){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-tablet){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 1024px){:host(.is-tile.has-cols-2-desktop){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-desktop){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-desktop){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}

package/dist/collection/components/radio/radio.js

@@ -79,6 +79,10 @@ export class Radio {
          * Defines the layout of the input
          */
         this.tile = false;
+        /**
+         * If `true` and `tile` is set, the radio circle is visually hidden. The tile remains fully clickable and keyboard-accessible.
+         */
+        this.hideTrigger = false;
         /**
          * Defines the color of the tile radio.
          */
@@ -234,18 +238,19 @@ export class Radio {
         if (this.buttonTabindex !== undefined) {
             inputAttributes['tabIndex'] = this.buttonTabindex;
         }
-        return (h(Host, { key: '9b383a941268929daf06b1b489a999eea2155609', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
+        return (h(Host, { key: 'ade39da842204a93c8631bd36abc9ac3db2bccd0', "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,
                 'is-tile': this.tile,
                 [`has-tile-${this.tileColor}`]: this.tile && hasValue(this.tileColor),
+                'hide-trigger': this.tile && this.hideTrigger,
                 'has-label-left': this.labelPosition === 'left',
                 'has-label-top': this.labelPosition === 'top',
                 [`has-cols-${this.cols}`]: this.tile && this.cols > 1,
                 [`has-cols-${this.colsTablet}-tablet`]: this.tile && this.colsTablet > 1,
                 [`has-cols-${this.colsMobile}-mobile`]: this.tile && this.colsMobile > 1,
-            }, onClick: this.handleClick }, h("label", { key: '7d482ce4dc292979056c742e570fb5c896dbf03a', id: "label", part: "label" }, h("input", Object.assign({ key: '69cce42bde7dff626f0ee9114b6843638c184555', type: "radio", part: "input", id: this.inputId, name: this.name, value: value, tabindex: this.buttonTabindex, 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) }, inputAttributes)), h("div", { key: '3fb5e32fe8b94aee3e88723e85a735e42b3d4238', id: "slot", part: "slot" }, h("slot", { key: '9dbee7d427ddda925a7e0846cbb6d01eb7a4f9ed' })))));
+            }, onClick: this.handleClick }, h("label", { key: 'd2663ed469a577718444a0d9292733ee7a8623e3', id: "label", part: "label" }, h("input", Object.assign({ key: '10f6dff613d46d36d8bbd70392bd93c20e5065cd', type: "radio", part: "input", id: this.inputId, name: this.name, value: value, tabindex: this.buttonTabindex, 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) }, inputAttributes)), h("div", { key: '80fd2934e4cd19a31e039ed4085f8aaea2bc28d5', id: "slot", part: "slot" }, h("slot", { key: '688909562bc975627fd39ed70d6f74249815f95c' })))));
     }
     static get is() { return "ds-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -559,6 +564,26 @@ export class Radio {
                 "attribute": "tile",
                 "defaultValue": "false"
             },
+            "hideTrigger": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` and `tile` is set, the radio circle is visually hidden. The tile remains fully clickable and keyboard-accessible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-trigger",
+                "defaultValue": "false"
+            },
             "tileColor": {
                 "type": "string",
                 "mutable": false,
@@ -838,6 +863,10 @@ __decorate([
     Type('boolean'),
     __metadata("design:type", Boolean)
 ], Radio.prototype, "tile", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Radio.prototype, "hideTrigger", void 0);
 __decorate([
     OneOf(RADIO_TILE_COLORS),
     __metadata("design:type", String)

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

@@ -32,6 +32,9 @@ const HOST_VARIANTS = [
     'tile-disabled',
     'tile-stack',
     'tile-stack-centered',
+    'tile-stack-multicolor-selected',
+    'tile-stack-multicolor-selected-hide-trigger',
+    'tile-stack-multicolor-unselected',
 ];
 const image = screenshot(TAG);
 test.describe('style', () => {

package/dist/collection/components/segment/segment/segment.js

@@ -245,19 +245,19 @@ export class Segment {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: 'a4f2025c7f78370997279575c269fd409313de06', role: "fieldset", disabled: this.disabled, color: 'primary', invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
+        return (h(Field, { key: '3623376042c1133c3c27368913914b7e3626761c', role: "fieldset", disabled: this.disabled, color: 'primary', invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
                 'is-wide': this.wide,
                 'is-vertical': this.vertical,
                 'is-vertical-on-mobile': this.verticalOnMobile,
                 'is-auto-vertical': this.autoVertical,
-            }, onSlotChange: this.handleSlotChange }, h("div", { key: '6ded6c5d9bed850d9ef9ce837a23cb1574500b96', id: "group" }, h("div", { key: 'dedd3744249014528be86560483e503c46fc3a67', id: "pill" }), this.items.map(item => (h("label", Object.assign({ key: item.value, class: {
+            }, onSlotChange: this.handleSlotChange }, h("div", { key: 'b175ee856735bd12278ab68610792d8f35db0d50', id: "group" }, h("div", { key: '37ecfcd8b782e67b612fa9d0a799fafe98bf54ae', id: "pill" }), this.items.map(item => (h("label", Object.assign({ key: item.value, class: {
                 'is-selected': item.value === this.value,
             }, "aria-invalid": this.invalid ? 'true' : null, "aria-disabled": this.disabled ? 'true' : null }, (this.iconOnly
             ? {
                 'aria-label': `${item.label}${item.description ? `- ${item.description}` : ''}`,
                 'title': `${item.label}${item.description ? `- ${item.description}` : ''}`,
             }
-            : {})), h("input", { type: "radio", name: this.name, disabled: this.disabled, readOnly: this.readonly, value: item.value, checked: item.value === this.value, onClick: ev => this.handleInputClick(ev, item.value), onChange: () => this.handleInputChange(item.value), "aria-invalid": this.invalid ? 'true' : null }), item.icon && h("ds-icon", { name: item.icon }), item.svg && h("ds-icon", { svg: item.svg }), !this.iconOnly && (h("span", { id: "content" }, h("span", { class: "label" }, item.label), item.description && h("span", { class: "description" }, item.description))))))), h("div", { key: '65f5cb809b559c4c861b00220753ff0650e11adf' }, h("slot", { key: 'ce8d46ed4441753b1d7732ebead2024e7b11168c', onSlotchange: () => this.handleSlotChange() }))));
+            : {})), h("input", { type: "radio", name: this.name, disabled: this.disabled, readOnly: this.readonly, value: item.value, checked: item.value === this.value, onClick: ev => this.handleInputClick(ev, item.value), onChange: () => this.handleInputChange(item.value), "aria-invalid": this.invalid ? 'true' : null }), item.icon && h("ds-icon", { name: item.icon }), item.svg && h("ds-icon", { svg: item.svg }), !this.iconOnly && (h("span", { id: "content" }, h("span", { class: "label" }, item.label), item.description && h("span", { class: "description" }, item.description))))))), h("div", { key: 'f0815ad652c00b772f97d335c9c03d6518116bbc' }, h("slot", { key: '1bab00d80378d7ab2c5d3a8e50df85195287fb34', onSlotchange: () => this.handleSlotChange() }))));
     }
     static get is() { return "ds-segment"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segment/segment-item.js

@@ -54,7 +54,7 @@ export class SegmentItem {
      * ------------------------------------------------------
      */
     render() {
-        return h(Host, { key: '87db62287d1b2a329ed1175ef71a3528bb7b1ce8', "aria-hidden": "true" });
+        return h(Host, { key: 'c703db008c250d8801d76bfdaddfb32e5985935e', "aria-hidden": "true" });
     }
     static get is() { return "ds-segment-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select-optgroup.js

@@ -30,7 +30,7 @@ export class DsSelectOptgroup {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '7392bfdc8ec2afaedea8e1c686b7263878609e77', "aria-hidden": "true" }, h("slot", { key: '88a3d0e1109799d29fe48ce2d130d50fda9250ca' })));
+        return (h(Host, { key: '4df6aaf4a621c79257e59d642d2a07c2a79cfa1c', "aria-hidden": "true" }, h("slot", { key: '7f9206b4c33676e1f431f2cd3cf9644441a473f8' })));
     }
     static get is() { return "ds-select-optgroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select-option.js

@@ -36,7 +36,7 @@ export class DsSelectOption {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '46b36772c0a490e08f00c63ca986ff26a7c10914', "aria-hidden": "true" }, h("slot", { key: 'fd52b10a34183d98649253781e3b9c96a4315aee' })));
+        return (h(Host, { key: 'ce770b34b31796d648f076575f4c1cf57b65c5af', "aria-hidden": "true" }, h("slot", { key: '4648de055b31a22a216b21f518b868a4e7791b0d' })));
     }
     static get is() { return "ds-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.js

@@ -337,9 +337,9 @@ export class DsSelect {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: 'eecfb4cab9d68210135674b01c7df8ee53723d10', disabled: this.disabled, color: this.color, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, inputId: this.selectId, onClick: ev => this.dsClick.emit(ev) }, h("select", Object.assign({ key: '1531c1c858bcb110bbe450ba662e2c483943039c', name: this.name, multiple: this.multiple, required: this.required, disabled: this.disabled, "aria-hidden": "true", tabindex: -1, ref: el => (this.selectEl = el) }, this.inheritedAttributes)), h("div", { key: '291ee9706eae79cfdf4e2fc3f7021f5e1e8fe8d3', id: "popup", class: {
+        return (h(Field, { key: '2103a2629e45c8036560ccdb03068c5d65f6c9ec', disabled: this.disabled, color: this.color, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, inputId: this.selectId, onClick: ev => this.dsClick.emit(ev) }, h("select", Object.assign({ key: 'c885d952f4fa562ea44af769d46b45e4a8541f14', name: this.name, multiple: this.multiple, required: this.required, disabled: this.disabled, "aria-hidden": "true", tabindex: -1, ref: el => (this.selectEl = el) }, this.inheritedAttributes)), h("div", { key: '990eb82e3a5965fb34eebe9425202a98abe70c58', id: "popup", class: {
                 'is-multiple': this.multiple,
-            }, ref: el => (this.popupEl = el) }, h("slot", { key: '6599aa56141ef60408922cbdf18e03d44544ec5e', onSlotchange: this.handleSlotChange }))));
+            }, ref: el => (this.popupEl = el) }, h("slot", { key: '52d66712a9baa34be8f6903b2620099b209cea36', onSlotchange: this.handleSlotChange }))));
     }
     static get is() { return "ds-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shape/shape.js

@@ -39,7 +39,7 @@ export class Shape {
      * ─────────────────────────────────────────────────────
      */
     render() {
-        return (h(Host, { key: 'e38fc0e4417b0c820f4f48b3bd6276e3ca745f74', "aria-hidden": "true" }, h("svg", { key: '64feadb80b8a95f7b7d230e9a601a9ad4aabd83f', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true" }, shapes[parseInt(this.variation) - 1])));
+        return (h(Host, { key: '7992728e9058b4aa1df34a66625315314a53b854', "aria-hidden": "true" }, h("svg", { key: '4a1384043bf0c8cb44971a726dd760f1046dde00', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true" }, shapes[parseInt(this.variation) - 1])));
     }
     static get is() { return "ds-shape"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -190,14 +190,14 @@ export class Spinner {
         if (this.small === true) {
             size = 'sm';
         }
-        return (h(Host, { key: '86264d495d7ae16626bdf476d81c16dd87e0e12a', role: "progressbar", "aria-label": ariaLabel, class: {
+        return (h(Host, { key: '90ffeeb92884b2408cc07d2a3d254ae640bfba9f', role: "progressbar", "aria-label": ariaLabel, class: {
                 'is-animated': this.animated,
                 'is-circle': this.variation === 'circle',
                 'is-sm': size === 'sm',
                 'is-white': this.color === 'white',
                 'is-label-right': hasValue(this.label) && this.labelPosition === 'right',
                 'is-label-bottom': hasValue(this.label) && this.labelPosition === 'bottom',
-            } }, h("div", { key: '2ef9e800128c98ce79f83b49e4c43cbc21f749e9' }, h("div", { key: 'c9086777b5ac64cb59d2df42aa198a6e193aec80', id: "inner", part: "inner", ref: el => (this.innerEl = el) })), hasValue(this.label) && h("span", { key: 'e8c5d1b0c1bb6cfab6e4fe0caae96684fa0af889', part: "label" }, this.label)));
+            } }, h("div", { key: '35831f8f32b083aef384956258f386ebb4de288c' }, h("div", { key: 'fad87eada8cabe36f7cfadc69767bb6251621226', id: "inner", part: "inner", ref: el => (this.innerEl = el) })), hasValue(this.label) && h("span", { key: 'f2f8a4f600fd5f1f53d54d7dec71578348520f2a', part: "label" }, this.label)));
     }
     static get is() { return "ds-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,7 +66,7 @@ export class Stack {
         if (hasValue(this.alignment)) {
             alignValue = this.alignment.split(' ').join('-');
         }
-        return (h(Host, { key: '7ec517c74a36f5cefa0768e200a0e0b9a4f07254', class: {
+        return (h(Host, { key: 'a5289c398e7099be2acc01e0860094b35c41f275', class: {
                 'stack': true,
                 'as-row': this.direction === 'row',
                 'as-col': this.direction === 'column',
@@ -79,7 +79,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: '2ea7be17d54af58bcaff6b452c8c656ce43cb441' })));
     }
     static get is() { return "ds-stack"; }
     static get originalStyleUrls() {

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.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/textarea.js

@@ -182,7 +182,7 @@ 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))));
+        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))));
     }
     static get is() { return "ds-textarea"; }
     static get encapsulation() { return "shadow"; }

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.7';