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

package/dist/collection/components/number-input/test/number-input.visual.play.js

@@ -3,7 +3,7 @@
  */
 import { expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
 const TAG = 'number-input';
-const VARIANTS = ['basic', 'disabled', 'invalid', 'valid', 'warning', 'decimal', 'suffix'];
+const VARIANTS = ['basic', 'disabled', 'invalid', 'invalid-slot', 'valid', 'warning', 'decimal', 'suffix'];
 const image = screenshot(TAG);
 test.describe('host', () => {
     test.beforeEach('Setup', async ({ page }) => {

package/dist/collection/components/pagination/pagination.js

@@ -172,28 +172,28 @@ export class Pagination {
         const leftControlTitle = this.textPrevious || i18nControlLabel[this.language].left;
         const rightControlTitle = this.textNext || i18nControlLabel[this.language].right;
         const hasBasicNavigationButtons = !hasValue(this.variant) || (isVariantDots && this.totalPages <= 5);
-        const DotsWithText = () => (h("span", { key: 'ad305888a9a44b97ab2c5c17ecb746bedfc29ea0', class: "dots" }, h("strong", { key: '54248aa0c8f37ccd2015218a3d89730d947daa75' }, this.value), h("span", { key: 'c072e770c971fdd6265ecdb1f2c12e371d01b7fc' }, "/"), h("span", { key: 'fe2868321d3b21582e808846e98127166145a2aa' }, this.totalPages)));
-        return (h(Host, { key: 'ee53970824a2ed4ebb1fc4785d16ea161c7e405a', class: {
+        const DotsWithText = () => (h("span", { key: 'e5df59a6b0f2955c7ffe0a1b8ae05828d089a03a', class: "dots" }, h("strong", { key: '8aec14c8f62c54ad23696b7baa6c5214ccc3d625' }, this.value), h("span", { key: 'a3ed5e5e68ea3706cc490f7a859a4d6ecbb38ff5' }, "/"), h("span", { key: 'a621e7f072a7214b7fef82b1672742df94d45ba9' }, this.totalPages)));
+        return (h(Host, { key: 'e4fde2b2b21cdd1dd28df93f2e7a137c284760ef', class: {
                 'is-sticky': this.sticky,
                 'is-disabled': this.disabled,
                 [`is-variant-${this.variant}`]: hasValue(this.variant),
                 [`is-size-${this.size}`]: hasValue(this.size),
                 [`is-align-${this.align}`]: hasValue(this.align),
-            } }, h("nav", { key: 'd327a7c0c1c0b1a24cbf599aaa5734815886be0e', class: {}, id: "nav", part: "navigation", role: "navigation", "aria-label": labelControlTitle }, !this.disabled && (h("button", { key: '71611638672eeb763968c788b70d0d56a0ddd124', id: "previous", part: "previous", "aria-label": leftControlTitle, title: leftControlTitle, class: {
+            } }, h("nav", { key: '15343917a6da89b56809ba627398044f25a8a055', class: {}, id: "nav", part: "navigation", role: "navigation", "aria-label": labelControlTitle }, !this.disabled && (h("button", { key: '0b779674998a104b80a81cc9729c53800472815f', id: "previous", part: "previous", "aria-label": leftControlTitle, title: leftControlTitle, class: {
                 'button': true,
                 'is-square': true,
                 'is-disabled': this.value < 2,
                 'is-flat': flat,
                 [buttonColor]: true,
                 [buttonSize]: true,
-            }, disabled: this.value < 2, onClick: () => this.previous() }, h("ds-icon", { key: 'e839a0b2bf96bad5c7e63d3b4c46df1acaab5e73', name: "nav-go-left", size: "sm", disabled: this.value < 2 }))), !this.disabled && (h("button", { key: 'c4e9ecb77143d63456f9d0b9989b6268b04c363e', id: "next", part: "next", "aria-label": rightControlTitle, title: rightControlTitle, class: {
+            }, disabled: this.value < 2, onClick: () => this.previous() }, h("ds-icon", { key: '297a1a9a9cd53f79a41fcac21d5a1e2abe4621c8', name: "nav-go-left", size: "sm", disabled: this.value < 2 }))), !this.disabled && (h("button", { key: 'b6fc6ce84a9fa1ebc08a1ea1ad10566c369bba71', id: "next", part: "next", "aria-label": rightControlTitle, title: rightControlTitle, class: {
                 'button': true,
                 'is-square': true,
                 'is-disabled': this.value === this.totalPages,
                 'is-flat': flat,
                 [buttonColor]: true,
                 [buttonSize]: true,
-            }, disabled: this.value === this.totalPages, onClick: () => this.next() }, h("ds-icon", { key: '6e3e65dcc2337fe6bc1adf434871eb204e1806d4', name: "nav-go-right", size: "sm", disabled: this.value === this.totalPages }))), hasBasicNavigationButtons ? (h("ul", { class: { dots: hasValue(this.variant) }, part: "list" }, items)) : (h(DotsWithText, null)))));
+            }, disabled: this.value === this.totalPages, onClick: () => this.next() }, h("ds-icon", { key: '6764ae6b035917963f07f20ae172e23894c1bd32', name: "nav-go-right", size: "sm", disabled: this.value === this.totalPages }))), hasBasicNavigationButtons ? (h("ul", { class: { dots: hasValue(this.variant) }, part: "list" }, items)) : (h(DotsWithText, null)))));
     }
     static get is() { return "ds-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, } from "@stencil/core";
-import { Logger, stopEventBubbling, hasTagName, isDescendant, OneOf, Type } from "../../../utils/index";
+import { Logger, stopEventBubbling, hasTagName, isDescendant, OneOf, Type, watchInvalidTextSlot, } from "../../../utils/index";
 import { Field } from "../../input/field.util";
 import { defaultConfig, ListenToConfig } from "../../../global/index";
 import { INPUT_COLORS } from "../../input/input.interfaces";
@@ -12,11 +12,13 @@ import { RADIO_LABEL_POSITIONS, RADIO_TILE_COLORS, RADIO_GROUP_COLUMNS, } from "
  * Radio Group groups multiple radio inputs so only one option can be selected at a time within a form field.
  *
  * @slot - The radio items to display inside the group.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  */
 export class RadioGroup {
     constructor() {
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
+        this.hasInvalidTextSlotContent = false;
         this.inputId = `ds-rg-${radioGroupIds++}`;
         /**
          * PUBLIC PROPERTY API
@@ -86,6 +88,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 +108,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) {
@@ -136,14 +146,24 @@ export class RadioGroup {
     connectedCallback() {
         this.initialValue = this.value;
         this.internals.setFormValue(this.value);
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
         this.passDownAttributes();
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     componentWillLoad() {
         this.handleValueChange();
     }
     componentWillUpdate() {
         this.passDownAttributes();
     }
+    componentDidLoad() {
+        this.handleSlotChange();
+    }
     /**
      * PUBLIC LISTENERS
      * ------------------------------------------------------
@@ -231,19 +251,20 @@ export class RadioGroup {
      * ------------------------------------------------------
      */
     passDownAttributes() {
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
         this.getRadios().forEach(radio => {
+            var _a;
             if (this.disabled !== undefined) {
                 radio.disabled = this.disabled;
             }
             if (this.readonly !== undefined) {
                 radio.readonly = this.readonly;
             }
-            if (this.invalid !== undefined) {
-                radio.invalid = this.invalid;
-            }
+            radio.invalid = isInvalid;
             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 +301,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: 'c7cc878d4b12a536d805dbdf3e44419cc2c31c3f', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid || this.hasInvalidTextSlotContent, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
                 'is-vertical': this.vertical,
                 'is-tile': this.tile,
-            }, onClick: this.handleClick }, h("slot", { key: '6c090a936fab5b14946544e52cf30890f719c2ff' })));
+            }, onClick: this.handleClick }, h("slot", { key: '468b13eff479f2654ce14a5b513e10f513fbf0ee', onSlotchange: this.handleSlotChange })));
     }
     static get is() { return "ds-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -655,6 +676,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,
@@ -726,7 +767,8 @@ export class RadioGroup {
     static get states() {
         return {
             "language": {},
-            "region": {}
+            "region": {},
+            "hasInvalidTextSlotContent": {}
         };
     }
     static get events() {
@@ -968,6 +1010,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

@@ -26,12 +26,16 @@ const HOST_VARIANTS = [
     'form',
     'field-disabled',
     'field-invalid',
+    'field-invalid-slot',
     'tile-basic',
     'tile-columns',
     'tile-invalid',
     '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

@@ -3,13 +3,14 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h } from "@stencil/core";
-import { Logger, stopEventBubbling, isDescendant, ListenToResize, Type } from "../../../utils/index";
+import { Logger, stopEventBubbling, isDescendant, ListenToResize, Type, watchInvalidTextSlot, } from "../../../utils/index";
 import { Field } from "../../input/field.util";
 import { defaultConfig, ListenToConfig } from "../../../global/index";
 /**
  * Segment renders a group of button-like controls for selecting a single option from multiple choices with toggle behavior.
  *
  * @slot - One or more ds-segment-item elements.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part segment - The segment container element.
  */
 export class Segment {
@@ -19,6 +20,7 @@ export class Segment {
         this.region = defaultConfig.region;
         this.items = [];
         this.autoVertical = false;
+        this.hasInvalidTextSlotContent = false;
         // Natural (horizontal) offsetWidth of #group, stored just before going auto-vertical.
         // Used to decide when there is enough room to go back to horizontal layout.
         this.lastNaturalWidth = 0;
@@ -169,10 +171,14 @@ export class Segment {
             this.updatePill();
         });
         this.resizeObserver.observe(this.el);
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.disconnectInvalidTextSlotWatcher) === null || _b === void 0 ? void 0 : _b.call(this);
     }
     componentDidLoad() {
         this.handleSlotChange();
@@ -245,19 +251,20 @@ 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: {
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
+        return (h(Field, { key: 'd7cb9bc3c60989feaf5a7e9d42621fd93e4c175f', role: "fieldset", disabled: this.disabled, color: 'primary', invalid: isInvalid, 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: '26806fb30d2cd5e9f5ef4e7bf48f5e1fe4f9e922', id: "group" }, h("div", { key: '852fc0596b4f5ae2fe504d6dd3fe11cddbc4b3d2', 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-invalid": isInvalid ? '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": isInvalid ? '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: '2c6e7599a6909c532fd343f225cacc9aee153aec' }, h("slot", { key: '9d4af895a6216a3df94a132302a0a081f5936c15', onSlotchange: () => this.handleSlotChange() }))));
     }
     static get is() { return "ds-segment"; }
     static get encapsulation() { return "shadow"; }
@@ -580,7 +587,8 @@ export class Segment {
             "language": {},
             "region": {},
             "items": {},
-            "autoVertical": {}
+            "autoVertical": {},
+            "hasInvalidTextSlotContent": {}
         };
     }
     static get events() {

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/segment/test/segment.visual.play.js

@@ -21,6 +21,7 @@ const HOST_VARIANTS = [
     'vertical',
     'disabled',
     'invalid',
+    'invalid-slot',
     'invalid-disabled',
     'wide',
     'form',

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"; }