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

package/dist/cjs/ds-notification.cjs.entry.js

@@ -12,9 +12,8 @@ var type = require('./type-BcP2cAG-.js');
 var oneOf = require('./one-of-xdIxH9e7.js');
 require('./create-validator-decorator-CiRieHJL.js');
 
-const NOTIFICATION_SIZES = ['sm', 'md', 'lg', '', 'small', 'medium', 'large'];
+const NOTIFICATION_SIZES = ['sm', 'md', 'lg', 'small', 'medium', 'large'];
 const NOTIFICATION_COLORS = [
-    '',
     'base',
     'info',
     'success',
@@ -27,7 +26,7 @@ const NOTIFICATION_COLORS = [
     'outline-red',
 ];
 
-const notificationHostCss = () => `:host{--_notification-position:var(--notification-position, var(--mod-notification-position, static));--_notification-top:var(--notification-top, var(--mod-notification-top));--_notification-right:var(--notification-right, var(--mod-notification-right));--_notification-bottom:var(--notification-bottom, var(--mod-notification-bottom));--_notification-left:var(--notification-left, var(--mod-notification-left));position:var(--_notification-position);top:var(--_notification-top);right:var(--_notification-right);bottom:var(--_notification-bottom);left:var(--_notification-left);--_notification-m:var(--notification-m, var(--mod-notification-m, 0));--_notification-my:var(--notification-my, var(--mod-notification-my));--_notification-mx:var(--notification-mx, var(--mod-notification-mx));--_notification-ml:var(--notification-ml, var(--mod-notification-ml));--_notification-mr:var(--notification-mr, var(--mod-notification-mr));--_notification-mt:var(--notification-mt, var(--mod-notification-mt));--_notification-mb:var(--notification-mb, var(--mod-notification-mb));margin:var(--_notification-m);margin-inline:var(--_notification-mx);margin-block:var(--_notification-my);margin-left:var(--_notification-ml);margin-right:var(--_notification-mr);margin-top:var(--_notification-mt);margin-bottom:var(--_notification-mb);--_notification-radius:var(--notification-radius, var(--mod-notification-radius, var(--ds-notification-radius)));--_notification-color-background:var(--notification-color-background, var(--mod-notification-color-background, var(--ds-notification-color-base-background)));--_notification-color-border:var(--notification-color-border, var(--mod-notification-color-border, var(--ds-notification-color-base-border)));--_notification-color-text:var(--notification-color-text, var(--mod-notification-color-text, var(--ds-notification-color-base-text)));--_notification-heading-family:var(--notification-heading-family, var(--mod-notification-heading-family, var(--ds-alias-text-family-heading)));--_notification-heading-weight:var(--notification-heading-weight, var(--mod-notification-heading-weight, var(--ds-alias-text-weight-bold)));--_notification-heading-size:var(--notification-heading-size, var(--mod-notification-heading-size, var(--ds-alias-text-size-lg-device)));--_notification-heading-line-height:var(--notification-heading-line-height, var(--mod-notification-heading-line-height, var(--ds-alias-text-line-height-heading)));--_notification-content-family:var(--notification-content-family, var(--mod-notification-content-family, var(--ds-alias-text-family-body)));--_notification-content-weight:var(--notification-content-weight, var(--mod-notification-content-weight, inherit));--_notification-content-size:var(--notification-content-size, var(--mod-notification-content-size, var(--ds-alias-text-size-base-device)));--_notification-content-line-height:var(--notification-content-line-height, var(--mod-notification-content-line-height, var(--ds-alias-text-line-height-body)));--_notification-icon:var(--notification-icon, var(--mod-notification-icon, var(--ds-notification-color-base-icon)));--_notification-icon-display:var(--notification-icon-display, var(--mod-notification-icon-display, block));--_notification-space:var(--notification-space, var(--mod-notification-space, var(--ds-card-space-base-device, 1.5rem)));--_notification-icon-space:var(--notification-icon-space, var(--mod-notification-icon-space, 1.5rem));--_notification-close-offset:var(--notification-close-offset, var(--mod-notification-close-offset, 2rem));--_notification-gap:var(--notification-gap, var(--mod-notification-gap, 0.125rem));--_notification-close-position:var(--notification-close-position, var(--mod-notification-close-position, absolute));--_notification-close-right:var(--notification-close-right, var(--mod-notification-close-right, var(--_notification-space)));--_notification-close-top:var(--notification-close-top, var(--mod-notification-close-top, var(--_notification-space)));--_notification-animation-start-opacity:var(--notification-animation-start-opacity, var(--mod-notification-animation-start-opacity, 1));--_notification-animation-start-transform:var(--notification-animation-start-transform, var(--mod-notification-animation-start-transform, none));--_notification-animation-transition:var(--notification-animation-transition, var(--mod-notification-animation-transition, none));--_notification-animation-end-opacity:var(--notification-animation-end-opacity, var(--mod-notification-animation-end-opacity, 1));--_notification-animation-end-transform:var(--notification-animation-end-transform, var(--mod-notification-animation-end-transform, none))}#notification{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-ms-flex:1;flex:1;position:relative;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;border:var(--ds-alias-border-width-base) solid var(--_notification-color-border);border-radius:var(--_notification-radius);background:var(--_notification-color-background);color:var(--_notification-color-text);padding-top:var(--_notification-space);padding-right:var(--_notification-space);padding-bottom:var(--_notification-space);padding-left:calc(var(--_notification-space) + var(--_notification-icon-space));display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--_notification-gap)}#notification ds-close,#notification .close{position:var(--_notification-close-position);top:var(--_notification-close-top);right:var(--_notification-close-right)}#notification>h2{font-family:var(--_notification-heading-family);font-weight:var(--_notification-heading-weight);line-height:var(--_notification-heading-line-height);font-size:var(--_notification-heading-size);margin:0 !important}#notification:has(.close)>h2::before,#notification:has(ds-close)>h2::before{content:"";float:right;width:24px;height:calc(var(--_notification-heading-line-height)*16px)}#notification>span,#notification>p{font-family:var(--_notification-content-family);font-size:var(--_notification-content-size);font-weight:var(--_notification-content-weight);line-height:var(--_notification-content-line-height);margin:0 !important}#notification::before{display:var(--_notification-icon-display);background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;position:absolute;height:1.5rem;width:1.5rem;left:-0.25rem;top:calc((var(--_notification-space)));-webkit-transform:translateX(var(--_notification-space));transform:translateX(var(--_notification-space));content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;mask-image:var(--_notification-icon);-webkit-mask-image:var(--_notification-icon)}:host(.has-no-icon){--mod-notification-icon-display:none;--mod-notification-icon-space:0rem}:host(.is-info){--mod-notification-color-text:var(--ds-notification-color-info-text);--mod-notification-color-border:var(--ds-notification-color-info-border);--mod-notification-color-background:var(--ds-notification-color-info-background);--mod-notification-icon:var(--ds-notification-color-info-icon)}:host(.is-success){--mod-notification-color-text:var(--ds-notification-color-success-text);--mod-notification-color-border:var(--ds-notification-color-success-border);--mod-notification-color-background:var(--ds-notification-color-success-background);--mod-notification-icon:var(--ds-notification-color-success-icon)}:host(.is-warning){--mod-notification-color-text:var(--ds-notification-color-warning-text);--mod-notification-color-border:var(--ds-notification-color-warning-border);--mod-notification-color-background:var(--ds-notification-color-warning-background);--mod-notification-icon:var(--ds-notification-color-warning-icon)}:host(.is-danger){--mod-notification-color-text:var(--ds-notification-color-danger-text);--mod-notification-color-border:var(--ds-notification-color-danger-border);--mod-notification-color-background:var(--ds-notification-color-danger-background);--mod-notification-icon:var(--ds-notification-color-danger-icon)}:host(.is-outline-base){--mod-notification-color-text:var(--ds-notification-color-outline-base-text);--mod-notification-color-border:var(--ds-notification-color-outline-base-border);--mod-notification-color-background:var(--ds-notification-color-outline-base-background);--mod-notification-icon:var(--ds-notification-color-outline-base-icon)}:host(.is-outline-purple){--mod-notification-color-text:var(--ds-notification-color-outline-purple-text);--mod-notification-color-border:var(--ds-notification-color-outline-purple-border);--mod-notification-color-background:var(--ds-notification-color-outline-purple-background);--mod-notification-icon:var(--ds-notification-color-outline-purple-icon)}:host(.is-outline-green){--mod-notification-color-text:var(--ds-notification-color-outline-green-text);--mod-notification-color-border:var(--ds-notification-color-outline-green-border);--mod-notification-color-background:var(--ds-notification-color-outline-green-background);--mod-notification-icon:var(--ds-notification-color-outline-green-icon)}:host(.is-outline-yellow){--mod-notification-color-text:var(--ds-notification-color-outline-yellow-text);--mod-notification-color-border:var(--ds-notification-color-outline-yellow-border);--mod-notification-color-background:var(--ds-notification-color-outline-yellow-background);--mod-notification-icon:var(--ds-notification-color-outline-yellow-icon)}:host(.is-outline-red){--mod-notification-color-text:var(--ds-notification-color-outline-red-text);--mod-notification-color-border:var(--ds-notification-color-outline-red-border);--mod-notification-color-background:var(--ds-notification-color-outline-red-background);--mod-notification-icon:var(--ds-notification-color-outline-red-icon)}:host(.is-sm){--mod-notification-space:var(--ds-card-space-sm-device)}:host(.is-md){--mod-notification-space:var(--ds-card-space-md-device)}:host(.is-lg){--mod-notification-space:var(--ds-card-space-lg-device)}:host{display:block}`;
+const notificationHostCss = () => `:host{--_notification-position:var(--notification-position, var(--mod-notification-position, static));--_notification-top:var(--notification-top, var(--mod-notification-top));--_notification-right:var(--notification-right, var(--mod-notification-right));--_notification-bottom:var(--notification-bottom, var(--mod-notification-bottom));--_notification-left:var(--notification-left, var(--mod-notification-left));position:var(--_notification-position);top:var(--_notification-top);right:var(--_notification-right);bottom:var(--_notification-bottom);left:var(--_notification-left);--_notification-m:var(--notification-m, var(--mod-notification-m, 0));--_notification-my:var(--notification-my, var(--mod-notification-my));--_notification-mx:var(--notification-mx, var(--mod-notification-mx));--_notification-ml:var(--notification-ml, var(--mod-notification-ml));--_notification-mr:var(--notification-mr, var(--mod-notification-mr));--_notification-mt:var(--notification-mt, var(--mod-notification-mt));--_notification-mb:var(--notification-mb, var(--mod-notification-mb));margin:var(--_notification-m);margin-inline:var(--_notification-mx);margin-block:var(--_notification-my);margin-left:var(--_notification-ml);margin-right:var(--_notification-mr);margin-top:var(--_notification-mt);margin-bottom:var(--_notification-mb);--_notification-radius:var(--notification-radius, var(--mod-notification-radius, var(--ds-notification-radius)));--_notification-color-background:var(--notification-color-background, var(--mod-notification-color-background, var(--ds-notification-base-color-background)));--_notification-color-border:var(--notification-color-border, var(--mod-notification-color-border, var(--ds-notification-base-color-border)));--_notification-color-text:var(--notification-color-text, var(--mod-notification-color-text, var(--ds-notification-base-color-text)));--_notification-heading-family:var(--notification-heading-family, var(--mod-notification-heading-family, var(--ds-alias-text-family-heading)));--_notification-heading-weight:var(--notification-heading-weight, var(--mod-notification-heading-weight, var(--ds-alias-text-weight-bold)));--_notification-heading-size:var(--notification-heading-size, var(--mod-notification-heading-size, var(--ds-alias-text-size-lg-device)));--_notification-heading-line-height:var(--notification-heading-line-height, var(--mod-notification-heading-line-height, var(--ds-alias-text-line-height-heading)));--_notification-content-family:var(--notification-content-family, var(--mod-notification-content-family, var(--ds-alias-text-family-body)));--_notification-content-weight:var(--notification-content-weight, var(--mod-notification-content-weight, inherit));--_notification-content-size:var(--notification-content-size, var(--mod-notification-content-size, var(--ds-alias-text-size-base-device)));--_notification-content-line-height:var(--notification-content-line-height, var(--mod-notification-content-line-height, var(--ds-alias-text-line-height-body)));--_notification-icon:var(--notification-icon, var(--mod-notification-icon, var(--ds-notification-base-color-icon)));--_notification-icon-display:var(--notification-icon-display, var(--mod-notification-icon-display, block));--_notification-space:var(--notification-space, var(--mod-notification-space, var(--ds-card-space-base-device, 1.5rem)));--_notification-icon-space:var(--notification-icon-space, var(--mod-notification-icon-space, 1.5rem));--_notification-close-offset:var(--notification-close-offset, var(--mod-notification-close-offset, 2rem));--_notification-gap:var(--notification-gap, var(--mod-notification-gap, 0.125rem));--_notification-close-position:var(--notification-close-position, var(--mod-notification-close-position, absolute));--_notification-close-right:var(--notification-close-right, var(--mod-notification-close-right, var(--_notification-space)));--_notification-close-top:var(--notification-close-top, var(--mod-notification-close-top, var(--_notification-space)));--_notification-animation-start-opacity:var(--notification-animation-start-opacity, var(--mod-notification-animation-start-opacity, 1));--_notification-animation-start-transform:var(--notification-animation-start-transform, var(--mod-notification-animation-start-transform, none));--_notification-animation-transition:var(--notification-animation-transition, var(--mod-notification-animation-transition, none));--_notification-animation-end-opacity:var(--notification-animation-end-opacity, var(--mod-notification-animation-end-opacity, 1));--_notification-animation-end-transform:var(--notification-animation-end-transform, var(--mod-notification-animation-end-transform, none))}#notification{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-ms-flex:1;flex:1;position:relative;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;border:var(--ds-alias-border-width-base) solid var(--_notification-color-border);border-radius:var(--_notification-radius);background:var(--_notification-color-background);color:var(--_notification-color-text);padding-top:var(--_notification-space);padding-right:var(--_notification-space);padding-bottom:var(--_notification-space);padding-left:calc(var(--_notification-space) + var(--_notification-icon-space));display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--_notification-gap)}#notification ds-close,#notification .close{position:var(--_notification-close-position);top:var(--_notification-close-top);right:var(--_notification-close-right)}#notification>h2{font-family:var(--_notification-heading-family);font-weight:var(--_notification-heading-weight);line-height:var(--_notification-heading-line-height);font-size:var(--_notification-heading-size);margin:0 !important}#notification:has(.close)>h2::before,#notification:has(ds-close)>h2::before{content:"";float:right;width:24px;height:calc(var(--_notification-heading-line-height)*16px)}#notification>span,#notification>p{font-family:var(--_notification-content-family);font-size:var(--_notification-content-size);font-weight:var(--_notification-content-weight);line-height:var(--_notification-content-line-height);margin:0 !important}#notification::before{display:var(--_notification-icon-display);background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;position:absolute;height:1.5rem;width:1.5rem;left:-0.25rem;top:calc((var(--_notification-space)));-webkit-transform:translateX(var(--_notification-space));transform:translateX(var(--_notification-space));content:"";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;mask-image:var(--_notification-icon);-webkit-mask-image:var(--_notification-icon)}:host(.has-no-icon){--mod-notification-icon-display:none;--mod-notification-icon-space:0rem}:host(.is-info){--mod-notification-color-text:var(--ds-notification-info-color-text);--mod-notification-color-border:var(--ds-notification-info-color-border);--mod-notification-color-background:var(--ds-notification-info-color-background);--mod-notification-icon:var(--ds-notification-info-color-icon)}:host(.is-success){--mod-notification-color-text:var(--ds-notification-success-color-text);--mod-notification-color-border:var(--ds-notification-success-color-border);--mod-notification-color-background:var(--ds-notification-success-color-background);--mod-notification-icon:var(--ds-notification-success-color-icon)}:host(.is-warning){--mod-notification-color-text:var(--ds-notification-warning-color-text);--mod-notification-color-border:var(--ds-notification-warning-color-border);--mod-notification-color-background:var(--ds-notification-warning-color-background);--mod-notification-icon:var(--ds-notification-warning-color-icon)}:host(.is-danger){--mod-notification-color-text:var(--ds-notification-danger-color-text);--mod-notification-color-border:var(--ds-notification-danger-color-border);--mod-notification-color-background:var(--ds-notification-danger-color-background);--mod-notification-icon:var(--ds-notification-danger-color-icon)}:host(.is-outline-base){--mod-notification-color-text:var(--ds-notification-outline-base-color-text);--mod-notification-color-border:var(--ds-notification-outline-base-color-border);--mod-notification-color-background:var(--ds-notification-outline-base-color-background);--mod-notification-icon:var(--ds-notification-outline-base-color-icon)}:host(.is-outline-purple){--mod-notification-color-text:var(--ds-notification-outline-purple-color-text);--mod-notification-color-border:var(--ds-notification-outline-purple-color-border);--mod-notification-color-background:var(--ds-notification-outline-purple-color-background);--mod-notification-icon:var(--ds-notification-outline-purple-color-icon)}:host(.is-outline-green){--mod-notification-color-text:var(--ds-notification-outline-green-color-text);--mod-notification-color-border:var(--ds-notification-outline-green-color-border);--mod-notification-color-background:var(--ds-notification-outline-green-color-background);--mod-notification-icon:var(--ds-notification-outline-green-color-icon)}:host(.is-outline-yellow){--mod-notification-color-text:var(--ds-notification-outline-yellow-color-text);--mod-notification-color-border:var(--ds-notification-outline-yellow-color-border);--mod-notification-color-background:var(--ds-notification-outline-yellow-color-background);--mod-notification-icon:var(--ds-notification-outline-yellow-color-icon)}:host(.is-outline-red){--mod-notification-color-text:var(--ds-notification-outline-red-color-text);--mod-notification-color-border:var(--ds-notification-outline-red-color-border);--mod-notification-color-background:var(--ds-notification-outline-red-color-background);--mod-notification-icon:var(--ds-notification-outline-red-color-icon)}:host(.is-sm){--mod-notification-space:var(--ds-card-space-sm-device)}:host(.is-md){--mod-notification-space:var(--ds-card-space-md-device)}:host(.is-lg){--mod-notification-space:var(--ds-card-space-lg-device)}:host{display:block}`;
 
 const Notification = class {
     constructor(hostRef) {
@@ -37,7 +36,7 @@ const Notification = class {
         this.didLoad = false;
         /**
          * PUBLIC PROPERTY API
-         * ------------------------------------------------------
+         * ─────────────────────────────────────────────────────
          */
         /**
          * If `true` the notification will be displayed as an alert, otherwise as a status message.
@@ -51,11 +50,6 @@ const Notification = class {
          * @internal Handler for on close event
          */
         this.closeHandler = () => void 0;
-        /**
-         * Defines the color of the element
-         * Color type primary is deprecated, please use info instead.
-         */
-        this.color = '';
         /**
          * Defines the heading of the notification.
          */
@@ -70,7 +64,7 @@ const Notification = class {
     }
     /**
      * LIFECYCLE
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     componentDidLoad() {
         this.didLoad = true;
@@ -78,7 +72,7 @@ const Notification = class {
     }
     /**
      * PUBLIC METHODS
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     /**
      * Closes this notification
@@ -89,21 +83,21 @@ const Notification = class {
     }
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render() {
         const size = tShirt.normalizeDeprecatedTShirtSize(this.size) || '';
         const a11yAttributes = this.alert
             ? { 'role': 'alert', 'aria-live': 'assertive', 'aria-atomic': 'true' }
             : { 'role': 'status', 'aria-live': 'polite', 'aria-atomic': 'true' };
-        return (index.h(index.Host, Object.assign({ key: 'f3e829a86b22c64fe93b06b2664b398a7248d49f' }, a11yAttributes, { class: {
+        return (index.h(index.Host, Object.assign({ key: 'c3dfeb924f2eff0258b2e3e8d191066e606c1717' }, a11yAttributes, { class: {
                 'has-no-icon': this.noIcon,
                 [`is-${this.color}`]: hasValue.hasValue(this.color),
                 [`is-${size}`]: hasValue.hasValue(this.size),
-            } }), index.h("section", { key: 'f8ff4cdc8379ec73ac00a6654478a0039dd746f1', id: "notification", part: "section" }, this.closable && (index.h("ds-close", { key: 'f72f440db26de1ef40ca24ec9c9f06015ce31126', part: "close", onClick: ev => {
+            } }), index.h("section", { key: 'bb25cab8e27de885d570db0a6255f8dbab2d94fe', id: "notification", part: "section" }, this.closable && (index.h("ds-close", { key: '2c3468c64ca1b011d63815e65f466b308d3bb624', part: "close", onClick: ev => {
                 formControl.stopEventBubbling(ev);
                 this.close();
-            } })), hasValue.hasValue(this.heading) && index.h("h2", { key: 'adae5186e4009153c2d93645bdf8ab49e4da9df7', part: "heading" }, this.heading), index.h("span", { key: '979fc05e46a6c9220826efeac704f87f23f9ce49' }, index.h("slot", { key: '88929c8c561498c89755da6bd6d36819a7e6d390' })))));
+            } })), hasValue.hasValue(this.heading) && index.h("h2", { key: '69c9eccaf9154cfd398564d1a915dab0afbc1033', part: "heading" }, this.heading), index.h("span", { key: 'f8f3a07f74a2ae6a4ac1b4ff026f8a794b236c5d' }, index.h("slot", { key: '05feb23000c982c3d90778b1eae1180b5ebd1add' })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ds-snackbar.cjs.entry.js

@@ -19,7 +19,7 @@ require('./device-DM1GXL99.js');
 
 const SNACKBAR_COLORS = ['base', 'info', 'success', 'warning', 'danger'];
 
-const snackbarHostCss = () => `:host{--_snackbar-position:var(--snackbar-position, var(--mod-snackbar-position, static));--_snackbar-top:var(--snackbar-top, var(--mod-snackbar-top));--_snackbar-right:var(--snackbar-right, var(--mod-snackbar-right));--_snackbar-bottom:var(--snackbar-bottom, var(--mod-snackbar-bottom));--_snackbar-left:var(--snackbar-left, var(--mod-snackbar-left));position:var(--_snackbar-position);top:var(--_snackbar-top);right:var(--_snackbar-right);bottom:var(--_snackbar-bottom);left:var(--_snackbar-left);--_snackbar-m:var(--snackbar-m, var(--mod-snackbar-m, 0));--_snackbar-my:var(--snackbar-my, var(--mod-snackbar-my));--_snackbar-mx:var(--snackbar-mx, var(--mod-snackbar-mx));--_snackbar-ml:var(--snackbar-ml, var(--mod-snackbar-ml));--_snackbar-mr:var(--snackbar-mr, var(--mod-snackbar-mr));--_snackbar-mt:var(--snackbar-mt, var(--mod-snackbar-mt));--_snackbar-mb:var(--snackbar-mb, var(--mod-snackbar-mb));margin:var(--_snackbar-m);margin-inline:var(--_snackbar-mx);margin-block:var(--_snackbar-my);margin-left:var(--_snackbar-ml);margin-right:var(--_snackbar-mr);margin-top:var(--_snackbar-mt);margin-bottom:var(--_snackbar-mb);--_snackbar-shadow:var(--snackbar-shadow, var(--mod-snackbar-shadow, var(--ds-alias-shadow-box-base)));--_snackbar-radius:var(--snackbar-radius, var(--mod-snackbar-radius, var(--ds-snackbar-radius)));--_snackbar-bg:var(--snackbar-bg, var(--mod-snackbar-bg, var(--ds-snackbar-primary-color-bg-base)));--_snackbar-color:var(--snackbar-color, var(--mod-snackbar-color, var(--ds-snackbar-primary-color-text-base)));--_snackbar-icon-color:var(--snackbar-icon-color, var(--mod-snackbar-icon-color, var(--ds-snackbar-primary-color-icon-base)));--_snackbar-progress-duration:var(--snackbar-progress-duration, var(--mod-snackbar-progress-duration, 0));--_snackbar-progress-bar-bg:var(--snackbar-progress-bar-bg, var(--mod-snackbar-progress-bar-bg, var(--ds-snackbar-primary-color-progress-bar-base)));--_snackbar-progress-bg:var(--snackbar-progress-bg, var(--mod-snackbar-progress-bg, var(--ds-snackbar-primary-color-progress-bg-base)));--_snackbar-heading-font-family:var(--snackbar-heading-font-family, var(--mod-snackbar-heading-font-family, var(--ds-alias-text-family-heading)));--_snackbar-heading-font-weight:var(--snackbar-heading-font-weight, var(--mod-snackbar-heading-font-weight, var(--ds-alias-text-weight-bold)));--_snackbar-heading-font-size:var(--snackbar-heading-font-size, var(--mod-snackbar-heading-font-size, var(--ds-alias-text-size-base-device)));--_snackbar-heading-line-height:var(--snackbar-heading-line-height, var(--mod-snackbar-heading-line-height, var(--ds-alias-text-line-height-heading)));--_snackbar-content-font-family:var(--snackbar-content-font-family, var(--mod-snackbar-content-font-family, var(--ds-alias-text-family-body)));--_snackbar-content-font-weight:var(--snackbar-content-font-weight, var(--mod-snackbar-content-font-weight, inherit));--_snackbar-content-font-size:var(--snackbar-content-font-size, var(--mod-snackbar-content-font-size, var(--ds-alias-text-size-sm-device)));--_snackbar-content-line-height:var(--snackbar-content-line-height, var(--mod-snackbar-content-line-height, var(--ds-alias-text-line-height-body)));--_snackbar-gap:var(--snackbar-gap, var(--mod-snackbar-gap, 0.125rem));--_snackbar-p:var(--snackbar-p, var(--mod-snackbar-p, 1rem));--_snackbar-animation-start-opacity:var(--snackbar-animation-start-opacity, var(--mod-snackbar-animation-start-opacity, 1));--_snackbar-animation-start-transform:var(--snackbar-animation-start-transform, var(--mod-snackbar-animation-start-transform, none));--_snackbar-animation-transition:var(--snackbar-animation-transition, var(--mod-snackbar-animation-transition, none));--_snackbar-animation-end-opacity:var(--snackbar-animation-end-opacity, var(--mod-snackbar-animation-end-opacity, 1));--_snackbar-animation-end-transform:var(--snackbar-animation-end-transform, var(--mod-snackbar-animation-end-transform, none))}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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}@media print{:host{display:none !important}}:host{opacity:var(--_snackbar-animation-start-opacity);-webkit-transform:var(--_snackbar-animation-start-transform);transform:var(--_snackbar-animation-start-transform);-ms-flex:1;flex:1;position:relative;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--_snackbar-color);background:var(--_snackbar-bg);border-radius:var(--_snackbar-radius);-webkit-box-shadow:var(--_snackbar-shadow);box-shadow:var(--_snackbar-shadow);padding:var(--_snackbar-p);-webkit-column-gap:calc(var(--_snackbar-gap)*4);-moz-column-gap:calc(var(--_snackbar-gap)*4);column-gap:calc(var(--_snackbar-gap)*4);row-gap:var(--_snackbar-gap);-ms-flex-align:center;align-items:center}:host #icon{grid-area:icon;align-self:flex-start}:host #content{margin:0 !important;grid-area:content;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_snackbar-heading-font-family);font-weight:var(--_snackbar-heading-font-weight);line-height:var(--_snackbar-heading-line-height);font-size:var(--_snackbar-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_snackbar-content-font-family);font-size:var(--_snackbar-content-font-size);font-weight:var(--_snackbar-content-font-weight);line-height:var(--_snackbar-content-line-height)}:host #action{grid-area:action;align-self:center}:host #action ds-close,:host #action ds-button,:host #action .button{--button-mt:1rem;--button-font-size:var(--ds-button-size-sm);--button-min-height:2rem;--button-min-width:2rem;--button-padding-inline:0.75rem}:host ::slotted(ds-button),:host ::slotted(ds-close),:host ::slotted(ds-button-group){--button-mt:1rem;--button-font-size:var(--ds-button-size-sm);--button-min-height:2rem;--button-min-width:2rem;--button-padding-inline:0.75rem}:host .close,:host ds-close{grid-area:close;align-self:flex-start}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content" ". action"}:host(.is-closable){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close" ". action action"}:host(.is-mobile-closed){display:block;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;--mod-snackbar-p:0;--mod-snackbar-bg:transparent;--mod-snackbar-width:fit-content}:host(.is-mobile-closed) #icon,:host(.is-mobile-closed) #content,:host(.is-mobile-closed) #action{display:none}:host(.is-ready){-webkit-transition:var(--_snackbar-animation-transition);transition:var(--_snackbar-animation-transition)}:host(.is-visible){opacity:var(--_snackbar-animation-end-opacity);-webkit-transform:var(--_snackbar-animation-end-transform);transform:var(--_snackbar-animation-end-transform)}:host(.has-progess-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_snackbar-progress-bg);border-bottom-left-radius:var(--_snackbar-radius);border-bottom-right-radius:var(--_snackbar-radius)}:host(.has-progess-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_snackbar-progress-bar-bg);border-bottom-left-radius:var(--_snackbar-radius);-webkit-animation:progress var(--_snackbar-progress-duration) linear forwards;animation:progress var(--_snackbar-progress-duration) linear forwards}:host(.is-info){--mod-snackbar-color:var(--ds-snackbar-info-color-text-base);--mod-snackbar-border-color:var(--ds-snackbar-info-color-border-base);--mod-snackbar-bg:var(--ds-snackbar-info-color-bg-base);--mod-snackbar-icon-color:var(--ds-snackbar-info-color-icon-base);--mod-snackbar-progress-bar-bg:var(--ds-snackbar-info-color-progress-bar-base);--mod-snackbar-progress-bg:var(--ds-snackbar-info-color-progress-bg-base)}:host(.is-success){--mod-snackbar-color:var(--ds-snackbar-success-color-text-base);--mod-snackbar-border-color:var(--ds-snackbar-success-color-border-base);--mod-snackbar-bg:var(--ds-snackbar-success-color-bg-base);--mod-snackbar-icon-color:var(--ds-snackbar-success-color-icon-base);--mod-snackbar-progress-bar-bg:var(--ds-snackbar-success-color-progress-bar-base);--mod-snackbar-progress-bg:var(--ds-snackbar-success-color-progress-bg-base)}:host(.is-warning){--mod-snackbar-color:var(--ds-snackbar-warning-color-text-base);--mod-snackbar-border-color:var(--ds-snackbar-warning-color-border-base);--mod-snackbar-bg:var(--ds-snackbar-warning-color-bg-base);--mod-snackbar-icon-color:var(--ds-snackbar-warning-color-icon-base);--mod-snackbar-progress-bar-bg:var(--ds-snackbar-warning-color-progress-bar-base);--mod-snackbar-progress-bg:var(--ds-snackbar-warning-color-progress-bg-base)}:host(.is-danger){--mod-snackbar-color:var(--ds-snackbar-danger-color-text-base);--mod-snackbar-border-color:var(--ds-snackbar-danger-color-border-base);--mod-snackbar-bg:var(--ds-snackbar-danger-color-bg-base);--mod-snackbar-icon-color:var(--ds-snackbar-danger-color-icon-base);--mod-snackbar-progress-bar-bg:var(--ds-snackbar-danger-color-progress-bar-base);--mod-snackbar-progress-bg:var(--ds-snackbar-danger-color-progress-bg-base)}:host(.has-progess-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_snackbar-progress-bar-bg);border-bottom-left-radius:var(--_snackbar-radius);-webkit-animation:progress var(--_snackbar-progress-duration) linear forwards;animation:progress var(--_snackbar-progress-duration) linear forwards}:host(.is-paused)::after{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_snackbar-radius)}}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_snackbar-radius)}}`;
+const snackbarHostCss = () => `:host{--_snackbar-position:var(--snackbar-position, var(--mod-snackbar-position, static));--_snackbar-top:var(--snackbar-top, var(--mod-snackbar-top));--_snackbar-right:var(--snackbar-right, var(--mod-snackbar-right));--_snackbar-bottom:var(--snackbar-bottom, var(--mod-snackbar-bottom));--_snackbar-left:var(--snackbar-left, var(--mod-snackbar-left));position:var(--_snackbar-position);top:var(--_snackbar-top);right:var(--_snackbar-right);bottom:var(--_snackbar-bottom);left:var(--_snackbar-left);--_snackbar-m:var(--snackbar-m, var(--mod-snackbar-m, 0));--_snackbar-my:var(--snackbar-my, var(--mod-snackbar-my));--_snackbar-mx:var(--snackbar-mx, var(--mod-snackbar-mx));--_snackbar-ml:var(--snackbar-ml, var(--mod-snackbar-ml));--_snackbar-mr:var(--snackbar-mr, var(--mod-snackbar-mr));--_snackbar-mt:var(--snackbar-mt, var(--mod-snackbar-mt));--_snackbar-mb:var(--snackbar-mb, var(--mod-snackbar-mb));margin:var(--_snackbar-m);margin-inline:var(--_snackbar-mx);margin-block:var(--_snackbar-my);margin-left:var(--_snackbar-ml);margin-right:var(--_snackbar-mr);margin-top:var(--_snackbar-mt);margin-bottom:var(--_snackbar-mb);--_snackbar-shadow:var(--snackbar-shadow, var(--mod-snackbar-shadow, var(--ds-alias-shadow-box-base)));--_snackbar-radius:var(--snackbar-radius, var(--mod-snackbar-radius, var(--ds-snackbar-radius)));--_snackbar-bg:var(--snackbar-bg, var(--mod-snackbar-bg, var(--ds-snackbar-primary-color-background-base)));--_snackbar-color:var(--snackbar-color, var(--mod-snackbar-color, var(--ds-snackbar-primary-color-text-base)));--_snackbar-icon-color:var(--snackbar-icon-color, var(--mod-snackbar-icon-color, var(--ds-snackbar-primary-color-icon-base)));--_snackbar-progress-duration:var(--snackbar-progress-duration, var(--mod-snackbar-progress-duration, 0));--_snackbar-progress-bar-bg:var(--snackbar-progress-bar-bg, var(--mod-snackbar-progress-bar-bg, var(--ds-snackbar-primary-color-progress-bar-base)));--_snackbar-progress-bg:var(--snackbar-progress-bg, var(--mod-snackbar-progress-bg, var(--ds-snackbar-primary-color-progress-background-base)));--_snackbar-heading-font-family:var(--snackbar-heading-font-family, var(--mod-snackbar-heading-font-family, var(--ds-alias-text-family-heading)));--_snackbar-heading-font-weight:var(--snackbar-heading-font-weight, var(--mod-snackbar-heading-font-weight, var(--ds-alias-text-weight-bold)));--_snackbar-heading-font-size:var(--snackbar-heading-font-size, var(--mod-snackbar-heading-font-size, var(--ds-alias-text-size-base-device)));--_snackbar-heading-line-height:var(--snackbar-heading-line-height, var(--mod-snackbar-heading-line-height, var(--ds-alias-text-line-height-heading)));--_snackbar-content-font-family:var(--snackbar-content-font-family, var(--mod-snackbar-content-font-family, var(--ds-alias-text-family-body)));--_snackbar-content-font-weight:var(--snackbar-content-font-weight, var(--mod-snackbar-content-font-weight, inherit));--_snackbar-content-font-size:var(--snackbar-content-font-size, var(--mod-snackbar-content-font-size, var(--ds-alias-text-size-sm-device)));--_snackbar-content-line-height:var(--snackbar-content-line-height, var(--mod-snackbar-content-line-height, var(--ds-alias-text-line-height-body)));--_snackbar-gap:var(--snackbar-gap, var(--mod-snackbar-gap, 0.125rem));--_snackbar-p:var(--snackbar-p, var(--mod-snackbar-p, 1rem));--_snackbar-animation-start-opacity:var(--snackbar-animation-start-opacity, var(--mod-snackbar-animation-start-opacity, 1));--_snackbar-animation-start-transform:var(--snackbar-animation-start-transform, var(--mod-snackbar-animation-start-transform, none));--_snackbar-animation-transition:var(--snackbar-animation-transition, var(--mod-snackbar-animation-transition, none));--_snackbar-animation-end-opacity:var(--snackbar-animation-end-opacity, var(--mod-snackbar-animation-end-opacity, 1));--_snackbar-animation-end-transform:var(--snackbar-animation-end-transform, var(--mod-snackbar-animation-end-transform, none))}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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}@media print{:host{display:none !important}}:host{opacity:var(--_snackbar-animation-start-opacity);-webkit-transform:var(--_snackbar-animation-start-transform);transform:var(--_snackbar-animation-start-transform);-ms-flex:1;flex:1;position:relative;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--_snackbar-color);background:var(--_snackbar-bg);border-radius:var(--_snackbar-radius);-webkit-box-shadow:var(--_snackbar-shadow);box-shadow:var(--_snackbar-shadow);padding:var(--_snackbar-p);-webkit-column-gap:calc(var(--_snackbar-gap)*4);-moz-column-gap:calc(var(--_snackbar-gap)*4);column-gap:calc(var(--_snackbar-gap)*4);row-gap:var(--_snackbar-gap);-ms-flex-align:center;align-items:center}:host #icon{grid-area:icon;align-self:flex-start}:host #content{margin:0 !important;grid-area:content;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_snackbar-heading-font-family);font-weight:var(--_snackbar-heading-font-weight);line-height:var(--_snackbar-heading-line-height);font-size:var(--_snackbar-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_snackbar-content-font-family);font-size:var(--_snackbar-content-font-size);font-weight:var(--_snackbar-content-font-weight);line-height:var(--_snackbar-content-line-height)}:host #action{grid-area:action;align-self:center}:host #action ds-close,:host #action ds-button,:host #action .button{--button-mt:1rem;--button-font-size:var(--ds-button-size-sm);--button-min-height:2rem;--button-min-width:2rem;--button-padding-inline:0.75rem}:host ::slotted(ds-button),:host ::slotted(ds-close),:host ::slotted(ds-button-group){--button-mt:1rem;--button-font-size:var(--ds-button-size-sm);--button-min-height:2rem;--button-min-width:2rem;--button-padding-inline:0.75rem}:host .close,:host ds-close{grid-area:close;align-self:flex-start}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content" ". action"}:host(.is-closable){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close" ". action action"}:host(.is-mobile-closed){display:block;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;--mod-snackbar-p:0;--mod-snackbar-bg:transparent;--mod-snackbar-width:fit-content}:host(.is-mobile-closed) #icon,:host(.is-mobile-closed) #content,:host(.is-mobile-closed) #action{display:none}:host(.is-ready){-webkit-transition:var(--_snackbar-animation-transition);transition:var(--_snackbar-animation-transition)}:host(.is-visible){opacity:var(--_snackbar-animation-end-opacity);-webkit-transform:var(--_snackbar-animation-end-transform);transform:var(--_snackbar-animation-end-transform)}:host(.has-progess-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_snackbar-progress-bg);border-bottom-left-radius:var(--_snackbar-radius);border-bottom-right-radius:var(--_snackbar-radius)}:host(.has-progess-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_snackbar-progress-bar-bg);border-bottom-left-radius:var(--_snackbar-radius);-webkit-animation:progress var(--_snackbar-progress-duration) linear forwards;animation:progress var(--_snackbar-progress-duration) linear forwards}:host(.is-info){--mod-snackbar-color:var(--ds-snackbar-info-color-text-base);--mod-snackbar-border-color:var(--ds-snackbar-info-color-border-base);--mod-snackbar-bg:var(--ds-snackbar-info-color-background-base);--mod-snackbar-icon-color:var(--ds-snackbar-info-color-icon-base);--mod-snackbar-progress-bar-bg:var(--ds-snackbar-info-color-progress-bar-base);--mod-snackbar-progress-bg:var(--ds-snackbar-info-color-progress-background-base)}:host(.is-success){--mod-snackbar-color:var(--ds-snackbar-success-color-text-base);--mod-snackbar-border-color:var(--ds-snackbar-success-color-border-base);--mod-snackbar-bg:var(--ds-snackbar-success-color-background-base);--mod-snackbar-icon-color:var(--ds-snackbar-success-color-icon-base);--mod-snackbar-progress-bar-bg:var(--ds-snackbar-success-color-progress-bar-base);--mod-snackbar-progress-bg:var(--ds-snackbar-success-color-progress-background-base)}:host(.is-warning){--mod-snackbar-color:var(--ds-snackbar-warning-color-text-base);--mod-snackbar-border-color:var(--ds-snackbar-warning-color-border-base);--mod-snackbar-bg:var(--ds-snackbar-warning-color-background-base);--mod-snackbar-icon-color:var(--ds-snackbar-warning-color-icon-base);--mod-snackbar-progress-bar-bg:var(--ds-snackbar-warning-color-progress-bar-base);--mod-snackbar-progress-bg:var(--ds-snackbar-warning-color-progress-background-base)}:host(.is-danger){--mod-snackbar-color:var(--ds-snackbar-danger-color-text-base);--mod-snackbar-border-color:var(--ds-snackbar-danger-color-border-base);--mod-snackbar-bg:var(--ds-snackbar-danger-color-background-base);--mod-snackbar-icon-color:var(--ds-snackbar-danger-color-icon-base);--mod-snackbar-progress-bar-bg:var(--ds-snackbar-danger-color-progress-bar-base);--mod-snackbar-progress-bg:var(--ds-snackbar-danger-color-progress-background-base)}:host(.has-progess-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_snackbar-progress-bar-bg);border-bottom-left-radius:var(--_snackbar-radius);-webkit-animation:progress var(--_snackbar-progress-duration) linear forwards;animation:progress var(--_snackbar-progress-duration) linear forwards}:host(.is-paused)::after{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_snackbar-radius)}}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_snackbar-radius)}}`;
 
 const Snackbar = class {
     constructor(hostRef) {
@@ -30,6 +30,10 @@ const Snackbar = class {
         this.isMobile = breakpoints_subject.dsBreakpoints.isMobile;
         this.mobileOpenState = false;
         this.didLoad = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ─────────────────────────────────────────────────────
+         */
         /**
          * Defines the color of the element
          * Color type primary is deprecated, please use info instead.
@@ -91,7 +95,7 @@ const Snackbar = class {
         this.actionHandler = () => void 0;
         /**
          * PRIVATE METHODS
-         * ------------------------------------------------------
+         * ─────────────────────────────────────────────────────
          */
         this.generateSvgContent = () => {
             if (hasValue.hasValue(this.svg) && this.svg.length > 0) {
@@ -124,7 +128,7 @@ const Snackbar = class {
     }
     /**
      * LIFECYCLE
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     componentDidLoad() {
         index.raf(() => {
@@ -133,15 +137,15 @@ const Snackbar = class {
         });
     }
     /**
-     * LISTENERS
-     * ------------------------------------------------------
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
      */
     listenToBreakpoint(breakpoints) {
         this.isMobile = breakpoints.mobile;
     }
     /**
      * PUBLIC METHODS
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     /**
      * Closes this notification
@@ -152,27 +156,27 @@ const Snackbar = class {
     }
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render() {
         const iconName = this.generateIconName();
         const svgContent = this.generateSvgContent();
-        return (index.h(index.Host, { key: '66c571295c3931b071bb104e339febfac87db6df', role: "status", "aria-live": "polite", "aria-atomic": "true", class: {
+        return (index.h(index.Host, { key: '7dd8cbff5210c94aed353e878f3c31431c1733de', role: "status", "aria-live": "polite", "aria-atomic": "true", class: {
                 [`is-ready`]: this.didLoad,
                 [`is-visible`]: this.visible,
                 [`is-closable`]: this.closable,
                 [`is-mobile-open`]: this.isMobile && this.mobileOpenState,
                 [`is-mobile-closed`]: this.isMobile && !this.mobileOpenState,
                 [`is-${this.color}`]: hasValue.hasValue(this.color),
-            } }, this.isMobile && !this.mobileOpenState && (index.h("ds-button", { key: '9f9cedbf2fed42189e302a0aebc9852a2771136e', id: "mobile-button", color: this.color === 'base' ? 'primary' : this.color, square: true, icon: iconName, onClick: () => (this.mobileOpenState = true) })), iconName && !svgContent && (index.h("ds-icon", { key: 'a4c826d95d2041345bf4cee0540cb172f5336c79', part: "icon", id: "icon", name: iconName, color: this.color, size: 'xl', shape: this.color === 'warning'
+            } }, this.isMobile && !this.mobileOpenState && (index.h("ds-button", { key: 'a1fe8bf8330b49df3607560a662fa80ccde6ea77', id: "mobile-button", color: this.color === 'base' ? 'primary' : this.color, square: true, icon: iconName, onClick: () => (this.mobileOpenState = true) })), iconName && !svgContent && (index.h("ds-icon", { key: '0e12504be8ef39a9af63f8acf38a5ce4aa2eebc5', part: "icon", id: "icon", name: iconName, color: this.color, size: 'xl', shape: this.color === 'warning'
                 ? 'triangle'
                 : this.color === 'danger' || this.color === 'success' || this.color === 'info'
                     ? 'circle'
-                    : undefined })), svgContent && index.h("ds-icon", { key: 'cdb9be5a9499d7ffad58c8c2e5a9096963b67f69', id: "icon", part: "icon", svg: svgContent, size: 'xl' }), index.h("span", { key: '52810e3cb684318ce4fd8ec8be8529f63a8e8e8b', part: "content", id: "content" }, this.heading && index.h("h2", { key: '8ae2906a4ffabbc970c9c995c5d9efb0cc94fbc8', part: "heading" }, this.heading), index.h("span", { key: 'affd6a8d4ce4c19274a8c760f00f0a051bbae56e', part: "message" }, this.message, index.h("slot", { key: '75fd4ab26f8f6f8d1d89d2c1e0428b53bb3d75c5' }))), index.h("ds-button-group", { key: '0c644ee957e3a615e2c7fa030d537bea002e72ca', part: "action", id: "action" }, index.h("slot", { key: '840fb7d2be9fcf41ffa5b4eeff53d4a1b26d209a', name: "action" }), this.action && (index.h("ds-button", { key: '18d900d559bd085b5732ec37484622ee9da199ff', color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
+                    : undefined })), svgContent && index.h("ds-icon", { key: 'e9a0b074084f5952ef5eefcd9d434b6af15b6a5f', id: "icon", part: "icon", svg: svgContent, size: 'xl' }), index.h("span", { key: 'd65d767a79e0e8094d7ccb88f4902321b14b03be', part: "content", id: "content" }, this.heading && index.h("h2", { key: '463d2b5b335d804d572347e229b0b94f97f9b9b7', part: "heading" }, this.heading), index.h("span", { key: 'd964774c987ef6906bd76bb6982f16ad1c4f9e3a', part: "message" }, this.message, index.h("slot", { key: 'bacfa9ac71c53f0223fb0a62b6fc1fca526acd3a' }))), index.h("ds-button-group", { key: 'e83047c52b2dda1709df234871e3dbb3e3755c95', part: "action", id: "action" }, index.h("slot", { key: 'ea3fed1cdf6c5f73d459aa097c00a677ecfc33c7', name: "action" }), this.action && (index.h("ds-button", { key: 'eb1607a6468a84b66c03af8ef4772e877bf149d7', color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
                 formControl.stopEventBubbling(ev);
                 this.dsActionClick.emit(ev);
                 this.actionHandler(this.alertId);
-            } }, this.action)), this.closable && (index.h("ds-close", { key: 'd8c8c528cff2edbfac7a23488271c2071d5a84df', button: true, "button-color": "secondary", part: "close", size: "sm", onClick: ev => {
+            } }, this.action)), this.closable && (index.h("ds-close", { key: '7d9abbb81fc6fae5a78ca68d993e7376178aaa39', button: true, "button-color": "secondary", part: "close", size: "sm", onClick: ev => {
                 formControl.stopEventBubbling(ev);
                 this.close();
             } })))));
@@ -225,6 +229,14 @@ tslib_es6.__decorate([
     type.Type('string'),
     tslib_es6.__metadata("design:type", String)
 ], Snackbar.prototype, "actionHref", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", String)
+], Snackbar.prototype, "alertId", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Snackbar.prototype, "visible", void 0);
 tslib_es6.__decorate([
     breakpoints_decorator.ListenToBreakpoints(),
     tslib_es6.__metadata("design:type", Function),

package/dist/cjs/ds-steps.cjs.entry.js

@@ -140,14 +140,7 @@ const Steps = class {
         const isNav = this.isNavigation();
         const steps = this.getSteps();
         const panels = this.getPanels();
-        let effectiveValue = this.value;
-        // If the selected value is disabled, don't select any step
-        if (!isNav && effectiveValue) {
-            const selectedStep = steps.find((s) => s.name === effectiveValue);
-            if (selectedStep && (selectedStep.disabled || selectedStep.hasAttribute('disabled'))) {
-                effectiveValue = undefined;
-            }
-        }
+        const effectiveValue = this.value;
         const activeStep = steps.find(s => s.name === effectiveValue);
         const activeIndex = activeStep ? activeStep.index : 0;
         steps.forEach(step => {

package/dist/cjs/ds-toast.cjs.entry.js

@@ -18,7 +18,7 @@ require('./config.utils-BhJig3l5.js');
 const TOAST_COLORS = ['base', 'info', 'success', 'warning', 'danger'];
 const TOAST_TARGETS = ['_blank', '_parent', '_self', '_top'];
 
-const toastHostCss = () => `:host{--_toast-position:var(--toast-position, var(--mod-toast-position, static));--_toast-top:var(--toast-top, var(--mod-toast-top));--_toast-right:var(--toast-right, var(--mod-toast-right));--_toast-bottom:var(--toast-bottom, var(--mod-toast-bottom));--_toast-left:var(--toast-left, var(--mod-toast-left));position:var(--_toast-position);top:var(--_toast-top);right:var(--_toast-right);bottom:var(--_toast-bottom);left:var(--_toast-left);--_toast-m:var(--toast-m, var(--mod-toast-m, 0));--_toast-my:var(--toast-my, var(--mod-toast-my));--_toast-mx:var(--toast-mx, var(--mod-toast-mx));--_toast-ml:var(--toast-ml, var(--mod-toast-ml));--_toast-mr:var(--toast-mr, var(--mod-toast-mr));--_toast-mt:var(--toast-mt, var(--mod-toast-mt));--_toast-mb:var(--toast-mb, var(--mod-toast-mb));margin:var(--_toast-m);margin-inline:var(--_toast-mx);margin-block:var(--_toast-my);margin-left:var(--_toast-ml);margin-right:var(--_toast-mr);margin-top:var(--_toast-mt);margin-bottom:var(--_toast-mb);--_toast-shadow:var(--toast-shadow, var(--mod-toast-shadow, var(--ds-alias-shadow-box-base)));--_toast-radius:var(--toast-radius, var(--mod-toast-radius, var(--ds-toast-radius)));--_toast-bg:var(--toast-bg, var(--mod-toast-bg, var(--ds-toast-primary-color-bg-base)));--_toast-color:var(--toast-color, var(--mod-toast-color, var(--ds-toast-primary-color-text-base)));--_toast-icon-color:var(--toast-icon-color, var(--mod-toast-icon-color, var(--ds-toast-primary-color-icon-base)));--_toast-progress-duration:var(--toast-progress-duration, var(--mod-toast-progress-duration, 0));--_toast-progress-bar-bg:var(--toast-progress-bar-bg, var(--mod-toast-progress-bar-bg, var(--ds-toast-primary-color-progress-bar-base)));--_toast-progress-bg:var(--toast-progress-bg, var(--mod-toast-progress-bg, var(--ds-toast-primary-color-progress-bg-base)));--_toast-heading-font-family:var(--toast-heading-font-family, var(--mod-toast-heading-font-family, var(--ds-alias-text-family-heading)));--_toast-heading-font-weight:var(--toast-heading-font-weight, var(--mod-toast-heading-font-weight, var(--ds-alias-text-weight-bold)));--_toast-heading-font-size:var(--toast-heading-font-size, var(--mod-toast-heading-font-size, var(--ds-alias-text-size-base-device)));--_toast-heading-line-height:var(--toast-heading-line-height, var(--mod-toast-heading-line-height, var(--ds-alias-text-line-height-heading)));--_toast-content-font-family:var(--toast-content-font-family, var(--mod-toast-content-font-family, var(--ds-alias-text-family-body)));--_toast-content-font-weight:var(--toast-content-font-weight, var(--mod-toast-content-font-weight, inherit));--_toast-content-font-size:var(--toast-content-font-size, var(--mod-toast-content-font-size, var(--ds-alias-text-size-sm-device)));--_toast-content-line-height:var(--toast-content-line-height, var(--mod-toast-content-line-height, var(--ds-alias-text-line-height-body)));--_toast-gap:var(--toast-gap, var(--mod-toast-gap, 0.125rem));--_toast-p:var(--toast-p, var(--mod-toast-p, 1rem));--_toast-animation-start-opacity:var(--toast-animation-start-opacity, var(--mod-toast-animation-start-opacity, 1));--_toast-animation-start-transform:var(--toast-animation-start-transform, var(--mod-toast-animation-start-transform, none));--_toast-animation-transition:var(--toast-animation-transition, var(--mod-toast-animation-transition, none));--_toast-animation-end-opacity:var(--toast-animation-end-opacity, var(--mod-toast-animation-end-opacity, 1));--_toast-animation-end-transform:var(--toast-animation-end-transform, var(--mod-toast-animation-end-transform, none))}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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}@media print{:host{display:none !important}}:host{opacity:var(--_toast-animation-start-opacity);-webkit-transform:var(--_toast-animation-start-transform);transform:var(--_toast-animation-start-transform);-ms-flex:1;flex:1;position:relative;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--_toast-color);background:var(--_toast-bg);border-radius:var(--_toast-radius);-webkit-box-shadow:var(--_toast-shadow);box-shadow:var(--_toast-shadow);padding:var(--_toast-p);-webkit-column-gap:calc(var(--_toast-gap)*4);-moz-column-gap:calc(var(--_toast-gap)*4);column-gap:calc(var(--_toast-gap)*4);row-gap:var(--_toast-gap);-ms-flex-align:center;align-items:center;width:100%}:host ds-icon:not([name]){--icon-color:null;--icon-size:var(--ds-icon-size-lg)}:host #icon{grid-area:icon}:host #content{margin:0 !important;grid-area:content;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_toast-heading-font-family);font-weight:var(--_toast-heading-font-weight);line-height:var(--_toast-heading-line-height);font-size:var(--_toast-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_toast-content-font-family);font-size:var(--_toast-content-font-size);font-weight:var(--_toast-content-font-weight);line-height:var(--_toast-content-line-height)}:host ds-button,:host .button{--button-mt:0;grid-area:action;align-self:center}:host .close,:host ds-close{grid-area:close;align-self:center}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content"}:host(.is-closable:not(.is-action)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close"}:host(.is-action:not(.is-closable)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content action"}:host(.is-action.is-closable){grid-template-columns:auto 1fr auto auto;grid-template-areas:"icon content action close"}:host(.is-ready){-webkit-transition:var(--_toast-animation-transition);transition:var(--_toast-animation-transition)}:host(.is-visible){opacity:var(--_toast-animation-end-opacity);-webkit-transform:var(--_toast-animation-end-transform);transform:var(--_toast-animation-end-transform)}:host(.has-progress-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_toast-progress-bg);border-bottom-left-radius:var(--_toast-radius);border-bottom-right-radius:var(--_toast-radius)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);-webkit-animation:progress var(--_toast-progress-duration) linear forwards;animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-info){--mod-toast-color:var(--ds-toast-info-color-text-base);--mod-toast-border-color:var(--ds-toast-info-color-border-base);--mod-toast-bg:var(--ds-toast-info-color-bg-base);--mod-toast-icon-color:var(--ds-toast-info-color-icon-base);--mod-toast-progress-bar-bg:var(--ds-toast-info-color-progress-bar-base);--mod-toast-progress-bg:var(--ds-toast-info-color-progress-bg-base)}:host(.is-success){--mod-toast-color:var(--ds-toast-success-color-text-base);--mod-toast-border-color:var(--ds-toast-success-color-border-base);--mod-toast-bg:var(--ds-toast-success-color-bg-base);--mod-toast-icon-color:var(--ds-toast-success-color-icon-base);--mod-toast-progress-bar-bg:var(--ds-toast-success-color-progress-bar-base);--mod-toast-progress-bg:var(--ds-toast-success-color-progress-bg-base)}:host(.is-warning){--mod-toast-color:var(--ds-toast-warning-color-text-base);--mod-toast-border-color:var(--ds-toast-warning-color-border-base);--mod-toast-bg:var(--ds-toast-warning-color-bg-base);--mod-toast-icon-color:var(--ds-toast-warning-color-icon-base);--mod-toast-progress-bar-bg:var(--ds-toast-warning-color-progress-bar-base);--mod-toast-progress-bg:var(--ds-toast-warning-color-progress-bg-base)}:host(.is-danger){--mod-toast-color:var(--ds-toast-danger-color-text-base);--mod-toast-border-color:var(--ds-toast-danger-color-border-base);--mod-toast-bg:var(--ds-toast-danger-color-bg-base);--mod-toast-icon-color:var(--ds-toast-danger-color-icon-base);--mod-toast-progress-bar-bg:var(--ds-toast-danger-color-progress-bar-base);--mod-toast-progress-bg:var(--ds-toast-danger-color-progress-bg-base)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);-webkit-animation:progress var(--_toast-progress-duration) linear forwards;animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-paused)::after{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_toast-radius)}}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_toast-radius)}}`;
+const toastHostCss = () => `:host{--_toast-position:var(--toast-position, var(--mod-toast-position, static));--_toast-top:var(--toast-top, var(--mod-toast-top));--_toast-right:var(--toast-right, var(--mod-toast-right));--_toast-bottom:var(--toast-bottom, var(--mod-toast-bottom));--_toast-left:var(--toast-left, var(--mod-toast-left));position:var(--_toast-position);top:var(--_toast-top);right:var(--_toast-right);bottom:var(--_toast-bottom);left:var(--_toast-left);--_toast-m:var(--toast-m, var(--mod-toast-m, 0));--_toast-my:var(--toast-my, var(--mod-toast-my));--_toast-mx:var(--toast-mx, var(--mod-toast-mx));--_toast-ml:var(--toast-ml, var(--mod-toast-ml));--_toast-mr:var(--toast-mr, var(--mod-toast-mr));--_toast-mt:var(--toast-mt, var(--mod-toast-mt));--_toast-mb:var(--toast-mb, var(--mod-toast-mb));margin:var(--_toast-m);margin-inline:var(--_toast-mx);margin-block:var(--_toast-my);margin-left:var(--_toast-ml);margin-right:var(--_toast-mr);margin-top:var(--_toast-mt);margin-bottom:var(--_toast-mb);--_toast-shadow:var(--toast-shadow, var(--mod-toast-shadow, var(--ds-alias-shadow-box-base)));--_toast-radius:var(--toast-radius, var(--mod-toast-radius, var(--ds-toast-radius)));--_toast-bg:var(--toast-bg, var(--mod-toast-bg, var(--ds-toast-primary-color-background-base)));--_toast-color:var(--toast-color, var(--mod-toast-color, var(--ds-toast-primary-color-text-base)));--_toast-icon-color:var(--toast-icon-color, var(--mod-toast-icon-color, var(--ds-toast-primary-color-icon-base)));--_toast-progress-duration:var(--toast-progress-duration, var(--mod-toast-progress-duration, 0));--_toast-progress-bar-bg:var(--toast-progress-bar-bg, var(--mod-toast-progress-bar-bg, var(--ds-toast-primary-color-progress-bar-base)));--_toast-progress-bg:var(--toast-progress-bg, var(--mod-toast-progress-bg, var(--ds-toast-primary-color-progress-background-base)));--_toast-heading-font-family:var(--toast-heading-font-family, var(--mod-toast-heading-font-family, var(--ds-alias-text-family-heading)));--_toast-heading-font-weight:var(--toast-heading-font-weight, var(--mod-toast-heading-font-weight, var(--ds-alias-text-weight-bold)));--_toast-heading-font-size:var(--toast-heading-font-size, var(--mod-toast-heading-font-size, var(--ds-alias-text-size-base-device)));--_toast-heading-line-height:var(--toast-heading-line-height, var(--mod-toast-heading-line-height, var(--ds-alias-text-line-height-heading)));--_toast-content-font-family:var(--toast-content-font-family, var(--mod-toast-content-font-family, var(--ds-alias-text-family-body)));--_toast-content-font-weight:var(--toast-content-font-weight, var(--mod-toast-content-font-weight, inherit));--_toast-content-font-size:var(--toast-content-font-size, var(--mod-toast-content-font-size, var(--ds-alias-text-size-sm-device)));--_toast-content-line-height:var(--toast-content-line-height, var(--mod-toast-content-line-height, var(--ds-alias-text-line-height-body)));--_toast-gap:var(--toast-gap, var(--mod-toast-gap, 0.125rem));--_toast-p:var(--toast-p, var(--mod-toast-p, 1rem));--_toast-animation-start-opacity:var(--toast-animation-start-opacity, var(--mod-toast-animation-start-opacity, 1));--_toast-animation-start-transform:var(--toast-animation-start-transform, var(--mod-toast-animation-start-transform, none));--_toast-animation-transition:var(--toast-animation-transition, var(--mod-toast-animation-transition, none));--_toast-animation-end-opacity:var(--toast-animation-end-opacity, var(--mod-toast-animation-end-opacity, 1));--_toast-animation-end-transform:var(--toast-animation-end-transform, var(--mod-toast-animation-end-transform, none))}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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}@media print{:host{display:none !important}}:host{opacity:var(--_toast-animation-start-opacity);-webkit-transform:var(--_toast-animation-start-transform);transform:var(--_toast-animation-start-transform);-ms-flex:1;flex:1;position:relative;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--_toast-color);background:var(--_toast-bg);border-radius:var(--_toast-radius);-webkit-box-shadow:var(--_toast-shadow);box-shadow:var(--_toast-shadow);padding:var(--_toast-p);-webkit-column-gap:calc(var(--_toast-gap)*4);-moz-column-gap:calc(var(--_toast-gap)*4);column-gap:calc(var(--_toast-gap)*4);row-gap:var(--_toast-gap);-ms-flex-align:center;align-items:center;width:100%}:host ds-icon:not([name]){--icon-color:null;--icon-size:var(--ds-icon-size-lg)}:host #icon{grid-area:icon}:host #content{margin:0 !important;grid-area:content;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_toast-heading-font-family);font-weight:var(--_toast-heading-font-weight);line-height:var(--_toast-heading-line-height);font-size:var(--_toast-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_toast-content-font-family);font-size:var(--_toast-content-font-size);font-weight:var(--_toast-content-font-weight);line-height:var(--_toast-content-line-height)}:host ds-button,:host .button{--button-mt:0;grid-area:action;align-self:center}:host .close,:host ds-close{grid-area:close;align-self:center}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content"}:host(.is-closable:not(.is-action)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close"}:host(.is-action:not(.is-closable)){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content action"}:host(.is-action.is-closable){grid-template-columns:auto 1fr auto auto;grid-template-areas:"icon content action close"}:host(.is-ready){-webkit-transition:var(--_toast-animation-transition);transition:var(--_toast-animation-transition)}:host(.is-visible){opacity:var(--_toast-animation-end-opacity);-webkit-transform:var(--_toast-animation-end-transform);transform:var(--_toast-animation-end-transform)}:host(.has-progress-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_toast-progress-bg);border-bottom-left-radius:var(--_toast-radius);border-bottom-right-radius:var(--_toast-radius)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);-webkit-animation:progress var(--_toast-progress-duration) linear forwards;animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-info){--mod-toast-color:var(--ds-toast-info-color-text-base);--mod-toast-border-color:var(--ds-toast-info-color-border-base);--mod-toast-bg:var(--ds-toast-info-color-background-base);--mod-toast-icon-color:var(--ds-toast-info-color-icon-base);--mod-toast-progress-bar-bg:var(--ds-toast-info-color-progress-bar-base);--mod-toast-progress-bg:var(--ds-toast-info-color-progress-background-base)}:host(.is-success){--mod-toast-color:var(--ds-toast-success-color-text-base);--mod-toast-border-color:var(--ds-toast-success-color-border-base);--mod-toast-bg:var(--ds-toast-success-color-background-base);--mod-toast-icon-color:var(--ds-toast-success-color-icon-base);--mod-toast-progress-bar-bg:var(--ds-toast-success-color-progress-bar-base);--mod-toast-progress-bg:var(--ds-toast-success-color-progress-background-base)}:host(.is-warning){--mod-toast-color:var(--ds-toast-warning-color-text-base);--mod-toast-border-color:var(--ds-toast-warning-color-border-base);--mod-toast-bg:var(--ds-toast-warning-color-background-base);--mod-toast-icon-color:var(--ds-toast-warning-color-icon-base);--mod-toast-progress-bar-bg:var(--ds-toast-warning-color-progress-bar-base);--mod-toast-progress-bg:var(--ds-toast-warning-color-progress-background-base)}:host(.is-danger){--mod-toast-color:var(--ds-toast-danger-color-text-base);--mod-toast-border-color:var(--ds-toast-danger-color-border-base);--mod-toast-bg:var(--ds-toast-danger-color-background-base);--mod-toast-icon-color:var(--ds-toast-danger-color-icon-base);--mod-toast-progress-bar-bg:var(--ds-toast-danger-color-progress-bar-base);--mod-toast-progress-bg:var(--ds-toast-danger-color-progress-background-base)}:host(.has-progress-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_toast-progress-bar-bg);border-bottom-left-radius:var(--_toast-radius);-webkit-animation:progress var(--_toast-progress-duration) linear forwards;animation:progress var(--_toast-progress-duration) linear forwards}:host(.is-paused)::after{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_toast-radius)}}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_toast-radius)}}`;
 
 const Toast = class {
     constructor(hostRef) {
@@ -31,6 +31,10 @@ const Toast = class {
         this.animated = false;
         this.didLoad = false;
         this.didPause = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ─────────────────────────────────────────────────────
+         */
         /**
          * Defines the color of the element
          * Color type primary is deprecated, please use info instead.
@@ -89,7 +93,7 @@ const Toast = class {
         this.actionHandler = () => void 0;
         /**
          * PRIVATE METHODS
-         * ------------------------------------------------------
+         * ─────────────────────────────────────────────────────
          */
         this.generateSvgContent = () => {
             if (hasValue.hasValue(this.svg)) {
@@ -122,7 +126,7 @@ const Toast = class {
     }
     /**
      * LIFECYCLE
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     componentDidLoad() {
         index.raf(() => {
@@ -132,7 +136,7 @@ const Toast = class {
     }
     /**
      * PUBLIC METHODS
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     /**
      * Closes this notification
@@ -149,7 +153,7 @@ const Toast = class {
     }
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render() {
         const iconName = this.generateIconName();
@@ -161,7 +165,7 @@ const Toast = class {
                 '--toast-progress-duration': `${this.duration}ms`,
             }
             : {};
-        return (index.h(index.Host, { key: 'f38cb2cdb7460f866c5c9f7d14a6b2565cba63f9', role: "alert", "aria-live": "assertive", "aria-atomic": "true", class: {
+        return (index.h(index.Host, { key: 'd4ca47796b7b5927412383a15311e794ae217be4', role: "alert", "aria-live": "assertive", "aria-atomic": "true", class: {
                 [`is-ready`]: this.didLoad,
                 [`is-paused`]: this.didPause,
                 [`is-visible`]: this.visible,
@@ -175,7 +179,7 @@ const Toast = class {
             }, onMouseLeave: () => {
                 this.didPause = false;
                 this.dsDidResume.emit();
-            } }, !hasValue.hasValue(svgContent) && (index.h("ds-icon", { key: 'a3533c4ad23fcfeeb13628cce8292c877010d31d', id: "icon", part: "icon", name: iconName || this.color === 'warning'
+            } }, !hasValue.hasValue(svgContent) && (index.h("ds-icon", { key: '69dad798037879665cfcac7c2c4c5202e59398ff', id: "icon", part: "icon", name: iconName || this.color === 'warning'
                 ? 'alert'
                 : this.color === 'danger'
                     ? 'alert'
@@ -187,11 +191,11 @@ const Toast = class {
                 ? 'triangle'
                 : this.color === 'danger' || this.color === 'success' || this.color === 'info'
                     ? 'circle'
-                    : undefined })), hasValue.hasValue(svgContent) && index.h("ds-icon", { key: '206dbb5cd3673773eb5a9327679676ad9a0d15f9', id: "icon", part: "icon", svg: svgContent }), index.h("span", { key: 'f7f7fb5c0071f6cb35a005e9a843cfc527d96e3f', part: "content", id: "content" }, this.heading && index.h("h2", { key: '073902110e1777b279e829e05bcc040e24b8251e', part: "heading" }, this.heading), index.h("span", { key: '677a6c7b3bb849376cd47b8449e8cab982c396b6', part: "message" }, this.message, index.h("slot", { key: '722ebc769eb27196aef924c2028a5b0c04590d25' }))), hasValue.hasValue(this.action) && (index.h("ds-button", { key: '814a491f7657a3ad56021a3607651244afafc2af', id: "action", color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
+                    : undefined })), hasValue.hasValue(svgContent) && index.h("ds-icon", { key: 'a6ba300bdb84ba361450bb08059293a6a533de37', id: "icon", part: "icon", svg: svgContent }), index.h("span", { key: '0c1dcbd34ccd9e8d4f5fa8abf575c8de78af23ca', part: "content", id: "content" }, this.heading && index.h("h2", { key: 'e0f1f64c75f147c46ffbc7fcd38df70b79d1788d', part: "heading" }, this.heading), index.h("span", { key: 'b61f2943532f86a484ab688253a8e7a04327c00b', part: "message" }, this.message, index.h("slot", { key: 'e9924f719790067a6e2bdb136b18dec3841f04ae' }))), hasValue.hasValue(this.action) && (index.h("ds-button", { key: 'ba37a92ae3638e6304ddca76b9793003455e79eb', id: "action", color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
                 formControl.stopEventBubbling(ev);
                 this.dsActionClick.emit(ev);
                 this.actionHandler(this.alertId);
-            } }, this.action)), this.closable && (index.h("ds-close", { key: 'e1c6e38442650af9321ba62e43a94fc2e10cbb6f', part: "close", onClick: ev => {
+            } }, this.action)), this.closable && (index.h("ds-close", { key: '1b2978686c359bb6b6cf6f9e40bd8a693b8480cd', part: "close", onClick: ev => {
                 formControl.stopEventBubbling(ev);
                 this.close();
             } }))));
@@ -246,6 +250,14 @@ tslib_es6.__decorate([
     type.Type('string'),
     tslib_es6.__metadata("design:type", String)
 ], Toast.prototype, "actionHref", void 0);
+tslib_es6.__decorate([
+    type.Type('string'),
+    tslib_es6.__metadata("design:type", String)
+], Toast.prototype, "alertId", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Toast.prototype, "visible", void 0);
 tslib_es6.__decorate([
     config_decorator.ListenToConfig(),
     tslib_es6.__metadata("design:type", Function),

package/dist/cjs/index-DD7qcaNz.js

@@ -373,7 +373,7 @@ const runHighPrioritizedTask = (callback) => {
 };
 
 // generated by .build/version.js
-const VERSION = '20.0.0-next.8';
+const VERSION = '20.0.0-next.9';
 
 const DS_ANIMATION_KEY = 'ds-animated';
 const DS_CONFIG_META_NAME = 'design-system-config';

package/dist/collection/components/alert/alert-container.interfaces.js

@@ -2,7 +2,7 @@
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
 export const ALERT_TYPES = ['toast', 'snackbar'];
-export const ALERT_CONTAINER_SIZES = ['', 'fluid', 'detail-page', 'compact', 'blog-page', 'wide'];
+export const ALERT_CONTAINER_SIZES = ['fluid', 'detail-page', 'compact', 'blog-page', 'wide'];
 export const ALERT_COLORS = [
     'base',
     'info',

package/dist/collection/components/alert/alert-container.js

@@ -16,16 +16,12 @@ export class AlertContainer {
         this.alertTimers = {};
         /**
          * PUBLIC PROPERTY API
-         * ------------------------------------------------------
+         * ─────────────────────────────────────────────────────
          */
         /**
          * If `true`, alerts animate in and out.
          */
         this.animated = false;
-        /**
-         * Defines the container size constraint for the alert layout.
-         */
-        this.container = '';
         /**
          * Defines the display type: `toast` (top-right overlay) or `snackbar` (bottom banner).
          */
@@ -36,7 +32,7 @@ export class AlertContainer {
     }
     /**
      * PUBLIC METHODS
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     /**
      * Adds an alert to the queue and returns its generated ID.
@@ -71,7 +67,7 @@ export class AlertContainer {
     }
     /**
      * PRIVATE METHODS
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     activeTimer(id, duration) {
         if (duration !== 'infinite') {
@@ -118,15 +114,15 @@ export class AlertContainer {
     }
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render() {
         const visibleAlerts = this.alerts.slice(0, this.maxVisibleItems);
         const AlertElement = this.type === 'toast' ? 'ds-toast' : 'ds-snackbar';
-        return (h(Host, { key: '4b27582dc8593dc0f58058dfa15bba7e3b3ef7d5', class: {
+        return (h(Host, { key: '57bfdf1ecbf92740b2e180b449ccea6a3764bea8', class: {
                 'is-toast': this.type === 'toast',
                 'is-snackbar': this.type === 'snackbar',
-            } }, h("div", { key: '9a0e962b0f44b361b348072db213475e25b8f75f', id: "wrapper", class: { container: this.type === 'toast' } }, visibleAlerts.map(alert => (h(AlertElement, { key: alert.alertId, id: alert.alertId, alertId: alert.alertId, visible: alert.visible, heading: alert.heading, message: alert.message, color: alert.color, duration: alert.duration, closable: alert.closable, closeHandler: () => alert.closeHandler(alert.alertId), action: alert.action, actionIcon: alert.actionIcon, actionTarget: alert.actionTarget, actionHref: alert.actionHref, actionHandler: () => alert.actionHandler(alert.alertId), onDsCloseClick: () => this.removeAlert(alert.alertId), onDsDidLoad: () => this.present(alert.alertId), onDsDidPause: () => {
+            } }, h("div", { key: '134a3e7fd04fd9c65e090ee67b4908affedc4eb8', id: "wrapper", class: { container: this.type === 'toast' } }, visibleAlerts.map(alert => (h(AlertElement, { key: alert.alertId, id: alert.alertId, alertId: alert.alertId, visible: alert.visible, heading: alert.heading, message: alert.message, color: alert.color, duration: alert.duration, closable: alert.closable, closeHandler: () => alert.closeHandler(alert.alertId), action: alert.action, actionIcon: alert.actionIcon, actionTarget: alert.actionTarget, actionHref: alert.actionHref, actionHandler: () => alert.actionHandler(alert.alertId), onDsCloseClick: () => this.removeAlert(alert.alertId), onDsDidLoad: () => this.present(alert.alertId), onDsDidPause: () => {
                 this.alertTimers[alert.alertId] && this.alertTimers[alert.alertId].pause();
             }, onDsDidResume: () => {
                 this.alertTimers[alert.alertId] && this.alertTimers[alert.alertId].resume();
@@ -171,7 +167,7 @@ export class AlertContainer {
                 "mutable": false,
                 "complexType": {
                     "original": "AlertContainerSize",
-                    "resolved": "\"\" | \"blog-page\" | \"compact\" | \"detail-page\" | \"fluid\" | \"wide\"",
+                    "resolved": "\"blog-page\" | \"compact\" | \"detail-page\" | \"fluid\" | \"wide\" | undefined",
                     "references": {
                         "AlertContainerSize": {
                             "location": "import",
@@ -182,7 +178,7 @@ export class AlertContainer {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Defines the container size constraint for the alert layout."
@@ -190,8 +186,7 @@ export class AlertContainer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "container",
-                "defaultValue": "''"
+                "attribute": "container"
             },
             "type": {
                 "type": "string",

package/dist/collection/components/alert/snackbar/snackbar.host.css

@@ -1 +1 @@
-:host{--_snackbar-position: var(--snackbar-position, var(--mod-snackbar-position, static));--_snackbar-top: var(--snackbar-top, var(--mod-snackbar-top));--_snackbar-right: var(--snackbar-right, var(--mod-snackbar-right));--_snackbar-bottom: var(--snackbar-bottom, var(--mod-snackbar-bottom));--_snackbar-left: var(--snackbar-left, var(--mod-snackbar-left));position:var(--_snackbar-position);top:var(--_snackbar-top);right:var(--_snackbar-right);bottom:var(--_snackbar-bottom);left:var(--_snackbar-left);--_snackbar-m: var(--snackbar-m, var(--mod-snackbar-m, 0));--_snackbar-my: var(--snackbar-my, var(--mod-snackbar-my));--_snackbar-mx: var(--snackbar-mx, var(--mod-snackbar-mx));--_snackbar-ml: var(--snackbar-ml, var(--mod-snackbar-ml));--_snackbar-mr: var(--snackbar-mr, var(--mod-snackbar-mr));--_snackbar-mt: var(--snackbar-mt, var(--mod-snackbar-mt));--_snackbar-mb: var(--snackbar-mb, var(--mod-snackbar-mb));margin:var(--_snackbar-m);margin-inline:var(--_snackbar-mx);margin-block:var(--_snackbar-my);margin-left:var(--_snackbar-ml);margin-right:var(--_snackbar-mr);margin-top:var(--_snackbar-mt);margin-bottom:var(--_snackbar-mb);--_snackbar-shadow: var(--snackbar-shadow, var(--mod-snackbar-shadow, var(--ds-alias-shadow-box-base)));--_snackbar-radius: var(--snackbar-radius, var(--mod-snackbar-radius, var(--ds-snackbar-radius)));--_snackbar-bg: var(--snackbar-bg, var(--mod-snackbar-bg, var(--ds-snackbar-primary-color-bg-base)));--_snackbar-color: var(--snackbar-color, var(--mod-snackbar-color, var(--ds-snackbar-primary-color-text-base)));--_snackbar-icon-color: var(--snackbar-icon-color, var(--mod-snackbar-icon-color, var(--ds-snackbar-primary-color-icon-base)));--_snackbar-progress-duration: var(--snackbar-progress-duration, var(--mod-snackbar-progress-duration, 0));--_snackbar-progress-bar-bg: var(--snackbar-progress-bar-bg, var(--mod-snackbar-progress-bar-bg, var(--ds-snackbar-primary-color-progress-bar-base)));--_snackbar-progress-bg: var(--snackbar-progress-bg, var(--mod-snackbar-progress-bg, var(--ds-snackbar-primary-color-progress-bg-base)));--_snackbar-heading-font-family: var(--snackbar-heading-font-family, var(--mod-snackbar-heading-font-family, var(--ds-alias-text-family-heading)));--_snackbar-heading-font-weight: var(--snackbar-heading-font-weight, var(--mod-snackbar-heading-font-weight, var(--ds-alias-text-weight-bold)));--_snackbar-heading-font-size: var(--snackbar-heading-font-size, var(--mod-snackbar-heading-font-size, var(--ds-alias-text-size-base-device)));--_snackbar-heading-line-height: var(--snackbar-heading-line-height, var(--mod-snackbar-heading-line-height, var(--ds-alias-text-line-height-heading)));--_snackbar-content-font-family: var(--snackbar-content-font-family, var(--mod-snackbar-content-font-family, var(--ds-alias-text-family-body)));--_snackbar-content-font-weight: var(--snackbar-content-font-weight, var(--mod-snackbar-content-font-weight, inherit));--_snackbar-content-font-size: var(--snackbar-content-font-size, var(--mod-snackbar-content-font-size, var(--ds-alias-text-size-sm-device)));--_snackbar-content-line-height: var(--snackbar-content-line-height, var(--mod-snackbar-content-line-height, var(--ds-alias-text-line-height-body)));--_snackbar-gap: var(--snackbar-gap, var(--mod-snackbar-gap, 0.125rem));--_snackbar-p: var(--snackbar-p, var(--mod-snackbar-p, 1rem));--_snackbar-animation-start-opacity: var(--snackbar-animation-start-opacity, var(--mod-snackbar-animation-start-opacity, 1));--_snackbar-animation-start-transform: var(--snackbar-animation-start-transform, var(--mod-snackbar-animation-start-transform, none));--_snackbar-animation-transition: var(--snackbar-animation-transition, var(--mod-snackbar-animation-transition, none));--_snackbar-animation-end-opacity: var(--snackbar-animation-end-opacity, var(--mod-snackbar-animation-end-opacity, 1));--_snackbar-animation-end-transform: var(--snackbar-animation-end-transform, var(--mod-snackbar-animation-end-transform, none))}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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}@media print{:host{display:none !important}}:host{opacity:var(--_snackbar-animation-start-opacity);transform:var(--_snackbar-animation-start-transform);flex:1;position:relative;hyphens:auto;color:var(--_snackbar-color);background:var(--_snackbar-bg);border-radius:var(--_snackbar-radius);box-shadow:var(--_snackbar-shadow);padding:var(--_snackbar-p);column-gap:calc(var(--_snackbar-gap)*4);row-gap:var(--_snackbar-gap);align-items:center}:host #icon{grid-area:icon;align-self:flex-start}:host #content{margin:0 !important;grid-area:content;display:flex;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_snackbar-heading-font-family);font-weight:var(--_snackbar-heading-font-weight);line-height:var(--_snackbar-heading-line-height);font-size:var(--_snackbar-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_snackbar-content-font-family);font-size:var(--_snackbar-content-font-size);font-weight:var(--_snackbar-content-font-weight);line-height:var(--_snackbar-content-line-height)}:host #action{grid-area:action;align-self:center}:host #action ds-close,:host #action ds-button,:host #action .button{--button-mt: 1rem;--button-font-size: var(--ds-button-size-sm);--button-min-height: 2rem;--button-min-width: 2rem;--button-padding-inline: 0.75rem}:host ::slotted(ds-button),:host ::slotted(ds-close),:host ::slotted(ds-button-group){--button-mt: 1rem;--button-font-size: var(--ds-button-size-sm);--button-min-height: 2rem;--button-min-width: 2rem;--button-padding-inline: 0.75rem}:host .close,:host ds-close{grid-area:close;align-self:flex-start}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content" ". action"}:host(.is-closable){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close" ". action action"}:host(.is-mobile-closed){display:block;max-width:fit-content;--mod-snackbar-p: 0;--mod-snackbar-bg: transparent;--mod-snackbar-width: fit-content}:host(.is-mobile-closed) #icon,:host(.is-mobile-closed) #content,:host(.is-mobile-closed) #action{display:none}:host(.is-ready){transition:var(--_snackbar-animation-transition)}:host(.is-visible){opacity:var(--_snackbar-animation-end-opacity);transform:var(--_snackbar-animation-end-transform)}:host(.has-progess-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_snackbar-progress-bg);border-bottom-left-radius:var(--_snackbar-radius);border-bottom-right-radius:var(--_snackbar-radius)}:host(.has-progess-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_snackbar-progress-bar-bg);border-bottom-left-radius:var(--_snackbar-radius);animation:progress var(--_snackbar-progress-duration) linear forwards}:host(.is-info){--mod-snackbar-color: var(--ds-snackbar-info-color-text-base);--mod-snackbar-border-color: var(--ds-snackbar-info-color-border-base);--mod-snackbar-bg: var(--ds-snackbar-info-color-bg-base);--mod-snackbar-icon-color: var(--ds-snackbar-info-color-icon-base);--mod-snackbar-progress-bar-bg: var(--ds-snackbar-info-color-progress-bar-base);--mod-snackbar-progress-bg: var(--ds-snackbar-info-color-progress-bg-base)}:host(.is-success){--mod-snackbar-color: var(--ds-snackbar-success-color-text-base);--mod-snackbar-border-color: var(--ds-snackbar-success-color-border-base);--mod-snackbar-bg: var(--ds-snackbar-success-color-bg-base);--mod-snackbar-icon-color: var(--ds-snackbar-success-color-icon-base);--mod-snackbar-progress-bar-bg: var(--ds-snackbar-success-color-progress-bar-base);--mod-snackbar-progress-bg: var(--ds-snackbar-success-color-progress-bg-base)}:host(.is-warning){--mod-snackbar-color: var(--ds-snackbar-warning-color-text-base);--mod-snackbar-border-color: var(--ds-snackbar-warning-color-border-base);--mod-snackbar-bg: var(--ds-snackbar-warning-color-bg-base);--mod-snackbar-icon-color: var(--ds-snackbar-warning-color-icon-base);--mod-snackbar-progress-bar-bg: var(--ds-snackbar-warning-color-progress-bar-base);--mod-snackbar-progress-bg: var(--ds-snackbar-warning-color-progress-bg-base)}:host(.is-danger){--mod-snackbar-color: var(--ds-snackbar-danger-color-text-base);--mod-snackbar-border-color: var(--ds-snackbar-danger-color-border-base);--mod-snackbar-bg: var(--ds-snackbar-danger-color-bg-base);--mod-snackbar-icon-color: var(--ds-snackbar-danger-color-icon-base);--mod-snackbar-progress-bar-bg: var(--ds-snackbar-danger-color-progress-bar-base);--mod-snackbar-progress-bg: var(--ds-snackbar-danger-color-progress-bg-base)}:host(.has-progess-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_snackbar-progress-bar-bg);border-bottom-left-radius:var(--_snackbar-radius);animation:progress var(--_snackbar-progress-duration) linear forwards}:host(.is-paused)::after{animation-play-state:paused}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_snackbar-radius)}}
+:host{--_snackbar-position: var(--snackbar-position, var(--mod-snackbar-position, static));--_snackbar-top: var(--snackbar-top, var(--mod-snackbar-top));--_snackbar-right: var(--snackbar-right, var(--mod-snackbar-right));--_snackbar-bottom: var(--snackbar-bottom, var(--mod-snackbar-bottom));--_snackbar-left: var(--snackbar-left, var(--mod-snackbar-left));position:var(--_snackbar-position);top:var(--_snackbar-top);right:var(--_snackbar-right);bottom:var(--_snackbar-bottom);left:var(--_snackbar-left);--_snackbar-m: var(--snackbar-m, var(--mod-snackbar-m, 0));--_snackbar-my: var(--snackbar-my, var(--mod-snackbar-my));--_snackbar-mx: var(--snackbar-mx, var(--mod-snackbar-mx));--_snackbar-ml: var(--snackbar-ml, var(--mod-snackbar-ml));--_snackbar-mr: var(--snackbar-mr, var(--mod-snackbar-mr));--_snackbar-mt: var(--snackbar-mt, var(--mod-snackbar-mt));--_snackbar-mb: var(--snackbar-mb, var(--mod-snackbar-mb));margin:var(--_snackbar-m);margin-inline:var(--_snackbar-mx);margin-block:var(--_snackbar-my);margin-left:var(--_snackbar-ml);margin-right:var(--_snackbar-mr);margin-top:var(--_snackbar-mt);margin-bottom:var(--_snackbar-mb);--_snackbar-shadow: var(--snackbar-shadow, var(--mod-snackbar-shadow, var(--ds-alias-shadow-box-base)));--_snackbar-radius: var(--snackbar-radius, var(--mod-snackbar-radius, var(--ds-snackbar-radius)));--_snackbar-bg: var(--snackbar-bg, var(--mod-snackbar-bg, var(--ds-snackbar-primary-color-background-base)));--_snackbar-color: var(--snackbar-color, var(--mod-snackbar-color, var(--ds-snackbar-primary-color-text-base)));--_snackbar-icon-color: var(--snackbar-icon-color, var(--mod-snackbar-icon-color, var(--ds-snackbar-primary-color-icon-base)));--_snackbar-progress-duration: var(--snackbar-progress-duration, var(--mod-snackbar-progress-duration, 0));--_snackbar-progress-bar-bg: var(--snackbar-progress-bar-bg, var(--mod-snackbar-progress-bar-bg, var(--ds-snackbar-primary-color-progress-bar-base)));--_snackbar-progress-bg: var(--snackbar-progress-bg, var(--mod-snackbar-progress-bg, var(--ds-snackbar-primary-color-progress-background-base)));--_snackbar-heading-font-family: var(--snackbar-heading-font-family, var(--mod-snackbar-heading-font-family, var(--ds-alias-text-family-heading)));--_snackbar-heading-font-weight: var(--snackbar-heading-font-weight, var(--mod-snackbar-heading-font-weight, var(--ds-alias-text-weight-bold)));--_snackbar-heading-font-size: var(--snackbar-heading-font-size, var(--mod-snackbar-heading-font-size, var(--ds-alias-text-size-base-device)));--_snackbar-heading-line-height: var(--snackbar-heading-line-height, var(--mod-snackbar-heading-line-height, var(--ds-alias-text-line-height-heading)));--_snackbar-content-font-family: var(--snackbar-content-font-family, var(--mod-snackbar-content-font-family, var(--ds-alias-text-family-body)));--_snackbar-content-font-weight: var(--snackbar-content-font-weight, var(--mod-snackbar-content-font-weight, inherit));--_snackbar-content-font-size: var(--snackbar-content-font-size, var(--mod-snackbar-content-font-size, var(--ds-alias-text-size-sm-device)));--_snackbar-content-line-height: var(--snackbar-content-line-height, var(--mod-snackbar-content-line-height, var(--ds-alias-text-line-height-body)));--_snackbar-gap: var(--snackbar-gap, var(--mod-snackbar-gap, 0.125rem));--_snackbar-p: var(--snackbar-p, var(--mod-snackbar-p, 1rem));--_snackbar-animation-start-opacity: var(--snackbar-animation-start-opacity, var(--mod-snackbar-animation-start-opacity, 1));--_snackbar-animation-start-transform: var(--snackbar-animation-start-transform, var(--mod-snackbar-animation-start-transform, none));--_snackbar-animation-transition: var(--snackbar-animation-transition, var(--mod-snackbar-animation-transition, none));--_snackbar-animation-end-opacity: var(--snackbar-animation-end-opacity, var(--mod-snackbar-animation-end-opacity, 1));--_snackbar-animation-end-transform: var(--snackbar-animation-end-transform, var(--mod-snackbar-animation-end-transform, none))}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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}@media print{:host{display:none !important}}:host{opacity:var(--_snackbar-animation-start-opacity);transform:var(--_snackbar-animation-start-transform);flex:1;position:relative;hyphens:auto;color:var(--_snackbar-color);background:var(--_snackbar-bg);border-radius:var(--_snackbar-radius);box-shadow:var(--_snackbar-shadow);padding:var(--_snackbar-p);column-gap:calc(var(--_snackbar-gap)*4);row-gap:var(--_snackbar-gap);align-items:center}:host #icon{grid-area:icon;align-self:flex-start}:host #content{margin:0 !important;grid-area:content;display:flex;flex-direction:column}:host #content>strong,:host #content>b,:host #content>h2{font-family:var(--_snackbar-heading-font-family);font-weight:var(--_snackbar-heading-font-weight);line-height:var(--_snackbar-heading-line-height);font-size:var(--_snackbar-heading-font-size);margin:0 !important}:host #content,:host #content>span,:host #content>p{font-family:var(--_snackbar-content-font-family);font-size:var(--_snackbar-content-font-size);font-weight:var(--_snackbar-content-font-weight);line-height:var(--_snackbar-content-line-height)}:host #action{grid-area:action;align-self:center}:host #action ds-close,:host #action ds-button,:host #action .button{--button-mt: 1rem;--button-font-size: var(--ds-button-size-sm);--button-min-height: 2rem;--button-min-width: 2rem;--button-padding-inline: 0.75rem}:host ::slotted(ds-button),:host ::slotted(ds-close),:host ::slotted(ds-button-group){--button-mt: 1rem;--button-font-size: var(--ds-button-size-sm);--button-min-height: 2rem;--button-min-width: 2rem;--button-padding-inline: 0.75rem}:host .close,:host ds-close{grid-area:close;align-self:flex-start}:host{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon content" ". action"}:host(.is-closable){grid-template-columns:auto 1fr auto;grid-template-areas:"icon content close" ". action action"}:host(.is-mobile-closed){display:block;max-width:fit-content;--mod-snackbar-p: 0;--mod-snackbar-bg: transparent;--mod-snackbar-width: fit-content}:host(.is-mobile-closed) #icon,:host(.is-mobile-closed) #content,:host(.is-mobile-closed) #action{display:none}:host(.is-ready){transition:var(--_snackbar-animation-transition)}:host(.is-visible){opacity:var(--_snackbar-animation-end-opacity);transform:var(--_snackbar-animation-end-transform)}:host(.has-progess-bar)::before{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:100%;content:"";background-color:var(--_snackbar-progress-bg);border-bottom-left-radius:var(--_snackbar-radius);border-bottom-right-radius:var(--_snackbar-radius)}:host(.has-progess-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_snackbar-progress-bar-bg);border-bottom-left-radius:var(--_snackbar-radius);animation:progress var(--_snackbar-progress-duration) linear forwards}:host(.is-info){--mod-snackbar-color: var(--ds-snackbar-info-color-text-base);--mod-snackbar-border-color: var(--ds-snackbar-info-color-border-base);--mod-snackbar-bg: var(--ds-snackbar-info-color-background-base);--mod-snackbar-icon-color: var(--ds-snackbar-info-color-icon-base);--mod-snackbar-progress-bar-bg: var(--ds-snackbar-info-color-progress-bar-base);--mod-snackbar-progress-bg: var(--ds-snackbar-info-color-progress-background-base)}:host(.is-success){--mod-snackbar-color: var(--ds-snackbar-success-color-text-base);--mod-snackbar-border-color: var(--ds-snackbar-success-color-border-base);--mod-snackbar-bg: var(--ds-snackbar-success-color-background-base);--mod-snackbar-icon-color: var(--ds-snackbar-success-color-icon-base);--mod-snackbar-progress-bar-bg: var(--ds-snackbar-success-color-progress-bar-base);--mod-snackbar-progress-bg: var(--ds-snackbar-success-color-progress-background-base)}:host(.is-warning){--mod-snackbar-color: var(--ds-snackbar-warning-color-text-base);--mod-snackbar-border-color: var(--ds-snackbar-warning-color-border-base);--mod-snackbar-bg: var(--ds-snackbar-warning-color-background-base);--mod-snackbar-icon-color: var(--ds-snackbar-warning-color-icon-base);--mod-snackbar-progress-bar-bg: var(--ds-snackbar-warning-color-progress-bar-base);--mod-snackbar-progress-bg: var(--ds-snackbar-warning-color-progress-background-base)}:host(.is-danger){--mod-snackbar-color: var(--ds-snackbar-danger-color-text-base);--mod-snackbar-border-color: var(--ds-snackbar-danger-color-border-base);--mod-snackbar-bg: var(--ds-snackbar-danger-color-background-base);--mod-snackbar-icon-color: var(--ds-snackbar-danger-color-icon-base);--mod-snackbar-progress-bar-bg: var(--ds-snackbar-danger-color-progress-bar-base);--mod-snackbar-progress-bg: var(--ds-snackbar-danger-color-progress-background-base)}:host(.has-progess-bar)::after{display:block;position:absolute;bottom:0;left:0;height:.25rem;width:16px;content:"";background-color:var(--_snackbar-progress-bar-bg);border-bottom-left-radius:var(--_snackbar-radius);animation:progress var(--_snackbar-progress-duration) linear forwards}:host(.is-paused)::after{animation-play-state:paused}@keyframes progress{0%{width:0}99%{width:99%}100%{width:100%;border-bottom-right-radius:var(--_snackbar-radius)}}