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

package/dist/collection/components/file-upload/test/file-upload.visual.play.js

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

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

@@ -1 +1 @@
-:host{--_heading-position: var(--heading-position, var(--mod-heading-position, static));--_heading-top: var(--heading-top, var(--mod-heading-top));--_heading-right: var(--heading-right, var(--mod-heading-right));--_heading-bottom: var(--heading-bottom, var(--mod-heading-bottom));--_heading-left: var(--heading-left, var(--mod-heading-left));position:var(--_heading-position);top:var(--_heading-top);right:var(--_heading-right);bottom:var(--_heading-bottom);left:var(--_heading-left);--_heading-m: var(--heading-m, var(--mod-heading-m, 0));--_heading-my: var(--heading-my, var(--mod-heading-my));--_heading-mx: var(--heading-mx, var(--mod-heading-mx));--_heading-ml: var(--heading-ml, var(--mod-heading-ml));--_heading-mr: var(--heading-mr, var(--mod-heading-mr));--_heading-mt: var(--heading-mt, var(--mod-heading-mt));--_heading-mb: var(--heading-mb, var(--mod-heading-mb));margin:var(--_heading-m);margin-inline:var(--_heading-mx);margin-block:var(--_heading-my);margin-left:var(--_heading-ml);margin-right:var(--_heading-mr);margin-top:var(--_heading-mt);margin-bottom:var(--_heading-mb);--_heading-color: var(--heading-color, var(--mod-heading-color, inherit));--_heading-family: var(--heading-family, var(--mod-heading-family, var(--ds-heading-family)));--_heading-weight: var(--heading-weight, var(--mod-heading-weight, var(--ds-heading-weight)));--_heading-line-height: var(--heading-line-height, var(--mod-heading-line-height, var(--ds-heading-line-height)));--_heading-font-size: var(--heading-font-size, var(--mod-heading-font-size, var(--ds-heading-1-size-device)));--_heading-space: var(--heading-space, var(--mod-heading-space, var(--ds-heading-1-space)));--_heading-shadow: var(--heading-shadow, var(--mod-heading-shadow, none));--_heading-text-align: var(--heading-text-align, var(--mod-heading-text-align, inherit))}#heading{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;color:var(--_heading-color);font-family:var(--_heading-family);font-weight:var(--_heading-weight);font-size:var(--_heading-font-size);line-height:var(--_heading-line-height);text-align:var(--_heading-text-align);text-shadow:var(--_heading-shadow)}#heading em:not(.text),#heading span:not(.text){font-weight:inherit}#heading b,#heading strong,#heading .is-bold{font-weight:var(--ds-text-weight-bold)}:host(.has-no-wrap) #heading{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host(.has-shadow){--mod-heading-shadow: var(--ds-heading-shadow)}:host(.is-subtitle){--mod-heading-family: var(--ds-heading-subtitle-family);--mod-heading-weight: var(--ds-heading-subtitle-weight);--mod-heading-line-height: var(--ds-heading-subtitle-line-height)}:host(.is-primary){--mod-heading-color: var(--ds-heading-color-primary)}:host(.is-success){--mod-heading-color: var(--ds-heading-color-success)}:host(.is-warning){--mod-heading-color: var(--ds-heading-color-warning)}:host(.is-danger){--mod-heading-color: var(--ds-heading-color-danger)}:host(.is-white){--mod-heading-color: var(--ds-heading-color-white)}:host(.is-black){--mod-heading-color: var(--ds-heading-color-black)}:host(.is-3xl){--mod-heading-font-size: var(--ds-heading-1-size-device);--mod-heading-space: var(--ds-heading-1-space)}:host(.is-2xl){--mod-heading-font-size: var(--ds-heading-2-size-device);--mod-heading-space: var(--ds-heading-2-space)}:host(.is-xl){--mod-heading-font-size: var(--ds-heading-3-size-device);--mod-heading-space: var(--ds-heading-3-space)}:host(.is-lg){--mod-heading-font-size: var(--ds-heading-4-size-device);--mod-heading-space: var(--ds-heading-4-space)}:host(.is-base){--mod-heading-font-size: var(--ds-heading-5-size-device);--mod-heading-space: var(--ds-heading-5-space)}:host(.is-5xl){--mod-heading-font-size: var(--ds-heading-display1-size-device);--mod-heading-space: var(--ds-heading-display1-space)}:host(.is-4xl){--mod-heading-font-size: var(--ds-heading-display2-size-device);--mod-heading-space: var(--ds-heading-display2-space)}:host(.has-space-all){--heading-mt: var(--_heading-space);--heading-mb: var(--_heading-space)}:host(.has-space-top){--heading-mt: var(--_heading-space);--heading-mb: 0}:host(.has-space-bottom){--heading-mt: 0;--heading-mb: var(--_heading-space)}:host(.has-space-none){--heading-mt: 0;--heading-mb: 0}:host{display:block}
+:host{--_heading-position: var(--heading-position, var(--mod-heading-position, static));--_heading-top: var(--heading-top, var(--mod-heading-top));--_heading-right: var(--heading-right, var(--mod-heading-right));--_heading-bottom: var(--heading-bottom, var(--mod-heading-bottom));--_heading-left: var(--heading-left, var(--mod-heading-left));position:var(--_heading-position);top:var(--_heading-top);right:var(--_heading-right);bottom:var(--_heading-bottom);left:var(--_heading-left);--_heading-m: var(--heading-m, var(--mod-heading-m, 0));--_heading-my: var(--heading-my, var(--mod-heading-my));--_heading-mx: var(--heading-mx, var(--mod-heading-mx));--_heading-ml: var(--heading-ml, var(--mod-heading-ml));--_heading-mr: var(--heading-mr, var(--mod-heading-mr));--_heading-mt: var(--heading-mt, var(--mod-heading-mt));--_heading-mb: var(--heading-mb, var(--mod-heading-mb));margin:var(--_heading-m);margin-inline:var(--_heading-mx);margin-block:var(--_heading-my);margin-left:var(--_heading-ml);margin-right:var(--_heading-mr);margin-top:var(--_heading-mt);margin-bottom:var(--_heading-mb);--_heading-color: var(--heading-color, var(--mod-heading-color, inherit));--_heading-family: var(--heading-family, var(--mod-heading-family, var(--ds-heading-font-family)));--_heading-weight: var(--heading-weight, var(--mod-heading-weight, var(--ds-heading-font-weight)));--_heading-line-height: var(--heading-line-height, var(--mod-heading-line-height, var(--ds-heading-line-height)));--_heading-font-size: var(--heading-font-size, var(--mod-heading-font-size, var(--ds-heading-1-size-device)));--_heading-space: var(--heading-space, var(--mod-heading-space, var(--ds-heading-1-space)));--_heading-shadow: var(--heading-shadow, var(--mod-heading-shadow, none));--_heading-text-align: var(--heading-text-align, var(--mod-heading-text-align, inherit))}#heading{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;color:var(--_heading-color);font-family:var(--_heading-family);font-weight:var(--_heading-weight);font-size:var(--_heading-font-size);line-height:var(--_heading-line-height);text-align:var(--_heading-text-align);text-shadow:var(--_heading-shadow)}#heading em:not(.text),#heading span:not(.text){font-weight:inherit}#heading b,#heading strong,#heading .is-bold{font-weight:var(--ds-alias-text-weight-bold)}:host(.has-no-wrap) #heading{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host(.has-shadow){--mod-heading-shadow: var(--ds-heading-shadow)}:host(.is-subtitle){--mod-heading-family: var(--ds-heading-subtitle-font-family);--mod-heading-weight: var(--ds-heading-subtitle-font-weight);--mod-heading-line-height: var(--ds-heading-subtitle-line-height)}:host(.is-primary){--mod-heading-color: var(--ds-heading-primary-color-base)}:host(.is-success){--mod-heading-color: var(--ds-heading-success-color-base)}:host(.is-warning){--mod-heading-color: var(--ds-heading-warning-color-base)}:host(.is-danger){--mod-heading-color: var(--ds-heading-danger-color-base)}:host(.is-white){--mod-heading-color: var(--ds-heading-white-color-base)}:host(.is-black){--mod-heading-color: var(--ds-heading-black-color-base)}:host(.is-3xl){--mod-heading-font-size: var(--ds-heading-1-size-device);--mod-heading-space: var(--ds-heading-1-space)}:host(.is-2xl){--mod-heading-font-size: var(--ds-heading-2-size-device);--mod-heading-space: var(--ds-heading-2-space)}:host(.is-xl){--mod-heading-font-size: var(--ds-heading-3-size-device);--mod-heading-space: var(--ds-heading-3-space)}:host(.is-lg){--mod-heading-font-size: var(--ds-heading-4-size-device);--mod-heading-space: var(--ds-heading-4-space)}:host(.is-base){--mod-heading-font-size: var(--ds-heading-5-size-device);--mod-heading-space: var(--ds-heading-5-space)}:host(.is-5xl){--mod-heading-font-size: var(--ds-heading-display-1-size-device);--mod-heading-space: var(--ds-heading-display-1-space)}:host(.is-4xl){--mod-heading-font-size: var(--ds-heading-display-2-size-device);--mod-heading-space: var(--ds-heading-display-2-space)}:host(.has-space-all){--heading-mt: var(--_heading-space);--heading-mb: var(--_heading-space)}:host(.has-space-top){--heading-mt: var(--_heading-space);--heading-mb: 0}:host(.has-space-bottom){--heading-mt: 0;--heading-mb: var(--_heading-space)}:host(.has-space-none){--heading-mt: 0;--heading-mb: 0}:host{display:block}

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

