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

package/dist/collection/components/file-upload/file-upload.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h } from "@stencil/core";
-import { Logger, stopEventBubbling, areArraysEqual, OneOf, Type } from "../../utils/index";
+import { Logger, stopEventBubbling, areArraysEqual, 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 { i18nDsFileUpload } from "./file-upload.i18n";
 /**
  * FileUpload renders a drag-drop file upload area with optional file list, validation, and form field integration.
  *
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  * @part drop-zone - The main drop area where users drag files or click to select.
  * @part file-list - The list of selected files below the drop zone.
  */
@@ -26,6 +27,7 @@ export class FileUpload {
         this.isDragOver = false;
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
+        this.hasInvalidTextSlotContent = false;
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -216,12 +218,17 @@ export class FileUpload {
     }
     connectedCallback() {
         this.initialValue = [...(this.value || [])];
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
     }
     componentDidLoad() {
         this.addDragListeners();
     }
     disconnectedCallback() {
+        var _a;
         this.removeDragListeners();
+        (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     /**
      * LISTENERS
@@ -269,11 +276,12 @@ export class FileUpload {
         const dropZoneLabel = this.dropZoneLabel || i18nDsFileUpload[this.language].dropZoneLabel;
         const selectedFilesLabel = i18nDsFileUpload[this.language].selectedFilesLabel;
         const removeFileLabel = i18nDsFileUpload[this.language].removeFileLabel;
-        return (h(Field, { key: '0262acd3da4ebb07ab1207c456eb49e2b7abd638', color: this.color, disabled: this.disabled, invalid: this.invalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, inputId: this.fileUploadId }, h("div", { key: '53ef4c5d329415ccd17d0be52ab73aadd1845612', id: "drop-zone", part: "drop-zone", ref: el => (this.dropZoneEl = el), class: {
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
+        return (h(Field, { key: '264facee2060dc2a63d529c762384c93539994d3', color: this.color, disabled: this.disabled, invalid: isInvalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, inputId: this.fileUploadId }, h("div", { key: '16930c2a8604287d7d4514b0faabb7afabc213f6', id: "drop-zone", part: "drop-zone", ref: el => (this.dropZoneEl = el), class: {
                 'file-upload-drop-zone': true,
                 'is-dragover': this.isDragOver,
                 'is-disabled': isDisabled,
-            }, onClick: () => { var _a; return !isDisabled && ((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click()); } }, h("span", { key: 'a4a362449b720986bbd9d6d82032c0004c760b19', id: "drop-zone-status", role: "status", "aria-live": "polite" }, this.isDragOver ? 'Drop files here' : ''), h("input", { key: '456e17b2975c5ee0755b16d07a8ab3c2fa4f66d6', part: "input", ref: el => (this.nativeInput = el), id: this.fileUploadId, type: "file", name: this.name, multiple: this.multiple, disabled: isDisabled, required: this.required, accept: this.accept || undefined, "aria-invalid": this.invalid ? 'true' : 'false', "aria-describedby": "description", onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, "data-testid": "ds-file-upload-input" }), h("div", { key: 'dfe3c5972da1593bef6c0aa94cc79851b6fe7b44', id: "drop-zone-content", class: { 'is-disabled': isDisabled } }, h("slot", { key: 'a76bb47e49f108cf9c054cba02a78110869870ce' }, h("div", { key: 'bc52009e955c1267d28f097a37e64019caaf364d', id: "drop-zone-placeholder", class: { 'is-disabled': isDisabled } }, !this.loading && h("ds-icon", { key: 'dcab355b1cb4a89a8c8b2d67e3ab3f22d4a0eb7a', name: "upload", size: "lg" }), this.loading && h("ds-spinner", { key: '8e5451696abcdb8679d6741b53ce8267234b6435', variation: "circle" }), h("span", { key: 'e7989e8a8d431d0cb3709e890929d9fc59f01fef' }, dropZoneLabel))))), this.hasFileList && this.files.length > 0 && (h("ul", { key: '973570b4094cad00ee06b6dd1ca4ffbc55e76fee', id: "file-list", part: "file-list", role: "list", "aria-label": selectedFilesLabel, class: {
+            }, onClick: () => { var _a; return !isDisabled && ((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click()); } }, h("span", { key: 'daf3fe680737e74fadd0304123b567fb29ddb677', id: "drop-zone-status", role: "status", "aria-live": "polite" }, this.isDragOver ? 'Drop files here' : ''), h("input", { key: 'b47ca36b002f49964c5dbacd01fba6726ac5d1ec', part: "input", ref: el => (this.nativeInput = el), id: this.fileUploadId, type: "file", name: this.name, multiple: this.multiple, disabled: isDisabled, required: this.required, accept: this.accept || undefined, "aria-invalid": isInvalid ? 'true' : 'false', "aria-describedby": "description", onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, "data-testid": "ds-file-upload-input" }), h("div", { key: '26354b7f63a925ad4a9d9bf55636a16a53a14d97', id: "drop-zone-content", class: { 'is-disabled': isDisabled } }, h("slot", { key: '56d73b20cbf45122db3dbed32a3fc97b7e622fc1' }, h("div", { key: 'd295ffa0e196e8bd99a743b648c443fe8414f413', id: "drop-zone-placeholder", class: { 'is-disabled': isDisabled } }, !this.loading && h("ds-icon", { key: '6cb31c32f06b44142ff48a0f9a9bb9b088af26e6', name: "upload", size: "lg" }), this.loading && h("ds-spinner", { key: 'c7b165be814544ac85a80c34d260c03a7e416d5e', variation: "circle" }), h("span", { key: 'd9b6c717c0fc6891d53e76e53686ef3e402b3257' }, dropZoneLabel))))), this.hasFileList && this.files.length > 0 && (h("ul", { key: 'a9669c46401067ba400c9080f2907f43e66e7419', id: "file-list", part: "file-list", role: "list", "aria-label": selectedFilesLabel, class: {
                 'file-list': true,
                 'is-disabled': isDisabled,
             } }, this.files.map((file, index) => (h("li", { id: `file-list-item-${index}`, key: file.name, class: "file-list-item" }, h("ds-stack", { direction: "row", align: "center" }, h("ds-icon", { name: "document", size: "md" }), h("ds-content", { space: "none" }, h("span", { class: "file-name", title: file.name }, file.name), h("span", { class: "file-size" }, formatFileSize(file.size))), h("ds-button", { size: "sm", icon: "trash", square: true, color: "secondary", a11yLabel: `${removeFileLabel} ${file.name}`, disabled: isDisabled, onKeyDown: (ev) => {
@@ -691,7 +699,8 @@ export class FileUpload {
             "focused": {},
             "isDragOver": {},
             "language": {},
-            "region": {}
+            "region": {},
+            "hasInvalidTextSlotContent": {}
         };
     }
     static get events() {

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))}:host{--_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(--_heading-font-size, var(--ds-heading-1-size-device))));--_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-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.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)}