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

package/dist/collection/components/content/content.js

@@ -13,39 +13,6 @@ import { CONTENT_DIRECTIONS, CONTENT_ALIGNMENTS, CONTENT_SPACES, } from "./conte
  * @part content - The content container element.
  */
 export class Content {
-    constructor() {
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * **Deprecated:** Use direction instead.
-         */
-        this.layout = '';
-        /**
-         * Defines the direction of the child elements. Default is column.
-         */
-        this.direction = '';
-        /**
-         * Defines the positioning like center, end or
-         * default to start.
-         */
-        this.align = '';
-        /**
-         * Defines the text positioning like center, right or
-         * default to left.
-         */
-        this.textAlign = '';
-        /**
-         * Defines the space between the child elements. Default is xx-small.
-         */
-        this.space = '';
-        /**
-         * @internal
-         * Please use align instead.
-         */
-        this.alignment = '';
-    }
     createLogger(log) {
         this.log = log;
     }
@@ -59,7 +26,7 @@ export class Content {
         const align = hasValue(this.align);
         const space = normalizeDeprecatedTShirtSize(this.space) || '';
         let alignValue = (_a = this.align) === null || _a === void 0 ? void 0 : _a.split(' ').join('-');
-        if (hasValue(this.alignment)) {
+        if (this.alignment) {
             alignValue = this.alignment.split(' ').join('-');
         }
         let direction = this.direction;
@@ -77,14 +44,14 @@ export class Content {
                 direction = 'row-reverse';
             }
         }
-        return (h(Host, { key: '5e1dd2f21df711ad1be750936272efbc08ff3523', class: {
+        return (h(Host, { key: 'a1cd5de9505f4bfa2888e453c3c40d9e95bd5931', class: {
                 'stack-content': true,
                 'as-row': direction === 'row',
                 'as-col': direction === 'column',
                 [`align-${alignValue}`]: align || alignment,
                 [`text-${this.textAlign}`]: hasValue(this.textAlign),
                 [`has-space-${space}`]: hasValue(this.space),
-            } }, h("slot", { key: '551c92899f3580cc78643957fdfe7dad302927a4' })));
+            } }, h("slot", { key: 'd4b6a17b957bc3aff33e3f09eb123c8350c214eb' })));
     }
     static get is() { return "ds-content"; }
     static get originalStyleUrls() {
@@ -104,7 +71,7 @@ export class Content {
                 "mutable": false,
                 "complexType": {
                     "original": "StackLayout",
-                    "resolved": "\"\" | \"horizontal\" | \"horizontal-reverse\" | \"vertical\" | \"vertical-reverse\"",
+                    "resolved": "\"\" | \"horizontal\" | \"horizontal-reverse\" | \"vertical\" | \"vertical-reverse\" | undefined",
                     "references": {
                         "StackLayout": {
                             "location": "import",
@@ -115,7 +82,7 @@ export class Content {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "**Deprecated:** Use direction instead."
@@ -123,15 +90,14 @@ export class Content {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "layout",
-                "defaultValue": "''"
+                "attribute": "layout"
             },
             "direction": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "StackDirection",
-                    "resolved": "\"\" | \"column\" | \"column-reverse\" | \"row\" | \"row-reverse\"",
+                    "resolved": "\"column\" | \"column-reverse\" | \"row\" | \"row-reverse\" | undefined",
                     "references": {
                         "StackDirection": {
                             "location": "import",
@@ -142,7 +108,7 @@ export class Content {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Defines the direction of the child elements. Default is column."
@@ -150,15 +116,14 @@ export class Content {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "direction",
-                "defaultValue": "''"
+                "attribute": "direction"
             },
             "align": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "ContentAlignment",
-                    "resolved": "\"\" | \"center\" | \"end\" | \"start\"",
+                    "resolved": "\"center\" | \"end\" | \"start\" | undefined",
                     "references": {
                         "ContentAlignment": {
                             "location": "import",
@@ -169,7 +134,7 @@ export class Content {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Defines the positioning like center, end or\ndefault to start."
@@ -177,15 +142,14 @@ export class Content {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "align",
-                "defaultValue": "''"
+                "attribute": "align"
             },
             "textAlign": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "ContentTextAlignment",
-                    "resolved": "\"\" | \"center\" | \"left\" | \"right\"",
+                    "resolved": "\"\" | \"center\" | \"left\" | \"right\" | undefined",
                     "references": {
                         "ContentTextAlignment": {
                             "location": "import",
@@ -196,7 +160,7 @@ export class Content {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Defines the text positioning like center, right or\ndefault to left."
@@ -204,15 +168,14 @@ export class Content {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "text-align",
-                "defaultValue": "''"
+                "attribute": "text-align"
             },
             "space": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "ContentSpace",
-                    "resolved": "\"\" | \"2xs\" | \"3xs\" | \"base\" | \"none\" | \"normal\" | \"sm\" | \"small\" | \"x-small\" | \"xs\" | \"xx-small\" | \"xxx-small\"",
+                    "resolved": "\"2xs\" | \"3xs\" | \"base\" | \"none\" | \"normal\" | \"sm\" | \"small\" | \"x-small\" | \"xs\" | \"xx-small\" | \"xxx-small\" | undefined",
                     "references": {
                         "ContentSpace": {
                             "location": "import",
@@ -223,7 +186,7 @@ export class Content {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Defines the space between the child elements. Default is xx-small."
@@ -231,15 +194,14 @@ export class Content {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "space",
-                "defaultValue": "''"
+                "attribute": "space"
             },
             "alignment": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "StackAlignment",
-                    "resolved": "\"\" | \"bottom center\" | \"bottom end\" | \"bottom start\" | \"center\" | \"end\" | \"start\" | \"top center\" | \"top end\" | \"top start\"",
+                    "resolved": "\"bottom center\" | \"bottom end\" | \"bottom start\" | \"center\" | \"end\" | \"start\" | \"top center\" | \"top end\" | \"top start\" | undefined",
                     "references": {
                         "StackAlignment": {
                             "location": "import",
@@ -250,7 +212,7 @@ export class Content {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "internal",
@@ -261,8 +223,7 @@ export class Content {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "alignment",
-                "defaultValue": "''"
+                "attribute": "alignment"
             }
         };
     }

package/dist/collection/components/date/date.js

@@ -3,7 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h } from "@stencil/core";
-import { inheritAttributes, FormControl, FocusHandler, debounceEvent, Logger, isEscapeKey, OneOf, Type, raf, } from "../../utils/index";
+import { inheritAttributes, FormControl, FocusHandler, debounceEvent, Logger, isEscapeKey, OneOf, Type, raf, watchInvalidTextSlot, } from "../../utils/index";
 import { defaultConfig, ListenToConfig } from "../../global/index";
 import { Field } from "../input/field.util";
 import { ClearButton } from "../input/clear-button.util";
@@ -15,6 +15,7 @@ import { i18nDsTriggerButton } from "../input/trigger-button.i18n";
 /**
  * Date renders a masked date input field with an interactive calendar popup for date selection.
  *
+ * @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 clear - The clear button that removes the selected date.
  * @part trigger - The calendar icon button that opens the date picker popup.
@@ -30,6 +31,7 @@ export class DsDate {
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
         this.isOpen = false;
+        this.hasInvalidTextSlotContent = false;
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -245,6 +247,9 @@ export class DsDate {
     connectedCallback() {
         this.debounceChanged();
         this.control.connectedCallback();
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title', 'data-hj-allow']);
@@ -283,12 +288,13 @@ export class DsDate {
         }
     }
     disconnectedCallback() {
-        var _a, _b;
+        var _a, _b, _c;
         this.focusHandler.disconnect();
         (_a = this.dateMask) === null || _a === void 0 ? void 0 : _a.destroy();
         this.dateMask = undefined;
         (_b = this.datePicker) === null || _b === void 0 ? void 0 : _b.destroy();
         this.datePicker = undefined;
+        (_c = this.disconnectInvalidTextSlotWatcher) === null || _c === void 0 ? void 0 : _c.call(this);
     }
     /**
      * PUBLIC METHODS
@@ -361,7 +367,8 @@ export class DsDate {
         const displayValue = isoToDisplay(this.value, getDisplayFormat(this.region));
         const triggerLabel = i18nDsTriggerButton[this.language].openCalendar;
         const chooseDateLabel = i18nDsTriggerButton[this.language].chooseDate;
-        return (h(Field, { key: '859a54d8d31278c3fec25f00ac9929181cd7a7b5', 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, inputId: "input" }, h("input", Object.assign({ key: '4ad6e0bae869a59beb72ed72e5d90e58efbab930', id: "input", part: "input", name: this.name, type: "text", inputMode: "numeric", ref: inputEl => (this.control.nativeEl = inputEl), "aria-describedby": "description", "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, value: displayValue, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes)), h(ClearButton, { key: 'cb317335e4e6053cc2dc3f45c59bb7c8b3418bd4', value: this.value, disabled: this.disabled, readonly: this.readonly, language: this.language, onClick: this.handleClearClick }), !this.freeSolo && !this.disabled && !this.readonly && (h("button", { key: 'ba6176e8c753d5055e0cd67eb0d8f973e4c06ce3', id: "trigger", part: "trigger", type: "button", ref: el => (this.triggerEl = el), "aria-label": triggerLabel, title: triggerLabel, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": "popup", onClick: this.handleTriggerClick }, h("ds-icon", { key: 'e5753c5a882058c816cf1feb1d73d2fb2043d027', name: "date" }))), !this.freeSolo && (h("div", { key: 'ceafaa1297f32cf6d6614ecbe21230c5bee7327d', id: "popup", role: "dialog", "aria-modal": "true", "aria-label": chooseDateLabel, "aria-hidden": this.isOpen ? 'false' : 'true', inert: this.isOpen ? undefined : true, ref: el => (this.popupHostEl = el) }))));
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
+        return (h(Field, { key: '8014eb5d73b80fa1509c5f26443bfef49bc52323', 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, inputId: "input" }, h("input", Object.assign({ key: 'def1cdff17dc0ab2041a721a9410dd7dc1910d6d', id: "input", part: "input", name: this.name, type: "text", inputMode: "numeric", ref: inputEl => (this.control.nativeEl = inputEl), "aria-describedby": "description", "aria-invalid": isInvalid ? 'true' : 'false', disabled: this.disabled, autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, value: displayValue, onClick: ev => this.handleClick(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onKeyPress: ev => this.dsKeyPress.emit(ev) }, this.inheritedAttributes)), h(ClearButton, { key: '186a489abe898f6bca4d3b1b6680d7040c29346e', value: this.value, disabled: this.disabled, readonly: this.readonly, language: this.language, onClick: this.handleClearClick }), !this.freeSolo && !this.disabled && !this.readonly && (h("button", { key: 'be3c5c0c05f0d9833925e9a55ced39a761f93b8c', id: "trigger", part: "trigger", type: "button", ref: el => (this.triggerEl = el), "aria-label": triggerLabel, title: triggerLabel, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": "popup", onClick: this.handleTriggerClick }, h("ds-icon", { key: '9f8e939473943399badc13b7ea45c9585dc474f5', name: "date" }))), !this.freeSolo && (h("div", { key: '4073f568bba1558bb57d894b789580d52601bf1c', id: "popup", role: "dialog", "aria-modal": "true", "aria-label": chooseDateLabel, "aria-hidden": this.isOpen ? 'false' : 'true', inert: this.isOpen ? undefined : true, ref: el => (this.popupHostEl = el) }))));
     }
     static get is() { return "ds-date"; }
     static get encapsulation() { return "shadow"; }
@@ -857,7 +864,8 @@ export class DsDate {
             "focused": {},
             "language": {},
             "region": {},
-            "isOpen": {}
+            "isOpen": {},
+            "hasInvalidTextSlotContent": {}
         };
     }
     static get events() {

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

@@ -12,6 +12,7 @@ const VARIANTS = [
     'allowed-dates',
     'disabled',
     'invalid',
+    'invalid-slot',
     'valid',
     'warning',
     'loading',

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