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

package/dist/esm/ds-divider_2.entry.js

@@ -1,19 +1,19 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, E as h, F as Host, G as getElement, L as rOnLoad } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
-import { h as hasValue } from './has-value-DU9L2JaI.js';
+import { B as registerInstance, E as h, F as Host, G as getElement, L as rOnLoad } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
 import { n as normalizeDeprecatedTShirtSize } from './t-shirt-DR5LIaCn.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import { d as dsBreakpoints } from './breakpoints.subject-BNnXcKMw.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-DZ0xN4Np.js';
-import { L as ListenToConfig } from './config.decorator-ZQ0_Zx5y.js';
-import './create-validator-decorator-DovxquEu.js';
-import './listener-DHP2OPMZ.js';
-import './device-CRuIJzXR.js';
-import './config.utils-D9o7rffC.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { T as Type } from './type-Bqge296W.js';
+import { d as dsBreakpoints } from './breakpoints.subject-CUVOWezN.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-CIweMjJQ.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
+import './create-validator-decorator-g9TfAa1g.js';
+import './listener-DiVrGAqj.js';
+import './device-CtidwsPr.js';
+import './config.utils-Db2OSTX3.js';
 
 const DIVIDER_LAYOUTS = ['horizontal', 'vertical', ''];
 const DIVIDER_COLORS = [
@@ -268,12 +268,12 @@ const Logo = class {
     render() {
         const size = normalizeDeprecatedTShirtSize(this.size) || '';
         const LogoElement = this.brand === 'helvetia' || (this.brand === '' && this.configBrand === 'helvetia') ? (h(LogoHelvetia, { onlyText: this.animated, height: this.getHeight() })) : (h(LogoBaloise, { onlyText: this.animated, height: this.getHeight() }));
-        return (h(Host, { key: '549891bcf54e833cc226fecd178f6aabbfd8bcfa', class: {
+        return (h(Host, { key: '49c188a3abc26836396e1b81abcc1afde8f27b80', class: {
                 'is-animated': this.isAnimated,
                 'is-white': this.color === 'white',
                 'is-sm': size === 'sm',
                 'is-lg': size === 'lg',
-            } }, h("div", { key: '91dd1d3eb07ee2b0da7396558137dde63bcde0da', id: "animated", part: "animated", ref: el => (this.animatedLogoElement = el), "aria-hidden": "true", style: {
+            } }, h("div", { key: 'b7658409d4580d88a45744c608790b76fa21983e', id: "animated", part: "animated", ref: el => (this.animatedLogoElement = el), "aria-hidden": "true", style: {
                 display: this.isAnimated ? 'block' : 'none',
                 width: this.getHeight() + 'px',
                 height: this.getHeight() + 'px',

package/dist/esm/ds-drawer_2.entry.js

@@ -1,18 +1,18 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, w as wait, E as h, F as Host, G as getElement, d as dsBrowser } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
-import { S as ScrollHandler } from './scroll-CsH7NHo5.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import { L as ListenToConfig } from './config.decorator-ZQ0_Zx5y.js';
+import { B as registerInstance, I as createEvent, w as wait, E as h, F as Host, G as getElement, d as dsBrowser } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { S as ScrollHandler } from './scroll-D4cC-Fsr.js';
+import { T as Type } from './type-Bqge296W.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
 import { a as autoUpdate, c as computePosition, s as shift, f as flip, o as offset, b as arrow } from './floating-ui.dom-BqY0KzJC.js';
-import { F as FocusHandler } from './focus-ZxHImoOj.js';
+import { F as FocusHandler } from './focus-C1_jVoAm.js';
 import { i as isEscapeKey } from './keyboard-Uy_dVz21.js';
 import { P as POPUP_PLACEMENTS, a as POPUP_ROLES } from './popup.interfaces-BAY6Z8bT.js';
-import './create-validator-decorator-DovxquEu.js';
-import './config.utils-D9o7rffC.js';
+import './create-validator-decorator-g9TfAa1g.js';
+import './config.utils-Db2OSTX3.js';
 
 const DRAWER_CONTAINERS = ['default', 'fluid', 'compact'];
 
@@ -526,7 +526,7 @@ const Popup = class {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '1acef99537a662beb11707ea44705635eb093f85', class: { 'is-open': this.isOpen, 'is-animated': this.animated, 'is-closable': this.closable } }, this.backdrop && h("div", { key: '229be10bffd71308a8050f748990d277969c7555', part: "backdrop" }), h("div", { key: 'ddc418c04afeca07d97763a576f3c76928977c55', part: "panel", ref: el => (this.panelEl = el), role: this.role, "aria-modal": this.role === 'dialog' ? 'true' : undefined, "aria-label": this.label || undefined, tabindex: "-1", "data-testid": "ds-popup-panel" }, this.arrow && h("div", { key: '04bd45355d808e0246c3501056edfcb74a8dd941', part: "arrow", ref: el => (this.arrowEl = el) }), this.closable && h("ds-close", { key: 'd324a0c8cff055c82f0b907159a8d17cc55d9898', part: "close", onClick: this.handleCloseClick }), h("slot", { key: '06ad646944b283c6337a32ad17267f947ab9be8f' }))));
+        return (h(Host, { key: '63b4cf37af2e73b271f9c7fee523e7c68986081f', class: { 'is-open': this.isOpen, 'is-animated': this.animated, 'is-closable': this.closable } }, this.backdrop && h("div", { key: '208a95330c83c4dd2328ce9e87a06b7aab7ab404', part: "backdrop" }), h("div", { key: '969fde6073490ce0803c0cadcaa9ec06a7704361', part: "panel", ref: el => (this.panelEl = el), role: this.role, "aria-modal": this.role === 'dialog' ? 'true' : undefined, "aria-label": this.label || undefined, tabindex: "-1", "data-testid": "ds-popup-panel" }, this.arrow && h("div", { key: '228d1a47041090c57e395e240f2ebb5678f9c8e1', part: "arrow", ref: el => (this.arrowEl = el) }), this.closable && h("ds-close", { key: 'd18c4ac4848e7ee31256384be4e7e8dd2b8b5a49', part: "close", onClick: this.handleCloseClick }), h("slot", { key: 'ad9430d619bccde71bfeee2faffd1dde34dc43bd' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ds-file-upload.entry.js

@@ -1,23 +1,24 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, v as defaultConfig, E as h, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
-import { a as areArraysEqual } from './array-dJH4dfMr.js';
-import { s as stopEventBubbling } from './form-control-DvJo0GKN.js';
-import { F as Field } from './field.util-BjZzAi09.js';
+import { B as registerInstance, I as createEvent, v as defaultConfig, E as h, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { a as areArraysEqual } from './array-BJZA868l.js';
+import { s as stopEventBubbling } from './form-control-BAP86QSm.js';
+import { w as watchInvalidTextSlot, F as Field } from './field.util-Dl02gvlr.js';
 import { I as INPUT_COLORS } from './input.interfaces-BMM6Nxeh.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import { L as ListenToConfig } from './config.decorator-ZQ0_Zx5y.js';
+import { T as Type } from './type-Bqge296W.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
 import './_commonjsHelpers-Duhf3ymL.js';
-import './_getTag-DFxL3s3h.js';
-import './isObjectLike-BAYao9w7.js';
+import './_getTag-BkweuRJc.js';
+import './isObjectLike-BnBXjF_n.js';
+import './isArray-B8PCdo6e.js';
 import './isNil--HeEBNs3.js';
 import './aria-DYfTMCkl.js';
 import './label.i18n-C7I7OlaM.js';
-import './create-validator-decorator-DovxquEu.js';
-import './config.utils-D9o7rffC.js';
+import './create-validator-decorator-g9TfAa1g.js';
+import './config.utils-Db2OSTX3.js';
 
 const toFileArray = (list) => {
     return Array.from(list !== null && list !== void 0 ? list : []);
@@ -156,6 +157,7 @@ const FileUpload = class {
         this.isDragOver = false;
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
+        this.hasInvalidTextSlotContent = false;
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -346,12 +348,17 @@ const FileUpload = class {
     }
     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
@@ -399,11 +406,12 @@ const FileUpload = class {
         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) => {

package/dist/esm/ds-footer.entry.js

@@ -1,14 +1,14 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, v as defaultConfig, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { B as registerInstance, I as createEvent, v as defaultConfig, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 import { i as i18nDsFooter, F as FOOTER_CONTAINERS } from './footer.i18n-BrJFPhMA.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import { L as ListenToConfig } from './config.decorator-ZQ0_Zx5y.js';
-import './create-validator-decorator-DovxquEu.js';
-import './config.utils-D9o7rffC.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { T as Type } from './type-Bqge296W.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
+import './create-validator-decorator-g9TfAa1g.js';
+import './config.utils-Db2OSTX3.js';
 
 const footerHostCss = () => `:host{--_footer-position:var(--footer-position, var(--mod-footer-position, static));--_footer-top:var(--footer-top, var(--mod-footer-top));--_footer-right:var(--footer-right, var(--mod-footer-right));--_footer-bottom:var(--footer-bottom, var(--mod-footer-bottom));--_footer-left:var(--footer-left, var(--mod-footer-left));position:var(--_footer-position);top:var(--_footer-top);right:var(--_footer-right);bottom:var(--_footer-bottom);left:var(--_footer-left);--_footer-m:var(--footer-m, var(--mod-footer-m, 0));--_footer-my:var(--footer-my, var(--mod-footer-my));--_footer-mx:var(--footer-mx, var(--mod-footer-mx));--_footer-ml:var(--footer-ml, var(--mod-footer-ml));--_footer-mr:var(--footer-mr, var(--mod-footer-mr));--_footer-mt:var(--footer-mt, var(--mod-footer-mt));--_footer-mb:var(--footer-mb, var(--mod-footer-mb));margin:var(--_footer-m);margin-inline:var(--_footer-mx);margin-block:var(--_footer-my);margin-left:var(--_footer-ml);margin-right:var(--_footer-mr);margin-top:var(--_footer-mt);margin-bottom:var(--_footer-mb);--_footer-background:var(--footer-background, var(--mod-footer-background, var(--ds-footer-color-background)));--_footer-color:var(--footer-color, var(--mod-footer-color, var(--ds-footer-color-text)));--_footer-link-color:var(--footer-link-color, var(--mod-footer-link-color, var(--ds-footer-color-link-base)));--_footer-link-color-hover:var(--footer-link-color-hover, var(--mod-footer-link-color-hover, var(--ds-footer-color-link-hover)));--_footer-divider-color:var(--footer-divider-color, var(--mod-footer-divider-color, var(--ds-footer-color-divider)));--_footer-content-max-width:var(--footer-content-max-width, var(--mod-footer-content-max-width, var(--ds-footer-space-content-max-width)));--_footer-padding:var(--footer-padding, var(--mod-footer-padding, var(--ds-footer-space-padding-base)));--_footer-content-padding-top:var(--footer-content-padding-top, var(--mod-footer-content-padding-top, var(--ds-footer-space-content-padding-top)));--_footer-gap-row:var(--footer-gap-row, var(--mod-footer-gap-row, var(--ds-footer-space-gap-row)));--_footer-gap-column:var(--footer-gap-column, var(--mod-footer-gap-column, var(--ds-footer-space-gap-column)));--_footer-language-font-family:var(--footer-language-font-family, var(--mod-footer-language-font-family, var(--ds-footer-typography-language-family)));--_footer-language-font-weight:var(--footer-language-font-weight, var(--mod-footer-language-font-weight, var(--ds-footer-typography-language-weight)));--_footer-language-gap:var(--footer-language-gap, var(--mod-footer-language-gap, var(--ds-footer-space-language-gap)));--_footer-bottom-gap:var(--footer-bottom-gap, var(--mod-footer-bottom-gap, var(--ds-footer-space-bottom-gap)));--_footer-link-gap:var(--footer-link-gap, var(--mod-footer-link-gap, var(--ds-footer-space-link-gap)));--_footer-social-gap:var(--footer-social-gap, var(--mod-footer-social-gap, var(--ds-footer-space-social-gap)));--_footer-font-size:var(--footer-font-size, var(--mod-footer-font-size, var(--ds-footer-typography-font-size)));--_footer-line-height:var(--footer-line-height, var(--mod-footer-line-height, var(--ds-footer-typography-line-height)));--_footer-social-icon-size:var(--footer-social-icon-size, var(--mod-footer-social-icon-size, var(--ds-footer-space-social-icon-size)));--_footer-social-icon-gap:var(--footer-social-icon-gap, var(--mod-footer-social-icon-gap, var(--ds-footer-space-social-icon-gap)));--_footer-slotted-margin-right:var(--footer-slotted-margin-right, var(--mod-footer-slotted-margin-right, var(--ds-footer-space-slotted-margin-right)));margin:var(--_footer-m);margin-inline:var(--_footer-mx);margin-block:var(--_footer-my);margin-left:var(--_footer-ml);margin-right:var(--_footer-mr);margin-top:var(--_footer-mt);margin-bottom:var(--_footer-mb);position:var(--_footer-position);top:var(--_footer-top);right:var(--_footer-right);bottom:var(--_footer-bottom);left:var(--_footer-left);display:block;color:var(--_footer-color);background:var(--_footer-background)}footer{margin:0 auto;padding-block:var(--_footer-padding);padding-inline:var(--ds-alias-container-space-device);width:100%;max-width:var(--ds-alias-container-width-base)}footer.is-fluid{max-width:var(--ds-alias-container-width-fluid)}footer.is-compact{max-width:var(--ds-alias-container-width-compact)}.top-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--_footer-gap-row) var(--_footer-gap-column);-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start}.logo-area{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.logo-link{display:-ms-inline-flexbox;display:inline-flex;color:inherit}.logo-svg{display:-ms-inline-flexbox;display:inline-flex}.language-picker{-ms-flex-align:center;align-items:center;border:0;color:var(--_footer-color);display:-ms-inline-flexbox;display:inline-flex;font-family:var(--_footer-language-font-family);font-weight:var(--_footer-language-font-weight);gap:var(--_footer-language-gap);margin:0 0 0 auto;max-width:100%;width:auto}.language-picker ds-icon{--icon-color:currentColor;-ms-flex-negative:0;flex-shrink:0}.language-picker select{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;background:rgba(0,0,0,0);border:0;border-radius:0;color:inherit;cursor:pointer;-ms-flex:0 0 auto;flex:0 0 auto;font:inherit;line-height:1.3;min-width:auto;padding:0}.language-picker select:hover,.language-picker select:focus-visible{color:var(--_footer-link-color-hover)}.content{padding-top:var(--_footer-content-padding-top)}.bottom-row{display:grid;font-size:var(--_footer-font-size);gap:var(--_footer-bottom-gap);grid-template-columns:1fr;line-height:var(--_footer-line-height)}.legal{margin:0;font-size:var(--_footer-font-size);line-height:var(--_footer-line-height)}.links,.social{min-width:0}.link-list,.social-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--_footer-link-gap);margin:0;padding:0}.social-list{gap:var(--_footer-social-gap)}.link-list li,.social-list li{list-style:none}.links a,::slotted([slot=links]){color:var(--_footer-link-color);text-decoration:none}.links a:hover,::slotted([slot=links]:hover){color:var(--_footer-link-color-hover);text-decoration:underline}.social a,::slotted([slot=social-links]){--icon-color:var(--ds-alias-text-color-white);--icon-size:var(--ds-icon-size-sm);-ms-flex-align:center;align-items:center;color:var(--_footer-link-color);display:-ms-inline-flexbox;display:inline-flex;height:var(--_footer-social-icon-size);-ms-flex-pack:center;justify-content:center;text-decoration:none;width:var(--_footer-social-icon-size)}.social a:hover,::slotted([slot=social-links]:hover){--icon-color:var(--_footer-link-color-hover);color:var(--_footer-link-color-hover)}::slotted([slot=links]),::slotted([slot=social-links]){margin-right:var(--_footer-slotted-margin-right)}@media screen and (min-width: 769px){.bottom-row{-ms-flex-align:start;align-items:start;grid-template-columns:1fr}.social,.links{justify-self:start}}@media screen and (min-width: 1024px){.bottom-row{-ms-flex-align:center;align-items:center;grid-template-columns:1fr auto;grid-template-areas:"legal social" "links links"}.legal{align-self:center;grid-area:legal}.social{align-self:center;grid-area:social;justify-self:end}.links{grid-area:links;justify-self:stretch;width:100%}}`;
 

package/dist/esm/ds-heading.entry.js

@@ -1,13 +1,13 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, d as dsBrowser, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
-import { h as hasValue } from './has-value-DU9L2JaI.js';
-import { c as HEADING_LEVELS, b as HEADING_VISUAL_LEVELS, d as HEADING_SPACES, H as HEADING_COLORS } from './heading.interfaces-Ceu7FIWM.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import './create-validator-decorator-DovxquEu.js';
+import { B as registerInstance, d as dsBrowser, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
+import { c as HEADING_LEVELS, b as HEADING_VISUAL_LEVELS, d as HEADING_SPACES, H as HEADING_COLORS } from './heading.interfaces-BdLq-Ecc.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { T as Type } from './type-Bqge296W.js';
+import './create-validator-decorator-g9TfAa1g.js';
 
 const HEADING_TAG_MAP = {
     'display': 'h1',
@@ -58,29 +58,19 @@ const HEADING_COLOR_MAP = {
     white: 'white',
 };
 
-const headingHostCss = () => `:host{--_heading-position:var(--heading-position, var(--mod-heading-position, static));--_heading-top:var(--heading-top, var(--mod-heading-top));--_heading-right:var(--heading-right, var(--mod-heading-right));--_heading-bottom:var(--heading-bottom, var(--mod-heading-bottom));--_heading-left:var(--heading-left, var(--mod-heading-left));position:var(--_heading-position);top:var(--_heading-top);right:var(--_heading-right);bottom:var(--_heading-bottom);left:var(--_heading-left);--_heading-m:var(--heading-m, var(--mod-heading-m, 0));--_heading-my:var(--heading-my, var(--mod-heading-my));--_heading-mx:var(--heading-mx, var(--mod-heading-mx));--_heading-ml:var(--heading-ml, var(--mod-heading-ml));--_heading-mr:var(--heading-mr, var(--mod-heading-mr));--_heading-mt:var(--heading-mt, var(--mod-heading-mt));--_heading-mb:var(--heading-mb, var(--mod-heading-mb));margin:var(--_heading-m);margin-inline:var(--_heading-mx);margin-block:var(--_heading-my);margin-left:var(--_heading-ml);margin-right:var(--_heading-mr);margin-top:var(--_heading-mt);margin-bottom:var(--_heading-mb);--_heading-color:var(--heading-color, var(--mod-heading-color, inherit));--_heading-family:var(--heading-family, var(--mod-heading-family, var(--ds-heading-family)));--_heading-weight:var(--heading-weight, var(--mod-heading-weight, var(--ds-heading-weight)));--_heading-line-height:var(--heading-line-height, var(--mod-heading-line-height, var(--ds-heading-line-height)));--_heading-font-size:var(--heading-font-size, var(--mod-heading-font-size, var(--ds-heading-1-size-device)));--_heading-space:var(--heading-space, var(--mod-heading-space, var(--ds-heading-1-space)));--_heading-shadow:var(--heading-shadow, var(--mod-heading-shadow, none));--_heading-text-align:var(--heading-text-align, var(--mod-heading-text-align, inherit))}#heading{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;color:var(--_heading-color);font-family:var(--_heading-family);font-weight:var(--_heading-weight);font-size:var(--_heading-font-size);line-height:var(--_heading-line-height);text-align:var(--_heading-text-align);text-shadow:var(--_heading-shadow)}#heading em:not(.text),#heading span:not(.text){font-weight:inherit}#heading b,#heading strong,#heading .is-bold{font-weight:var(--ds-text-weight-bold)}:host(.has-no-wrap) #heading{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host(.has-shadow){--mod-heading-shadow:var(--ds-heading-shadow)}:host(.is-subtitle){--mod-heading-family:var(--ds-heading-subtitle-family);--mod-heading-weight:var(--ds-heading-subtitle-weight);--mod-heading-line-height:var(--ds-heading-subtitle-line-height)}:host(.is-primary){--mod-heading-color:var(--ds-heading-color-primary)}:host(.is-success){--mod-heading-color:var(--ds-heading-color-success)}:host(.is-warning){--mod-heading-color:var(--ds-heading-color-warning)}:host(.is-danger){--mod-heading-color:var(--ds-heading-color-danger)}:host(.is-white){--mod-heading-color:var(--ds-heading-color-white)}:host(.is-black){--mod-heading-color:var(--ds-heading-color-black)}:host(.is-3xl){--mod-heading-font-size:var(--ds-heading-1-size-device);--mod-heading-space:var(--ds-heading-1-space)}:host(.is-2xl){--mod-heading-font-size:var(--ds-heading-2-size-device);--mod-heading-space:var(--ds-heading-2-space)}:host(.is-xl){--mod-heading-font-size:var(--ds-heading-3-size-device);--mod-heading-space:var(--ds-heading-3-space)}:host(.is-lg){--mod-heading-font-size:var(--ds-heading-4-size-device);--mod-heading-space:var(--ds-heading-4-space)}:host(.is-base){--mod-heading-font-size:var(--ds-heading-5-size-device);--mod-heading-space:var(--ds-heading-5-space)}:host(.is-5xl){--mod-heading-font-size:var(--ds-heading-display1-size-device);--mod-heading-space:var(--ds-heading-display1-space)}:host(.is-4xl){--mod-heading-font-size:var(--ds-heading-display2-size-device);--mod-heading-space:var(--ds-heading-display2-space)}:host(.has-space-all){--heading-mt:var(--_heading-space);--heading-mb:var(--_heading-space)}:host(.has-space-top){--heading-mt:var(--_heading-space);--heading-mb:0}:host(.has-space-bottom){--heading-mt:0;--heading-mb:var(--_heading-space)}:host(.has-space-none){--heading-mt:0;--heading-mb:0}:host{display:block}`;
+const headingHostCss = () => `: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;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;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}`;
 
 const Heading = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         /**
          * 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,
@@ -91,14 +81,6 @@ const Heading = class {
          * 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
          */
@@ -122,16 +104,17 @@ const Heading = class {
     }
     /**
      * 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];
@@ -143,8 +126,8 @@ const Heading = class {
         this.autoFontSize = this.fontSize;
     }
     /**
-     * GETTERS
-     * ------------------------------------------------------
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
      */
     get rows() {
         if (this.headingEl && dsBrowser.hasWindow) {
@@ -159,7 +142,8 @@ const Heading = class {
         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];
@@ -169,18 +153,18 @@ const Heading = class {
     }
     /**
      * 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' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ds-hint-text.entry.js

@@ -1,8 +1,8 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { B as registerInstance, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 
 const HintText = class {
     constructor(hostRef) {

package/dist/esm/ds-hint-title.entry.js

@@ -1,8 +1,8 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { B as registerInstance, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 
 const HintTitle = class {
     constructor(hostRef) {

package/dist/esm/ds-hint.entry.js

@@ -1,19 +1,19 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, v as defaultConfig, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { B as registerInstance, v as defaultConfig, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 import { i as isEscapeKey } from './keyboard-Uy_dVz21.js';
 import { P as POPUP_PLACEMENTS } from './popup.interfaces-BAY6Z8bT.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-DZ0xN4Np.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import { L as ListenToConfig } from './config.decorator-ZQ0_Zx5y.js';
-import './breakpoints.subject-BNnXcKMw.js';
-import './listener-DHP2OPMZ.js';
-import './device-CRuIJzXR.js';
-import './create-validator-decorator-DovxquEu.js';
-import './config.utils-D9o7rffC.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-CIweMjJQ.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { T as Type } from './type-Bqge296W.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
+import './breakpoints.subject-CUVOWezN.js';
+import './listener-DiVrGAqj.js';
+import './device-CtidwsPr.js';
+import './create-validator-decorator-g9TfAa1g.js';
+import './config.utils-Db2OSTX3.js';
 
 const i18nDsHint = {
     de: {

package/dist/esm/ds-icon_2.entry.js

@@ -1,18 +1,19 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, v as defaultConfig, E as h, F as Host, G as getElement, D as raf, L as rOnLoad } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { B as registerInstance, v as defaultConfig, E as h, F as Host, G as getElement, D as raf, L as rOnLoad } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-Duhf3ymL.js';
-import { d as require_baseGetTag, c as requireIsObjectLike, a as require_Symbol, b as requireIsArray } from './isObjectLike-BAYao9w7.js';
-import { h as hasValue } from './has-value-DU9L2JaI.js';
-import { f as fetchSvg, s as sanitizeSvg } from './svg-B8KVoKrH.js';
+import { c as require_baseGetTag, b as requireIsObjectLike, a as require_Symbol } from './isObjectLike-BnBXjF_n.js';
+import { r as requireIsArray } from './isArray-B8PCdo6e.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
+import { f as fetchSvg, s as sanitizeSvg } from './svg-D-_px2sY.js';
 import { n as normalizeDeprecatedTShirtSize } from './t-shirt-DR5LIaCn.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import { L as ListenToConfig } from './config.decorator-ZQ0_Zx5y.js';
-import './create-validator-decorator-DovxquEu.js';
-import './config.utils-D9o7rffC.js';
+import { T as Type } from './type-Bqge296W.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
+import './create-validator-decorator-g9TfAa1g.js';
+import './config.utils-Db2OSTX3.js';
 
 /**
  * A specialized version of `_.map` for arrays without support for iteratee
@@ -1183,7 +1184,7 @@ Icon.style = iconHostCss();
 
 const SPINNER_COLORS = ['blue', 'white'];
 const SPINNER_VARIATIONS = ['logo', 'circle'];
-const SPINNER_SIZES = ['sm', ''];
+const SPINNER_SIZES = ['sm'];
 const SPINNER_LABEL_POSITIONS = ['right', 'bottom'];
 
 const i18nDsSpinner = {
@@ -1219,7 +1220,7 @@ const i18nDsSpinner = {
     },
 };
 
-const spinnerHostCss = () => `:host{--_spinner-position:var(--spinner-position, var(--mod-spinner-position, static));--_spinner-top:var(--spinner-top, var(--mod-spinner-top));--_spinner-right:var(--spinner-right, var(--mod-spinner-right));--_spinner-bottom:var(--spinner-bottom, var(--mod-spinner-bottom));--_spinner-left:var(--spinner-left, var(--mod-spinner-left));position:var(--_spinner-position);top:var(--_spinner-top);right:var(--_spinner-right);bottom:var(--_spinner-bottom);left:var(--_spinner-left);--_spinner-m:var(--spinner-m, var(--mod-spinner-m, 0));--_spinner-my:var(--spinner-my, var(--mod-spinner-my));--_spinner-mx:var(--spinner-mx, var(--mod-spinner-mx));--_spinner-ml:var(--spinner-ml, var(--mod-spinner-ml));--_spinner-mr:var(--spinner-mr, var(--mod-spinner-mr));--_spinner-mt:var(--spinner-mt, var(--mod-spinner-mt));--_spinner-mb:var(--spinner-mb, var(--mod-spinner-mb));margin:var(--_spinner-m);margin-inline:var(--_spinner-mx);margin-block:var(--_spinner-my);margin-left:var(--_spinner-ml);margin-right:var(--_spinner-mr);margin-top:var(--_spinner-mt);margin-bottom:var(--_spinner-mb);--_spinner-size:var(--spinner-size, var(--mod-spinner-size, var(--ds-spinner-size)));--_spinner-circle-size:var(--spinner-circle-size, var(--mod-spinner-circle-size, var(--ds-spinner-circle-size)));--_spinner-circle-border-width:var(--spinner-circle-border-width, var(--mod-spinner-circle-border-width, var(--ds-spinner-circle-border-width)));--_spinner-circle-color-border-background:var(--spinner-circle-color-border-background, var(--mod-spinner-circle-color-border-background, var(--ds-spinner-circle-color-background)));--_spinner-circle-color-border-progress:var(--spinner-circle-color-border-progress, var(--mod-spinner-circle-color-border-progress, var(--ds-spinner-circle-color-progress)))}:host{-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}:host,:host>div{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;text-align:center}:host svg{-webkit-transform:unset !important;transform:unset !important}:host(:not(.is-circle))>div{width:var(--_spinner-size)}:host(.is-circle) #inner{border-radius:50%;border-style:solid;border-width:var(--_spinner-circle-border-width);border-color:var(--_spinner-circle-color-border-background);border-top-color:var(--_spinner-circle-color-border-progress);width:var(--_spinner-circle-size);height:var(--_spinner-circle-size)}:host(.is-animated) #inner{-webkit-animation:spinner 1.6s linear infinite;animation:spinner 1.6s linear infinite}:host(.is-sm){--mod-spinner-size:2rem;--mod-spinner-circle-size:1.125rem;--mod-spinner-circle-border-width:0.2rem}:host(.is-white){--mod-spinner-circle-color-border-background:var(--ds-spinner-circle-color-inverted-background);--mod-spinner-circle-color-border-progress:var(--ds-spinner-circle-color-progress-inverted)}:host(.is-label-right){-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:.5rem;width:auto}:host(.is-label-bottom){-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;gap:.25rem;width:auto}::part(label){font-family:var(--ds-global-font-family-text);line-height:var(--ds-typography-line-height-base)}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;
+const spinnerHostCss = () => `:host{--_spinner-position:var(--spinner-position, var(--mod-spinner-position, static));--_spinner-top:var(--spinner-top, var(--mod-spinner-top));--_spinner-right:var(--spinner-right, var(--mod-spinner-right));--_spinner-bottom:var(--spinner-bottom, var(--mod-spinner-bottom));--_spinner-left:var(--spinner-left, var(--mod-spinner-left));position:var(--_spinner-position);top:var(--_spinner-top);right:var(--_spinner-right);bottom:var(--_spinner-bottom);left:var(--_spinner-left);--_spinner-m:var(--spinner-m, var(--mod-spinner-m, 0));--_spinner-my:var(--spinner-my, var(--mod-spinner-my));--_spinner-mx:var(--spinner-mx, var(--mod-spinner-mx));--_spinner-ml:var(--spinner-ml, var(--mod-spinner-ml));--_spinner-mr:var(--spinner-mr, var(--mod-spinner-mr));--_spinner-mt:var(--spinner-mt, var(--mod-spinner-mt));--_spinner-mb:var(--spinner-mb, var(--mod-spinner-mb));margin:var(--_spinner-m);margin-inline:var(--_spinner-mx);margin-block:var(--_spinner-my);margin-left:var(--_spinner-ml);margin-right:var(--_spinner-mr);margin-top:var(--_spinner-mt);margin-bottom:var(--_spinner-mb);--_spinner-size:var(--spinner-size, var(--mod-spinner-size, var(--ds-spinner-size)));--_spinner-circle-size:var(--spinner-circle-size, var(--mod-spinner-circle-size, var(--ds-spinner-circle-size)));--_spinner-circle-border-width:var(--spinner-circle-border-width, var(--mod-spinner-circle-border-width, var(--ds-spinner-circle-border-width)));--_spinner-circle-color-border-background:var(--spinner-circle-color-border-background, var(--mod-spinner-circle-color-border-background, var(--ds-spinner-circle-color-background)));--_spinner-circle-color-border-progress:var(--spinner-circle-color-border-progress, var(--mod-spinner-circle-color-border-progress, var(--ds-spinner-circle-color-progress)))}:host{-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}:host,:host>div{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;text-align:center}:host svg{-webkit-transform:unset !important;transform:unset !important}:host(:not(.is-circle))>div{width:var(--_spinner-size)}:host(.is-circle) #inner{border-radius:50%;border-style:solid;border-width:var(--_spinner-circle-border-width);border-color:var(--_spinner-circle-color-border-background);border-top-color:var(--_spinner-circle-color-border-progress);width:var(--_spinner-circle-size);height:var(--_spinner-circle-size)}:host(.is-animated) #inner{-webkit-animation:spinner 1.6s linear infinite;animation:spinner 1.6s linear infinite}:host(.is-sm){--mod-spinner-size:2rem;--mod-spinner-circle-size:1.125rem;--mod-spinner-circle-border-width:0.2rem}:host(.is-white){--mod-spinner-circle-color-border-background:var(--ds-spinner-inverted-circle-color-background);--mod-spinner-circle-color-border-progress:var(--ds-spinner-inverted-circle-color-progress)}:host(.is-label-right){-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:.5rem;width:auto}:host(.is-label-bottom){-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;gap:.25rem;width:auto}::part(label){font-family:var(--ds-global-font-family-text);line-height:var(--ds-typography-line-height-base)}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;
 
 const Spinner = class {
     constructor(hostRef) {
@@ -1229,7 +1230,7 @@ const Spinner = class {
         this.region = defaultConfig.region;
         /**
          * PUBLIC PROPERTY API
-         * ------------------------------------------------------
+         * ─────────────────────────────────────────────────────
          */
         /**
          * **Deprecated:** Use inverted="true" for white spinner instead.
@@ -1243,10 +1244,6 @@ const Spinner = class {
          * If `true` the component can be used on dark background
          */
         this.inverted = false;
-        /**
-         * Defines the size of the spinner. If `sm` the spinner is smaller.
-         */
-        this.size = '';
         /**
          * **Deprecated:** Use size="sm" instead.
          */
@@ -1265,7 +1262,7 @@ const Spinner = class {
         this.variation = 'logo';
         /**
          * PRIVATE METHODS
-         * ------------------------------------------------------
+         * ─────────────────────────────────────────────────────
          */
         this.animate = async () => {
             if (!this.animated) {
@@ -1346,7 +1343,7 @@ const Spinner = class {
     }
     /**
      * LIFECYCLE
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     componentDidLoad() {
         if (this.variation === 'logo') {
@@ -1362,8 +1359,8 @@ const Spinner = class {
         }
     }
     /**
-     * PUBLIC LISTENERS
-     * ------------------------------------------------------
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
      */
     /**
      * @internal define config for the component
@@ -1392,7 +1389,7 @@ const Spinner = class {
     }
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render() {
         const ariaLabel = this.label || i18nDsSpinner[this.language].loading;
@@ -1400,14 +1397,14 @@ const Spinner = class {
         if (this.small === true) {
             size = 'sm';
         }
-        return (h(Host, { key: '86264d495d7ae16626bdf476d81c16dd87e0e12a', role: "progressbar", "aria-label": ariaLabel, class: {
+        return (h(Host, { key: 'c11982bbe6a51010b4cefd97da2636ce308eddcf', role: "progressbar", "aria-label": ariaLabel, class: {
                 'is-animated': this.animated,
                 'is-circle': this.variation === 'circle',
                 'is-sm': size === 'sm',
                 'is-white': this.color === 'white',
                 'is-label-right': hasValue(this.label) && this.labelPosition === 'right',
                 'is-label-bottom': hasValue(this.label) && this.labelPosition === 'bottom',
-            } }, h("div", { key: '2ef9e800128c98ce79f83b49e4c43cbc21f749e9' }, h("div", { key: 'c9086777b5ac64cb59d2df42aa198a6e193aec80', id: "inner", part: "inner", ref: el => (this.innerEl = el) })), hasValue(this.label) && h("span", { key: 'e8c5d1b0c1bb6cfab6e4fe0caae96684fa0af889', part: "label" }, this.label)));
+            } }, h("div", { key: 'ee9d575d084dd4232309bb2e0dcf9e7b404b8e63' }, h("div", { key: 'f65ca901cb36d8503fdd55ab6f2d920bc2a0368d', id: "inner", part: "inner", ref: el => (this.innerEl = el) })), hasValue(this.label) && h("span", { key: '63e189e67f42307211fcf4300f8ba854f2cbe41c', part: "label" }, this.label)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {