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

package/dist/collection/components/heading/heading.js

@@ -16,22 +16,12 @@ export class Heading {
     constructor() {
         /**
          * PUBLIC PROPERTY API
-         * ------------------------------------------------------
+         * ─────────────────────────────────────────────────────
          */
         /**
          * The actual heading level used in the HTML markup.
          */
         this.level = 'h1';
-        /**
-         * Make the visual style mimic a specific heading level.
-         * This option allows you to make e.g. h1 visually look like h3,
-         * but still keep it h1 in the markup.
-         */
-        this.visualLevel = '';
-        /**
-         * The actual heading level used in the HTML markup.
-         */
-        this.autoLevel = '';
         /**
          * When true, the text will be truncated with a text overflow ellipsis instead of wrapping.
          * Please note that text overflow can only occur in block or inline-block level elements,
@@ -42,14 +32,6 @@ export class Heading {
          * If `true` the heading gets displayed slimmer.
          */
         this.subtitle = false;
-        /**
-         * Defines at which position the heading has spacing.
-         */
-        this.space = '';
-        /**
-         * The theme type of the toast.
-         */
-        this.color = '';
         /**
          * If `true` the color gets inverted for dark backgrounds
          */
@@ -73,16 +55,17 @@ export class Heading {
     }
     /**
      * LIFECYCLE
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
-    connectedCallback() {
+    componentWillLoad() {
         this.updateAutoFontSize();
     }
     componentDidRender() {
-        if (hasValue(this.autoLevel) && this.autoFontSize) {
+        const autoLevel = this.autoLevel;
+        if (autoLevel && this.autoFontSize) {
             const rows = this.rows;
             if (rows > 1) {
-                const minSize = HEADING_SIZES[this.autoLevel];
+                const minSize = HEADING_SIZES[autoLevel];
                 if (minSize !== this.autoFontSize) {
                     const nextIndex = HEADING_ORDER.indexOf(this.autoFontSize) + 1;
                     this.autoFontSize = HEADING_ORDER[nextIndex];
@@ -94,8 +77,8 @@ export class Heading {
         this.autoFontSize = this.fontSize;
     }
     /**
-     * GETTERS
-     * ------------------------------------------------------
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
      */
     get rows() {
         if (this.headingEl && dsBrowser.hasWindow) {
@@ -110,7 +93,8 @@ export class Heading {
         if (this.inverted) {
             return 'white';
         }
-        return hasValue(this.color) ? HEADING_COLOR_MAP[this.color] : '';
+        const color = this.color;
+        return color ? HEADING_COLOR_MAP[color] : undefined;
     }
     get fontSize() {
         return HEADING_SIZES[this.visualLevel ? this.visualLevel : this.level];
@@ -120,18 +104,18 @@ export class Heading {
     }
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render() {
         const Heading = this.tag;
-        return (h(Host, { key: 'dd9df7b068c6a489c4a56437a19e6f7a27a1c1ea', class: {
+        return (h(Host, { key: 'dd934a29bc764a7970f7c59a356d67f570631036', class: {
                 [`is-${this.autoFontSize}`]: this.autoFontSize !== undefined,
                 [`is-${this.fontColor}`]: hasValue(this.fontColor),
                 'is-subtitle': this.subtitle,
                 'has-no-wrap': this.noWrap,
                 'has-shadow': this.shadow,
                 [`has-space-${this.space}`]: hasValue(this.space),
-            } }, h(Heading, { key: 'e437b9f774f324b5628d002210b1af6763cc9dc8', id: "heading", part: "heading", ref: (headingEl) => (this.headingEl = headingEl) }, h("slot", { key: '61234ad53aa55043c4982b94e40155fb5b40b69b' }))));
+            } }, h(Heading, { key: 'b468e6437329a02b4878120e06d102abb8732cd3', id: "heading", part: "heading", ref: (headingEl) => (this.headingEl = headingEl) }, h("slot", { key: '594a1766c31537f993ae8af98b402f097834750b' }))));
     }
     static get is() { return "ds-heading"; }
     static get encapsulation() { return "shadow"; }
@@ -179,7 +163,7 @@ export class Heading {
                 "mutable": false,
                 "complexType": {
                     "original": "HeadingVisualLevel",
-                    "resolved": "\"\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"base\" | \"display\" | \"display-2\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"lg\" | \"md\" | \"xl\"",
+                    "resolved": "\"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"base\" | \"display\" | \"display-2\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"lg\" | \"md\" | \"xl\" | undefined",
                     "references": {
                         "HeadingVisualLevel": {
                             "location": "import",
@@ -190,7 +174,7 @@ export class Heading {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Make the visual style mimic a specific heading level.\nThis option allows you to make e.g. h1 visually look like h3,\nbut still keep it h1 in the markup."
@@ -198,15 +182,14 @@ export class Heading {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "visual-level",
-                "defaultValue": "''"
+                "attribute": "visual-level"
             },
             "autoLevel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "HeadingVisualLevel",
-                    "resolved": "\"\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"base\" | \"display\" | \"display-2\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"lg\" | \"md\" | \"xl\"",
+                    "resolved": "\"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"base\" | \"display\" | \"display-2\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"lg\" | \"md\" | \"xl\" | undefined",
                     "references": {
                         "HeadingVisualLevel": {
                             "location": "import",
@@ -217,7 +200,7 @@ export class Heading {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The actual heading level used in the HTML markup."
@@ -225,8 +208,7 @@ export class Heading {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "auto-level",
-                "defaultValue": "''"
+                "attribute": "auto-level"
             },
             "noWrap": {
                 "type": "boolean",
@@ -273,7 +255,7 @@ export class Heading {
                 "mutable": false,
                 "complexType": {
                     "original": "HeadingSpace",
-                    "resolved": "\"\" | \"all\" | \"bottom\" | \"none\" | \"top\"",
+                    "resolved": "\"all\" | \"bottom\" | \"none\" | \"top\" | undefined",
                     "references": {
                         "HeadingSpace": {
                             "location": "import",
@@ -284,7 +266,7 @@ export class Heading {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Defines at which position the heading has spacing."
@@ -292,15 +274,14 @@ export class Heading {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "space",
-                "defaultValue": "''"
+                "attribute": "space"
             },
             "color": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "HeadingColor",
-                    "resolved": "\"\" | \"blue\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | \"white\"",
+                    "resolved": "\"blue\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | \"white\" | undefined",
                     "references": {
                         "HeadingColor": {
                             "location": "import",
@@ -311,7 +292,7 @@ export class Heading {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The theme type of the toast."
@@ -319,8 +300,7 @@ export class Heading {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "color",
-                "defaultValue": "''"
+                "attribute": "color"
             },
             "inverted": {
                 "type": "boolean",

package/dist/collection/components/input/field.util.js

@@ -10,5 +10,5 @@ export const Field = (props, children) => {
     const role = props.role === 'fieldset' ? 'group' : undefined;
     const RoleTag = props.role === 'fieldset' ? 'fieldset' : 'div';
     return (h(Host, { class: Object.assign({ 'ds-field ': true, 'is-disabled': !!props.disabled, 'is-danger': props.color === 'danger' || !!props.invalid, 'is-success': props.color === 'success' && !props.invalid, 'is-warning': props.color === 'warning' && !props.invalid }, props.cssClasses) }, h(RoleTag, { id: "inner", part: "inner", role: role, "aria-disabled": ariaBooleanToString(props.disabled), "aria-invalid": ariaBooleanToString(props.invalid), "aria-labelledby": "label", "aria-describedby": "description", onClick: (ev) => { var _a; return (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, ev); } }, props.label &&
-        (props.role === 'fieldset' ? (h("legend", { part: "label", id: "label" }, h("slot", { name: "label" }, props.label), !props.required && h("span", null, I18nDsLabel[props.language].optional || ''))) : (h("label", { htmlFor: inputId, part: "label", id: "label" }, h("slot", { name: "label" }, props.label), !props.required && h("span", null, I18nDsLabel[props.language].optional || '')))), h("div", { id: "container", part: "control" }, h("slot", { name: "start" }), children, h("slot", { name: "end" }), props.loading === true && (h("ds-spinner", { small: true, variation: "circle", color: props.disabled ? 'white' : 'blue' }))), props.label && (h("span", { id: "description", part: "description", role: props.invalid && props.invalidText ? 'alert' : undefined }, props.invalid && props.invalidText && h("ds-icon", { name: "alert" }), h("slot", { name: "description" }, props.invalid && props.invalidText ? props.invalidText : props.description))))));
+        (props.role === 'fieldset' ? (h("legend", { part: "label", id: "label" }, h("slot", { name: "label" }, props.label), !props.required && h("span", null, I18nDsLabel[props.language].optional || ''))) : (h("label", { htmlFor: inputId, part: "label", id: "label" }, h("slot", { name: "label" }, props.label), !props.required && h("span", null, I18nDsLabel[props.language].optional || '')))), h("div", { id: "container", part: "control" }, h("slot", { name: "start" }), children, h("slot", { name: "end" }), props.loading === true && (h("ds-spinner", { small: true, variation: "circle", color: props.disabled ? 'white' : 'blue' }))), props.label && (h("span", { id: "description", part: "description", role: props.invalid && props.invalidText ? 'alert' : undefined }, props.invalid && props.invalidText && h("ds-icon", { name: "alert" }), props.invalid ? (h("slot", { name: "invalid-text" }, props.invalidText || props.description)) : (h("slot", { name: "description" }, props.description)))))));
 };

package/dist/collection/components/input/input.js

@@ -4,7 +4,7 @@
 import { __decorate, __metadata } from "tslib";
 import { h } from "@stencil/core";
 import isNil from "lodash/isNil";
-import { inheritAttributes, FormControl, stopEventBubbling, debounceEvent, Logger, hasValue, OneOf, Type, } from "../../utils/index";
+import { inheritAttributes, FormControl, stopEventBubbling, debounceEvent, Logger, hasValue, OneOf, Type, watchInvalidTextSlot, } from "../../utils/index";
 import { ACTION_KEYS, isCtrlOrCommandKey } from "../../global/index";
 import { InputMaskUtil } from "./input.mask";
 import { getMask } from "./masks";
@@ -14,6 +14,7 @@ import { INPUT_COLORS, INPUT_AUTOCORRECTS, INPUT_INPUT_MODES, INPUT_INPUT_TYPES,
 /**
  * Input renders a text input field with validation, masking, autocomplete, and optional help/error messaging.
  *
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part input - The native HTML input element.
  * @part prefix - The prefix wrapper (if used).
  * @part suffix - The suffix wrapper (if used).
@@ -27,6 +28,7 @@ export class Input {
         this.focused = false;
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
+        this.hasInvalidTextSlotContent = false;
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -205,6 +207,13 @@ export class Input {
         this.debounceChanged();
         this.maskChanged();
         this.control.connectedCallback();
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title', 'data-hj-allow']);
@@ -267,7 +276,8 @@ export class Input {
         if (hasValue(this.pattern)) {
             inputProps = { pattern: this.pattern };
         }
-        return (h(Field, { key: 'babef5825e546b7b80315ed7b83240d2b82562c0', 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 }, h("input", Object.assign({ key: '57f52c5591d793be3c19ab144f497d793bffbeed', id: "input", part: "input", name: this.name, ref: inputEl => (this.control.nativeEl = inputEl), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, accept: this.accept, inputMode: this.inputmode, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autocorrect: this.autocorrect, autofocus: this.autofocus, min: this.min, max: this.max, minLength: this.minLength, maxLength: this.maxLength, multiple: this.multiple, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: value, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onInput: ev => this.handleInput(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, inputProps, this.inheritedAttributes))));
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
+        return (h(Field, { key: '60462d9ab4b551b6ea128c4bae45f729cf939eed', disabled: this.disabled, color: this.color, invalid: isInvalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("input", Object.assign({ key: '2557655b7d70ffc1605f20dd3b2887bee85db005', id: "input", part: "input", name: this.name, ref: inputEl => (this.control.nativeEl = inputEl), "aria-describedby": "description", "aria-invalid": isInvalid ? 'true' : 'false', disabled: this.disabled, accept: this.accept, inputMode: this.inputmode, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autocorrect: this.autocorrect, autofocus: this.autofocus, min: this.min, max: this.max, minLength: this.minLength, maxLength: this.maxLength, multiple: this.multiple, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: value, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onInput: ev => this.handleInput(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, inputProps, this.inheritedAttributes))));
     }
     static get is() { return "ds-input"; }
     static get encapsulation() { return "shadow"; }
@@ -948,7 +958,8 @@ export class Input {
         return {
             "focused": {},
             "language": {},
-            "region": {}
+            "region": {},
+            "hasInvalidTextSlotContent": {}
         };
     }
     static get events() {

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

@@ -7,6 +7,7 @@ const VARIANTS = [
     'basic',
     'disabled',
     'invalid',
+    'invalid-slot',
     'valid',
     'warning',
     'loading',
@@ -23,7 +24,7 @@ test.describe('style', () => {
     test.beforeEach('Setup', async ({ page }) => {
         await page.setupVisualTest(`/components/${TAG}/test/${TAG}.style.html`);
     });
-    VARIANTS.filter(v => !['slots', 'formatter'].includes(v)).forEach(variant => {
+    VARIANTS.filter(v => !['slots', 'formatter', 'invalid-slot'].includes(v)).forEach(variant => {
         test(variant, async ({ page }) => {
             const el = page.getByTestId(variant);
             await expectScreenshot(el, image(`style-${variant}`));

package/dist/collection/components/input-slider/input-slider.js

@@ -4,7 +4,7 @@
 import { __decorate, __metadata } from "tslib";
 import { h, } from "@stencil/core";
 import isNaN from "lodash/isNaN";
-import { inheritAttributes, debounceEvent, hasValue, Logger, OneOf, Type } from "../../utils/index";
+import { inheritAttributes, debounceEvent, hasValue, Logger, OneOf, Type, watchInvalidTextSlot, } from "../../utils/index";
 import { defaultConfig, ListenToConfig } from "../../global/index";
 import { Field } from "../input/field.util";
 import { INPUT_COLORS } from "../input/input.interfaces";
@@ -14,6 +14,7 @@ import { InputSliderPickerController } from "./input-slider.picker";
 /**
  * Input slider renders a noUiSlider-backed slider with validation and label/description messaging.
  *
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part slider - The noUiSlider target element.
  */
 export class InputSlider {
@@ -24,6 +25,7 @@ export class InputSlider {
         this.focused = false;
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
+        this.hasInvalidTextSlotContent = false;
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -132,7 +134,7 @@ export class InputSlider {
     }
     invalidChanged() {
         var _a;
-        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.setInvalid(this.invalid);
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.setInvalid(this.invalid || this.hasInvalidTextSlotContent);
     }
     minChanged() {
         var _a;
@@ -163,6 +165,11 @@ export class InputSlider {
         this.value = clampValue(resolveInitialValue(this.value, this.min), this.min, this.max);
         this.initialValue = this.value;
         this.syncFormValue(this.value);
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            var _a;
+            this.hasInvalidTextSlotContent = hasContent;
+            (_a = this.picker) === null || _a === void 0 ? void 0 : _a.setInvalid(this.invalid || hasContent);
+        });
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
@@ -179,7 +186,7 @@ export class InputSlider {
             step: this.step,
             value: this.value,
             disabled: this.disabled || this.readonly,
-            invalid: this.invalid,
+            invalid: this.invalid || this.hasInvalidTextSlotContent,
             onInput: value => {
                 this.dsInput.emit(value);
             },
@@ -191,9 +198,10 @@ export class InputSlider {
         (_b = this.picker.handleEl) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', this.handleBlur);
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_a = this.picker) === null || _a === void 0 ? void 0 : _a.destroy();
         this.picker = undefined;
+        (_b = this.disconnectInvalidTextSlotWatcher) === null || _b === void 0 ? void 0 : _b.call(this);
     }
     /**
      * PUBLIC LISTENERS
@@ -268,12 +276,12 @@ export class InputSlider {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: '673117fa1520455f38ee39c6f2218468e6ca8150', disabled: this.disabled || this.readonly, color: this.color, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
+        return (h(Field, { key: '69b0dc7ea5f958598cee12e42879d5e4f025bd2e', disabled: this.disabled || this.readonly, color: this.color, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
                 'is-brand-yellow': hasValue(this.brandColor) && this.brandColor === 'yellow',
                 'is-brand-purple': hasValue(this.brandColor) && this.brandColor === 'purple',
                 'is-brand-red': hasValue(this.brandColor) && this.brandColor === 'red',
                 'is-brand-green': hasValue(this.brandColor) && this.brandColor === 'green',
-            } }, h("div", Object.assign({ key: 'b760944d8141876484054f1454b453e087bc7eda', id: "slider", part: "slider", ref: el => (this.sliderEl = el), onClick: this.handleClick }, this.inheritedAttributes))));
+            } }, h("div", Object.assign({ key: 'b89ecd4c3ac4f8c11c05b3de1e79215d4c076766', id: "slider", part: "slider", ref: el => (this.sliderEl = el), onClick: this.handleClick }, this.inheritedAttributes))));
     }
     static get is() { return "ds-input-slider"; }
     static get encapsulation() { return "shadow"; }
@@ -629,7 +637,8 @@ export class InputSlider {
     static get states() {
         return {
             "language": {},
-            "region": {}
+            "region": {},
+            "hasInvalidTextSlotContent": {}
         };
     }
     static get events() {
@@ -729,7 +738,7 @@ export class InputSlider {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the value is committed (noUiSlider `change`, not `blur` \u2014 see\nADR-0006/ADR-0007). Fires once per discrete drag/step, independent of focus."
+                    "text": "Emitted when the value is committed (noUiSlider `change`, not `blur` \u2014 see\nADR-0010/ADR-0007). Fires once per discrete drag/step, independent of focus."
                 },
                 "complexType": {
                     "original": "InputSliderChangeDetail",

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

@@ -8,6 +8,7 @@ const VARIANTS = [
     'disabled',
     'readonly',
     'invalid',
+    'invalid-slot',
     'valid',
     'warning',
     'brand-color',

package/dist/collection/components/list/item/item.host.css

@@ -1 +1 @@
-:host{--_list-item-focus: var(--list-item-focus, var(--mod-list-item-focus, var(--ds-alias-interaction-focus-color-base)));--_list-item-grid-template-columns: var(--list-item-grid-template-columns, var(--mod-list-item-grid-template-columns, 1fr));--_list-item-min-height: var(--list-item-min-height, var(--mod-list-item-min-height, 3.5rem));--_list-item-gap: var(--list-item-gap, var(--mod-list-item-gap, 1rem));--_list-item-space: var(--list-item-space, var(--mod-list-item-space, 0.5rem));--_list-item-content-gap: var(--list-item-content-gap, var(--mod-list-item-content-gap, 1px));--_list-item-color: var(--list-item-color, var(--mod-list-item-color, inherit));--_list-item-border-color-base: var(--list-item-border-color-base, var(--mod-list-item-border-color-base, var(--ds-list-item-border-color)));--_list-item-border-color-hover: var(--list-item-border-color-hover, var(--mod-list-item-border-color-hover, var(--ds-link-color-base)));--_list-item-border-color-active: var(--list-item-border-color-active, var(--mod-list-item-border-color-active, var(--ds-link-color-base-active)));--_list-item-border-width: var(--list-item-border-width, var(--mod-list-item-border-width, var(--ds-list-item-border-width, 2px)));--_list-item-border-radius: var(--list-item-border-radius, var(--mod-list-item-border-radius, 12px));--_list-item-background-base: var(--list-item-background-base, var(--mod-list-item-background-base, transparent));--_list-item-background-hover: var(--list-item-background-hover, var(--mod-list-item-background-hover, var(--ds-alias-background-color-primary-lighter)));--_list-item-background-active: var(--list-item-background-active, var(--mod-list-item-background-active, var(--ds-alias-background-color-primary-lighter)));--_list-item-accordion-py: var(--list-item-accordion-py, var(--mod-list-item-accordion-py, var(--ds-alias-space-base-device)));--_list-item-action-icon-size: var(--list-item-action-icon-size, var(--mod-list-item-action-icon-size, var(--ds-icon-size-xs)));--_list-item-title-size: var(--list-item-title-size, var(--mod-list-item-title-size, var(--ds-heading-5-size-device)));--_list-item-title-weight: var(--list-item-title-weight, var(--mod-list-item-title-weight, var(--ds-alias-text-weight-bold)));--_list-item-title-family: var(--list-item-title-family, var(--mod-list-item-title-family, var(--ds-global-font-family-heading)));--_list-item-text-family: var(--list-item-text-family, var(--mod-list-item-text-family, var(--ds-global-font-family-body)));--_list-item-text-weight: var(--list-item-text-weight, var(--mod-list-item-text-weight, var(--ds-alias-text-weight-regular)));--_list-item-text-size: var(--list-item-text-size, var(--mod-list-item-text-size, var(--ds-alias-text-size-sm-device)))}:host{position:relative;display:grid;box-sizing:border-box;grid-template-columns:var(--_list-item-grid-template-columns)}:host ::slotted([slot=content]){min-height:46px}:host #item{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:var(--_list-item-gap);width:100%;color:var(--_list-item-color);background:inherit;border:none;align-self:stretch;text-align:left;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--_list-item-title-family);padding:var(--_list-item-space) .25rem;padding-bottom:calc(var(--_list-item-space) + 2px);min-height:var(--_list-item-min-height)}:host #item ds-icon{flex-shrink:0}:host #item #content+ds-icon{--icon-size: var(--_list-item-action-icon-size);--icon-inner-size: var(--_list-item-action-icon-size)}:host #item #content{flex:1;display:flex;flex-direction:column;gap:var(--_list-item-content-gap);font-family:var(--_list-item-text-family);font-weight:var(--_list-item-text-weight)}:host #item #label{font-family:var(--_list-item-title-family);font-weight:var(--_list-item-title-weight);font-size:var(--_list-item-title-size);margin:0}:host #item #description{font-family:var(--_list-item-text-family);font-weight:var(--_list-item-text-weight);font-size:var(--_list-item-text-size);margin:0}:host #item:after{content:"";border-radius:var(--_list-item-border-radius);width:100%;position:absolute;bottom:0;left:0;right:0;height:var(--_list-item-border-width);background:var(--_list-item-border-color-base)}:host(.has-label-h1){--mod-list-item-title-size: var(--ds-heading-1-size-device)}:host(.has-label-3xl){--mod-list-item-title-size: var(--ds-heading-1-size-device)}:host(.has-label-h2){--mod-list-item-title-size: var(--ds-heading-2-size-device)}:host(.has-label-2xl){--mod-list-item-title-size: var(--ds-heading-2-size-device)}:host(.has-label-h3){--mod-list-item-title-size: var(--ds-heading-3-size-device)}:host(.has-label-xl){--mod-list-item-title-size: var(--ds-heading-3-size-device)}:host(.has-label-h4){--mod-list-item-title-size: var(--ds-heading-4-size-device)}:host(.has-label-lg){--mod-list-item-title-size: var(--ds-heading-4-size-device)}:host(.has-label-h5){--mod-list-item-title-size: var(--ds-heading-5-size-device)}:host(.has-label-base){--mod-list-item-title-size: var(--ds-heading-5-size-device)}:host(.is-link) #item,:host(.is-button) #item{-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;text-decoration:none;outline:none;cursor:pointer;background:var(--_list-item-background-base)}:host(.is-link) #item::-moz-focus-inner,:host(.is-button) #item::-moz-focus-inner{border:0}:host(.is-link) #item #content,:host(.is-button) #item #content{hyphens:auto;overflow-wrap:break-word;font-family:var(--_list-item-title-family);font-weight:var(--_list-item-title-weight);font-size:var(--_list-item-title-size);color:var(--ds-link-color-base)}@media(hover: hover)and (pointer: fine){:host(.is-link) #item:hover,:host(.is-link) #item.is-hovered,:host(.is-button) #item:hover,:host(.is-button) #item.is-hovered{background:var(--_list-item-background-hover)}}:host(.is-link) #item:active,:host(.is-link) #item.is-pressed,:host(.is-button) #item:active,:host(.is-button) #item.is-pressed{background:var(--_list-item-background-active);color:var(--ds-link-color-base-active)}:host(.is-link) #item:active #content,:host(.is-link) #item.is-pressed #content,:host(.is-button) #item:active #content,:host(.is-button) #item.is-pressed #content{color:var(--ds-link-color-base-active)}:host(.is-link) #item:active ds-icon,:host(.is-link) #item:active ::slotted(ds-icon),:host(.is-link) #item:active ::slotted(ds-badge),:host(.is-link) #item.is-pressed ds-icon,:host(.is-link) #item.is-pressed ::slotted(ds-icon),:host(.is-link) #item.is-pressed ::slotted(ds-badge),:host(.is-button) #item:active ds-icon,:host(.is-button) #item:active ::slotted(ds-icon),:host(.is-button) #item:active ::slotted(ds-badge),:host(.is-button) #item.is-pressed ds-icon,:host(.is-button) #item.is-pressed ::slotted(ds-icon),:host(.is-button) #item.is-pressed ::slotted(ds-badge){--icon-color: var(--ds-link-color-base-active)}:host(.is-link) #item:before,:host(.is-button) #item:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;border-radius:var(--ds-alias-radius-base);touch-action:manipulation;transition-property:box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host(.is-link) #item:focus-visible:not(:active):before,:host(.is-link) #item.is-focused:not(:active):before,:host(.is-button) #item:focus-visible:not(:active):before,:host(.is-button) #item.is-focused:not(:active):before{box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_list-item-focus) 0 0 0 5px !important}@media(hover: hover)and (pointer: fine){:host(.is-link) #item:hover:after,:host(.is-link) #item.is-hovered:after,:host(.is-button) #item:hover:after,:host(.is-button) #item.is-hovered:after,:host(.is-accordion) #item:hover:after,:host(.is-accordion) #item.is-hovered:after{background:var(--_list-item-border-color-hover)}}:host(.is-link) #item:active:after,:host(.is-link) #item.is-pressed:after,:host(.is-button) #item:active:after,:host(.is-button) #item.is-pressed:after,:host(.is-accordion) #item:active:after,:host(.is-accordion) #item.is-pressed:after{background:var(--_list-item-border-color-active)}:host(.is-accordion) ::slotted(p){padding-block:var(--_list-item-accordion-py)}:host(.is-accordion) ds-accordion{--accordion-summary-color-hover: var(--ds-link-color-base)}:host(.is-accordion) ds-accordion::part(header){background:var(--_list-item-background-base)}:host(.is-accordion) ds-accordion::part(summary){padding-right:.25rem}:host(.is-accordion) ds-accordion::part(summary):hover{background:var(--_list-item-background-hover)}:host(.is-accordion) ds-accordion::part(summary):active{background:var(--_list-item-background-active)}:host(.is-accordion) #accordion-content:after{content:"";border-radius:var(--_list-item-border-radius);width:100%;position:absolute;bottom:0;left:0;right:0;height:var(--_list-item-border-width);background:var(--_list-item-border-color-base)}:host(.is-disabled) #item{pointer-events:none !important;cursor:default !important;color:var(--ds-list-item-disabled)}:host(.is-disabled) #item #content{color:var(--ds-list-item-disabled)}:host(.is-disabled) #item ds-icon,:host(.is-disabled) #item ds-badge,:host(.is-disabled) #item ::slotted(ds-icon),:host(.is-disabled) #item ::slotted(ds-badge){--icon-color: var(--ds-list-item-disabled)}:host(.is-disabled) #item ds-badge,:host(.is-disabled) #item ::slotted(ds-badge){--badge-color-background: var(--ds-badge-color-grey-background);--badge-color-text: var(--ds-badge-color-grey-text)}
+:host{--_list-item-focus: var(--list-item-focus, var(--mod-list-item-focus, var(--ds-alias-interaction-focus-color-base)));--_list-item-grid-template-columns: var(--list-item-grid-template-columns, var(--mod-list-item-grid-template-columns, 1fr));--_list-item-min-height: var(--list-item-min-height, var(--mod-list-item-min-height, 3.5rem));--_list-item-gap: var(--list-item-gap, var(--mod-list-item-gap, 1rem));--_list-item-space: var(--list-item-space, var(--mod-list-item-space, 0.5rem));--_list-item-content-gap: var(--list-item-content-gap, var(--mod-list-item-content-gap, 1px));--_list-item-color: var(--list-item-color, var(--mod-list-item-color, inherit));--_list-item-border-color-base: var(--list-item-border-color-base, var(--mod-list-item-border-color-base, var(--ds-list-item-border-color)));--_list-item-border-color-hover: var(--list-item-border-color-hover, var(--mod-list-item-border-color-hover, var(--ds-link-color-base)));--_list-item-border-color-active: var(--list-item-border-color-active, var(--mod-list-item-border-color-active, var(--ds-link-color-base-active)));--_list-item-border-width: var(--list-item-border-width, var(--mod-list-item-border-width, var(--ds-list-item-border-width, 2px)));--_list-item-border-radius: var(--list-item-border-radius, var(--mod-list-item-border-radius, 12px));--_list-item-background-base: var(--list-item-background-base, var(--mod-list-item-background-base, transparent));--_list-item-background-hover: var(--list-item-background-hover, var(--mod-list-item-background-hover, var(--ds-alias-background-color-primary-lighter)));--_list-item-background-active: var(--list-item-background-active, var(--mod-list-item-background-active, var(--ds-alias-background-color-primary-lighter)));--_list-item-accordion-py: var(--list-item-accordion-py, var(--mod-list-item-accordion-py, var(--ds-alias-space-base-device)));--_list-item-action-icon-size: var(--list-item-action-icon-size, var(--mod-list-item-action-icon-size, var(--ds-icon-size-xs)));--_list-item-title-size: var(--list-item-title-size, var(--mod-list-item-title-size, var(--ds-heading-5-size-device)));--_list-item-title-weight: var(--list-item-title-weight, var(--mod-list-item-title-weight, var(--ds-alias-text-weight-bold)));--_list-item-title-family: var(--list-item-title-family, var(--mod-list-item-title-family, var(--ds-global-font-family-heading)));--_list-item-text-family: var(--list-item-text-family, var(--mod-list-item-text-family, var(--ds-global-font-family-body)));--_list-item-text-weight: var(--list-item-text-weight, var(--mod-list-item-text-weight, var(--ds-alias-text-weight-regular)));--_list-item-text-size: var(--list-item-text-size, var(--mod-list-item-text-size, var(--ds-alias-text-size-sm-device)))}:host{position:relative;display:grid;box-sizing:border-box;grid-template-columns:var(--_list-item-grid-template-columns)}:host ::slotted([slot=content]){min-height:46px}:host #item{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:var(--_list-item-gap);width:100%;color:var(--_list-item-color);background:inherit;border:none;align-self:stretch;text-align:left;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--_list-item-title-family);padding:var(--_list-item-space) .25rem;padding-bottom:calc(var(--_list-item-space) + 2px);min-height:var(--_list-item-min-height)}:host #item ds-icon{flex-shrink:0}:host #item #content+ds-icon{--icon-size: var(--_list-item-action-icon-size);--icon-inner-size: var(--_list-item-action-icon-size)}:host #item #content{flex:1;display:flex;flex-direction:column;gap:var(--_list-item-content-gap);font-family:var(--_list-item-text-family);font-weight:var(--_list-item-text-weight)}:host #item #label{font-family:var(--_list-item-title-family);font-weight:var(--_list-item-title-weight);font-size:var(--_list-item-title-size);margin:0}:host #item #description{font-family:var(--_list-item-text-family);font-weight:var(--_list-item-text-weight);font-size:var(--_list-item-text-size);margin:0}:host #item:after{content:"";border-radius:var(--_list-item-border-radius);width:100%;position:absolute;bottom:0;left:0;right:0;height:var(--_list-item-border-width);background:var(--_list-item-border-color-base)}:host(.has-label-h1){--mod-list-item-title-size: var(--ds-heading-1-size-device)}:host(.has-label-3xl){--mod-list-item-title-size: var(--ds-heading-1-size-device)}:host(.has-label-h2){--mod-list-item-title-size: var(--ds-heading-2-size-device)}:host(.has-label-2xl){--mod-list-item-title-size: var(--ds-heading-2-size-device)}:host(.has-label-h3){--mod-list-item-title-size: var(--ds-heading-3-size-device)}:host(.has-label-xl){--mod-list-item-title-size: var(--ds-heading-3-size-device)}:host(.has-label-h4){--mod-list-item-title-size: var(--ds-heading-4-size-device)}:host(.has-label-lg){--mod-list-item-title-size: var(--ds-heading-4-size-device)}:host(.has-label-h5){--mod-list-item-title-size: var(--ds-heading-5-size-device)}:host(.has-label-base){--mod-list-item-title-size: var(--ds-heading-5-size-device)}:host(.is-link) #item,:host(.is-button) #item{-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;text-decoration:none;outline:none;cursor:pointer;background:var(--_list-item-background-base)}:host(.is-link) #item::-moz-focus-inner,:host(.is-button) #item::-moz-focus-inner{border:0}:host(.is-link) #item #content,:host(.is-button) #item #content{hyphens:auto;overflow-wrap:break-word;font-family:var(--_list-item-title-family);font-weight:var(--_list-item-title-weight);font-size:var(--_list-item-title-size);color:var(--ds-link-color-base)}@media(hover: hover)and (pointer: fine){:host(.is-link) #item:hover,:host(.is-link) #item.is-hovered,:host(.is-button) #item:hover,:host(.is-button) #item.is-hovered{background:var(--_list-item-background-hover)}}:host(.is-link) #item:active,:host(.is-link) #item.is-pressed,:host(.is-button) #item:active,:host(.is-button) #item.is-pressed{background:var(--_list-item-background-active);color:var(--ds-link-color-base-active)}:host(.is-link) #item:active #content,:host(.is-link) #item.is-pressed #content,:host(.is-button) #item:active #content,:host(.is-button) #item.is-pressed #content{color:var(--ds-link-color-base-active)}:host(.is-link) #item:active ds-icon,:host(.is-link) #item:active ::slotted(ds-icon),:host(.is-link) #item:active ::slotted(ds-badge),:host(.is-link) #item.is-pressed ds-icon,:host(.is-link) #item.is-pressed ::slotted(ds-icon),:host(.is-link) #item.is-pressed ::slotted(ds-badge),:host(.is-button) #item:active ds-icon,:host(.is-button) #item:active ::slotted(ds-icon),:host(.is-button) #item:active ::slotted(ds-badge),:host(.is-button) #item.is-pressed ds-icon,:host(.is-button) #item.is-pressed ::slotted(ds-icon),:host(.is-button) #item.is-pressed ::slotted(ds-badge){--icon-color: var(--ds-link-color-base-active)}:host(.is-link) #item:before,:host(.is-button) #item:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;border-radius:var(--ds-alias-radius-base);touch-action:manipulation;transition-property:box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host(.is-link) #item:focus-visible:not(:active):before,:host(.is-link) #item.is-focused:not(:active):before,:host(.is-button) #item:focus-visible:not(:active):before,:host(.is-button) #item.is-focused:not(:active):before{box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_list-item-focus) 0 0 0 5px !important}@media(hover: hover)and (pointer: fine){:host(.is-link) #item:hover:after,:host(.is-link) #item.is-hovered:after,:host(.is-button) #item:hover:after,:host(.is-button) #item.is-hovered:after,:host(.is-accordion) #item:hover:after,:host(.is-accordion) #item.is-hovered:after{background:var(--_list-item-border-color-hover)}}:host(.is-link) #item:active:after,:host(.is-link) #item.is-pressed:after,:host(.is-button) #item:active:after,:host(.is-button) #item.is-pressed:after,:host(.is-accordion) #item:active:after,:host(.is-accordion) #item.is-pressed:after{background:var(--_list-item-border-color-active)}:host(.is-accordion) ::slotted(p){padding-block:var(--_list-item-accordion-py)}:host(.is-accordion) ds-accordion{--accordion-summary-color-hover: var(--ds-link-color-base)}:host(.is-accordion) ds-accordion::part(header){background:var(--_list-item-background-base)}:host(.is-accordion) ds-accordion::part(summary){padding-right:.25rem}:host(.is-accordion) ds-accordion::part(summary):hover{background:var(--_list-item-background-hover)}:host(.is-accordion) ds-accordion::part(summary):active{background:var(--_list-item-background-active)}:host(.is-accordion) #accordion-content:after{content:"";border-radius:var(--_list-item-border-radius);width:100%;position:absolute;bottom:0;left:0;right:0;height:var(--_list-item-border-width);background:var(--_list-item-border-color-base)}:host(.is-disabled) #item{pointer-events:none !important;cursor:default !important;color:var(--ds-list-item-disabled)}:host(.is-disabled) #item #content{color:var(--ds-list-item-disabled)}:host(.is-disabled) #item ds-icon,:host(.is-disabled) #item ds-badge,:host(.is-disabled) #item ::slotted(ds-icon),:host(.is-disabled) #item ::slotted(ds-badge){--icon-color: var(--ds-list-item-disabled)}:host(.is-disabled) #item ds-badge,:host(.is-disabled) #item ::slotted(ds-badge){--badge-color-background: var(--ds-badge-grey-color-background);--badge-color-text: var(--ds-badge-grey-color-text)}

package/dist/collection/components/number-input/number-input.js

@@ -6,7 +6,7 @@ import { h, } from "@stencil/core";
 import isEmpty from "lodash/isEmpty";
 import isNaN from "lodash/isNaN";
 import isNil from "lodash/isNil";
-import { inheritAttributes, FormControl, stopEventBubbling, debounceEvent, Logger, getDecimalSeparator, getThousandSeparator, hasValue, OneOf, Type, } from "../../utils/index";
+import { inheritAttributes, FormControl, stopEventBubbling, debounceEvent, Logger, getDecimalSeparator, getThousandSeparator, hasValue, OneOf, Type, watchInvalidTextSlot, } from "../../utils/index";
 import { defaultConfig, ListenToConfig } from "../../global/index";
 import { isNotNumber, mapDecimalSeparator, toFixedNumber, toNumber, toUserFormattedNumber, validateKeyDown, } from "./number-input.utils";
 import { Field } from "../input/field.util";
@@ -15,6 +15,7 @@ import { INPUT_COLORS } from "../input/input.interfaces";
  * Number input renders a specialized text input for numeric values with increment/decrement buttons, formatting, and validation.
  *
  * @slot - The number input field content and surrounding elements.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part input - The native HTML input element.
  * @part prefix - The prefix wrapper (if used).
  * @part suffix - The suffix wrapper (if used).
@@ -28,6 +29,7 @@ export class NumberInput {
         this.control = new FormControl(this);
         this.lastValue = '';
         this.focused = false;
+        this.hasInvalidTextSlotContent = false;
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
         this.nativeInputValue = '';
@@ -197,6 +199,13 @@ export class NumberInput {
     connectedCallback() {
         this.debounceChanged();
         this.control.connectedCallback();
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
@@ -292,7 +301,8 @@ export class NumberInput {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: 'a7ccea6d0b98bd447e9fac8af180019eddbaff7b', 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("input", Object.assign({ key: '76078e54d6f2dbfa6ad348e09b9987b741b8bdc1', id: "input", part: "input", type: "text", inputMode: "decimal", pattern: this.inputPattern, ref: el => (this.control.nativeEl = el), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', name: this.name, disabled: this.disabled, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, min: this.min, max: this.max, value: this.nativeInputValue, onInput: ev => this.handleInput(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onClick: ev => this.control.onClick(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes))));
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
+        return (h(Field, { key: 'a185df149be41135c6b939ad1c3ad5ba57a38e94', disabled: this.disabled, color: this.color, invalid: isInvalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language }, h("input", Object.assign({ key: 'a7461115068e7a365ba4b0e25501d96be6de099d', id: "input", part: "input", type: "text", inputMode: "decimal", pattern: this.inputPattern, ref: el => (this.control.nativeEl = el), "aria-describedby": "description", "aria-invalid": isInvalid ? 'true' : 'false', name: this.name, disabled: this.disabled, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, min: this.min, max: this.max, value: this.nativeInputValue, onInput: ev => this.handleInput(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onClick: ev => this.control.onClick(ev), onKeyDown: ev => this.handleKeydown(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes))));
     }
     static get is() { return "ds-number-input"; }
     static get encapsulation() { return "shadow"; }
@@ -701,6 +711,7 @@ export class NumberInput {
     static get states() {
         return {
             "focused": {},
+            "hasInvalidTextSlotContent": {},
             "language": {},
             "region": {},
             "nativeInputValue": {},

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/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
@@ -144,8 +146,15 @@ 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();
     }
@@ -242,6 +251,7 @@ export class RadioGroup {
      * ------------------------------------------------------
      */
     passDownAttributes() {
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
         this.getRadios().forEach(radio => {
             var _a;
             if (this.disabled !== undefined) {
@@ -250,9 +260,7 @@ export class RadioGroup {
             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.hideTrigger = this.hideTrigger;
@@ -293,10 +301,10 @@ export class RadioGroup {
      * ------------------------------------------------------
      */
     render() {
-        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: {
+        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: 'd235eec63f1e13a9de4988b841ea124f05d9a2a3', onSlotchange: this.handleSlotChange })));
+            }, onClick: this.handleClick }, h("slot", { key: '468b13eff479f2654ce14a5b513e10f513fbf0ee', onSlotchange: this.handleSlotChange })));
     }
     static get is() { return "ds-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -759,7 +767,8 @@ export class RadioGroup {
     static get states() {
         return {
             "language": {},
-            "region": {}
+            "region": {},
+            "hasInvalidTextSlotContent": {}
         };
     }
     static get events() {

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

@@ -26,6 +26,7 @@ const HOST_VARIANTS = [
     'form',
     'field-disabled',
     'field-invalid',
+    'field-invalid-slot',
     'tile-basic',
     'tile-columns',
     'tile-invalid',