@maggioli-design-system/magma 2.0.0-beta.2 → 2.0.0-beta.3

package/dist/cjs/mds-push-notification-item.cjs.entry.js

@@ -5,6 +5,7 @@ var _commonjsHelpers = require('./_commonjsHelpers-B83fTs8d.js');
 var cancel = require('./cancel-_rS5f5_p.js');
 var locale = require('./locale-oGW3SvGJ.js');
 var date = require('./date-dnDGaLCn.js');
+var preference = require('./preference-BdpIXWLP.js');
 
 var dayjs_min$1 = {exports: {}};
 
@@ -166,9 +167,8 @@ function requireRelativeTime () {
 var relativeTimeExports = requireRelativeTime();
 var relativeTime = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(relativeTimeExports);
 
-const mdsPushNotificationItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-push-notification-item-duration:.3s;--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--tone-neutral-04,218 218 218));--mds-push-notification-item-message-line-clamp:2;--mds-push-notification-item-subject-line-clamp:1}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-avatar,mds-button,mds-img,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-push-notification-item-duration{syntax:"<time>";inherits:false;initial-value:.3s}@property --mds-push-notification-item-icon-background-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-push-notification-item-message-line-clamp{syntax:"<integer>";inherits:false;initial-value:2}@property --mds-push-notification-item-subject-line-clamp{syntax:"<integer>";inherits:false;initial-value:1}:host{--mds-push-notification-item-duration:.3s;--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--tone-neutral-04,218 218 218));--mds-push-notification-item-message-line-clamp:2;--mds-push-notification-item-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-push-notification-item-subject-line-clamp:1;--mds-push-notification-item-timing-function:var(--ease-in-out-quint,cubic-bezier(.86,0,.07,1));align-items:flex-start;background-color:rgb(var(--tone-neutral,0 0 0));border-radius:var(--radius-lg,16px);-webkit-box-shadow:var(--mds-push-notification-item-shadow);box-shadow:var(--mds-push-notification-item-shadow);color:rgb(var(--tone-neutral-02,244 244 244));display:flex;gap:calc(var(--spacing,.0025rem)*400);max-width:calc(var(--spacing,.0025rem)*8000);min-width:calc(var(--spacing,.0025rem)*7200);padding:calc(var(--spacing,.0025rem)*400);pointer-events:auto;position:relative;-webkit-transition-duration:var(--mds-push-notification-item-duration,.3s);transition-duration:var(--mds-push-notification-item-duration,.3s);transition-property:background-color,box-shadow,color,margin,transform;-webkit-transition-timing-function:var(--mds-push-notification-item-timing-function);transition-timing-function:var(--mds-push-notification-item-timing-function)}:host([deletable]){padding-right:calc(var(--spacing,.0025rem)*800)}.content{display:grid;flex-grow:1}.actions{display:flex;flex-wrap:wrap;gap:calc(var(--spacing,.0025rem)*200);min-width:1px;padding-top:calc(var(--spacing,.0025rem)*200)}.avatar,.picture{flex-shrink:0}.picture{border-radius:.25rem;-webkit-box-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);box-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);max-width:calc(var(--spacing,.0025rem)*1200);width:100%}.close-button{opacity:0;padding:calc(var(--spacing,.0025rem)*150);position:absolute;right:0;top:0;transition-duration:var(--default-transition-duration);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;transition-timing-function:var(--default-transition-timing-function)}:host-context(:not(.safari)):host(:hover) .close-button{opacity:1}.close-button:focus-visible,.close-button:hover{fill:rgb(var(--tone-neutral-03,233 233 233));opacity:1}.header{align-items:baseline;display:flex;gap:calc(var(--spacing,.0025rem)*100);justify-content:space-between;min-width:0;overflow:hidden;text-overflow:ellipsis}.infos{display:flex;flex-direction:column}.time{flex-shrink:0;margin-right:calc(var(--spacing,.0025rem)*100);white-space:nowrap}.subject{--mds-text-line-clamp:var(--mds-push-notification-item-subject-line-clamp,1);line-height:var(--leading-sm,1.25rem)}.message,.subject{text-overflow:ellipsis}.message{--mds-text-line-clamp:var(--mds-push-notification-item-message-line-clamp,2)}.avatar{background-color:var(--mds-push-notification-item-icon-background-color,transparent);border-radius:1000px;fill:var(--mds-push-notification-item-icon-color,rgb(var(--tone-neutral-04,218 218 218)));height:calc(var(--spacing,.0025rem)*900);width:calc(var(--spacing,.0025rem)*900)}.avatar::part(svg){width:calc(var(--spacing,.0025rem)*600)}:host([src]) .avatar{background-color:#0000}:host([icon]) .avatar::part(wrapper){padding:calc(var(--spacing,.0025rem)*150)}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-push-notifications-shadow:var(--shadow-outline) inset;background-color:rgb(var(--tone-neutral-09,76 76 76))}:host-context(:root.pref-contrast-more){--mds-push-notification-item-shadow:var(--shadow-outline-strong-50) inset;color:rgb(var(--tone-neutral-01,255 255 255))}:host([variant=primary][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--variant-primary-05,152 188 255));--mds-push-notification-item-icon-color:rgb(var(--variant-primary-10,0 49 142))}:host([variant=primary]),:host([variant=primary][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--variant-primary-09,0 58 168));--mds-push-notification-item-icon-color:rgb(var(--variant-primary-05,152 188 255))}:host([variant=primary][tone=text]){--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--variant-primary-05,152 188 255))}:host([variant=orange][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-orange-05,251 168 111));--mds-push-notification-item-icon-color:rgb(var(--label-orange-10,99 42 3))}:host([variant=orange]),:host([variant=orange][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-orange-09,116 49 3));--mds-push-notification-item-icon-color:rgb(var(--label-orange-05,251 168 111))}:host([variant=orange][tone=text]){--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--label-orange-05,251 168 111))}:host([variant=amaranth][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-amaranth-05,250 163 178));--mds-push-notification-item-icon-color:rgb(var(--label-amaranth-10,114 7 25))}:host([variant=amaranth]),:host([variant=amaranth][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-amaranth-09,135 8 30));--mds-push-notification-item-icon-color:rgb(var(--label-amaranth-05,250 163 178))}:host([variant=amaranth][tone=text]){--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--label-amaranth-05,250 163 178))}:host([variant=orchid][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-orchid-05,245 163 203));--mds-push-notification-item-icon-color:rgb(var(--label-orchid-10,111 12 61))}:host([variant=orchid]),:host([variant=orchid][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-orchid-09,131 14 71));--mds-push-notification-item-icon-color:rgb(var(--label-orchid-05,245 163 203))}:host([variant=orchid][tone=text]){--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--label-orchid-05,245 163 203))}:host([variant=violet][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-violet-05,198 175 251));--mds-push-notification-item-icon-color:rgb(var(--label-violet-10,57 9 165))}:host([variant=violet]),:host([variant=violet][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-violet-09,67 11 195));--mds-push-notification-item-icon-color:rgb(var(--label-violet-05,198 175 251))}:host([variant=violet][tone=text]){--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--label-violet-05,198 175 251))}:host([variant=blue][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-blue-05,170 184 252));--mds-push-notification-item-icon-color:rgb(var(--label-blue-10,6 34 166))}:host([variant=blue]),:host([variant=blue][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-blue-09,7 40 196));--mds-push-notification-item-icon-color:rgb(var(--label-blue-05,170 184 252))}:host([variant=blue][tone=text]){--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--label-blue-05,170 184 252))}:host([variant=sky][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-sky-05,94 198 245));--mds-push-notification-item-icon-color:rgb(var(--label-sky-10,5 63 90))}:host([variant=sky]),:host([variant=sky][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-sky-09,6 76 107));--mds-push-notification-item-icon-color:rgb(var(--label-sky-05,94 198 245))}:host([variant=sky][tone=text]){--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--label-sky-05,94 198 245))}:host([variant=aqua][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-aqua-05,7 203 237));--mds-push-notification-item-icon-color:rgb(var(--label-aqua-10,2 65 76))}:host([variant=aqua]),:host([variant=aqua][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-aqua-09,3 77 90));--mds-push-notification-item-icon-color:rgb(var(--label-aqua-05,7 203 237))}:host([variant=aqua][tone=text]){--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--label-aqua-05,7 203 237))}:host([variant=green][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-green-05,37 213 102));--mds-push-notification-item-icon-color:rgb(var(--label-green-10,12 68 33))}:host([variant=green]),:host([variant=green][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-green-09,14 81 39));--mds-push-notification-item-icon-color:rgb(var(--label-green-05,37 213 102))}:host([variant=green][tone=text]){--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--label-green-05,37 213 102))}:host([variant=lime][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-lime-05,134 207 22));--mds-push-notification-item-icon-color:rgb(var(--label-lime-10,43 66 7))}:host([variant=lime]),:host([variant=lime][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-lime-09,51 79 8));--mds-push-notification-item-icon-color:rgb(var(--label-lime-05,134 207 22))}:host([variant=lime][tone=text]){--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--label-lime-05,134 207 22))}:host([variant=yellow][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-yellow-05,234 179 8));--mds-push-notification-item-icon-color:rgb(var(--label-yellow-10,75 57 3))}:host([variant=yellow]),:host([variant=yellow][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-yellow-09,89 68 3));--mds-push-notification-item-icon-color:rgb(var(--label-yellow-05,234 179 8))}:host([variant=yellow][tone=text]){--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--label-yellow-05,234 179 8))}:host([variant=error][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--status-error-05,250 165 160));--mds-push-notification-item-icon-color:rgb(var(--status-error-10,115 0 0))}:host([variant=error]),:host([variant=error][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--status-error-09,135 0 14));--mds-push-notification-item-icon-color:rgb(var(--status-error-05,250 165 160))}:host([variant=error][tone=text]){--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--status-error-05,250 165 160))}:host([variant=warning][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--status-warning-05,237 177 0));--mds-push-notification-item-icon-color:rgb(var(--status-warning-10,77 57 0))}:host([variant=warning]),:host([variant=warning][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--status-warning-09,90 67 0));--mds-push-notification-item-icon-color:rgb(var(--status-warning-05,237 177 0))}:host([variant=warning][tone=text]){--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--status-warning-05,237 177 0))}:host([variant=success][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--status-success-05,107 206 147));--mds-push-notification-item-icon-color:rgb(var(--status-success-10,0 69 0))}:host([variant=success]),:host([variant=success][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--status-success-09,0 82 9));--mds-push-notification-item-icon-color:rgb(var(--status-success-05,107 206 147))}:host([variant=success][tone=text]){--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--status-success-05,107 206 147))}:host([variant=info][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--status-info-05,112 198 234));--mds-push-notification-item-icon-color:rgb(var(--status-info-10,0 61 103))}:host([variant=info]),:host([variant=info][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--status-info-09,0 73 116));--mds-push-notification-item-icon-color:rgb(var(--status-info-05,112 198 234))}:host([variant=info][tone=text]){--mds-push-notification-item-icon-background-color:transparent;--mds-push-notification-item-icon-color:rgb(var(--status-info-05,112 198 234))}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-push-notifications-shadow:var(--shadow-outline) inset;background-color:rgb(var(--tone-neutral-09,76 76 76))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-push-notification-item-shadow:var(--shadow-outline-strong-50) inset;color:rgb(var(--tone-neutral-01,255 255 255))}}`;
+const mdsPushNotificationItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-push-notification-item-duration:.3s;--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--tone-neutral-04,218 218 218));--mds-push-notification-item-message-line-clamp:2;--mds-push-notification-item-subject-line-clamp:1}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-avatar,mds-button,mds-img,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-push-notification-item-duration{syntax:"<time>";inherits:false;initial-value:.3s}@property --mds-push-notification-item-icon-background-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-push-notification-item-message-line-clamp{syntax:"<integer>";inherits:false;initial-value:2}@property --mds-push-notification-item-subject-line-clamp{syntax:"<integer>";inherits:false;initial-value:1}:host{--mds-push-notification-item-duration:.3s;--private-push-notification-item-duration:var(--mds-push-notification-item-duration,.3s);--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--tone-neutral-04,218 218 218));--mds-push-notification-item-message-line-clamp:2;--mds-push-notification-item-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-push-notification-item-subject-line-clamp:1;--mds-push-notification-item-timing-function:var(--ease-in-out-quint,cubic-bezier(.86,0,.07,1));align-items:flex-start;background-color:rgb(var(--tone-neutral,0 0 0));border-radius:var(--radius-lg,16px);-webkit-box-shadow:var(--mds-push-notification-item-shadow);box-shadow:var(--mds-push-notification-item-shadow);color:rgb(var(--tone-neutral-02,244 244 244));display:flex;gap:calc(var(--spacing,.0025rem)*400);max-width:calc(var(--spacing,.0025rem)*8000);min-width:calc(var(--spacing,.0025rem)*7200);padding:calc(var(--spacing,.0025rem)*400);pointer-events:auto;position:relative;-webkit-transition-duration:var(--private-push-notification-item-duration);transition-duration:var(--private-push-notification-item-duration);transition-property:background-color,box-shadow,color,margin,transform;-webkit-transition-timing-function:var(--mds-push-notification-item-timing-function);transition-timing-function:var(--mds-push-notification-item-timing-function)}:host([deletable]:not([deletable=false])){padding-right:calc(var(--spacing,.0025rem)*800)}.content{display:grid;flex-grow:1}.actions{display:flex;flex-wrap:wrap;gap:calc(var(--spacing,.0025rem)*200);min-width:1px;padding-top:calc(var(--spacing,.0025rem)*200)}.avatar,.picture{flex-shrink:0}.picture{border-radius:.25rem;-webkit-box-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);box-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);max-width:calc(var(--spacing,.0025rem)*1200);width:100%}.close-button{opacity:0;padding:calc(var(--spacing,.0025rem)*150);position:absolute;right:0;top:0;transition-duration:var(--default-transition-duration);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;transition-timing-function:var(--default-transition-timing-function)}:host(:hover) .close-button{opacity:1}.close-button:focus-visible,.close-button:hover{fill:rgb(var(--tone-neutral-03,233 233 233));opacity:1}.header{align-items:baseline;display:flex;gap:calc(var(--spacing,.0025rem)*100);justify-content:space-between;min-width:0;overflow:hidden;text-overflow:ellipsis}.infos{display:flex;flex-direction:column}.time{flex-shrink:0;margin-right:calc(var(--spacing,.0025rem)*100);white-space:nowrap}.subject{--mds-text-line-clamp:var(--mds-push-notification-item-subject-line-clamp,1);line-height:var(--leading-sm,1.25rem)}.message,.subject{text-overflow:ellipsis}.message{--mds-text-line-clamp:var(--mds-push-notification-item-message-line-clamp,2)}.avatar{background-color:var(--mds-push-notification-item-icon-background-color,#0000);border-radius:1000px;fill:var(--mds-push-notification-item-icon-color,rgb(var(--tone-neutral-04,218 218 218)));height:calc(var(--spacing,.0025rem)*900);width:calc(var(--spacing,.0025rem)*900)}.avatar::part(svg){width:calc(var(--spacing,.0025rem)*600)}:host([src]) .avatar{background-color:#0000}:host([icon]) .avatar::part(wrapper){padding:calc(var(--spacing,.0025rem)*150)}:host([pref-animation=reduce]){--private-push-notification-item-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-push-notifications-shadow:var(--shadow-outline) inset;background-color:rgb(var(--tone-neutral-09,76 76 76))}:host([pref-contrast=more]){--mds-push-notification-item-shadow:var(--shadow-outline-strong-50) inset;color:rgb(var(--tone-neutral-01,255 255 255))}:host([variant=primary][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--variant-primary-05,152 188 255));--mds-push-notification-item-icon-color:rgb(var(--variant-primary-10,0 49 142))}:host([variant=primary]),:host([variant=primary][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--variant-primary-09,0 58 168));--mds-push-notification-item-icon-color:rgb(var(--variant-primary-05,152 188 255))}:host([variant=primary][tone=text]){--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--variant-primary-05,152 188 255))}:host([variant=orange][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-orange-05,251 168 111));--mds-push-notification-item-icon-color:rgb(var(--label-orange-10,99 42 3))}:host([variant=orange]),:host([variant=orange][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-orange-09,116 49 3));--mds-push-notification-item-icon-color:rgb(var(--label-orange-05,251 168 111))}:host([variant=orange][tone=text]){--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--label-orange-05,251 168 111))}:host([variant=amaranth][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-amaranth-05,250 163 178));--mds-push-notification-item-icon-color:rgb(var(--label-amaranth-10,114 7 25))}:host([variant=amaranth]),:host([variant=amaranth][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-amaranth-09,135 8 30));--mds-push-notification-item-icon-color:rgb(var(--label-amaranth-05,250 163 178))}:host([variant=amaranth][tone=text]){--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--label-amaranth-05,250 163 178))}:host([variant=orchid][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-orchid-05,245 163 203));--mds-push-notification-item-icon-color:rgb(var(--label-orchid-10,111 12 61))}:host([variant=orchid]),:host([variant=orchid][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-orchid-09,131 14 71));--mds-push-notification-item-icon-color:rgb(var(--label-orchid-05,245 163 203))}:host([variant=orchid][tone=text]){--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--label-orchid-05,245 163 203))}:host([variant=violet][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-violet-05,198 175 251));--mds-push-notification-item-icon-color:rgb(var(--label-violet-10,57 9 165))}:host([variant=violet]),:host([variant=violet][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-violet-09,67 11 195));--mds-push-notification-item-icon-color:rgb(var(--label-violet-05,198 175 251))}:host([variant=violet][tone=text]){--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--label-violet-05,198 175 251))}:host([variant=blue][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-blue-05,170 184 252));--mds-push-notification-item-icon-color:rgb(var(--label-blue-10,6 34 166))}:host([variant=blue]),:host([variant=blue][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-blue-09,7 40 196));--mds-push-notification-item-icon-color:rgb(var(--label-blue-05,170 184 252))}:host([variant=blue][tone=text]){--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--label-blue-05,170 184 252))}:host([variant=sky][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-sky-05,94 198 245));--mds-push-notification-item-icon-color:rgb(var(--label-sky-10,5 63 90))}:host([variant=sky]),:host([variant=sky][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-sky-09,6 76 107));--mds-push-notification-item-icon-color:rgb(var(--label-sky-05,94 198 245))}:host([variant=sky][tone=text]){--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--label-sky-05,94 198 245))}:host([variant=aqua][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-aqua-05,7 203 237));--mds-push-notification-item-icon-color:rgb(var(--label-aqua-10,2 65 76))}:host([variant=aqua]),:host([variant=aqua][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-aqua-09,3 77 90));--mds-push-notification-item-icon-color:rgb(var(--label-aqua-05,7 203 237))}:host([variant=aqua][tone=text]){--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--label-aqua-05,7 203 237))}:host([variant=green][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-green-05,37 213 102));--mds-push-notification-item-icon-color:rgb(var(--label-green-10,12 68 33))}:host([variant=green]),:host([variant=green][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-green-09,14 81 39));--mds-push-notification-item-icon-color:rgb(var(--label-green-05,37 213 102))}:host([variant=green][tone=text]){--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--label-green-05,37 213 102))}:host([variant=lime][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-lime-05,134 207 22));--mds-push-notification-item-icon-color:rgb(var(--label-lime-10,43 66 7))}:host([variant=lime]),:host([variant=lime][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-lime-09,51 79 8));--mds-push-notification-item-icon-color:rgb(var(--label-lime-05,134 207 22))}:host([variant=lime][tone=text]){--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--label-lime-05,134 207 22))}:host([variant=yellow][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--label-yellow-05,234 179 8));--mds-push-notification-item-icon-color:rgb(var(--label-yellow-10,75 57 3))}:host([variant=yellow]),:host([variant=yellow][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--label-yellow-09,89 68 3));--mds-push-notification-item-icon-color:rgb(var(--label-yellow-05,234 179 8))}:host([variant=yellow][tone=text]){--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--label-yellow-05,234 179 8))}:host([variant=error][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--status-error-05,250 165 160));--mds-push-notification-item-icon-color:rgb(var(--status-error-10,115 0 0))}:host([variant=error]),:host([variant=error][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--status-error-09,135 0 14));--mds-push-notification-item-icon-color:rgb(var(--status-error-05,250 165 160))}:host([variant=error][tone=text]){--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--status-error-05,250 165 160))}:host([variant=warning][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--status-warning-05,237 177 0));--mds-push-notification-item-icon-color:rgb(var(--status-warning-10,77 57 0))}:host([variant=warning]),:host([variant=warning][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--status-warning-09,90 67 0));--mds-push-notification-item-icon-color:rgb(var(--status-warning-05,237 177 0))}:host([variant=warning][tone=text]){--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--status-warning-05,237 177 0))}:host([variant=success][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--status-success-05,107 206 147));--mds-push-notification-item-icon-color:rgb(var(--status-success-10,0 69 0))}:host([variant=success]),:host([variant=success][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--status-success-09,0 82 9));--mds-push-notification-item-icon-color:rgb(var(--status-success-05,107 206 147))}:host([variant=success][tone=text]){--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--status-success-05,107 206 147))}:host([variant=info][tone=strong]){--mds-push-notification-item-icon-background-color:rgb(var(--status-info-05,112 198 234));--mds-push-notification-item-icon-color:rgb(var(--status-info-10,0 61 103))}:host([variant=info]),:host([variant=info][tone=weak]){--mds-push-notification-item-icon-background-color:rgb(var(--status-info-09,0 73 116));--mds-push-notification-item-icon-color:rgb(var(--status-info-05,112 198 234))}:host([variant=info][tone=text]){--mds-push-notification-item-icon-background-color:#0000;--mds-push-notification-item-icon-color:rgb(var(--status-info-05,112 198 234))}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-push-notification-item-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-push-notifications-shadow:var(--shadow-outline) inset;background-color:rgb(var(--tone-neutral-09,76 76 76))}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-push-notification-item-shadow:var(--shadow-outline-strong-50) inset;color:rgb(var(--tone-neutral-01,255 255 255))}}`;
 
-dayjs.extend(relativeTime);
 const MdsPushNotificationItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -184,9 +184,9 @@ const MdsPushNotificationItem = class {
          */
         this.dateFormat = 'timeago';
         /**
-         * Specifies if the component is dismissable or not, it should be set to true by default is used with it's parent component `mds-push-notification-items`
+         * Specifies if the component is dismissable; when set, a dismiss button is shown.
          */
-        this.deletable = true;
+        this.deletable = false;
         /**
          * Specifies the message of the component
          */
@@ -210,11 +210,33 @@ const MdsPushNotificationItem = class {
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     componentDidLoad() {
         this.handleDeletableChange(this.deletable);
     }
     componentWillLoad() {
         var _a;
+        dayjs.extend(relativeTime);
         this.hasActions = this.host.querySelector(':scope > [slot="action"]') !== null;
         this.hasBadge = this.host.querySelector(':scope > [slot="badge"]') !== null;
         if (this.datetime !== undefined && this.datetime !== '') {
@@ -245,9 +267,9 @@ const MdsPushNotificationItem = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'fe5ea12872387bc99ada81d55dee421a4d37ba39' }, ((_a = this.icon) !== null && _a !== void 0 ? _a : this.preview === 'avatar') && (index.h("mds-avatar", { key: '06e5ff16f76708c1cc79f48552c8bb8c2a72e723', class: "avatar", icon: this.icon, initials: this.initials, part: "avatar", src: this.src, tone: this.tone, variant: this.variant })), this.src && this.preview !== 'avatar' && (index.h("mds-img", { key: '1bb87768a03fd62aecbbc7386bcaf401ecbe1259', class: "picture", part: "picture", src: this.src })), index.h("div", { key: '28c4c0b772b782f9762c04f0cc427ff4da3945b5', class: "content", part: "content" }, index.h("div", { key: '301eb2070f2533ed6b8b8d845dda4d84c3a9cc03', class: "header" }, index.h("div", { key: '6dbd4c9f6eb046caf3c71fea61e93aafd26b052b', class: "infos" }, this.hasBadge && (index.h("div", { key: '13193cf6115c77c24530b037a1dead25b5107d26' }, index.h("slot", { key: '028a3b61823ba984c6a66134eeeff7099712eed1', name: "badge" }))), this.subject && (index.h("mds-text", { key: '0b6e0d5fac1ad8862a445ecf648aff1b5e5ddf96', class: "subject", typography: "h6", variant: "title", truncate: "all" }, this.subject))), this.datetime && (index.h("mds-text", { key: 'd198e534b59b39ccc8f34179b6e7cc8e875cbba4', class: "time", typography: "option" }, this.dateFormat === 'timeago'
+        return (index.h(index.Host, { key: 'f88bb513bce95850a6047ac54f4dcfa63978363e', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, ((_a = this.icon) !== null && _a !== void 0 ? _a : this.preview === 'avatar') && (index.h("mds-avatar", { key: 'f8cad6d2fae73aff043e52fef79075abede6df96', class: "avatar", icon: this.icon, initials: this.initials, part: "avatar", src: this.src, tone: this.tone, variant: this.variant })), this.src && this.preview !== 'avatar' && (index.h("mds-img", { key: '72f96d01bc55784f8c2c35e62da263e62d32a00b', class: "picture", part: "picture", src: this.src })), index.h("div", { key: 'fb71c722dec7dd0216b415c1469cd4af03be5d4e', class: "content", part: "content" }, index.h("div", { key: '6f6b128e2c72fa831a5603f05d3cb6141fdaec89', class: "header" }, index.h("div", { key: '8381e70ddf528dda33765863ed8e6c67af6afaab', class: "infos" }, this.hasBadge && (index.h("div", { key: '21882a488827403f500705436c23e4795aeea948' }, index.h("slot", { key: '262d5394fae6e68f5556f561ecff8582e34b6b9d', name: "badge" }))), this.subject && (index.h("mds-text", { key: '730388a07d901d1e742fb528db3e1bd2963fbd19', class: "subject", typography: "h6", variant: "title", truncate: "all" }, this.subject))), this.datetime && (index.h("mds-text", { key: '96cb3254f601083ce3f96b9d5fd635e9e92fc857', class: "time", typography: "option" }, this.dateFormat === 'timeago'
             ? dayjs(this.datetime).fromNow()
-            : dayjs(this.datetime).format(this.dateFormat)))), index.h("mds-text", { key: '4ae6ff7676fb2915ba1f0c11c3c888c2e0e90227', class: "message", truncate: "all", typography: "caption", variant: "info" }, this.message), this.hasActions && (index.h("div", { key: '4fdaef14f44055d0b8067a6d5e5c468b3bce978c', class: "actions", part: "actions" }, index.h("slot", { key: '9133fc9fc13f8b049b4c527ee69e536b79404e12', name: "action" })))), this.deletable && (index.h("mds-button", { key: '18673378fcf8dbb38c3db8c0e5c2f95da606f1e3', class: "close-button", variant: "dark", tone: "text", title: this.t.get('dismiss'), icon: cancel.miBaselineCancel, onClick: this.onClickClose }))));
+            : dayjs(this.datetime).format(this.dateFormat)))), index.h("mds-text", { key: 'd4fa3358afbde90b5416a08cbf117fbd256eb8c5', class: "message", truncate: "all", typography: "caption", variant: "info" }, this.message), this.hasActions && (index.h("div", { key: '83b296d9cdadfe0a9e483f2d48b4b35ea3d40338', class: "actions", part: "actions" }, index.h("slot", { key: '91e29832a0de8bad5f5c37528dc2c1e3e09eeebf', name: "action" })))), this.deletable && (index.h("mds-button", { key: 'e4f30edac40e73e6ea41d9d48391b9d9d077f118', class: "close-button", variant: "dark", tone: "text", title: this.t.get('dismiss'), icon: cancel.miBaselineCancel, onClick: this.onClickClose }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-push-notification.cjs.entry.js

@@ -2,8 +2,9 @@
 
 var index = require('./index-CNuKb6Lv.js');
 var unit = require('./unit-Cm341q1R.js');
+var preference = require('./preference-BdpIXWLP.js');
 
-const mdsPushNotificationCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-push-notification-fadeout-delay:0s;--mds-push-notification-gap:calc(var(--spacing,.0025rem)*200);--mds-push-notification-items-intro-delay:.3s;--mds-push-notification-items-outro-delay:0s;--mds-push-notification-items-duration:.3s;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-push-notification-fadeout-delay{syntax:"<time>";inherits:false;initial-value:0s}@property --mds-push-notification-items-intro-delay{syntax:"<time>";inherits:false;initial-value:.3s}@property --mds-push-notification-items-outro-delay{syntax:"<time>";inherits:false;initial-value:0s}@property --mds-push-notification-items-duration{syntax:"<time>";inherits:false;initial-value:.3s}:host{--mds-push-notification-fadeout-delay:0s;--mds-push-notification-gap:calc(var(--spacing,.0025rem)*200);--mds-push-notification-items-intro-delay:.3s;--mds-push-notification-items-outro-delay:0s;--mds-push-notification-items-duration:.3s;--mds-push-notification-items-gap:var(--mds-push-notification-gap,calc(var(--spacing,.0025rem)*200));--mds-push-notification-items-timing-function:var(--ease-in-out-quint,cubic-bezier(.86,0,.07,1));--mds-push-notification-background:linear-gradient(90deg,#dcdcdc00 0%,#dcdcdcd9);-webkit-overflow-scrolling:touch;-ms-overflow-style:none;gap:calc(var(--spacing,.0025rem)*200);max-width:360px;min-width:calc(var(--spacing,.0025rem)*7200);padding:calc(var(--spacing,.0025rem)*400);padding-left:calc(var(--spacing,.0025rem)*2400);scrollbar-width:none;--tw-ease:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));background:var(--mds-push-notification-background);bottom:0;box-sizing:content-box!important;display:flex;flex-direction:column;overflow-x:hidden;position:fixed;right:0;top:0;transform:translate(100%);-webkit-transition-delay:var(--mds-push-notification-fadeout-delay,0s);transition-delay:var(--mds-push-notification-fadeout-delay,0s);-webkit-transition-duration:var(--duration-500,.5s);transition-duration:var(--duration-500,.5s);transition-property:transform;transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));z-index:var(--magma-notification-z-index,3000)}:host::-webkit-scrollbar{display:none}.notifications{display:flex;flex-direction:column-reverse;gap:var(--mds-push-notification-items-gap)}.notifications ::slotted(mds-push-notification-item){--mds-push-notification-duration:var(--mds-push-notification-items-duration,.3s);--mds-push-notification-timing-function:var(--mds-push-notification-items-timing-function);position:absolute;-webkit-transform:translate(calc(100% + calc(var(--mds-push-notification-gap,calc(var(--spacing,.0025rem) * 200)) + var(--mds-push-notification-gap,calc(var(--spacing,.0025rem) * 200)))));transform:translate(calc(100% + calc(var(--mds-push-notification-gap,calc(var(--spacing,.0025rem) * 200)) + var(--mds-push-notification-gap,calc(var(--spacing,.0025rem) * 200)))));visibility:hidden}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-push-notification-background:linear-gradient(90deg,#0000 0%,#00000080 20%,#000000d9)}:host([visible]){transform:translate(0);transition-delay:0s}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-push-notification-background:linear-gradient(90deg,#0000 0%,#00000080 20%,#000000d9)}}`;
+const mdsPushNotificationCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-push-notification-fadeout-delay:0s;--mds-push-notification-gap:calc(var(--spacing,.0025rem)*200);--mds-push-notification-items-intro-delay:.3s;--mds-push-notification-items-outro-delay:0s;--mds-push-notification-items-duration:.3s;--tw-ease:initial}}}:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-push-notification-fadeout-delay{syntax:"<time>";inherits:false;initial-value:0s}@property --mds-push-notification-items-intro-delay{syntax:"<time>";inherits:false;initial-value:.3s}@property --mds-push-notification-items-outro-delay{syntax:"<time>";inherits:false;initial-value:0s}@property --mds-push-notification-items-duration{syntax:"<time>";inherits:false;initial-value:.3s}:host{--mds-push-notification-fadeout-delay:0s;--mds-push-notification-gap:calc(var(--spacing,.0025rem)*200);--mds-push-notification-items-intro-delay:.3s;--mds-push-notification-items-outro-delay:0s;--mds-push-notification-items-duration:.3s;--mds-push-notification-items-gap:var(--mds-push-notification-gap,calc(var(--spacing,.0025rem)*200));--mds-push-notification-items-timing-function:var(--ease-in-out-quint,cubic-bezier(.86,0,.07,1));--mds-push-notification-background:linear-gradient(90deg,#dcdcdc00 0%,#dcdcdcd9);-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none;--tw-ease:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));background:var(--mds-push-notification-background);bottom:0;box-sizing:initial!important;display:flex;flex-direction:column;gap:calc(var(--spacing,.0025rem)*200);max-width:360px;min-width:calc(var(--spacing,.0025rem)*7200);overflow-x:hidden;padding:calc(var(--spacing,.0025rem)*400);padding-left:calc(var(--spacing,.0025rem)*2400);position:fixed;right:0;top:0;transform:translate(100%);-webkit-transition-delay:var(--mds-push-notification-fadeout-delay,0s);transition-delay:var(--mds-push-notification-fadeout-delay,0s);-webkit-transition-duration:var(--duration-500,.5s);transition-duration:var(--duration-500,.5s);transition-property:transform;transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));z-index:var(--magma-notification-z-index,3000)}:host::-webkit-scrollbar{display:none}.notifications{display:flex;flex-direction:column-reverse;gap:var(--mds-push-notification-items-gap)}.notifications ::slotted(mds-push-notification-item){--mds-push-notification-duration:var(--mds-push-notification-items-duration,.3s);--mds-push-notification-timing-function:var(--mds-push-notification-items-timing-function);position:absolute;-webkit-transform:translate(calc(100% + calc(var(--mds-push-notification-gap,calc(var(--spacing,.0025rem) * 200)) + var(--mds-push-notification-gap,calc(var(--spacing,.0025rem) * 200)))));transform:translate(calc(100% + calc(var(--mds-push-notification-gap,calc(var(--spacing,.0025rem) * 200)) + var(--mds-push-notification-gap,calc(var(--spacing,.0025rem) * 200)))));visibility:hidden}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-push-notification-background:linear-gradient(90deg,#0000 0%,#00000080 20%,#000000d9)}:host([visible]){transform:translate(0);transition-delay:0s}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-push-notification-background:linear-gradient(90deg,#0000 0%,#00000080 20%,#000000d9)}}`;
 
 const MdsPushNotification = class {
     constructor(hostRef) {
@@ -134,6 +135,19 @@ const MdsPushNotification = class {
         }
         return Promise.resolve();
     }
+    connectedCallback() {
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.unsubscribePrefTheme) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefThemeScheme) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
     componentDidLoad() {
         this.updateCSSCustomProps();
         this.slotNotifications.addEventListener('slotchange', this.handleSlotChange);
@@ -153,7 +167,7 @@ const MdsPushNotification = class {
         this.visible = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'd115a147fe975c346f325931e496bc5a725faca2' }, index.h("mds-button", { key: 'b9155d4e0666827ff1745da75db1595b2b2530aa', variant: "dark", onClick: this.clear }, "Cancella notifiche"), index.h("div", { key: '3d73cddf9bc67c9c4c7e68486c7091cd12979b0c', class: "notifications", part: "notifications" }, index.h("slot", { key: '1a46c225c799b00f02f6e0e44da4a8c490cc6268', ref: (el) => (this.slotNotifications = el) }))));
+        return (index.h(index.Host, { key: '14c13d8af66f6c90da99f9f858d8696a796d01a7', "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, index.h("mds-button", { key: '61d7ab9ae3a1d0df6dd091f211b86aa7a8afb0c0', variant: "dark", onClick: this.clear }, "Cancella notifiche"), index.h("div", { key: '614552ee81de3151c82622a0cf209e8e93afb314', class: "notifications", part: "notifications" }, index.h("slot", { key: 'bd60fe0bbcc81ff17c30681f27452a5d5aca067e', ref: (el) => (this.slotNotifications = el) }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-quote.cjs.entry.js

@@ -1,8 +1,9 @@
 'use strict';
 
 var index = require('./index-CNuKb6Lv.js');
+var preference = require('./preference-BdpIXWLP.js');
 
-const mdsQuoteCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-text:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{display:inline-flex}.open-quote{flex-shrink:0}.quote{display:grid;gap:calc(var(--spacing,.0025rem)*400);-webkit-user-select:all;user-select:all}span{-webkit-user-select:none;user-select:none}:host-context(:root.pref-contrast-more){color:rgb(var(--tone-neutral-01,255 255 255))}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){color:rgb(var(--tone-neutral-01,255 255 255))}}`;
+const mdsQuoteCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-text:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{display:inline-flex}.open-quote{flex-shrink:0}.quote{display:grid;gap:calc(var(--spacing,.0025rem)*400);-webkit-user-select:all;user-select:all}span{-webkit-user-select:none;user-select:none}:host([pref-contrast=more]){color:rgb(var(--tone-neutral-01,255 255 255))}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){color:rgb(var(--tone-neutral-01,255 255 255))}}`;
 
 const MdsQuote = class {
     constructor(hostRef) {
@@ -16,8 +17,17 @@ const MdsQuote = class {
          */
         this.tag = 'h3';
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefContrast) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     render() {
-        return (index.h(index.Host, { key: 'e0461e5b838a8e7db53d39384f327fd843e21eda' }, index.h("mds-text", { key: 'beded9d2cbc0f1a3c723bea0fd7f6068cf7ab27c', class: "open-quote", tag: "div", typography: this.typography }, index.h("span", { key: '351fd3ab34a3416385141a27247334bab07f74e3' }, index.h("i", { key: '4ae64a9448f4a62e0bd70477c67ed64c8d2a40ff' }, "\u275D\u00A0"))), index.h("div", { key: '802b1c82e542f35db1979f2dac7453ca9e861827', class: "quote" }, index.h("mds-text", { key: '9932770037d60dfa3735981e61ef932970b8e25c', tag: this.tag, typography: this.typography }, index.h("i", { key: '369ec5348d4da453780dbb07010e9532efcfc5a4' }, index.h("slot", { key: 'f10a113f38016c56ccd8664197f2fc81f4b4accd' }), index.h("span", { key: 'dc6c06d16515abdcbb988e2334bb6e0994700114' }, "\u00A0\u275E"))), index.h("slot", { key: '9240410db5eae81038a3275087fa0edf04d0ce86', name: "author" }))));
+        return (index.h(index.Host, { key: 'd4732bfc13bec29539203b1bbf2f475c2124161a', "pref-contrast": this.prefContrast }, index.h("mds-text", { key: 'bfe617d81d506022e982b8a97f1b88e99e06bb54', class: "open-quote", tag: "div", typography: this.typography }, index.h("span", { key: 'd42dd7538c075ef913397f3a58b0e327cf34d005' }, index.h("i", { key: '4a1a90c5bf4d36c8f5e93153964688e9858faa4a' }, "\u275D\u00A0"))), index.h("div", { key: '84b991190ae992b3f486821100731276386d1379', class: "quote" }, index.h("mds-text", { key: '91bbfd150358dd889e391483d2a2ba1fc4f0f0d6', tag: this.tag, typography: this.typography }, index.h("i", { key: '18150d9cc0da1116079fd76efe2291ef45247089' }, index.h("slot", { key: '1861ee78891e58fa60c781afdc4eca8e17db0074' }), index.h("span", { key: '96f6ed87102e3839e258b51b1341df409056d669' }, "\u00A0\u275E"))), index.h("slot", { key: 'f4d6dbbe5cc07ce987fd5c35dd6f3a88e75168cd', name: "author" }))));
     }
 };
 MdsQuote.style = mdsQuoteCss();

package/dist/cjs/mds-radial-menu-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CNuKb6Lv.js');
 
-const mdsRadialMenuItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-radial-menu-item-transition-duration:var(--mds-radial-menu-transition-duration,.5s)}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-tooltip):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-radial-menu-item-transition-duration:var(--mds-radial-menu-transition-duration,.5s);--mds-radial-menu-item-transition-timing-function:var(--mds-radial-menu-transition-timing-function,var(--ease-out-expo,cubic-bezier(.19,1,.22,1)));--mds-radial-menu-item-delay:0;--mds-radial-menu-item-index:0;display:inline-flex;inset:0;pointer-events:none;position:absolute;transform:scale(0);-webkit-transition-delay:var(--mds-radial-menu-item-delay);transition-delay:var(--mds-radial-menu-item-delay);-webkit-transition-duration:var(--mds-radial-menu-item-transition-duration,var(--mds-radial-menu-transition-duration,.5s));transition-duration:var(--mds-radial-menu-item-transition-duration,var(--mds-radial-menu-transition-duration,.5s));transition-property:translate,transform;-webkit-transition-timing-function:var(--mds-radial-menu-item-transition-timing-function);transition-timing-function:var(--mds-radial-menu-item-transition-timing-function);translate:var(--mds-radial-menu-item-translate)}:host(:hover){z-index:1}.button{border-radius:100%}.tooltip{--mds-tooltip-delay:0;min-width:max-content;width:min-content}`;
+const mdsRadialMenuItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-radial-menu-item-transition-duration:var(--mds-radial-menu-transition-duration,.5s)}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-tooltip):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-radial-menu-item-transition-duration:var(--mds-radial-menu-transition-duration,.5s);--mds-radial-menu-item-transition-timing-function:var(--mds-radial-menu-transition-timing-function,var(--ease-out-expo,cubic-bezier(.19,1,.22,1)));--mds-radial-menu-item-delay:0;--mds-radial-menu-item-index:0;display:inline-flex;inset:0;pointer-events:none;position:absolute;transform:scale(0);-webkit-transition-delay:var(--mds-radial-menu-item-delay);transition-delay:var(--mds-radial-menu-item-delay);-webkit-transition-duration:var(--mds-radial-menu-item-transition-duration,var(--mds-radial-menu-transition-duration,.5s));transition-duration:var(--mds-radial-menu-item-transition-duration,var(--mds-radial-menu-transition-duration,.5s));transition-property:translate,transform;-webkit-transition-timing-function:var(--mds-radial-menu-item-transition-timing-function);transition-timing-function:var(--mds-radial-menu-item-transition-timing-function);translate:var(--mds-radial-menu-item-translate)}:host(:hover){z-index:1}.button{border-radius:100%}.tooltip{--mds-tooltip-delay:0;min-width:max-content;width:min-content}`;
 
 const MdsRadialMenuItem = class {
     constructor(hostRef) {
@@ -21,7 +21,7 @@ const MdsRadialMenuItem = class {
         this.size = 'lg';
     }
     render() {
-        return (index.h(index.Host, { key: 'aa8e1d03c590ad9efbf6e5090a59f70460782a33', slot: "item" }, index.h("mds-button", { key: '06ca066406df3e40b262bc0ffbbda3cc65c190cf', "aria-label": this.tooltip, class: "button", icon: this.icon, variant: this.variant, tone: this.tone, size: this.size }), this.tooltip && (index.h("mds-tooltip", { key: '50a03f527adb6ead0757ea380d31c51943129570', class: "tooltip", target: ".button", placement: "top", autoPlacement: false }, this.tooltip))));
+        return (index.h(index.Host, { key: '6ef1882d37a9f3f1d7bd014a4a257b03e310bffd', slot: "item" }, index.h("mds-button", { key: '697d5c349ee2083a4b766391ca7d82337b5b420b', "aria-label": this.tooltip, class: "button", icon: this.icon, variant: this.variant, tone: this.tone, size: this.size }), this.tooltip && (index.h("mds-tooltip", { key: '74f407d34d4d2b009a5b28d2bb2d49455b7e3423', class: "tooltip", target: ".button", placement: "top", disableAutoPlacement: true }, this.tooltip))));
     }
 };
 MdsRadialMenuItem.style = mdsRadialMenuItemCss();

package/dist/cjs/mds-radial-menu.cjs.entry.js

@@ -3,14 +3,14 @@
 var index = require('./index-CNuKb6Lv.js');
 var close = require('./close-BS8N44H4.js');
 var clsx = require('./clsx-BtxeOLZW.js');
-var floatingController = require('./floating-controller-DA8xyqCa.js');
+var floatingController = require('./floating-controller-CXEVR1wX.js');
 require('./floating-ui.dom-DW-02Mib.js');
 require('./unit-Cm341q1R.js');
 require('./aria-BbJUuU9_.js');
 
 var miBaselineMoreVert = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2s.9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2z"/></svg>`;
 
-const mdsRadialMenuCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-radial-menu-angle-start:0deg;--mds-radial-menu-angle-end:360deg;--mds-radial-menu-context-menu-z-index:var(--magma-context-menu-z-index,8000);--mds-radial-menu-delay:10ms;--mds-radial-menu-direction:-1;--mds-radial-menu-disc-background:rgb(var(--tone-neutral,0 0 0)/.5);--mds-radial-menu-disc-size:calc(var(--mds-radial-menu-radius,5rem)*2);--mds-radial-menu-radius:5rem;--mds-radial-menu-transition-duration:.5s}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-radial-menu-angle-start{syntax:"<angle>";inherits:false;initial-value:0deg}@property --mds-radial-menu-angle-end{syntax:"<angle>";inherits:false;initial-value:1turn}@property --mds-radial-menu-delay{syntax:"<time>";inherits:false;initial-value:10ms}@property --mds-radial-menu-direction{syntax:"<integer>";inherits:false;initial-value:-1}@property --mds-radial-menu-radius{syntax:"<length>";inherits:false;initial-value:5rem}@property --mds-radial-menu-transition-duration{syntax:"<time>";inherits:false;initial-value:.5s}:host{--mds-radial-menu-angle-start:0deg;--mds-radial-menu-angle-end:360deg;--mds-radial-menu-context-menu-z-index:var(--magma-context-menu-z-index,8000);--mds-radial-menu-delay:10ms;--mds-radial-menu-direction:-1;--mds-radial-menu-disc-background:rgb(var(--tone-neutral,0 0 0)/.5);--mds-radial-menu-disc-filter:blur(8px);--mds-radial-menu-disc-shadow:var(--shadow-lg-sharp,0 0 1px 1px #0000000f,0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d);--mds-radial-menu-disc-size:calc(var(--mds-radial-menu-radius,5rem)*2);--mds-radial-menu-radius:5rem;--mds-radial-menu-transition-duration:.5s;--mds-radial-menu-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));--mds-radial-menu-nth-siblings:0;--mds-radial-menu-disc-delay:0s;--mds-radial-menu-disc-scale:0;--mds-radial-menu-radius-current:0;--mds-radial-menu-is-full-circle:1;--mds-radial-menu-is-start-greater-than-end:1;display:inline-flex;position:relative;-webkit-transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-property:top,left;-webkit-transition-timing-function:var(--mds-radial-menu-transition-timing-function);transition-timing-function:var(--mds-radial-menu-transition-timing-function);z-index:var(--magma-dropdown-z-index,5000)}:host([direction=clockwise]){--mds-radial-menu-direction:calc(var(--mds-radial-menu-is-start-greater-than-end)*-1)}:host([direction=counterclockwise]){--mds-radial-menu-direction:calc(var(--mds-radial-menu-is-start-greater-than-end)*1)}.menu-button{border-radius:100%;position:relative;transform:scale(1);-webkit-transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-duration:var(--mds-radial-menu-transition-duration,.5s);-webkit-transition-timing-function:var(--mds-radial-menu-transition-timing-function);transition-timing-function:var(--mds-radial-menu-transition-timing-function);z-index:2}:host(:not([opened])) .menu-button--hidden{transform:scale(0)}.radial-menu{inset:0;pointer-events:none;position:absolute;-webkit-transition-delay:calc((var(--mds-radial-menu-nth-siblings)*2)*var(--mds-radial-menu-delay,10ms));transition-delay:calc((var(--mds-radial-menu-nth-siblings)*2)*var(--mds-radial-menu-delay,10ms));transition-property:z-index;z-index:3}:host(:not([opened])) .radial-menu{transition-delay:0s;z-index:1}:host(:not([opened])){--mds-radial-menu-radius-current:0}:host([opened]){--mds-radial-menu-radius-current:var(--mds-radial-menu-radius,5rem)}:host([opened]) ::slotted(mds-radial-menu-item){pointer-events:auto;transform:scale(1)}::slotted(mds-radial-menu-item){--mds-radial-menu-item-offset-per-child:calc((var(--mds-radial-menu-angle-end,360deg) - var(--mds-radial-menu-angle-start,0deg))/(var(--mds-radial-menu-nth-siblings) + var(--mds-radial-menu-is-full-circle)));--mds-radial-menu-item-angle-offset:calc(var(--mds-radial-menu-direction,-1)*var(--mds-radial-menu-item-index)*var(--mds-radial-menu-item-offset-per-child));--mds-radial-menu-item-delay:calc((var(--mds-radial-menu-item-index) + 1)*var(--mds-radial-menu-delay,10ms));--mds-radial-menu-item-translate:calc(cos((var(--mds-radial-menu-angle-start,0deg) + var(--mds-radial-menu-item-angle-offset))) * var(--mds-radial-menu-radius-current)) calc(sin((var(--mds-radial-menu-angle-start,0deg) + var(--mds-radial-menu-item-angle-offset))) * var(--mds-radial-menu-radius-current) * -1)}.disc{--size:calc(var(--mds-radial-menu-disc-size,calc(var(--mds-radial-menu-radius,5rem) * 2)) + var(--mds-radial-menu-radius,5rem));-webkit-backdrop-filter:var(--mds-radial-menu-disc-filter);backdrop-filter:var(--mds-radial-menu-disc-filter);background-color:var(--mds-radial-menu-disc-background,rgb(var(--tone-neutral,0 0 0)/.5));border-radius:100%;-webkit-box-shadow:var(--mds-radial-menu-disc-shadow);box-shadow:var(--mds-radial-menu-disc-shadow);display:inline-flex;height:var(--size);inset:50%;position:absolute;-webkit-transform:translate(-50%,-50%) scale(var(--mds-radial-menu-disc-scale));transform:translate(-50%,-50%) scale(var(--mds-radial-menu-disc-scale));-webkit-transition-delay:var(--mds-radial-menu-disc-delay);transition-delay:var(--mds-radial-menu-disc-delay);-webkit-transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-property:height,transform,width;-webkit-transition-timing-function:var(--mds-radial-menu-transition-timing-function);transition-timing-function:var(--mds-radial-menu-transition-timing-function);width:var(--size);z-index:0}:host(:not([opened][disc])){--mds-radial-menu-disc-scale:0;--mds-radial-menu-disc-delay:calc((var(--mds-radial-menu-nth-siblings) + 1)*var(--mds-radial-menu-delay,10ms))}:host([opened][disc]){--mds-radial-menu-disc-scale:1;--mds-radial-menu-disc-delay:0s}:host([interaction=rightclick]){position:fixed;z-index:var(--mds-radial-menu-context-menu-z-index,var(--magma-context-menu-z-index,8000))}`;
+const mdsRadialMenuCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-radial-menu-angle-start:0deg;--mds-radial-menu-angle-end:360deg;--mds-radial-menu-context-menu-z-index:var(--magma-context-menu-z-index,8000);--mds-radial-menu-delay:10ms;--mds-radial-menu-direction:-1;--mds-radial-menu-disc-background:rgb(var(--tone-neutral,0 0 0)/.5);--mds-radial-menu-disc-size:calc(var(--mds-radial-menu-radius,5rem)*2);--mds-radial-menu-radius:5rem;--mds-radial-menu-transition-duration:.5s}}}:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-radial-menu-angle-start{syntax:"<angle>";inherits:false;initial-value:0deg}@property --mds-radial-menu-angle-end{syntax:"<angle>";inherits:false;initial-value:1turn}@property --mds-radial-menu-delay{syntax:"<time>";inherits:false;initial-value:10ms}@property --mds-radial-menu-direction{syntax:"<integer>";inherits:false;initial-value:-1}@property --mds-radial-menu-radius{syntax:"<length>";inherits:false;initial-value:5rem}@property --mds-radial-menu-transition-duration{syntax:"<time>";inherits:false;initial-value:.5s}:host{--mds-radial-menu-angle-start:0deg;--mds-radial-menu-angle-end:360deg;--mds-radial-menu-context-menu-z-index:var(--magma-context-menu-z-index,8000);--mds-radial-menu-delay:10ms;--mds-radial-menu-direction:-1;--mds-radial-menu-disc-background:rgb(var(--tone-neutral,0 0 0)/.5);--mds-radial-menu-disc-filter:blur(8px);--mds-radial-menu-disc-shadow:var(--shadow-lg-sharp,0 0 1px 1px #0000000f,0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d);--mds-radial-menu-disc-size:calc(var(--mds-radial-menu-radius,5rem)*2);--mds-radial-menu-radius:5rem;--mds-radial-menu-transition-duration:.5s;--mds-radial-menu-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));--mds-radial-menu-nth-siblings:0;--mds-radial-menu-disc-delay:0s;--mds-radial-menu-disc-scale:0;--mds-radial-menu-radius-current:0;--mds-radial-menu-is-full-circle:1;--mds-radial-menu-is-start-greater-than-end:1;display:inline-flex;position:relative;-webkit-transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-property:top,left;-webkit-transition-timing-function:var(--mds-radial-menu-transition-timing-function);transition-timing-function:var(--mds-radial-menu-transition-timing-function);z-index:var(--magma-dropdown-z-index,5000)}:host([direction=clockwise]){--mds-radial-menu-direction:calc(var(--mds-radial-menu-is-start-greater-than-end)*-1)}:host([direction=counterclockwise]){--mds-radial-menu-direction:calc(var(--mds-radial-menu-is-start-greater-than-end)*1)}.menu-button{border-radius:100%;position:relative;transform:scale(1);-webkit-transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-duration:var(--mds-radial-menu-transition-duration,.5s);-webkit-transition-timing-function:var(--mds-radial-menu-transition-timing-function);transition-timing-function:var(--mds-radial-menu-transition-timing-function);z-index:2}:host(:not([opened])) .menu-button--hidden{transform:scale(0)}.radial-menu{inset:0;pointer-events:none;position:absolute;-webkit-transition-delay:calc((var(--mds-radial-menu-nth-siblings)*2)*var(--mds-radial-menu-delay,10ms));transition-delay:calc((var(--mds-radial-menu-nth-siblings)*2)*var(--mds-radial-menu-delay,10ms));transition-property:z-index;z-index:3}:host(:not([opened])) .radial-menu{transition-delay:0s;z-index:1}:host(:not([opened])){--mds-radial-menu-radius-current:0}:host([opened]){--mds-radial-menu-radius-current:var(--mds-radial-menu-radius,5rem)}:host([opened]) ::slotted(mds-radial-menu-item){pointer-events:auto;transform:scale(1)}::slotted(mds-radial-menu-item){--mds-radial-menu-item-offset-per-child:calc((var(--mds-radial-menu-angle-end,360deg) - var(--mds-radial-menu-angle-start,0deg))/(var(--mds-radial-menu-nth-siblings) + var(--mds-radial-menu-is-full-circle)));--mds-radial-menu-item-angle-offset:calc(var(--mds-radial-menu-direction,-1)*var(--mds-radial-menu-item-index)*var(--mds-radial-menu-item-offset-per-child));--mds-radial-menu-item-delay:calc((var(--mds-radial-menu-item-index) + 1)*var(--mds-radial-menu-delay,10ms));--mds-radial-menu-item-translate:calc(cos((var(--mds-radial-menu-angle-start,0deg) + var(--mds-radial-menu-item-angle-offset))) * var(--mds-radial-menu-radius-current)) calc(sin((var(--mds-radial-menu-angle-start,0deg) + var(--mds-radial-menu-item-angle-offset))) * var(--mds-radial-menu-radius-current) * -1)}.disc{--size:calc(var(--mds-radial-menu-disc-size,calc(var(--mds-radial-menu-radius,5rem) * 2)) + var(--mds-radial-menu-radius,5rem));-webkit-backdrop-filter:var(--mds-radial-menu-disc-filter);backdrop-filter:var(--mds-radial-menu-disc-filter);background-color:var(--mds-radial-menu-disc-background,rgb(var(--tone-neutral,0 0 0)/.5));border-radius:100%;-webkit-box-shadow:var(--mds-radial-menu-disc-shadow);box-shadow:var(--mds-radial-menu-disc-shadow);display:inline-flex;height:var(--size);inset:50%;position:absolute;-webkit-transform:translate(-50%,-50%) scale(var(--mds-radial-menu-disc-scale));transform:translate(-50%,-50%) scale(var(--mds-radial-menu-disc-scale));-webkit-transition-delay:var(--mds-radial-menu-disc-delay);transition-delay:var(--mds-radial-menu-disc-delay);-webkit-transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-property:height,transform,width;-webkit-transition-timing-function:var(--mds-radial-menu-transition-timing-function);transition-timing-function:var(--mds-radial-menu-transition-timing-function);width:var(--size);z-index:0}:host(:not([opened][disc])){--mds-radial-menu-disc-scale:0;--mds-radial-menu-disc-delay:calc((var(--mds-radial-menu-nth-siblings) + 1)*var(--mds-radial-menu-delay,10ms))}:host([opened][disc]){--mds-radial-menu-disc-scale:1;--mds-radial-menu-disc-delay:0s}:host([interaction=rightclick]){position:fixed;z-index:var(--mds-radial-menu-context-menu-z-index,var(--magma-context-menu-z-index,8000))}`;
 
 const MdsRadialMenu = class {
     constructor(hostRef) {
@@ -168,7 +168,7 @@ const MdsRadialMenu = class {
         this.handleBackdrop();
     }
     render() {
-        return (index.h(index.Host, { key: 'c17ebeeb32b4986baceb48b61e814c6ca2830caf' }, index.h("mds-button", { key: '7e57c42d3dd0f5067da69c327810f70a31370750', class: clsx.clsx('menu-button', this.interaction !== 'click' && 'menu-button--hidden'), icon: this.opened ? close.miBaselineClose : this.icon, tone: this.tone, variant: this.variant, size: this.size, onClick: this.toggleMenu }), index.h("div", { key: '107da816c1d1aba0cd8f660e6911c6e603728747', class: "radial-menu", part: "radial-menu" }, index.h("slot", { key: '67c7f462a71df73038287f5fb5cf1a83eb78bc22', name: "item", onSlotchange: this.updateItems })), index.h("div", { key: '405b0c970a702148029f52c628974f6e38b179df', class: "disc" })));
+        return (index.h(index.Host, { key: '6f7cf327cfc3a90b1ce80e9e9aab86f6423cbf41' }, index.h("mds-button", { key: '545b32a7fe48707ceb0eec5adb799a776421a053', class: clsx.clsx('menu-button', this.interaction !== 'click' && 'menu-button--hidden'), icon: this.opened ? close.miBaselineClose : this.icon, tone: this.tone, variant: this.variant, size: this.size, onClick: this.toggleMenu }), index.h("div", { key: '76acb7ae11c61f5f216c1870f61eb5cd50b1848b', class: "radial-menu", part: "radial-menu" }, index.h("slot", { key: '1f0a16e3505609ec32450384c40f35ec439c58ed', name: "item", onSlotchange: this.updateItems })), index.h("div", { key: 'cd886be843d69836088046472a720ceaac4b7676', class: "disc" })));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-separator.cjs.entry.js

@@ -1,15 +1,33 @@
 'use strict';
 
 var index = require('./index-CNuKb6Lv.js');
+var preference = require('./preference-BdpIXWLP.js');
 
-const mdsSeparatorCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-separator-background:rgb(var(--tone-neutral-08,107 107 107))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-separator-background:rgb(var(--tone-neutral-08,107 107 107));background-color:var(--mds-separator-background,rgb(var(--tone-neutral-08,107 107 107)));border-radius:var(--radius-full,1000px);display:flex;height:1px}:host-context(:root.pref-theme-dark){--mds-separator-background:rgb(var(--tone-neutral-07,134 134 134))}:host-context(:root.pref-contrast-more){--mds-separator-background:rgb(var(--tone-neutral-06,158 158 158))}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-separator-background:rgb(var(--tone-neutral-07,134 134 134))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-separator-background:rgb(var(--tone-neutral-06,158 158 158))}}`;
+const mdsSeparatorCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-separator-background:rgb(var(--tone-neutral-08,107 107 107))}}}:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-separator-background:rgb(var(--tone-neutral-08,107 107 107));background-color:var(--mds-separator-background,rgb(var(--tone-neutral-08,107 107 107)));border-radius:var(--radius-full,1000px);display:flex;height:1px}:host([pref-theme=dark]){--mds-separator-background:rgb(var(--tone-neutral-07,134 134 134))}:host([pref-contrast=more]){--mds-separator-background:rgb(var(--tone-neutral-06,158 158 158))}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-separator-background:rgb(var(--tone-neutral-07,134 134 134))}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-separator-background:rgb(var(--tone-neutral-06,158 158 158))}}`;
 
 const MdsSeparator = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.unsubscribePrefContrast) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefTheme) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefThemeScheme) === null || _c === void 0 ? void 0 : _c.call(this);
+    }
     render() {
-        return index.h(index.Host, { key: '8056c695f2c418fbcb7041fb5f343a0ce76f80a7' });
+        return (index.h(index.Host, { key: 'ea2d787f29d9a411ff5d52bb7159f61af06706fb', "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }));
     }
 };
 MdsSeparator.style = mdsSeparatorCss();

package/dist/cjs/mds-status-bar.cjs.entry.js

@@ -1,8 +1,9 @@
 'use strict';
 
 var index = require('./index-CNuKb6Lv.js');
+var preference = require('./preference-BdpIXWLP.js');
 
-const mdsStatusBarCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-status-bar-max-width:500px;--mds-status-bar-backdrop:rgb(var(--tone-neutral-01,255 255 255)/.1)}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-modal,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-status-bar-max-width{syntax:"<length>";inherits:false;initial-value:500px}:host{--mds-status-bar-max-width:500px;--mds-status-bar-backdrop:rgb(var(--tone-neutral-01,255 255 255)/.1);--mds-status-bar-backdrop-filter:blur(10px)}mds-modal{--mds-modal-custom-window-distance:0;--mds-modal-custom-closed-transform:translateY(100%)}.status-bar-area{-webkit-backdrop-filter:var(--mds-status-bar-backdrop-filter);backdrop-filter:var(--mds-status-bar-backdrop-filter);background-color:var(--mds-status-bar-backdrop,rgb(var(--tone-neutral-01,255 255 255)/.1));border-radius:var(--radius-xl,20px) var(--radius-xl,20px) 0 0;margin-left:calc(var(--spacing,.0025rem)*600);margin-right:calc(var(--spacing,.0025rem)*600);padding:calc(var(--spacing,.0025rem)*200) calc(var(--spacing,.0025rem)*200) calc(var(--spacing,.0025rem)*600);transition-property:background-color,transform,opacity}.status-bar{align-items:flex-start;background-color:rgb(var(--tone-neutral,0 0 0));border-radius:var(--radius-lg,16px);-webkit-box-shadow:var(--shadow-md,0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a);box-shadow:var(--shadow-md,0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a);max-width:var(--mds-status-bar-max-width,500px);padding:calc(var(--spacing,.0025rem)*600)}.actions,.status-bar{display:inline-flex;flex-wrap:wrap;gap:calc(var(--spacing,.0025rem)*400)}.actions{flex-grow:1}:host-context(:root.pref-animation-reduce) .status-bar-area{transition-duration:0s}:host-context(:root.pref-consumption-medium){--mds-status-bar-backdrop-filter:none}:host-context(:root.pref-contrast-more){--mds-status-bar-backdrop:rgb(var(--tone-neutral-02,244 244 244)/.3)}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .status-bar{-webkit-box-shadow:var(--shadow-outline-light);box-shadow:var(--shadow-outline-light)}@media (max-width:480px){.status-bar-area{border-radius:0;margin-left:0;margin-right:0;padding:calc(var(--spacing,.0025rem)*400);width:100%}.status-bar{width:100%}.actions{gap:calc(var(--spacing,.0025rem)*200)}::slotted(*){flex-grow:1}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .status-bar-area{transition-duration:0s}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-status-bar-backdrop:rgb(var(--tone-neutral-02,244 244 244)/.3)}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .status-bar{-webkit-box-shadow:var(--shadow-outline-light);box-shadow:var(--shadow-outline-light)}}`;
+const mdsStatusBarCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-status-bar-max-width:500px;--mds-status-bar-backdrop:rgb(var(--tone-neutral-01,255 255 255)/.1)}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-modal,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-status-bar-max-width{syntax:"<length>";inherits:false;initial-value:500px}:host{--mds-status-bar-max-width:500px;--mds-status-bar-backdrop:rgb(var(--tone-neutral-01,255 255 255)/.1);--mds-status-bar-backdrop-filter:blur(10px)}mds-modal{--mds-modal-custom-window-distance:0;--mds-modal-custom-closed-transform:translateY(100%)}.status-bar-area{-webkit-backdrop-filter:var(--mds-status-bar-backdrop-filter);backdrop-filter:var(--mds-status-bar-backdrop-filter);background-color:var(--mds-status-bar-backdrop,rgb(var(--tone-neutral-01,255 255 255)/.1));border-radius:var(--radius-xl,20px) var(--radius-xl,20px) 0 0;margin-left:calc(var(--spacing,.0025rem)*600);margin-right:calc(var(--spacing,.0025rem)*600);padding:calc(var(--spacing,.0025rem)*200) calc(var(--spacing,.0025rem)*200) calc(var(--spacing,.0025rem)*600);transition-property:background-color,transform,opacity}.status-bar{align-items:flex-start;background-color:rgb(var(--tone-neutral,0 0 0));border-radius:var(--radius-lg,16px);-webkit-box-shadow:var(--shadow-md,0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a);box-shadow:var(--shadow-md,0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a);max-width:var(--mds-status-bar-max-width,500px);padding:calc(var(--spacing,.0025rem)*600)}.actions,.status-bar{display:inline-flex;flex-wrap:wrap;gap:calc(var(--spacing,.0025rem)*400)}.actions{flex-grow:1}:host([pref-consumption=medium]){--mds-status-bar-backdrop-filter:none}:host([pref-contrast=more]){--mds-status-bar-backdrop:rgb(var(--tone-neutral-02,244 244 244)/.3)}:host([pref-theme=dark]:not([pref-theme-scheme=light])) .status-bar{-webkit-box-shadow:var(--shadow-outline-light);box-shadow:var(--shadow-outline-light)}@media (max-width:480px){.status-bar-area{border-radius:0;margin-left:0;margin-right:0;padding:calc(var(--spacing,.0025rem)*400);width:100%}.status-bar{width:100%}.actions{gap:calc(var(--spacing,.0025rem)*200)}::slotted(*){flex-grow:1}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-status-bar-backdrop:rgb(var(--tone-neutral-02,244 244 244)/.3)}}@media (prefers-color-scheme:dark){:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))) .status-bar{-webkit-box-shadow:var(--shadow-outline-light);box-shadow:var(--shadow-outline-light)}}`;
 
 const MdsStatusBar = class {
     constructor(hostRef) {
@@ -16,10 +17,31 @@ const MdsStatusBar = class {
          */
         this.position = 'bottom-right';
     }
+    connectedCallback() {
+        this.unsubscribeConsumption = preference.subscribePreference('consumption', (value) => {
+            this.consumption = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribeConsumption) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     componentDidLoad() {
         var _a;
         this.modal = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.modal');
-        this.modal.backdrop = undefined;
+        this.modal.hideBackdrop = true;
     }
     handleVisbilityProp(newValue) {
         if (newValue === false) {
@@ -33,7 +55,7 @@ const MdsStatusBar = class {
         this.visible = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '8b1a0fd4300583d834e1f33796bb8d01b4b585a8' }, index.h("mds-modal", { key: 'f1ab035918beff8cffd0c10474fff898b00952cf', class: "modal", opened: this.visible, position: this.position, animation: "custom", overflow: this.overflow }, index.h("div", { key: 'a2a57a2c80322db3622b8e44ea5ca29f12946eea', class: "status-bar-area", part: "status-bar-area", slot: "window" }, index.h("div", { key: 'ea668180e6691b33d2a5377e6c6f510be23a227f', class: "status-bar", part: "status-bar" }, this.description && (index.h("mds-text", { key: '3db7d7efc103c0186f3504db52aea0406c1e57bb', typography: "caption", class: "description" }, this.description)), index.h("div", { key: 'd1daa893d59a6f7b1c5e7316bc3fec6352b919b8', class: "actions", part: "actions" }, index.h("slot", { key: 'd24bdaf3e0e25b3f2e8594dbe050436ea270f338' })))))));
+        return (index.h(index.Host, { key: '9513dd86370989a1a6c6d0823d4aa16206f3b5b5', "pref-consumption": this.consumption, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, index.h("mds-modal", { key: '1e5731bfc9f747842197386c2f7f1d01d3456205', class: "modal", opened: this.visible, position: this.position, animation: "custom", overflow: this.overflow }, index.h("div", { key: '0e3270a397ee348b736889134d20b2c913415d05', class: "status-bar-area", part: "status-bar-area", slot: "window" }, index.h("div", { key: '9401d2abdcc9ee9e0b7ed31575b820c7d93a579e', class: "status-bar", part: "status-bar" }, this.description && (index.h("mds-text", { key: 'b95add3fd67ba4a8e7a42b9222f7421547a793d7', typography: "caption", class: "description" }, this.description)), index.h("div", { key: '156f0e9e4f550344eef4cc0774f6c924d5dbd265', class: "actions", part: "actions" }, index.h("slot", { key: '28e6a570064fbb9fd541e2a8ad66be93bed36aa9' })))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-stepper-bar-item.cjs.entry.js

@@ -4,6 +4,7 @@ var index = require('./index-CNuKb6Lv.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 var keyboardManager = require('./keyboard-manager-BXKT5TGW.js');
 var locale = require('./locale-oGW3SvGJ.js');
+var preference = require('./preference-BdpIXWLP.js');
 
 const badgeDone$3 = "Ολοκληρώθηκε";
 const badgeCurrent$3 = "Καθημερινή";
@@ -49,7 +50,7 @@ var localeIt = {
 	step: step
 };
 
-const mdsStepperBarItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03,233 233 233));--mds-stepper-bar-item-duaration:.25s;--mds-stepper-bar-item-icon-background-done:rgb(var(--status-success-05,107 206 147));--mds-stepper-bar-item-icon-background-current:rgb(var(--variant-primary-04,184 208 255));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-stepper-bar-item-icon-color-done:rgb(var(--status-success-10,0 69 0));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral,0 0 0));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04,218 218 218));--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background-current,rgb(var(--variant-primary-04,184 208 255)));--mds-stepper-bar-item-icon-ring-separator-color:rgb(var(--tone-neutral,0 0 0));--mds-stepper-bar-item-icon-ring-separator-size:.375rem;--mds-stepper-bar-item-icon-ring-size:var(--height-100);--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08,107 107 107));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04,158 222 181));--mds-stepper-bar-item-progress-thickness:var(--height-200);--tw-ease:initial;--tw-duration:initial}}}@layer reset,vendor,theme,base,components,utilities;@property --mds-stepper-bar-item-duaration{syntax:"<time>";inherits:false;initial-value:.25s}@property --mds-stepper-bar-item-icon-ring-separator-size{syntax:"<length>";inherits:false;initial-value:.375rem}@property --mds-stepper-bar-item-min-width{syntax:"<length>";inherits:false;initial-value:180px}:host{--mds-stepper-bar-item-header-gap:var(--mds-stepper-bar-gap,calc(var(--spacing,.0025rem)*50));--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03,233 233 233));--mds-stepper-bar-item-duaration:.25s;--mds-stepper-bar-item-icon-background-done:rgb(var(--status-success-05,107 206 147));--mds-stepper-bar-item-icon-background-current:rgb(var(--variant-primary-04,184 208 255));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-stepper-bar-item-icon-color-done:rgb(var(--status-success-10,0 69 0));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral,0 0 0));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04,218 218 218));--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08,107 107 107));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04,158 222 181));--mds-stepper-bar-item-progress-thickness:var(--height-200);align-items:flex-start;border-radius:var(--radius-xl,20px);display:grid;flex:1 0 0;flex-direction:column;gap:calc(var(--spacing,.0025rem)*400);min-width:var(--mds-stepper-bar-item-min-width,180px);position:relative;scroll-snap-align:center;-webkit-transition-duration:var(--mds-stepper-bar-item-duaration,.25s);transition-duration:var(--mds-stepper-bar-item-duaration,.25s);transition-property:outline,outline-offset,background-color}:host(:last-of-type){flex-basis:calc(var(--spacing,.0025rem)*100)}:host(:last-of-type) .progress{display:none}:host([done]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-done,rgb(var(--status-success-05,107 206 147)));--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-done,rgb(var(--status-success-10,0 69 0)));transition-delay:0s}:host([current]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-current,rgb(var(--variant-primary-04,184 208 255)));--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-current,rgb(var(--tone-neutral,0 0 0)));-webkit-transition-delay:calc(var(--mds-stepper-bar-item-duaration,.25s)/2);transition-delay:calc(var(--mds-stepper-bar-item-duaration,.25s)/2)}.header{border-radius:var(--radius-md,12px);--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));align-items:center;display:flex;gap:var(--mds-stepper-bar-item-header-gap);-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:outline,outline-offset;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));width:100%}.icon{border-radius:var(--radius-full,1000px);--tw-duration:.15s;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));background-color:var(--mds-stepper-bar-item-icon-background,var(--mds-stepper-bar-item-progress-background,rgb(var(--tone-neutral-08,107 107 107))));display:flex;fill:var(--mds-stepper-bar-item-icon-color,rgb(var(--tone-neutral-04,218 218 218)));flex-shrink:0;padding:calc(var(--spacing,.0025rem)*200);position:relative;transition-duration:.15s;-webkit-transition-duration:var(--mds-stepper-bar-item-duaration,.25s);transition-duration:var(--mds-stepper-bar-item-duaration,.25s);transition-property:background-color,fill;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}.progress{--mds-stepper-bar-item-background:var(--mds-stepper-bar-item-progress-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-stepper-bar-item-color:var(--mds-stepper-bar-item-progress-color,rgb(var(--status-success-04,158 222 181)));--mds-stepper-bar-item-thickness:var(--mds-stepper-bar-item-progress-thickness,var(--height-200));--mds-progress-radius:0;flex-grow:1}.infos{display:grid;gap:calc(var(--spacing,.0025rem)*100);padding-left:calc(var(--spacing,.0025rem)*100)}.text{--tw-duration:.15s;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));color:var(--mds-stepper-bar-item-color,rgb(var(--tone-neutral-03,233 233 233)));pointer-events:none;transition-duration:.15s;-webkit-transition-duration:var(--mds-stepper-bar-item-duaration,.25s);transition-duration:var(--mds-stepper-bar-item-duaration,.25s);transition-property:color;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}.badge,.step{border-radius:var(--radius-full,1000px);pointer-events:none}.step{color:rgb(var(--tone-neutral-04,218 218 218))}:host-context(:root.pref-animation-reduce){transition-delay:0s!important;transition-duration:0s}:is(:host-context(:root.pref-animation-reduce) .header,:host-context(:root.pref-animation-reduce) .icon,:host-context(:root.pref-animation-reduce) .text){transition-delay:0s!important;transition-duration:0s}@property --tw-ease{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))),:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .header,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .icon,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .text{transition-delay:0s!important;transition-duration:0s}}`;
+const mdsStepperBarItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03,233 233 233));--mds-stepper-bar-item-duaration:.25s;--mds-stepper-bar-item-icon-background-done:rgb(var(--status-success-05,107 206 147));--mds-stepper-bar-item-icon-background-current:rgb(var(--variant-primary-04,184 208 255));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-stepper-bar-item-icon-color-done:rgb(var(--status-success-10,0 69 0));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral,0 0 0));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04,218 218 218));--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background-current,rgb(var(--variant-primary-04,184 208 255)));--mds-stepper-bar-item-icon-ring-separator-color:rgb(var(--tone-neutral,0 0 0));--mds-stepper-bar-item-icon-ring-separator-size:.375rem;--mds-stepper-bar-item-icon-ring-size:var(--height-100);--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08,107 107 107));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04,158 222 181));--mds-stepper-bar-item-progress-thickness:var(--height-200);--tw-ease:initial}}}@property --mds-stepper-bar-item-duaration{syntax:"<time>";inherits:false;initial-value:.25s}@property --mds-stepper-bar-item-icon-ring-separator-size{syntax:"<length>";inherits:false;initial-value:.375rem}@property --mds-stepper-bar-item-min-width{syntax:"<length>";inherits:false;initial-value:180px}:host{--mds-stepper-bar-item-header-gap:var(--mds-stepper-bar-gap,calc(var(--spacing,.0025rem)*50));--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03,233 233 233));--mds-stepper-bar-item-duaration:.25s;--private-stepper-bar-item-duaration:var(--mds-stepper-bar-item-duaration,.25s);--mds-stepper-bar-item-transition-duration:var(--duration-200,.2s);--private-stepper-bar-item-transition-duration:var(--mds-stepper-bar-item-transition-duration);--mds-stepper-bar-item-icon-background-done:rgb(var(--status-success-05,107 206 147));--mds-stepper-bar-item-icon-background-current:rgb(var(--variant-primary-04,184 208 255));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-stepper-bar-item-icon-color-done:rgb(var(--status-success-10,0 69 0));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral,0 0 0));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04,218 218 218));--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08,107 107 107));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04,158 222 181));--mds-stepper-bar-item-progress-thickness:var(--height-200);align-items:flex-start;border-radius:var(--radius-xl,20px);display:grid;flex:1 0 0;flex-direction:column;gap:calc(var(--spacing,.0025rem)*400);min-width:var(--mds-stepper-bar-item-min-width,180px);position:relative;scroll-snap-align:center;-webkit-transition-duration:var(--private-stepper-bar-item-duaration);transition-duration:var(--private-stepper-bar-item-duaration);transition-property:outline,outline-offset,background-color}:host(:last-of-type){-ms-flex-preferred-size:calc(var(--spacing,.0025rem)*100);flex-basis:calc(var(--spacing,.0025rem)*100)}:host(:last-of-type) .progress{display:none}:host([done]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-done,rgb(var(--status-success-05,107 206 147)));--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-done,rgb(var(--status-success-10,0 69 0)));transition-delay:0s}:host([current]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-current,rgb(var(--variant-primary-04,184 208 255)));--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-current,rgb(var(--tone-neutral,0 0 0)));-webkit-transition-delay:calc(var(--private-stepper-bar-item-duaration)/2);transition-delay:calc(var(--private-stepper-bar-item-duaration)/2)}.header{--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));align-items:center;border-radius:var(--radius-md,12px);display:flex;gap:var(--mds-stepper-bar-item-header-gap);-webkit-transition-duration:var(--private-stepper-bar-item-transition-duration);transition-duration:var(--private-stepper-bar-item-transition-duration);transition-property:outline,outline-offset;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));width:100%}.icon{--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));background-color:var(--mds-stepper-bar-item-icon-background,var(--mds-stepper-bar-item-progress-background,rgb(var(--tone-neutral-08,107 107 107))));border-radius:var(--radius-full,1000px);display:flex;fill:var(--mds-stepper-bar-item-icon-color,rgb(var(--tone-neutral-04,218 218 218)));flex-shrink:0;padding:calc(var(--spacing,.0025rem)*200);position:relative;-webkit-transition-duration:var(--private-stepper-bar-item-duaration);transition-duration:var(--private-stepper-bar-item-duaration);transition-property:background-color,fill;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}.progress{--mds-stepper-bar-item-background:var(--mds-stepper-bar-item-progress-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-stepper-bar-item-color:var(--mds-stepper-bar-item-progress-color,rgb(var(--status-success-04,158 222 181)));--mds-stepper-bar-item-thickness:var(--mds-stepper-bar-item-progress-thickness,var(--height-200));--mds-progress-radius:0;flex-grow:1}.infos{display:grid;gap:calc(var(--spacing,.0025rem)*100);padding-left:calc(var(--spacing,.0025rem)*100)}.text{--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));color:var(--mds-stepper-bar-item-color,rgb(var(--tone-neutral-03,233 233 233)));pointer-events:none;-webkit-transition-duration:var(--private-stepper-bar-item-duaration);transition-duration:var(--private-stepper-bar-item-duaration);transition-property:color;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}.badge,.step{border-radius:var(--radius-full,1000px);pointer-events:none}.step{color:rgb(var(--tone-neutral-04,218 218 218))}:host([pref-animation=reduce]){--private-stepper-bar-item-duaration:0s;--private-stepper-bar-item-transition-duration:0s}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-stepper-bar-item-duaration:0s;--private-stepper-bar-item-transition-duration:0s}}`;
 
 const MdsStepperBarItem = class {
     constructor(hostRef) {
@@ -108,7 +109,14 @@ const MdsStepperBarItem = class {
     componentWillRender() {
         this.t.lang(this.host);
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+    }
     disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
         this.km.detachClickBehavior();
     }
     selectedHandler(newValue) {
@@ -118,7 +126,7 @@ const MdsStepperBarItem = class {
         this.isCurrent = newValue;
     }
     render() {
-        return (index.h(index.Host, { key: '153ad28fc7602065f33667e8eee0674ed6c03199' }, index.h("div", { key: 'eb763ce9856102511798408c6d060154e2ac6ea5', class: "header" }, index.h("mds-icon", { key: '1be42e5b2c360eba80ab2a17b350081a18b47539', class: "icon", name: clsx.clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), index.h("mds-progress", { key: 'ffc6dd8c3d9e643d6baf1b05847dad5f18425607', "aria-hidden": "true", class: "progress", progress: this.isDone ? 1 : 0 })), index.h("div", { key: '2ada9d24154c880007dfc39c626ada7605260e00', class: "infos" }, this.step && (index.h("mds-text", { key: '841db62d45c451aae46b1bd27fe459d9ab35ca00', class: "step", typography: "option" }, this.t.get('step', { index: this.index + 1 }))), this.label && (index.h("mds-text", { key: 'c11ce137d906cf357e478e53a83cc3b802b2d15d', class: "text", typography: this.typography }, this.label)), this.badge && index.h("div", { key: 'bc067a6ad5462ddcc7d9b8cdfda458e5e7fff73a', part: "badge" }, this.showBadge()))));
+        return (index.h(index.Host, { key: '5a8c6d0b17fd719b63c022620da9c0e52d4d6396', "pref-animation": this.prefAnimation }, index.h("div", { key: 'bbc8a708a030d5877166a4ce59c6072be1312a21', class: "header" }, index.h("mds-icon", { key: '3d1b84caad6c99c41427f2e9df11257020ef7f5e', class: "icon", name: clsx.clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), index.h("mds-progress", { key: '174bb2a23c49847fd7a9fd7c8520d8536599750e', "aria-hidden": "true", class: "progress", progress: this.isDone ? 1 : 0 })), index.h("div", { key: '7a7a1499febfb335abbcc5971cf0d210a71d2bbb', class: "infos" }, this.step && (index.h("mds-text", { key: 'b7e0840dc402e165495aa9362e1a4a5094853c74', class: "step", typography: "option" }, this.t.get('step', { index: this.index + 1 }))), this.label && (index.h("mds-text", { key: 'f1204fb34565802fad46d6b74a9c6eade81a488c', class: "text", typography: this.typography }, this.label)), this.badge && index.h("div", { key: '98cba12f069e469a100387be7636f494f1c9796d', part: "badge" }, this.showBadge()))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-stepper-bar.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CNuKb6Lv.js');
 
-const mdsStepperBarCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-stepper-bar-gap:calc(var(--spacing,.0025rem)*500);--mds-stepper-bar-offset-margin:0;--mds-stepper-bar-scroll-behavior:smooth;--mds-stepper-bar-scrollbar-margin:0;--mds-stepper-bar-scrollbar-radius:0;--mds-stepper-bar-scrollbar-size:calc(var(--spacing,.0025rem)*200);--mds-stepper-bar-scrollbar-thumb-background:rgb(var(--tone-neutral-06,158 158 158));--mds-stepper-bar-scrollbar-track-background:rgb(var(--tone-neutral-08,107 107 107))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-progress,mds-stepper-bar-item):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-stepper-bar-offset-margin{syntax:"<length>";inherits:false;initial-value:0}@property --mds-stepper-bar-scroll-behavior{syntax:"smooth|auto";inherits:false;initial-value:smooth}@property --mds-stepper-bar-scrollbar-margin{syntax:"<length>";inherits:false;initial-value:0}@property --mds-stepper-bar-scrollbar-radius{syntax:"<length>";inherits:false;initial-value:0}:host{--mds-stepper-bar-gap:calc(var(--spacing,.0025rem)*500);--mds-stepper-bar-offset-margin:0;--mds-stepper-bar-scroll-behavior:smooth;--mds-stepper-bar-scrollbar-margin:0;--mds-stepper-bar-scrollbar-radius:0;--mds-stepper-bar-scrollbar-size:calc(var(--spacing,.0025rem)*200);--mds-stepper-bar-scrollbar-thumb-background:rgb(var(--tone-neutral-06,158 158 158));--mds-stepper-bar-scrollbar-track-background:rgb(var(--tone-neutral-08,107 107 107));display:grid;gap:calc(var(--spacing,.0025rem)*600);position:relative}.items{align-items:start;display:flex;flex-grow:1;gap:var(--mds-stepper-bar-gap,calc(var(--spacing,.0025rem)*500));margin:0 calc(var(--mds-stepper-bar-offset-margin,0)*-1);overflow:auto;padding:0 var(--mds-stepper-bar-offset-margin,0);position:relative;scroll-behavior:var(--mds-stepper-bar-scroll-behavior,smooth);-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;width:100%;z-index:10}:host([linear=true]) ::slotted(mds-stepper-bar-item),:host([linear]) ::slotted(mds-stepper-bar-item){pointer-events:none}:host([linear=false]) ::slotted(mds-stepper-bar-item){pointer-events:auto}.contents{display:flex;flex-direction:column;width:100%}:host-context(:root.pref-animation-reduce){--mds-stepper-bar-scroll-behavior:auto;transition-duration:0s}:is(:host-context(:root.pref-animation-reduce) .contents,:host-context(:root.pref-animation-reduce) .items){transition-duration:0s}:host(:not([navigation=scrollbar])) .items{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}:host(:not([navigation=scrollbar])) .items::-webkit-scrollbar{display:none}:host([navigation=scrollbar]) .items::-webkit-scrollbar{height:var(--mds-stepper-bar-scrollbar-size,calc(var(--spacing,.0025rem)*200));width:var(--mds-stepper-bar-scrollbar-size,calc(var(--spacing,.0025rem)*200))}:host([navigation=scrollbar]) .items::-webkit-scrollbar-track{background-color:var(--mds-stepper-bar-scrollbar-track-background,rgb(var(--tone-neutral-08,107 107 107)));border-radius:var(--mds-stepper-bar-scrollbar-radius,0);margin-block:var(--mds-stepper-bar-scrollbar-margin,0);margin-inline:var(--mds-stepper-bar-scrollbar-margin,0)}:host([navigation=scrollbar]) .items::-webkit-scrollbar-thumb{background-color:var(--mds-stepper-bar-scrollbar-thumb-background,rgb(var(--tone-neutral-06,158 158 158)));border-radius:var(--mds-stepper-bar-scrollbar-radius,0)}@supports (scrollbar-color:transparent transparent){.items{scrollbar-color:var(--mds-stepper-bar-scrollbar-thumb-background,rgb(var(--tone-neutral-06,158 158 158))) var(--mds-stepper-bar-scrollbar-track-background,rgb(var(--tone-neutral-08,107 107 107)));scrollbar-width:thin}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-stepper-bar-scroll-behavior:auto;transition-duration:0s}:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .contents,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .items{transition-duration:0s}}`;
+const mdsStepperBarCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-stepper-bar-gap:calc(var(--spacing,.0025rem)*500);--mds-stepper-bar-offset-margin:0;--mds-stepper-bar-scroll-behavior:smooth;--mds-stepper-bar-scrollbar-margin:0;--mds-stepper-bar-scrollbar-radius:0;--mds-stepper-bar-scrollbar-size:calc(var(--spacing,.0025rem)*200);--mds-stepper-bar-scrollbar-thumb-background:rgb(var(--tone-neutral-06,158 158 158));--mds-stepper-bar-scrollbar-track-background:rgb(var(--tone-neutral-08,107 107 107))}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-progress,mds-stepper-bar-item):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-stepper-bar-offset-margin{syntax:"<length>";inherits:false;initial-value:0}@property --mds-stepper-bar-scroll-behavior{syntax:"smooth|auto";inherits:false;initial-value:smooth}@property --mds-stepper-bar-scrollbar-margin{syntax:"<length>";inherits:false;initial-value:0}@property --mds-stepper-bar-scrollbar-radius{syntax:"<length>";inherits:false;initial-value:0}:host{--mds-stepper-bar-gap:calc(var(--spacing,.0025rem)*500);--mds-stepper-bar-offset-margin:0;--mds-stepper-bar-scroll-behavior:smooth;--mds-stepper-bar-scrollbar-margin:0;--mds-stepper-bar-scrollbar-radius:0;--mds-stepper-bar-scrollbar-size:calc(var(--spacing,.0025rem)*200);--mds-stepper-bar-scrollbar-thumb-background:rgb(var(--tone-neutral-06,158 158 158));--mds-stepper-bar-scrollbar-track-background:rgb(var(--tone-neutral-08,107 107 107));display:grid;gap:calc(var(--spacing,.0025rem)*600);position:relative}.items{align-items:start;display:flex;flex-grow:1;gap:var(--mds-stepper-bar-gap,calc(var(--spacing,.0025rem)*500));margin:0 calc(var(--mds-stepper-bar-offset-margin,0)*-1);overflow:auto;padding:0 var(--mds-stepper-bar-offset-margin,0);position:relative;scroll-behavior:var(--mds-stepper-bar-scroll-behavior,smooth);-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;width:100%;z-index:10}:host([linear=true]) ::slotted(mds-stepper-bar-item),:host([linear]) ::slotted(mds-stepper-bar-item){pointer-events:none}:host([linear=false]) ::slotted(mds-stepper-bar-item){pointer-events:auto}.contents{display:flex;flex-direction:column;width:100%}:host(:not([navigation=scrollbar])) .items{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}:host(:not([navigation=scrollbar])) .items::-webkit-scrollbar{display:none}:host([navigation=scrollbar]) .items::-webkit-scrollbar{height:var(--mds-stepper-bar-scrollbar-size,calc(var(--spacing,.0025rem)*200));width:var(--mds-stepper-bar-scrollbar-size,calc(var(--spacing,.0025rem)*200))}:host([navigation=scrollbar]) .items::-webkit-scrollbar-track{background-color:var(--mds-stepper-bar-scrollbar-track-background,rgb(var(--tone-neutral-08,107 107 107)));border-radius:var(--mds-stepper-bar-scrollbar-radius,0);margin-block:var(--mds-stepper-bar-scrollbar-margin,0);margin-inline:var(--mds-stepper-bar-scrollbar-margin,0)}:host([navigation=scrollbar]) .items::-webkit-scrollbar-thumb{background-color:var(--mds-stepper-bar-scrollbar-thumb-background,rgb(var(--tone-neutral-06,158 158 158)));border-radius:var(--mds-stepper-bar-scrollbar-radius,0)}@supports (scrollbar-color:transparent transparent){.items{scrollbar-color:var(--mds-stepper-bar-scrollbar-thumb-background,rgb(var(--tone-neutral-06,158 158 158))) var(--mds-stepper-bar-scrollbar-track-background,rgb(var(--tone-neutral-08,107 107 107)));scrollbar-width:thin}}@media (prefers-reduced-motion:reduce){:host{--mds-stepper-bar-scroll-behavior:auto}}`;
 
 const MdsStepperBar = class {
     constructor(hostRef) {
@@ -100,7 +100,7 @@ const MdsStepperBar = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '07b3ac18136f0bc4e6b7424238705c951a37e0bf' }, index.h("div", { key: '7d2e747d084bc581966e88c55ad19a8b27086030', class: "items", part: "items" }, index.h("slot", { key: '7934e741a279fdf3635c9ef56a92c96441f21081' })), index.h("div", { key: '3d3c6e31fa33b046604845886bfd94093e51bba8', class: "contents", part: "contents" }, index.h("slot", { key: '9af87d63470bf64e882477dc4f8d0e25159a708d', name: "content" }))));
+        return (index.h(index.Host, { key: 'bde1cc3ed68aa3d3350af4639fa0a4dbf3cc27ee' }, index.h("div", { key: 'f556e63f5e575d3c83b6aec4ea405c709d811121', class: "items", part: "items" }, index.h("slot", { key: '43e7514d9ba620109caa3f585e0a9f5cc92f0ed6' })), index.h("div", { key: '46e7419b2ef009a3e37b70d5a5bab92df25dd5f9', class: "contents", part: "contents" }, index.h("slot", { key: 'cddf350976b5910117d1d64bae6b87bd32c37954', name: "content" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {