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

package/dist/design-system/p-bec54c38fc.entry.js

@@ -0,0 +1,4 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import{B as i,I as o,E as t,F as n,G as a}from"./p-MUUOiuTm.js";import{_ as c,L as r,a as e}from"./p-_rk5qARQ.js";import{s}from"./p-DuKlHFAK.js";import{h as f}from"./p-6Iq8BM7N.js";import{n as d}from"./p-DR5LIaCn.js";import{T as l}from"./p-B9ddSbbe.js";import{O as m}from"./p-_Ywzmi-B.js";import"./p-BjaiDrCD.js";const v=class{constructor(t){i(this,t),this.dsCloseClick=o(this,"dsCloseClick"),this.dsDidLoad=o(this,"dsDidLoad"),this.didLoad=!1,this.alert=!1,this.closable=!1,this.closeHandler=()=>{},this.heading="",this.noIcon=!1}createLogger(i){this.log=i}componentDidLoad(){this.didLoad=!0,this.dsDidLoad.emit()}async close(){this.dsCloseClick.emit(),this.closeHandler()}render(){const i=d(this.size)||"";return t(n,Object.assign({key:"c3dfeb924f2eff0258b2e3e8d191066e606c1717"},this.alert?{role:"alert","aria-live":"assertive","aria-atomic":"true"}:{role:"status","aria-live":"polite","aria-atomic":"true"},{class:{"has-no-icon":this.noIcon,[`is-${this.color}`]:f(this.color),[`is-${i}`]:f(this.size)}}),t("section",{key:"bb25cab8e27de885d570db0a6255f8dbab2d94fe",id:"notification",part:"section"},this.closable&&t("ds-close",{key:"2c3468c64ca1b011d63815e65f466b308d3bb624",part:"close",onClick:i=>{s(i),this.close()}}),f(this.heading)&&t("h2",{key:"69c9eccaf9154cfd398564d1a915dab0afbc1033",part:"heading"},this.heading),t("span",{key:"f8f3a07f74a2ae6a4ac1b4ff026f8a794b236c5d"},t("slot",{key:"05feb23000c982c3d90778b1eae1180b5ebd1add"}))))}get el(){return a(this)}};c([r("notification"),e("design:type",Function),e("design:paramtypes",[Function]),e("design:returntype",void 0)],v.prototype,"createLogger",null),c([l("boolean"),e("design:type",Boolean)],v.prototype,"alert",void 0),c([l("boolean"),e("design:type",Boolean)],v.prototype,"closable",void 0),c([m(["base","info","success","warning","danger","outline-base","outline-purple","outline-green","outline-yellow","outline-red"]),e("design:type",String)],v.prototype,"color",void 0),c([l("string"),e("design:type",String)],v.prototype,"heading",void 0),c([l("boolean"),e("design:type",Boolean)],v.prototype,"noIcon",void 0),c([m(["sm","md","lg","small","medium","large"]),e("design:type",String)],v.prototype,"size",void 0),v.style=':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}';export{v as ds_notification}

package/dist/design-system/p-c8f95bd01a.entry.js

@@ -0,0 +1,4 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import{B as s,I as e,E as t,F as o,G as r}from"./p-MUUOiuTm.js";import{_ as l,L as c,a as i}from"./p-_rk5qARQ.js";import{s as p}from"./p-DuKlHFAK.js";import{O as a}from"./p-_Ywzmi-B.js";import{T as d}from"./p-B9ddSbbe.js";import"./p-BjaiDrCD.js";const n=class{constructor(t){s(this,t),this.dsChange=e(this,"dsChange"),this.color="",this.label="",this.vertical=!1,this.handleKeyDown=s=>{var e,t,o,r;if(this.isNavigation())return;const l=this.getSteps().filter((s=>!s.disabled&&!s.hidden)),c=l.findIndex((s=>s.name===this.value)),i=this.vertical?"ArrowDown"===s.key:"ArrowRight"===s.key,p=this.vertical?"ArrowUp"===s.key:"ArrowLeft"===s.key;"Home"===s.key?(s.preventDefault(),this.activateStep(null===(e=l[0])||void 0===e?void 0:e.name)):"End"===s.key?(s.preventDefault(),this.activateStep(null===(t=l[l.length-1])||void 0===t?void 0:t.name)):i?(s.preventDefault(),this.activateStep(null===(o=l[(c+1)%l.length])||void 0===o?void 0:o.name)):p&&(s.preventDefault(),this.activateStep(null===(r=l[(c-1+l.length)%l.length])||void 0===r?void 0:r.name))},this.handleSlotChange=()=>{this.setup()}}createLogger(s){this.log=s}componentDidLoad(){this.setup()}componentDidUpdate(){this.updateChildren()}listenToDsStepSelect(s){p(s),this.activateStep(s.detail.name)}getSteps(){return Array.from(this.el.querySelectorAll(":scope > ds-step"))}getPanels(){return Array.from(this.el.querySelectorAll(":scope > ds-step-panel"))}isNavigation(){return 0===this.getPanels().length}setup(){const s=this.getSteps(),e=this.getPanels(),t=this.isNavigation();let o=0;if(s.forEach((s=>{if(s.slot="step",s.navigation=t,s.vertical=this.vertical,s.hidden?s.index=0:(o++,s.index=o),!t&&s.name){s.id||(s.id="ds-step-"+v++);const t=e.find((e=>e.for===s.name));t&&(t.id||(t.id="ds-step-panel-"+v++),s.setAttribute("aria-controls",t.id),t.setAttribute("aria-labelledby",s.id))}})),!t&&!this.value){const e=s.find((s=>!s.hidden&&!s.disabled));e&&(this.value=e.name)}this.updateChildren()}updateChildren(){const s=this.isNavigation(),e=this.getSteps(),t=this.getPanels(),o=this.value,r=e.find((s=>s.name===o)),l=r?r.index:0;e.forEach((e=>{e.navigation=s,e.vertical=this.vertical,e.selected=s?!!e.querySelector("[aria-current]"):e.name===o,e.activeIndex=l})),t.forEach((s=>{s.selected=s.for===o}))}activateStep(s){if(s===this.value)return;const e=this.getSteps().find((e=>e.name===s));(null==e?void 0:e.disabled)||(this.value=s,this.dsChange.emit({value:s}),this.focusSelectedStep())}focusSelectedStep(){const s=this.getSteps().find((s=>s.name===this.value));null==s||s.focus()}render(){const s=this.isNavigation(),e=s=>{s&&(this.steplistEl=s)};return t(o,{class:{"is-vertical":this.vertical,"is-navigation":s,"is-purple":"purple"===this.color,"is-green":"green"===this.color,"is-red":"red"===this.color,"is-yellow":"yellow"===this.color}},s?t("nav",{"aria-label":this.label||void 0},t("ol",{id:"steplist",part:"steplist",ref:e},t("slot",{name:"step",onSlotchange:this.handleSlotChange}))):t("div",{id:"steplist",part:"steplist",role:"tablist","aria-orientation":this.vertical?"vertical":void 0,onKeyDown:this.handleKeyDown,ref:e},t("slot",{name:"step",onSlotchange:this.handleSlotChange})),t("slot",{onSlotchange:this.handleSlotChange}))}get el(){return r(this)}};l([c("steps"),i("design:type",Function),i("design:paramtypes",[Function]),i("design:returntype",void 0)],n.prototype,"createLogger",null),l([a(["","purple","green","red","yellow"]),i("design:type",String)],n.prototype,"color",void 0),l([d("string"),i("design:type",String)],n.prototype,"label",void 0),l([d("string"),i("design:type",Object)],n.prototype,"value",void 0),l([d("boolean"),i("design:type",Boolean)],n.prototype,"vertical",void 0);let v=0;n.style=':host{--_steps-connector-color:var(--steps-connector-color, var(--mod-steps-connector-color, var(--ds-steps-connector-color)));--_steps-connector-color-filled:var(--steps-connector-color-filled, var(--mod-steps-connector-color-filled, var(--ds-steps-connector-color-filled)));--_steps-connector-height:var(--steps-connector-height, var(--mod-steps-connector-height, var(--ds-steps-connector-height)));--_steps-circle-size:var(--steps-circle-size, var(--mod-steps-circle-size, var(--ds-steps-circle-size)));--_steps-circle-size-sm:var(--steps-circle-size-sm, var(--mod-steps-circle-size-sm, var(--ds-steps-circle-size-sm)));--_steps-circle-color-bg:var(--steps-circle-color-bg, var(--mod-steps-circle-color-bg, var(--ds-steps-circle-color-bg)));--_steps-circle-color-bg-selected:var(--steps-circle-color-bg-selected, var(--mod-steps-circle-color-bg-selected, var(--ds-steps-circle-color-bg-selected)));--_steps-circle-color-bg-done:var(--steps-circle-color-bg-done, var(--mod-steps-circle-color-bg-done, var(--ds-steps-circle-color-bg-done)));--_steps-circle-color-bg-invalid:var(--steps-circle-color-bg-invalid, var(--mod-steps-circle-color-bg-invalid, var(--ds-steps-circle-color-bg-invalid)));--_steps-circle-color-bg-disabled:var(--steps-circle-color-bg-disabled, var(--mod-steps-circle-color-bg-disabled, var(--ds-steps-circle-color-bg-disabled)));--_steps-circle-color-text:var(--steps-circle-color-text, var(--mod-steps-circle-color-text, var(--ds-steps-circle-color-text)));--_steps-circle-color-text-selected:var(--steps-circle-color-text-selected, var(--mod-steps-circle-color-text-selected, var(--ds-steps-circle-color-text-selected)));--_steps-circle-color-text-done:var(--steps-circle-color-text-done, var(--mod-steps-circle-color-text-done, var(--ds-steps-circle-color-text-done)));--_steps-circle-color-text-invalid:var(--steps-circle-color-text-invalid, var(--mod-steps-circle-color-text-invalid, var(--ds-steps-circle-color-text-invalid)));--_steps-circle-color-text-disabled:var(--steps-circle-color-text-disabled, var(--mod-steps-circle-color-text-disabled, var(--ds-steps-circle-color-text-disabled)));--_steps-step-font-family:var(--steps-step-font-family, var(--mod-steps-step-font-family, var(--ds-steps-step-font-family)));--_steps-step-font-size:var(--steps-step-font-size, var(--mod-steps-step-font-size, var(--ds-steps-step-font-size)));--_steps-step-font-size-sm:var(--steps-step-font-size-sm, var(--mod-steps-step-font-size-sm, var(--ds-steps-step-font-size-sm)));--_steps-step-font-weight:var(--steps-step-font-weight, var(--mod-steps-step-font-weight, var(--ds-steps-step-font-weight)));--_steps-step-color:var(--steps-step-color, var(--mod-steps-step-color, var(--ds-steps-step-color-base)));--_steps-step-color-selected:var(--steps-step-color-selected, var(--mod-steps-step-color-selected, var(--ds-steps-step-color-selected)));--_steps-step-color-focus:var(--steps-step-color-focus, var(--mod-steps-step-color-focus, var(--ds-steps-step-color-focus)));--_steps-panel-padding:var(--steps-panel-padding, var(--mod-steps-panel-padding, var(--ds-steps-panel-padding)));--_steps-color-purple:var(--steps-color-purple, var(--mod-steps-color-purple, var(--ds-steps-color-purple)));--_steps-color-green:var(--steps-color-green, var(--mod-steps-color-green, var(--ds-steps-color-green)));--_steps-color-red:var(--steps-color-red, var(--mod-steps-color-red, var(--ds-steps-color-red)));--_steps-color-yellow:var(--steps-color-yellow, var(--mod-steps-color-yellow, var(--ds-steps-color-yellow)));display:block}:host(.is-purple){--_steps-connector-color:var(--_steps-color-purple);--_steps-circle-color-bg:var(--_steps-color-purple);--_steps-circle-color-bg-disabled:var(--_steps-color-purple)}:host(.is-green){--_steps-connector-color:var(--_steps-color-green);--_steps-circle-color-bg:var(--_steps-color-green);--_steps-circle-color-bg-disabled:var(--_steps-color-green)}:host(.is-red){--_steps-connector-color:var(--_steps-color-red);--_steps-circle-color-bg:var(--_steps-color-red);--_steps-circle-color-bg-disabled:var(--_steps-color-red)}:host(.is-yellow){--_steps-connector-color:var(--_steps-color-yellow);--_steps-circle-color-bg:var(--_steps-color-yellow);--_steps-circle-color-bg-disabled:var(--_steps-color-yellow)}:host #steplist{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:start;align-items:flex-start;width:100%}:host(.is-navigation) nav,:host(.is-navigation) ol{display:contents}:host ::slotted(ds-step-panel){--step-panel-padding:var(--_steps-panel-padding)}:host(.is-vertical) #steplist{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;position:relative}:host(.is-vertical) #steplist::before{content:"";position:absolute;left:calc(var(--_steps-circle-size)/2);-webkit-transform:translateX(-50%);transform:translateX(-50%);top:calc(var(--_steps-circle-size)/2);bottom:calc(var(--_steps-circle-size)/2);width:var(--_steps-connector-height);background-color:var(--_steps-connector-color);z-index:0}@media screen and (max-width: 768px){:host(.is-vertical) #steplist::before{left:calc(var(--_steps-circle-size-sm)/2);top:calc(var(--_steps-circle-size-sm)/2);bottom:calc(var(--_steps-circle-size-sm)/2)}}';export{n as ds_steps}

package/dist/esm/ds-alert-container.entry.js

@@ -31,7 +31,7 @@ function createPausableTimer(callback, delay) {
 }
 
 const ALERT_TYPES = ['toast', 'snackbar'];
-const ALERT_CONTAINER_SIZES = ['', 'fluid', 'detail-page', 'compact', 'blog-page', 'wide'];
+const ALERT_CONTAINER_SIZES = ['fluid', 'detail-page', 'compact', 'blog-page', 'wide'];
 
 const alertContainerHostCss = () => `.container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;padding-left:var(--ds-alias-container-space-device);padding-right:var(--ds-alias-container-space-device)}@media screen and (min-width: 1024px){.container{max-width:var(--ds-alias-container-width-base)}}.container.is-fluid{max-width:var(--ds-alias-container-width-fluid) !important}.container.is-compact{max-width:var(--ds-alias-container-width-compact) !important}:host{--alert-container-top:1rem;position:fixed;pointer-events:none}:host #wrapper{display:-ms-flexbox;display:flex;gap:.5rem}:host(.is-toast){z-index:var(--ds-alias-z-index-toast);top:var(--alert-container-top);left:0;right:0;width:100%}:host(.is-toast) #wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}:host(.is-toast) #wrapper ds-toast{pointer-events:auto;width:100%;--toast-animation-start-opacity:0;--toast-animation-start-transform:translateY(-120%);--toast-animation-transition:transform 300ms ease, opacity 300ms ease;--toast-animation-end-opacity:1;--toast-animation-end-transform:translateY(0)}:host(.is-snackbar){z-index:calc(var(--ds-alias-z-index-toast) - 1);right:1rem;bottom:1rem;left:1rem}:host(.is-snackbar) #wrapper{-ms-flex-direction:column-reverse;flex-direction:column-reverse;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:end;align-items:flex-end}:host(.is-snackbar) #wrapper ds-snackbar{pointer-events:auto;width:100%;--snackbar-animation-start-opacity:0;--snackbar-animation-start-transform:translateX(120%);--snackbar-animation-transition:transform 300ms ease, opacity 300ms ease;--snackbar-animation-end-opacity:1;--snackbar-animation-end-transform:translateX(0)}@media screen and (min-width: 769px){:host(.is-snackbar) #wrapper ds-snackbar{min-width:27.5rem;max-width:27.5rem;width:27.5rem}}`;
 
@@ -44,16 +44,12 @@ const AlertContainer = class {
         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).
          */
@@ -64,7 +60,7 @@ const AlertContainer = class {
     }
     /**
      * PUBLIC METHODS
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     /**
      * Adds an alert to the queue and returns its generated ID.
@@ -99,7 +95,7 @@ const AlertContainer = class {
     }
     /**
      * PRIVATE METHODS
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     activeTimer(id, duration) {
         if (duration !== 'infinite') {
@@ -146,15 +142,15 @@ const AlertContainer = class {
     }
     /**
      * 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();

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

@@ -10,9 +10,8 @@ import { T as Type } from './type-Bqge296W.js';
 import { O as OneOf } from './one-of-rLykP5eX.js';
 import './create-validator-decorator-g9TfAa1g.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',
@@ -25,7 +24,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) {
@@ -35,7 +34,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.
@@ -49,11 +48,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.
          */
@@ -68,7 +62,7 @@ const Notification = class {
     }
     /**
      * LIFECYCLE
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     componentDidLoad() {
         this.didLoad = true;
@@ -76,7 +70,7 @@ const Notification = class {
     }
     /**
      * PUBLIC METHODS
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     /**
      * Closes this notification
@@ -87,21 +81,21 @@ const Notification = class {
     }
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render() {
         const size = normalizeDeprecatedTShirtSize(this.size) || '';
         const a11yAttributes = this.alert
             ? { 'role': 'alert', 'aria-live': 'assertive', 'aria-atomic': 'true' }
             : { 'role': 'status', 'aria-live': 'polite', 'aria-atomic': 'true' };
-        return (h(Host, Object.assign({ key: 'f3e829a86b22c64fe93b06b2664b398a7248d49f' }, a11yAttributes, { class: {
+        return (h(Host, Object.assign({ key: 'c3dfeb924f2eff0258b2e3e8d191066e606c1717' }, a11yAttributes, { class: {
                 'has-no-icon': this.noIcon,
                 [`is-${this.color}`]: hasValue(this.color),
                 [`is-${size}`]: hasValue(this.size),
-            } }), h("section", { key: 'f8ff4cdc8379ec73ac00a6654478a0039dd746f1', id: "notification", part: "section" }, this.closable && (h("ds-close", { key: 'f72f440db26de1ef40ca24ec9c9f06015ce31126', part: "close", onClick: ev => {
+            } }), h("section", { key: 'bb25cab8e27de885d570db0a6255f8dbab2d94fe', id: "notification", part: "section" }, this.closable && (h("ds-close", { key: '2c3468c64ca1b011d63815e65f466b308d3bb624', part: "close", onClick: ev => {
                 stopEventBubbling(ev);
                 this.close();
-            } })), hasValue(this.heading) && h("h2", { key: 'adae5186e4009153c2d93645bdf8ab49e4da9df7', part: "heading" }, this.heading), h("span", { key: '979fc05e46a6c9220826efeac704f87f23f9ce49' }, h("slot", { key: '88929c8c561498c89755da6bd6d36819a7e6d390' })))));
+            } })), hasValue(this.heading) && h("h2", { key: '69c9eccaf9154cfd398564d1a915dab0afbc1033', part: "heading" }, this.heading), h("span", { key: 'f8f3a07f74a2ae6a4ac1b4ff026f8a794b236c5d' }, h("slot", { key: '05feb23000c982c3d90778b1eae1180b5ebd1add' })))));
     }
     get el() { return getElement(this); }
 };

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

@@ -17,7 +17,7 @@ import './device-CtidwsPr.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) {
@@ -28,6 +28,10 @@ const Snackbar = class {
         this.isMobile = 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.
@@ -89,7 +93,7 @@ const Snackbar = class {
         this.actionHandler = () => void 0;
         /**
          * PRIVATE METHODS
-         * ------------------------------------------------------
+         * ─────────────────────────────────────────────────────
          */
         this.generateSvgContent = () => {
             if (hasValue(this.svg) && this.svg.length > 0) {
@@ -122,7 +126,7 @@ const Snackbar = class {
     }
     /**
      * LIFECYCLE
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     componentDidLoad() {
         raf(() => {
@@ -131,15 +135,15 @@ const Snackbar = class {
         });
     }
     /**
-     * LISTENERS
-     * ------------------------------------------------------
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
      */
     listenToBreakpoint(breakpoints) {
         this.isMobile = breakpoints.mobile;
     }
     /**
      * PUBLIC METHODS
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     /**
      * Closes this notification
@@ -150,27 +154,27 @@ const Snackbar = class {
     }
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render() {
         const iconName = this.generateIconName();
         const svgContent = this.generateSvgContent();
-        return (h(Host, { key: '66c571295c3931b071bb104e339febfac87db6df', role: "status", "aria-live": "polite", "aria-atomic": "true", class: {
+        return (h(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(this.color),
-            } }, this.isMobile && !this.mobileOpenState && (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 && (h("ds-icon", { key: 'a4c826d95d2041345bf4cee0540cb172f5336c79', part: "icon", id: "icon", name: iconName, color: this.color, size: 'xl', shape: this.color === 'warning'
+            } }, this.isMobile && !this.mobileOpenState && (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 && (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 && h("ds-icon", { key: 'cdb9be5a9499d7ffad58c8c2e5a9096963b67f69', id: "icon", part: "icon", svg: svgContent, size: 'xl' }), h("span", { key: '52810e3cb684318ce4fd8ec8be8529f63a8e8e8b', part: "content", id: "content" }, this.heading && h("h2", { key: '8ae2906a4ffabbc970c9c995c5d9efb0cc94fbc8', part: "heading" }, this.heading), h("span", { key: 'affd6a8d4ce4c19274a8c760f00f0a051bbae56e', part: "message" }, this.message, h("slot", { key: '75fd4ab26f8f6f8d1d89d2c1e0428b53bb3d75c5' }))), h("ds-button-group", { key: '0c644ee957e3a615e2c7fa030d537bea002e72ca', part: "action", id: "action" }, h("slot", { key: '840fb7d2be9fcf41ffa5b4eeff53d4a1b26d209a', name: "action" }), this.action && (h("ds-button", { key: '18d900d559bd085b5732ec37484622ee9da199ff', color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
+                    : undefined })), svgContent && h("ds-icon", { key: 'e9a0b074084f5952ef5eefcd9d434b6af15b6a5f', id: "icon", part: "icon", svg: svgContent, size: 'xl' }), h("span", { key: 'd65d767a79e0e8094d7ccb88f4902321b14b03be', part: "content", id: "content" }, this.heading && h("h2", { key: '463d2b5b335d804d572347e229b0b94f97f9b9b7', part: "heading" }, this.heading), h("span", { key: 'd964774c987ef6906bd76bb6982f16ad1c4f9e3a', part: "message" }, this.message, h("slot", { key: 'bacfa9ac71c53f0223fb0a62b6fc1fca526acd3a' }))), h("ds-button-group", { key: 'e83047c52b2dda1709df234871e3dbb3e3755c95', part: "action", id: "action" }, h("slot", { key: 'ea3fed1cdf6c5f73d459aa097c00a677ecfc33c7', name: "action" }), this.action && (h("ds-button", { key: 'eb1607a6468a84b66c03af8ef4772e877bf149d7', color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
                 stopEventBubbling(ev);
                 this.dsActionClick.emit(ev);
                 this.actionHandler(this.alertId);
-            } }, this.action)), this.closable && (h("ds-close", { key: 'd8c8c528cff2edbfac7a23488271c2071d5a84df', button: true, "button-color": "secondary", part: "close", size: "sm", onClick: ev => {
+            } }, this.action)), this.closable && (h("ds-close", { key: '7d9abbb81fc6fae5a78ca68d993e7376178aaa39', button: true, "button-color": "secondary", part: "close", size: "sm", onClick: ev => {
                 stopEventBubbling(ev);
                 this.close();
             } })))));
@@ -223,6 +227,14 @@ __decorate([
     Type('string'),
     __metadata("design:type", String)
 ], Snackbar.prototype, "actionHref", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Snackbar.prototype, "alertId", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Snackbar.prototype, "visible", void 0);
 __decorate([
     ListenToBreakpoints(),
     __metadata("design:type", Function),

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

@@ -138,14 +138,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/esm/ds-toast.entry.js

@@ -16,7 +16,7 @@ import './config.utils-Db2OSTX3.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) {
@@ -29,6 +29,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.
@@ -87,7 +91,7 @@ const Toast = class {
         this.actionHandler = () => void 0;
         /**
          * PRIVATE METHODS
-         * ------------------------------------------------------
+         * ─────────────────────────────────────────────────────
          */
         this.generateSvgContent = () => {
             if (hasValue(this.svg)) {
@@ -120,7 +124,7 @@ const Toast = class {
     }
     /**
      * LIFECYCLE
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     componentDidLoad() {
         raf(() => {
@@ -130,7 +134,7 @@ const Toast = class {
     }
     /**
      * PUBLIC METHODS
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     /**
      * Closes this notification
@@ -147,7 +151,7 @@ const Toast = class {
     }
     /**
      * RENDER
-     * ------------------------------------------------------
+     * ─────────────────────────────────────────────────────
      */
     render() {
         const iconName = this.generateIconName();
@@ -159,7 +163,7 @@ const Toast = class {
                 '--toast-progress-duration': `${this.duration}ms`,
             }
             : {};
-        return (h(Host, { key: 'f38cb2cdb7460f866c5c9f7d14a6b2565cba63f9', role: "alert", "aria-live": "assertive", "aria-atomic": "true", class: {
+        return (h(Host, { key: 'd4ca47796b7b5927412383a15311e794ae217be4', role: "alert", "aria-live": "assertive", "aria-atomic": "true", class: {
                 [`is-ready`]: this.didLoad,
                 [`is-paused`]: this.didPause,
                 [`is-visible`]: this.visible,
@@ -173,7 +177,7 @@ const Toast = class {
             }, onMouseLeave: () => {
                 this.didPause = false;
                 this.dsDidResume.emit();
-            } }, !hasValue(svgContent) && (h("ds-icon", { key: 'a3533c4ad23fcfeeb13628cce8292c877010d31d', id: "icon", part: "icon", name: iconName || this.color === 'warning'
+            } }, !hasValue(svgContent) && (h("ds-icon", { key: '69dad798037879665cfcac7c2c4c5202e59398ff', id: "icon", part: "icon", name: iconName || this.color === 'warning'
                 ? 'alert'
                 : this.color === 'danger'
                     ? 'alert'
@@ -185,11 +189,11 @@ const Toast = class {
                 ? 'triangle'
                 : this.color === 'danger' || this.color === 'success' || this.color === 'info'
                     ? 'circle'
-                    : undefined })), hasValue(svgContent) && h("ds-icon", { key: '206dbb5cd3673773eb5a9327679676ad9a0d15f9', id: "icon", part: "icon", svg: svgContent }), h("span", { key: 'f7f7fb5c0071f6cb35a005e9a843cfc527d96e3f', part: "content", id: "content" }, this.heading && h("h2", { key: '073902110e1777b279e829e05bcc040e24b8251e', part: "heading" }, this.heading), h("span", { key: '677a6c7b3bb849376cd47b8449e8cab982c396b6', part: "message" }, this.message, h("slot", { key: '722ebc769eb27196aef924c2028a5b0c04590d25' }))), hasValue(this.action) && (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(svgContent) && h("ds-icon", { key: 'a6ba300bdb84ba361450bb08059293a6a533de37', id: "icon", part: "icon", svg: svgContent }), h("span", { key: '0c1dcbd34ccd9e8d4f5fa8abf575c8de78af23ca', part: "content", id: "content" }, this.heading && h("h2", { key: 'e0f1f64c75f147c46ffbc7fcd38df70b79d1788d', part: "heading" }, this.heading), h("span", { key: 'b61f2943532f86a484ab688253a8e7a04327c00b', part: "message" }, this.message, h("slot", { key: 'e9924f719790067a6e2bdb136b18dec3841f04ae' }))), hasValue(this.action) && (h("ds-button", { key: 'ba37a92ae3638e6304ddca76b9793003455e79eb', id: "action", color: "primary", size: "sm", part: "button", icon: this.actionIcon, target: this.actionTarget, href: this.actionHref, onClick: ev => {
                 stopEventBubbling(ev);
                 this.dsActionClick.emit(ev);
                 this.actionHandler(this.alertId);
-            } }, this.action)), this.closable && (h("ds-close", { key: 'e1c6e38442650af9321ba62e43a94fc2e10cbb6f', part: "close", onClick: ev => {
+            } }, this.action)), this.closable && (h("ds-close", { key: '1b2978686c359bb6b6cf6f9e40bd8a693b8480cd', part: "close", onClick: ev => {
                 stopEventBubbling(ev);
                 this.close();
             } }))));
@@ -244,6 +248,14 @@ __decorate([
     Type('string'),
     __metadata("design:type", String)
 ], Toast.prototype, "actionHref", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Toast.prototype, "alertId", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Toast.prototype, "visible", void 0);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

package/dist/esm/index-MUUOiuTm.js

@@ -353,7 +353,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';