@@ -17,9 +17,8 @@ export const HEADING_VISUAL_LEVELS = [
     'lg',
     'md',
     'base',
-    '',
 ];
-export const HEADING_COLORS = ['primary', 'info', 'success', 'warning', 'danger', 'blue', 'white', ''];
+export const HEADING_COLORS = ['primary', 'info', 'success', 'warning', 'danger', 'blue', 'white'];
 export const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'span', 'p'];
 export const HEADING_LEVELS = ['display', 'display-2', 'h1', 'h2', 'h3', 'h4', 'h5', 'span', 'p', ''];
-export const HEADING_SPACES = ['none', 'bottom', 'top', 'all', ''];
+export const HEADING_SPACES = ['none', 'bottom', 'top', 'all'];

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.host.css

@@ -0,0 +1 @@
+.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;height:100%;width:100%;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;transform-style:flat}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{top:-100%;width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit !important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;bottom:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#fafafa;border-radius:4px;border:1px solid #d3d3d3;box-shadow:inset 0 1px 1px #f0f0f0,0 3px 6px -5px #bbb}.noUi-connects{border-radius:3px}.noUi-connect{background:#3fb8af}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #d9d9d9;border-radius:3px;background:#fff;cursor:default;box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ebebeb,0 3px 6px -3px #bbb}.noUi-active{box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ddd,0 3px 6px -3px #bbb}.noUi-handle:before,.noUi-handle:after{content:"";display:block;position:absolute;height:14px;width:1px;background:#e8e7e6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:before,.noUi-vertical .noUi-handle:after{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#b8b8b8}[disabled].noUi-target,[disabled].noUi-handle,[disabled] .noUi-handle{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#ccc}.noUi-marker-sub{background:#aaa}.noUi-marker-large{background:#aaa}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0, -50%);transform:translate(0, -50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0, 50%);transform:translate(0, 50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #d9d9d9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0, -50%);transform:translate(0, -50%);top:50%;right:120%}.noUi-horizontal .noUi-origin>.noUi-tooltip{-webkit-transform:translate(50%, 0);transform:translate(50%, 0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0, -18px);transform:translate(0, -18px);top:auto;right:28px}:host{--_form-field-gap: var(--form-field-gap, var(--mod-form-field-gap, 0.25rem));--_form-label-color: var(--form-label-color, var(--mod-form-label-color, var(--ds-form-label-color-base)));--_form-label-family: var(--form-label-family, var(--mod-form-label-family, var(--ds-form-label-family)));--_form-label-weight: var(--form-label-weight, var(--mod-form-label-weight, var(--ds-form-label-weight)));--_form-label-line-height: var(--form-label-line-height, var(--mod-form-label-line-height, var(--ds-form-label-line-height)));--_form-label-size: var(--form-label-size, var(--mod-form-label-size, var(--ds-form-label-size-device)));--_form-description-color: var(--form-description-color, var(--mod-form-description-color, var(--ds-form-description-color-base)));--_form-description-family: var(--form-description-family, var(--mod-form-description-family, var(--ds-form-description-family)));--_form-description-weight: var(--form-description-weight, var(--mod-form-description-weight, var(--ds-form-description-weight)));--_form-description-line-height: var(--form-description-line-height, var(--mod-form-description-line-height, var(--ds-form-description-line-height)));--_form-description-size: var(--form-description-size, var(--mod-form-description-size, var(--ds-form-description-size-device)));--_input-slider-track-height: var(--input-slider-track-height, var(--mod-input-slider-track-height, 0.75rem));--_input-slider-track-radius: var(--input-slider-track-radius, var(--mod-input-slider-track-radius, var(--ds-alias-radius-rounded)));--_input-slider-track-color: var(--input-slider-track-color, var(--mod-input-slider-track-color, var(--ds-global-color-grey-2)));--_input-slider-connect-color: var(--input-slider-connect-color, var(--mod-input-slider-connect-color, var(--ds-global-color-primary-5)));--_input-slider-thumb-size: var(--input-slider-thumb-size, var(--mod-input-slider-thumb-size, 1.5rem));--_input-slider-thumb-radius: var(--input-slider-thumb-radius, var(--mod-input-slider-thumb-radius, var(--ds-alias-radius-rounded)));--_input-slider-thumb-color: var(--input-slider-thumb-color, var(--mod-input-slider-thumb-color, var(--ds-global-color-white)));--_input-slider-thumb-hover-color: var(--input-slider-thumb-hover-color, var(--mod-input-slider-thumb-hover-color, var(--ds-global-color-sky-1)));--_input-slider-thumb-active-color: var(--input-slider-thumb-active-color, var(--mod-input-slider-thumb-active-color, var(--ds-global-color-sky-1)));--_input-slider-thumb-border-color: var(--input-slider-thumb-border-color, var(--mod-input-slider-thumb-border-color, var(--ds-global-color-primary-5)));--_input-slider-thumb-border-color-hover: var(--input-slider-thumb-border-color-hover, var(--mod-input-slider-thumb-border-color-hover, var(--ds-global-color-sky-5)));--_input-slider-thumb-border-color-active: var(--input-slider-thumb-border-color-active, var(--mod-input-slider-thumb-border-color-active, var(--ds-global-color-primary-6)))}:host{position:relative;display:grid;gap:var(--_form-field-gap)}:host #container{box-sizing:border-box;clear:both;display:flex;width:100%;align-items:center;min-height:3rem;gap:.25rem}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_form-label-color);font-family:var(--_form-label-family);font-weight:var(--_form-label-weight);font-size:var(--_form-label-size);line-height:var(--_form-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_form-description-color);font-family:var(--_form-description-family);font-weight:var(--_form-description-weight);font-size:var(--_form-description-size);line-height:var(--_form-description-line-height)}:host #description ds-icon{--icon-color: var(--_form-description-color)}:host #container{padding-inline:calc(var(--_input-slider-thumb-size)/2)}:host #slider{width:100%;cursor:pointer;height:var(--_input-slider-track-height);background:var(--_input-slider-track-color);border:none;border-radius:var(--_input-slider-track-radius);box-shadow:none}:host .noUi-connects{border-radius:var(--_input-slider-track-radius)}:host .noUi-connect{background:var(--_input-slider-connect-color)}:host .noUi-handle{width:var(--_input-slider-thumb-size);height:var(--_input-slider-thumb-size);top:calc((var(--_input-slider-track-height) - var(--_input-slider-thumb-size))/2);right:calc(var(--_input-slider-thumb-size)/-2);background:var(--_input-slider-thumb-color);border:2px solid var(--_input-slider-thumb-border-color);border-radius:var(--_input-slider-thumb-radius);box-shadow:#fff 0 0 0 2px;cursor:grab}:host .noUi-handle::before,:host .noUi-handle::after{display:none}@media(hover: hover)and (pointer: fine){:host .noUi-handle:hover{background:var(--_input-slider-thumb-hover-color);border-color:var(--_input-slider-thumb-border-color-hover)}}:host .noUi-handle:active,:host .noUi-handle.noUi-active{background:var(--_input-slider-thumb-active-color);border-color:var(--_input-slider-thumb-border-color-active);cursor:grabbing}:host .noUi-handle:focus-visible{outline:none}@media(hover: hover)and (pointer: fine){:host .noUi-handle:focus-visible{box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important}}:host .noUi-tooltip{background:var(--ds-global-color-primary-5);color:var(--ds-global-color-white);font-size:var(--ds-alias-font-size-small);font-weight:var(--ds-alias-text-weight-bold);font-family:var(--ds-alias-text-family-body);border-radius:var(--ds-alias-radius-rounded);line-height:1;padding:.4rem .4rem;bottom:130%;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%, 4px);transition:opacity 120ms cubic-bezier(0.4, 0, 1, 1),transform 120ms cubic-bezier(0.4, 0, 1, 1),visibility 0ms linear 120ms;will-change:opacity,transform}:host .noUi-handle.noUi-active .noUi-tooltip,:host .noUi-handle:hover .noUi-tooltip,:host .noUi-handle:active .noUi-tooltip,:host .noUi-handle:focus-visible .noUi-tooltip{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%, 0);transition:opacity 200ms cubic-bezier(0, 0, 0.2, 1),transform 200ms cubic-bezier(0, 0, 0.2, 1),visibility 0ms linear 0ms}@media(prefers-reduced-motion: reduce){:host .noUi-tooltip{transition:none !important}}:host(.is-danger){--mod-form-description-color: var(--ds-form-description-color-danger);--mod-input-slider-connect-color: var(--ds-form-container-color-danger-border);--mod-input-slider-thumb-border-color: var(--ds-form-container-color-danger-border)}:host(.is-success){--mod-form-description-color: var(--ds-form-description-color-success);--mod-input-slider-connect-color: var(--ds-form-container-color-success-border);--mod-input-slider-thumb-border-color: var(--ds-form-container-color-success-border)}:host(.is-warning){--mod-form-description-color: var(--ds-form-description-color-warning);--mod-input-slider-connect-color: var(--ds-form-container-color-warning-border);--mod-input-slider-thumb-border-color: var(--ds-form-container-color-warning-border)}:host(.is-brand-yellow){--mod-input-slider-track-color: var(--ds-global-color-yellow-2);--mod-input-slider-connect-color: var(--ds-global-color-yellow-4)}:host(.is-brand-purple){--mod-input-slider-track-color: var(--ds-global-color-purple-2);--mod-input-slider-connect-color: var(--ds-global-color-purple-4)}:host(.is-brand-red){--mod-input-slider-track-color: var(--ds-global-color-red-2);--mod-input-slider-connect-color: var(--ds-global-color-red-4)}:host(.is-brand-green){--mod-input-slider-track-color: var(--ds-global-color-green-2);--mod-input-slider-connect-color: var(--ds-global-color-green-4)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #slider{pointer-events:none;cursor:default}:host(.is-disabled){--mod-form-label-color: var(--ds-form-label-color-disabled);--mod-form-description-color: var(--ds-form-description-color-disabled);--mod-input-slider-track-color: var(--ds-global-color-grey-1);--mod-input-slider-connect-color: var(--ds-global-color-grey-3);--mod-input-slider-thumb-color: var(--ds-global-color-grey-3);--mod-input-slider-thumb-border-color: var(--ds-global-color-grey-3)}:host(.is-disabled) .noUi-handle{cursor:default}

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

@@ -0,0 +1,4 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const INPUT_SLIDER_BRAND_COLORS = ['yellow', 'purple', 'red', 'green', ''];