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

package/dist/esm/mds-note.entry.js

@@ -2,6 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { m as miBaselineClose } from './close-J-ikDhyq.js';
 import { K as KeyboardManager } from './keyboard-manager-BudfaWhu.js';
 import { L as Locale } from './locale-a4oAcjYG.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 
 const deleteLabel$3 = "Αφαίρεση";
 var localeEl = {
@@ -23,7 +24,7 @@ var localeIt = {
 	deleteLabel: deleteLabel
 };
 
-const mdsNoteCss = () => `@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-note-background:rgb(var(--label-yellow-10,75 57 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-fold-color:rgb(var(--tone-neutral-10,60 60 60));--mds-note-fold-size:40px;--mds-note-selection-background:var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3)));--mds-note-selection-color:var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190)));--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-note-fold-size{syntax:"<length>";inherits:false;initial-value:40px}:host{--mds-note-background:rgb(var(--label-yellow-10,75 57 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-fold-color:rgb(var(--tone-neutral-10,60 60 60));--mds-note-fold-size:40px;--mds-note-selection-background:var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3)));--mds-note-selection-color:var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190)));gap:calc(var(--spacing,.0025rem)*200);padding:calc(var(--spacing,.0025rem)*600);--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));background-color:var(--mds-note-background,rgb(var(--label-yellow-10,75 57 3)));border-radius:.25rem;color:var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190)));display:grid;overflow:hidden;position:relative;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:color,background-color;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}:host ::slotted(mds-text){--mds-text-selection-background:var(--mds-note-selection-background,var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3))));--mds-text-selection-color:var(--mds-note-selection-color,var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190))))}:host([deletable]:not([deletable=false])){padding-right:calc(var(--spacing,.0025rem)*1600)}:host([deletable]:not([deletable=false])) .button-close{position:absolute;right:calc(var(--spacing,.0025rem)*400);top:calc(var(--spacing,.0025rem)*400)}.fold{border-color:transparent transparent var(--mds-note-fold-color,rgb(var(--tone-neutral-10,60 60 60))) transparent;border-style:solid;border-width:0 0 var(--mds-note-fold-size,40px) var(--mds-note-fold-size,40px);bottom:0;display:block;filter:drop-shadow(0 0 var(--mds-note-fold-size,40px) var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190))));height:calc(var(--spacing,.0025rem)*0);opacity:.4;pointer-events:none;position:absolute;right:0;-webkit-transition-duration:inherit;transition-duration:inherit;transition-property:border;width:calc(var(--spacing,.0025rem)*0)}.button-close{border-radius:var(--radius-full,1000px);padding:calc(var(--spacing,.0025rem)*100);--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:#0000;cursor:pointer;fill:var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190)));-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,fill,outline,outline-offset;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}.button-close:hover{background-color:rgb(var(--tone-neutral,0 0 0)/.5)}.title{align-items:flex-start;display:flex;gap:calc(var(--spacing,.0025rem)*400)}.title .button-close{margin-left:auto}:host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-09,135 8 30));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-selection-color:rgb(var(--label-amaranth-04,251 192 203))}:host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-09,3 77 90));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-selection-color:rgb(var(--label-aqua-04,81 225 250))}:host([variant=blue]){--mds-note-background:rgb(var(--label-blue-09,7 40 196));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-08,42 77 247));--mds-note-selection-color:rgb(var(--label-blue-04,196 206 253))}:host([variant=green]){--mds-note-background:rgb(var(--label-green-09,14 81 39));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-08,20 116 56));--mds-note-selection-color:rgb(var(--label-green-04,113 230 156))}:host([variant=lime]){--mds-note-background:rgb(var(--label-lime-09,51 79 8));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-08,73 112 12));--mds-note-selection-color:rgb(var(--label-lime-04,148 229 25))}:host([variant=orange]){--mds-note-background:rgb(var(--label-orange-09,116 49 3));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-08,167 71 4));--mds-note-selection-color:rgb(var(--label-orange-04,252 196 158))}:host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-09,131 14 71));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-selection-color:rgb(var(--label-orchid-04,248 192 220))}:host([variant=sky]){--mds-note-background:rgb(var(--label-sky-09,6 76 107));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-08,9 107 152));--mds-note-selection-color:rgb(var(--label-sky-04,148 217 249))}:host([variant=violet]){--mds-note-background:rgb(var(--label-violet-09,67 11 195));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-08,111 53 244));--mds-note-selection-color:rgb(var(--label-violet-04,216 200 252))}:host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-09,89 68 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-selection-color:rgb(var(--label-yellow-04,248 202 60))}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-animation-reduce) .fold{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-fold-color:rgb(var(--label-amaranth-06,246 99 125));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-07,239 14 52));--mds-note-selection-color:rgb(var(--label-amaranth-03,253 217 223))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-fold-color:rgb(var(--label-aqua-06,5 163 190));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-07,5 137 160));--mds-note-selection-color:rgb(var(--label-aqua-03,158 238 252))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=blue]){--mds-note-background:rgb(var(--label-blue-08,42 77 247));--mds-note-fold-color:rgb(var(--label-blue-06,121 143 250));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-07,85 113 249));--mds-note-selection-color:rgb(var(--label-blue-03,218 224 254))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=green]){--mds-note-background:rgb(var(--label-green-08,20 116 56));--mds-note-fold-color:rgb(var(--label-green-06,30 171 82));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-07,25 145 69));--mds-note-selection-color:rgb(var(--label-green-03,173 241 198))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=lime]){--mds-note-background:rgb(var(--label-lime-08,73 112 12));--mds-note-fold-color:rgb(var(--label-lime-06,108 167 18));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-07,90 139 15));--mds-note-selection-color:rgb(var(--label-lime-03,193 241 122))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=orange]){--mds-note-background:rgb(var(--label-orange-08,167 71 4));--mds-note-fold-color:rgb(var(--label-orange-06,247 105 6));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-07,208 88 5));--mds-note-selection-color:rgb(var(--label-orange-03,253 219 196))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-fold-color:rgb(var(--label-orchid-06,239 99 168));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-07,231 28 129));--mds-note-selection-color:rgb(var(--label-orchid-03,251 216 234))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=sky]){--mds-note-background:rgb(var(--label-sky-08,9 107 152));--mds-note-fold-color:rgb(var(--label-sky-06,13 158 224));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-07,11 133 188));--mds-note-selection-color:rgb(var(--label-sky-03,191 232 251))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=violet]){--mds-note-background:rgb(var(--label-violet-08,111 53 244));--mds-note-fold-color:rgb(var(--label-violet-06,166 129 248));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-07,141 95 246));--mds-note-selection-color:rgb(var(--label-violet-03,231 221 253))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-fold-color:rgb(var(--label-yellow-06,188 143 6));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-07,158 120 5));--mds-note-selection-color:rgb(var(--label-yellow-03,251 224 142))}:host-context(:root.pref-contrast-more){-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:host-context(:root.pref-contrast-more) .fold{bottom:calc(var(--spacing,.0025rem)*50);right:calc(var(--spacing,.0025rem)*50)}@property --tw-ease{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]))) .fold{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]))){-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-fold-color:rgb(var(--label-amaranth-06,246 99 125));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-07,239 14 52));--mds-note-selection-color:rgb(var(--label-amaranth-03,253 217 223))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-fold-color:rgb(var(--label-aqua-06,5 163 190));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-07,5 137 160));--mds-note-selection-color:rgb(var(--label-aqua-03,158 238 252))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=blue]){--mds-note-background:rgb(var(--label-blue-08,42 77 247));--mds-note-fold-color:rgb(var(--label-blue-06,121 143 250));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-07,85 113 249));--mds-note-selection-color:rgb(var(--label-blue-03,218 224 254))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=green]){--mds-note-background:rgb(var(--label-green-08,20 116 56));--mds-note-fold-color:rgb(var(--label-green-06,30 171 82));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-07,25 145 69));--mds-note-selection-color:rgb(var(--label-green-03,173 241 198))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=lime]){--mds-note-background:rgb(var(--label-lime-08,73 112 12));--mds-note-fold-color:rgb(var(--label-lime-06,108 167 18));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-07,90 139 15));--mds-note-selection-color:rgb(var(--label-lime-03,193 241 122))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=orange]){--mds-note-background:rgb(var(--label-orange-08,167 71 4));--mds-note-fold-color:rgb(var(--label-orange-06,247 105 6));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-07,208 88 5));--mds-note-selection-color:rgb(var(--label-orange-03,253 219 196))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-fold-color:rgb(var(--label-orchid-06,239 99 168));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-07,231 28 129));--mds-note-selection-color:rgb(var(--label-orchid-03,251 216 234))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=sky]){--mds-note-background:rgb(var(--label-sky-08,9 107 152));--mds-note-fold-color:rgb(var(--label-sky-06,13 158 224));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-07,11 133 188));--mds-note-selection-color:rgb(var(--label-sky-03,191 232 251))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=violet]){--mds-note-background:rgb(var(--label-violet-08,111 53 244));--mds-note-fold-color:rgb(var(--label-violet-06,166 129 248));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-07,141 95 246));--mds-note-selection-color:rgb(var(--label-violet-03,231 221 253))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-fold-color:rgb(var(--label-yellow-06,188 143 6));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-07,158 120 5));--mds-note-selection-color:rgb(var(--label-yellow-03,251 224 142))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .fold{bottom:calc(var(--spacing,.0025rem)*50);right:calc(var(--spacing,.0025rem)*50)}}`;
+const mdsNoteCss = () => `@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-note-background:rgb(var(--label-yellow-10,75 57 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-fold-color:rgb(var(--tone-neutral-10,60 60 60));--mds-note-fold-size:40px;--mds-note-selection-background:var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3)));--mds-note-selection-color:var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190)));--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-note-fold-size{syntax:"<length>";inherits:false;initial-value:40px}:host{--mds-note-background:rgb(var(--label-yellow-10,75 57 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-fold-color:rgb(var(--tone-neutral-10,60 60 60));--mds-note-fold-size:40px;--mds-note-selection-background:var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3)));--mds-note-selection-color:var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190)));--mds-note-transition-duration:var(--duration-300,.3s);--private-note-transition-duration:var(--mds-note-transition-duration);--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));background-color:var(--mds-note-background,rgb(var(--label-yellow-10,75 57 3)));border-radius:.25rem;color:var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190)));display:grid;gap:calc(var(--spacing,.0025rem)*200);overflow:hidden;padding:calc(var(--spacing,.0025rem)*600);position:relative;-webkit-transition-duration:var(--private-note-transition-duration);transition-duration:var(--private-note-transition-duration);transition-property:color,background-color;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}:host ::slotted(mds-text){--mds-text-selection-background:var(--mds-note-selection-background,var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3))));--mds-text-selection-color:var(--mds-note-selection-color,var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190))))}:host([deletable]:not([deletable=false])){padding-right:calc(var(--spacing,.0025rem)*1600)}:host([deletable]:not([deletable=false])) .button-close{position:absolute;right:calc(var(--spacing,.0025rem)*400);top:calc(var(--spacing,.0025rem)*400)}.fold{border-color:#0000 #0000 var(--mds-note-fold-color,rgb(var(--tone-neutral-10,60 60 60))) #0000;border-style:solid;border-width:0 0 var(--mds-note-fold-size,40px) var(--mds-note-fold-size,40px);bottom:0;display:block;filter:drop-shadow(0 0 var(--mds-note-fold-size,40px) var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190))));height:0;opacity:.4;pointer-events:none;position:absolute;right:0;-webkit-transition-duration:inherit;transition-duration:inherit;transition-property:border;width:0}.button-close{--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:#0000;border-radius:var(--radius-full,1000px);cursor:pointer;fill:var(--mds-note-color,rgb(var(--label-yellow-02,253 238 190)));padding:calc(var(--spacing,.0025rem)*100);-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,fill,outline,outline-offset;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}.button-close:hover{background-color:rgb(var(--tone-neutral,0 0 0)/.5)}.title{align-items:flex-start;display:flex;gap:calc(var(--spacing,.0025rem)*400)}.title .button-close{margin-left:auto}:host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-09,135 8 30));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-selection-color:rgb(var(--label-amaranth-04,251 192 203))}:host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-09,3 77 90));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-selection-color:rgb(var(--label-aqua-04,81 225 250))}:host([variant=blue]){--mds-note-background:rgb(var(--label-blue-09,7 40 196));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-08,42 77 247));--mds-note-selection-color:rgb(var(--label-blue-04,196 206 253))}:host([variant=green]){--mds-note-background:rgb(var(--label-green-09,14 81 39));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-08,20 116 56));--mds-note-selection-color:rgb(var(--label-green-04,113 230 156))}:host([variant=lime]){--mds-note-background:rgb(var(--label-lime-09,51 79 8));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-08,73 112 12));--mds-note-selection-color:rgb(var(--label-lime-04,148 229 25))}:host([variant=orange]){--mds-note-background:rgb(var(--label-orange-09,116 49 3));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-08,167 71 4));--mds-note-selection-color:rgb(var(--label-orange-04,252 196 158))}:host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-09,131 14 71));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-selection-color:rgb(var(--label-orchid-04,248 192 220))}:host([variant=sky]){--mds-note-background:rgb(var(--label-sky-09,6 76 107));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-08,9 107 152));--mds-note-selection-color:rgb(var(--label-sky-04,148 217 249))}:host([variant=violet]){--mds-note-background:rgb(var(--label-violet-09,67 11 195));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-08,111 53 244));--mds-note-selection-color:rgb(var(--label-violet-04,216 200 252))}:host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-09,89 68 3));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-selection-color:rgb(var(--label-yellow-04,248 202 60))}:host([pref-animation=reduce]){--private-note-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-fold-color:rgb(var(--label-amaranth-06,246 99 125));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-07,239 14 52));--mds-note-selection-color:rgb(var(--label-amaranth-03,253 217 223))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-fold-color:rgb(var(--label-aqua-06,5 163 190));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-07,5 137 160));--mds-note-selection-color:rgb(var(--label-aqua-03,158 238 252))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=blue]){--mds-note-background:rgb(var(--label-blue-08,42 77 247));--mds-note-fold-color:rgb(var(--label-blue-06,121 143 250));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-07,85 113 249));--mds-note-selection-color:rgb(var(--label-blue-03,218 224 254))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=green]){--mds-note-background:rgb(var(--label-green-08,20 116 56));--mds-note-fold-color:rgb(var(--label-green-06,30 171 82));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-07,25 145 69));--mds-note-selection-color:rgb(var(--label-green-03,173 241 198))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=lime]){--mds-note-background:rgb(var(--label-lime-08,73 112 12));--mds-note-fold-color:rgb(var(--label-lime-06,108 167 18));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-07,90 139 15));--mds-note-selection-color:rgb(var(--label-lime-03,193 241 122))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=orange]){--mds-note-background:rgb(var(--label-orange-08,167 71 4));--mds-note-fold-color:rgb(var(--label-orange-06,247 105 6));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-07,208 88 5));--mds-note-selection-color:rgb(var(--label-orange-03,253 219 196))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-fold-color:rgb(var(--label-orchid-06,239 99 168));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-07,231 28 129));--mds-note-selection-color:rgb(var(--label-orchid-03,251 216 234))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=sky]){--mds-note-background:rgb(var(--label-sky-08,9 107 152));--mds-note-fold-color:rgb(var(--label-sky-06,13 158 224));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-07,11 133 188));--mds-note-selection-color:rgb(var(--label-sky-03,191 232 251))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=violet]){--mds-note-background:rgb(var(--label-violet-08,111 53 244));--mds-note-fold-color:rgb(var(--label-violet-06,166 129 248));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-07,141 95 246));--mds-note-selection-color:rgb(var(--label-violet-03,231 221 253))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-fold-color:rgb(var(--label-yellow-06,188 143 6));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-07,158 120 5));--mds-note-selection-color:rgb(var(--label-yellow-03,251 224 142))}:host([pref-contrast=more]){-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:host([pref-contrast=more]) .fold{bottom:calc(var(--spacing,.0025rem)*50);right:calc(var(--spacing,.0025rem)*50)}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-note-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=amaranth]){--mds-note-background:rgb(var(--label-amaranth-08,193 11 42));--mds-note-fold-color:rgb(var(--label-amaranth-06,246 99 125));--mds-note-color:rgb(var(--label-amaranth-02,254 233 237));--mds-note-selection-background:rgb(var(--label-amaranth-07,239 14 52));--mds-note-selection-color:rgb(var(--label-amaranth-03,253 217 223))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=aqua]){--mds-note-background:rgb(var(--label-aqua-08,4 110 129));--mds-note-fold-color:rgb(var(--label-aqua-06,5 163 190));--mds-note-color:rgb(var(--label-aqua-02,203 246 254));--mds-note-selection-background:rgb(var(--label-aqua-07,5 137 160));--mds-note-selection-color:rgb(var(--label-aqua-03,158 238 252))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=blue]){--mds-note-background:rgb(var(--label-blue-08,42 77 247));--mds-note-fold-color:rgb(var(--label-blue-06,121 143 250));--mds-note-color:rgb(var(--label-blue-02,234 238 254));--mds-note-selection-background:rgb(var(--label-blue-07,85 113 249));--mds-note-selection-color:rgb(var(--label-blue-03,218 224 254))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=green]){--mds-note-background:rgb(var(--label-green-08,20 116 56));--mds-note-fold-color:rgb(var(--label-green-06,30 171 82));--mds-note-color:rgb(var(--label-green-02,211 247 224));--mds-note-selection-background:rgb(var(--label-green-07,25 145 69));--mds-note-selection-color:rgb(var(--label-green-03,173 241 198))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=lime]){--mds-note-background:rgb(var(--label-lime-08,73 112 12));--mds-note-fold-color:rgb(var(--label-lime-06,108 167 18));--mds-note-color:rgb(var(--label-lime-02,223 247 185));--mds-note-selection-background:rgb(var(--label-lime-07,90 139 15));--mds-note-selection-color:rgb(var(--label-lime-03,193 241 122))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=orange]){--mds-note-background:rgb(var(--label-orange-08,167 71 4));--mds-note-fold-color:rgb(var(--label-orange-06,247 105 6));--mds-note-color:rgb(var(--label-orange-02,254 235 222));--mds-note-selection-background:rgb(var(--label-orange-07,208 88 5));--mds-note-selection-color:rgb(var(--label-orange-03,253 219 196))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=orchid]){--mds-note-background:rgb(var(--label-orchid-08,187 19 102));--mds-note-fold-color:rgb(var(--label-orchid-06,239 99 168));--mds-note-color:rgb(var(--label-orchid-02,253 233 243));--mds-note-selection-background:rgb(var(--label-orchid-07,231 28 129));--mds-note-selection-color:rgb(var(--label-orchid-03,251 216 234))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=sky]){--mds-note-background:rgb(var(--label-sky-08,9 107 152));--mds-note-fold-color:rgb(var(--label-sky-06,13 158 224));--mds-note-color:rgb(var(--label-sky-02,219 242 253));--mds-note-selection-background:rgb(var(--label-sky-07,11 133 188));--mds-note-selection-color:rgb(var(--label-sky-03,191 232 251))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=violet]){--mds-note-background:rgb(var(--label-violet-08,111 53 244));--mds-note-fold-color:rgb(var(--label-violet-06,166 129 248));--mds-note-color:rgb(var(--label-violet-02,241 235 254));--mds-note-selection-background:rgb(var(--label-violet-07,141 95 246));--mds-note-selection-color:rgb(var(--label-violet-03,231 221 253))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=yellow]){--mds-note-background:rgb(var(--label-yellow-08,127 97 4));--mds-note-fold-color:rgb(var(--label-yellow-06,188 143 6));--mds-note-color:rgb(var(--label-yellow-02,253 238 190));--mds-note-selection-background:rgb(var(--label-yellow-07,158 120 5));--mds-note-selection-color:rgb(var(--label-yellow-03,251 224 142))}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .fold{bottom:calc(var(--spacing,.0025rem)*50);right:calc(var(--spacing,.0025rem)*50)}}`;
 
 const MdsNote = class {
     constructor(hostRef) {
@@ -48,9 +49,26 @@ const MdsNote = class {
             this.deleteEvent.emit();
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
     componentWillLoad() {
         this.t.lang(this.host);
     }
@@ -67,10 +85,15 @@ const MdsNote = class {
         this.km.detachClickBehavior();
     }
     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);
         this.km.detachClickBehavior();
     }
     render() {
-        return (h(Host, { key: 'bb7105ecd6e6a7fe003e2b4aafde387305eb7ca4', role: "note" }, this.deletable && (h("mds-button", { key: '8770db0d4b69a2abf27d9a27d49b2db0a7e659b5', title: this.t.get('deleteLabel'), icon: miBaselineClose, class: "button-close", variant: "dark", tone: "text", onClick: this.onClickClose.bind(this) })), h("slot", { key: '74ddb954eb7b8919c414a6cbc2279746f55992bd', name: "title" }), h("slot", { key: '088ab53a3820f94d61951b9147cdce50f1a45304' }), h("div", { key: 'c1cfcab4a0657963b6b7846ccd145afc62934541', "aria-hidden": "true", class: "fold" })));
+        return (h(Host, { key: 'eb8a1e0ee1b4989458e677f9cda903466a268a01', role: "note", "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.deletable && (h("mds-button", { key: '4902bb9fbabcacd895c61b01c8a9bbde6eeb889c', title: this.t.get('deleteLabel'), icon: miBaselineClose, class: "button-close", variant: "dark", tone: "text", onClick: this.onClickClose })), h("slot", { key: 'bbf71de4e782ea38d7f395ab8a791d7833df8bb5', name: "title" }), h("slot", { key: '2f2d98ff620cc664316d7dd87505e9d7cc4db543' }), h("div", { key: '2f1fe1b333b697c162c478c02f313119c76e49d4', "aria-hidden": "true", class: "fold" })));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,7 +1,8 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-CAd5312P.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 import { o as offset, s as shift, c as computePosition, d as autoUpdate } from './floating-ui.dom-8RYXTPXs.js';
 
-const mdsNotificationCss = () => `@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-notification-color:rgb(var(--tone-neutral,0 0 0));--mds-notification-dot-background:rgb(var(--status-error-05,250 165 160));--mds-notification-dot-padding:6px;--mds-notification-min-width:var(--mds-notification-size,20px);--mds-notification-ring-color:rgb(var(--tone-neutral,0 0 0));--mds-notification-ring-size:2px;--mds-notification-size:20px;--mds-notification-transition-duration:.2s;--mds-notification-translate-offset-x:-1.75;--mds-notification-translate-offset-y:-2;--mds-notification-translate:translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)));--tw-duration:initial;--tw-ease:initial}}}@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}@property --mds-notification-dot-padding{syntax:"<length>";inherits:false;initial-value:6px}@property --mds-notification-ring-size{syntax:"<length>";inherits:false;initial-value:2px}@property --mds-notification-size{syntax:"<length>";inherits:false;initial-value:20px}@property --mds-notification-transition-duration{syntax:"<time>";inherits:false;initial-value:.2s}@property --mds-notification-translate-offset-x{syntax:"<number>";inherits:false;initial-value:-1.75}@property --mds-notification-translate-offset-y{syntax:"<number>";inherits:false;initial-value:-2}:host{--mds-notification-color:rgb(var(--tone-neutral,0 0 0));--mds-notification-dot-background:rgb(var(--status-error-05,250 165 160));--mds-notification-dot-padding:6px;--mds-notification-min-width:var(--mds-notification-size,20px);--mds-notification-ring-color:rgb(var(--tone-neutral,0 0 0));--mds-notification-ring-size:2px;--mds-notification-size:20px;--mds-notification-transition-duration:.2s;--mds-notification-transition-timing-function:var(--ease-out-cubic,cubic-bezier(.215,.61,.355,1));--mds-notification-translate-offset-x:-1.75;--mds-notification-translate-offset-y:-2;--mds-notification-translate:translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)));align-items:center;border-radius:var(--radius-full,1000px);bottom:100%;color:var(--mds-notification-color,rgb(var(--tone-neutral,0 0 0)));display:inline-flex;height:var(--mds-notification-size,20px);justify-content:flex-end;min-width:max-content;pointer-events:none;width:var(--mds-notification-size,20px);z-index:10}:host([strategy=absolute]),:host([strategy=fixed]){opacity:0;right:100%;-webkit-transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(0);transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(0);-webkit-transform-origin:calc(100% - var(--mds-notification-size,20px)/2) 50%;transform-origin:calc(100% - var(--mds-notification-size,20px)/2) 50%;-webkit-transition-duration:var(--mds-notification-transition-duration,.2s);transition-duration:var(--mds-notification-transition-duration,.2s);transition-property:color,height,opacity,transform,width;-webkit-transition-timing-function:var(--mds-notification-transition-timing-function);transition-timing-function:var(--mds-notification-transition-timing-function)}:host([strategy=absolute]){position:absolute}:host([strategy=fixed]){position:fixed}.dot{border-radius:var(--radius-full,1000px);--tw-duration:.3s;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));align-items:center;background-color:var(--mds-notification-dot-background,rgb(var(--status-error-05,250 165 160)));-webkit-box-shadow:0 0 0 var(--mds-notification-ring-size,2px) var(--mds-notification-ring-color,rgb(var(--tone-neutral,0 0 0)));box-shadow:0 0 0 var(--mds-notification-ring-size,2px) var(--mds-notification-ring-color,rgb(var(--tone-neutral,0 0 0)));box-sizing:border-box;display:inline-flex;justify-content:center;line-height:var(--mds-notification-size,20px);min-width:var(--mds-notification-min-width,var(--mds-notification-size,20px));padding-left:var(--mds-notification-dot-padding,6px);padding-right:var(--mds-notification-dot-padding,6px);position:static;transition-duration:.3s;transition-property:background-color,color,box-shadow;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1));white-space:nowrap}:host([strategy=absolute]) .dot,:host([strategy=fixed]) .dot{position:absolute}.spacer{box-sizing:border-box;display:inline-flex;height:var(--mds-notification-size,20px);width:var(--mds-notification-min-width,var(--mds-notification-size,20px))}:host([visible=false][strategy=absolute]),:host([visible=false][strategy=fixed]){opacity:1;--tw-ease:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19));-webkit-transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(0);transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(0);transition-timing-function:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19))}:host([strategy=absolute]:not([visible=false])),:host([strategy=fixed]:not([visible=false])),:host([visible=true][strategy=absolute]),:host([visible=true][strategy=fixed]){opacity:1;--tw-ease:var(--ease-out-cubic,cubic-bezier(.215,.61,.355,1));-webkit-transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(1);transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(1);transition-timing-function:var(--ease-out-cubic,cubic-bezier(.215,.61,.355,1))}:host(:not([target])),:host([strategy=disabled]){opacity:1;position:static;transform:scale(1);-webkit-transform-origin:unset;transform-origin:unset;transition-duration:0s}:host(:not([target])) .dot,:host([strategy=disabled]) .dot{position:static}:host-context(.pref-animation-reduce){transition-duration:0s}:host-context(.pref-animation-reduce) .dot{transition-duration:0s}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{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]))) .dot{transition-duration:0s}}`;
+const mdsNotificationCss = () => `@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-notification-color:rgb(var(--tone-neutral,0 0 0));--mds-notification-dot-background:rgb(var(--status-error-05,250 165 160));--mds-notification-dot-padding:6px;--mds-notification-min-width:var(--mds-notification-size,20px);--mds-notification-ring-color:rgb(var(--tone-neutral,0 0 0));--mds-notification-ring-size:2px;--mds-notification-size:20px;--mds-notification-transition-duration:.2s;--mds-notification-translate-offset-x:-1.75;--mds-notification-translate-offset-y:-2;--mds-notification-translate:translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)));--tw-ease:initial}}}: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}@property --mds-notification-dot-padding{syntax:"<length>";inherits:false;initial-value:6px}@property --mds-notification-ring-size{syntax:"<length>";inherits:false;initial-value:2px}@property --mds-notification-size{syntax:"<length>";inherits:false;initial-value:20px}@property --mds-notification-transition-duration{syntax:"<time>";inherits:false;initial-value:.2s}@property --mds-notification-translate-offset-x{syntax:"<number>";inherits:false;initial-value:-1.75}@property --mds-notification-translate-offset-y{syntax:"<number>";inherits:false;initial-value:-2}:host{--mds-notification-color:rgb(var(--tone-neutral,0 0 0));--mds-notification-dot-background:rgb(var(--status-error-05,250 165 160));--mds-notification-dot-padding:6px;--mds-notification-min-width:var(--mds-notification-size,20px);--mds-notification-ring-color:rgb(var(--tone-neutral,0 0 0));--mds-notification-ring-size:2px;--mds-notification-size:20px;--mds-notification-transition-duration:.2s;--private-notification-transition-duration:var(--mds-notification-transition-duration,.2s);--mds-notification-dot-transition-duration:var(--duration-300,.3s);--private-notification-dot-transition-duration:var(--mds-notification-dot-transition-duration);--mds-notification-transition-timing-function:var(--ease-out-cubic,cubic-bezier(.215,.61,.355,1));--mds-notification-translate-offset-x:-1.75;--mds-notification-translate-offset-y:-2;--mds-notification-translate:translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)));align-items:center;border-radius:var(--radius-full,1000px);bottom:100%;color:var(--mds-notification-color,rgb(var(--tone-neutral,0 0 0)));display:inline-flex;height:var(--mds-notification-size,20px);justify-content:flex-end;min-width:max-content;pointer-events:none;width:var(--mds-notification-size,20px);z-index:10}:host([strategy=absolute]),:host([strategy=fixed]){opacity:0;right:100%;-webkit-transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(0);transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(0);-webkit-transform-origin:calc(100% - var(--mds-notification-size,20px)/2) 50%;transform-origin:calc(100% - var(--mds-notification-size,20px)/2) 50%;-webkit-transition-duration:var(--private-notification-transition-duration);transition-duration:var(--private-notification-transition-duration);transition-property:color,height,opacity,transform,width;-webkit-transition-timing-function:var(--mds-notification-transition-timing-function);transition-timing-function:var(--mds-notification-transition-timing-function)}:host([strategy=absolute]){position:absolute}:host([strategy=fixed]){position:fixed}.dot{--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));align-items:center;background-color:var(--mds-notification-dot-background,rgb(var(--status-error-05,250 165 160)));border-radius:var(--radius-full,1000px);-webkit-box-shadow:0 0 0 var(--mds-notification-ring-size,2px) var(--mds-notification-ring-color,rgb(var(--tone-neutral,0 0 0)));box-shadow:0 0 0 var(--mds-notification-ring-size,2px) var(--mds-notification-ring-color,rgb(var(--tone-neutral,0 0 0)));box-sizing:border-box;display:inline-flex;justify-content:center;line-height:var(--mds-notification-size,20px);min-height:var(--mds-notification-size,20px);min-width:var(--mds-notification-min-width,var(--mds-notification-size,20px));padding-left:var(--mds-notification-dot-padding,6px);padding-right:var(--mds-notification-dot-padding,6px);position:static;-webkit-transition-duration:var(--private-notification-dot-transition-duration);transition-duration:var(--private-notification-dot-transition-duration);transition-property:background-color,color,box-shadow;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1));white-space:nowrap}:host([strategy=absolute]) .dot,:host([strategy=fixed]) .dot{position:absolute}.spacer{box-sizing:border-box;display:inline-flex;height:var(--mds-notification-size,20px);width:var(--mds-notification-min-width,var(--mds-notification-size,20px))}:host([dismissed]:not([dismissed=false])[strategy=absolute]),:host([dismissed]:not([dismissed=false])[strategy=fixed]){--tw-ease:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19));opacity:1;-webkit-transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(0);transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(0);transition-timing-function:var(--ease-in-cubic,cubic-bezier(.55,.055,.675,.19))}:host([strategy=absolute]:not([dismissed])),:host([strategy=absolute][dismissed=false]),:host([strategy=fixed]:not([dismissed])),:host([strategy=fixed][dismissed=false]){--tw-ease:var(--ease-out-cubic,cubic-bezier(.215,.61,.355,1));opacity:1;-webkit-transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(1);transform:var(--mds-notification-translate,translate(calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-x,-1.75)),calc(var(--mds-notification-size,20px)/var(--mds-notification-translate-offset-y,-2)))) scale(1);transition-timing-function:var(--ease-out-cubic,cubic-bezier(.215,.61,.355,1))}:host(:not([target])),:host([strategy=disabled]){opacity:1;position:static;transform:scale(1);-webkit-transform-origin:unset;transform-origin:unset;transition-duration:0s}:host(:not([target])) .dot,:host([strategy=disabled]) .dot{position:static}:host([pref-animation=reduce]){--private-notification-transition-duration:0s;--private-notification-dot-transition-duration:0s}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-notification-transition-duration:0s;--private-notification-dot-transition-duration:0s}}`;
 
 const MdsNotification = class {
     constructor(hostRef) {
@@ -11,9 +12,9 @@ const MdsNotification = class {
          */
         this.value = 0;
         /**
-         * Specifies if the notification is visible
+         * Specifies if the notification is dismissed
          */
-        this.visible = true;
+        this.dismissed = false;
         /**
          * Specifies the position strategy of the notification
          */
@@ -36,7 +37,9 @@ const MdsNotification = class {
             });
         };
         this.clean = (value) => {
-            if (this.max) {
+            if (value === 0 || isNaN(value))
+                return '';
+            if (this.max !== undefined && this.max !== 0 && !Number.isNaN(this.max)) {
                 if (value > this.max) {
                     return `+${Number(this.max).toLocaleString()}`;
                 }
@@ -44,13 +47,18 @@ const MdsNotification = class {
             return Number(value).toLocaleString();
         };
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+    }
     componentDidRender() {
-        if (!this.target) {
+        if (this.target === '') {
             this.strategy = 'disabled';
             return;
         }
         const c = document.querySelector(this.target);
-        if (!c)
+        if (c == null)
             throw new Error('No valid target found');
         this.caller = c;
     }
@@ -58,13 +66,15 @@ const MdsNotification = class {
         if (this.strategy === 'disabled') {
             return;
         }
-        if (this.target && !this.cleanupAutoUpdate) {
+        if (this.target !== '' && this.cleanupAutoUpdate == null) {
             setTimeout(() => {
                 this.cleanupAutoUpdate = autoUpdate(this.caller, this.host, this.updatePosition);
             }, 100);
         }
     }
     disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
         this.cleanupAutoUpdate = () => { };
     }
     strategyHandler(newValue) {
@@ -74,7 +84,7 @@ const MdsNotification = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'ec403d27cc9c21f61b0a4378963b718752d944ed', "aria-labelledby": this.target, "aria-label": (_a = this.value) !== null && _a !== void 0 ? _a : '0' }, h("mds-text", { key: '28628bbfc84407df67f6accc1478df951695a408', typography: "caption", class: "dot", "aria-hidden": "true" }, this.value ? this.clean(this.value) : '')));
+        return (h(Host, { key: '6f224fcb0e2aa7a9b0c2b43f0fd13dce05ee5c64', "aria-labelledby": this.target, "aria-label": (_a = this.value) !== null && _a !== void 0 ? _a : '0', "pref-animation": this.prefAnimation }, h("mds-text", { key: '22c5441fd70f730a9696208688463ef36e8396e7', typography: "caption", class: "dot", "aria-hidden": "true" }, this.clean(this.value))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/mds-paginator-item.entry.js

@@ -1,15 +1,24 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-CAd5312P.js';
 import { K as KeyboardManager } from './keyboard-manager-BudfaWhu.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 
-const mdsPaginatorItemCss = () => `@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-paginator-item-background-disabled:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08,107 107 107));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03,211 226 255));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-color-selected:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-radius:200px;--mds-paginator-item-size:calc(var(--spacing,.0025rem)*900);--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-icon,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-paginator-item-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-paginator-item-radius{syntax:"<length>";inherits:false;initial-value:200px}:host{--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08,107 107 107));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03,211 226 255));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-color-selected:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-radius:200px;--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);--mds-paginator-item-shadow:none;--mds-paginator-item-size:calc(var(--spacing,.0025rem)*900);animation-duration:var(--magma-outline-animation-duration,1s);animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:focus-bounce;animation-play-state:paused;animation-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));padding-inline:calc(var(--spacing,.0025rem)*300);--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));align-items:center;background-color:var(--mds-paginator-item-background,transparent);border-radius:var(--mds-paginator-item-radius,200px);-webkit-box-shadow:var(--mds-paginator-item-shadow);box-shadow:var(--mds-paginator-item-shadow);box-sizing:border-box;color:var(--mds-paginator-item-color,rgb(var(--tone-neutral-02,244 244 244)));cursor:pointer;display:inline-flex;flex-shrink:0;height:var(--mds-paginator-item-size,calc(var(--spacing,.0025rem)*900));justify-content:center;min-width:var(--mds-paginator-item-size,calc(var(--spacing,.0025rem)*900));transition-duration:.2s;-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-property:background-color,box-shadow,color,outline,outline-offset;transition-timing-function:ease-in-out;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));-webkit-user-select:none;user-select:none}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}:host(:hover){background-color:var(--mds-paginator-item-background-hover,rgb(var(--tone-neutral-08,107 107 107)));-webkit-box-shadow:var(--mds-paginator-item-shadow-hover);box-shadow:var(--mds-paginator-item-shadow-hover);color:var(--mds-paginator-item-color-hover,rgb(var(--tone-neutral-02,244 244 244)));fill:var(--mds-paginator-item-color-hover,rgb(var(--tone-neutral-02,244 244 244)))}:host([icon]){padding:calc(var(--spacing,.0025rem)*0)}:host([selected]){background-color:var(--mds-paginator-item-background-selected,rgb(var(--variant-primary-03,211 226 255)));-webkit-box-shadow:var(--mds-paginator-item-shadow-selected);box-shadow:var(--mds-paginator-item-shadow-selected);color:var(--mds-paginator-item-color-selected,rgb(var(--tone-neutral,0 0 0)));fill:var(--mds-paginator-item-color-selected,rgb(var(--tone-neutral,0 0 0)));pointer-events:none}:host([disabled]){background-color:var(--mds-paginator-item-background-disabled,rgb(var(--tone-neutral-09,76 76 76)));-webkit-box-shadow:var(--mds-paginator-item-shadow-disabled);box-shadow:var(--mds-paginator-item-shadow-disabled);color:var(--mds-paginator-item-color-disabled,rgb(var(--tone-neutral-06,158 158 158)));fill:var(--mds-paginator-item-color-disabled,rgb(var(--tone-neutral-06,158 158 158)));pointer-events:none}.icon{fill:currentColor;padding-inline:calc(var(--spacing,.0025rem)*0)}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08,107 107 107));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03,211 226 255));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-color-selected:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);--mds-paginator-item-shadow:none}@property --tw-ease{syntax:"*";inherits:false}@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-paginator-item-background-disabled:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08,107 107 107));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03,211 226 255));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-color-selected:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);--mds-paginator-item-shadow:none}}`;
+const mdsPaginatorItemCss = () => `@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-paginator-item-background-disabled:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08,107 107 107));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03,211 226 255));--mds-paginator-item-background:#0000;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-color-selected:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-radius:200px;--mds-paginator-item-size:calc(var(--spacing,.0025rem)*900);--tw-ease:initial}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-icon,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-paginator-item-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-paginator-item-radius{syntax:"<length>";inherits:false;initial-value:200px}:host{--mds-paginator-item-transition-duration:var(--duration-200,.2s);--private-paginator-item-transition-duration:var(--mds-paginator-item-transition-duration);--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08,107 107 107));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03,211 226 255));--mds-paginator-item-background:#0000;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-color-selected:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-radius:200px;--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);--mds-paginator-item-shadow:none;--mds-paginator-item-size:calc(var(--spacing,.0025rem)*900);animation-duration:var(--magma-outline-animation-duration,1s);animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:focus-bounce;animation-play-state:paused;animation-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));align-items:center;background-color:var(--mds-paginator-item-background,#0000);border-radius:var(--mds-paginator-item-radius,200px);-webkit-box-shadow:var(--mds-paginator-item-shadow);box-shadow:var(--mds-paginator-item-shadow);box-sizing:border-box;color:var(--mds-paginator-item-color,rgb(var(--tone-neutral-02,244 244 244)));cursor:pointer;display:inline-flex;flex-shrink:0;height:var(--mds-paginator-item-size,calc(var(--spacing,.0025rem)*900));justify-content:center;min-width:var(--mds-paginator-item-size,calc(var(--spacing,.0025rem)*900));padding-inline:calc(var(--spacing,.0025rem)*300);transition-duration:.2s;-webkit-transition-duration:var(--private-paginator-item-transition-duration);transition-duration:var(--private-paginator-item-transition-duration);transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-property:background-color,box-shadow,color,outline,outline-offset;transition-timing-function:ease-in-out;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));-webkit-user-select:none;user-select:none}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}:host(:hover){background-color:var(--mds-paginator-item-background-hover,rgb(var(--tone-neutral-08,107 107 107)));-webkit-box-shadow:var(--mds-paginator-item-shadow-hover);box-shadow:var(--mds-paginator-item-shadow-hover);color:var(--mds-paginator-item-color-hover,rgb(var(--tone-neutral-02,244 244 244)));fill:var(--mds-paginator-item-color-hover,rgb(var(--tone-neutral-02,244 244 244)))}:host([icon]){padding:0}:host([selected]){background-color:var(--mds-paginator-item-background-selected,rgb(var(--variant-primary-03,211 226 255)));-webkit-box-shadow:var(--mds-paginator-item-shadow-selected);box-shadow:var(--mds-paginator-item-shadow-selected);color:var(--mds-paginator-item-color-selected,rgb(var(--tone-neutral,0 0 0)));fill:var(--mds-paginator-item-color-selected,rgb(var(--tone-neutral,0 0 0)));pointer-events:none}:host([disabled]){background-color:var(--mds-paginator-item-background-disabled,rgb(var(--tone-neutral-09,76 76 76)));-webkit-box-shadow:var(--mds-paginator-item-shadow-disabled);box-shadow:var(--mds-paginator-item-shadow-disabled);color:var(--mds-paginator-item-color-disabled,rgb(var(--tone-neutral-06,158 158 158)));fill:var(--mds-paginator-item-color-disabled,rgb(var(--tone-neutral-06,158 158 158)));pointer-events:none}.icon{fill:currentColor;padding-inline:0}:host([pref-animation=reduce]){--private-paginator-item-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08,107 107 107));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03,211 226 255));--mds-paginator-item-background:#0000;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-color-selected:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);--mds-paginator-item-shadow:none}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-paginator-item-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08,107 107 107));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03,211 226 255));--mds-paginator-item-background:#0000;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-color-selected:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);--mds-paginator-item-shadow:none}}`;
 
 const MdsPaginatorItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.km = new KeyboardManager();
-        this.disconnectedCallback = () => {
-            this.km.detachClickBehavior();
-        };
+    }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
     }
     componentDidLoad() {
         this.km.addElement(this.host);
@@ -22,8 +31,15 @@ const MdsPaginatorItem = class {
         }
         this.km.detachClickBehavior();
     }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.unsubscribePrefAnimation) === 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);
+        this.km.detachClickBehavior();
+    }
     render() {
-        return (h(Host, { key: '5fb1effadd36aa5f45ca7cd090b890abd3f0df39', tabindex: "0" }, this.icon !== undefined ? (h("mds-icon", { class: "icon", name: this.icon })) : (h("mds-text", { class: "text", typography: "caption" }, h("b", null, h("slot", null))))));
+        return (h(Host, { key: '45f9712aabb1119f72bc76986fc0043ea7839b93', tabindex: "0", "pref-animation": this.prefAnimation, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.icon !== undefined ? (h("mds-icon", { class: "icon", name: this.icon })) : (h("mds-text", { class: "text", typography: "caption" }, h("b", null, h("slot", null))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/mds-paginator.entry.js

@@ -1,8 +1,9 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CAd5312P.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 import { m as miBaselineArrowBack } from './arrow-back-DnEUG7st.js';
 import { m as miBaselineArrowForward } from './arrow-forward-Bd0uuNDE.js';
 
-const mdsPaginatorCss = () => `@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-paginator-background:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-scroll-behavior:smooth;--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-paginator-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-paginator-scroll-behavior{syntax:"smooth|auto";inherits:false;initial-value:smooth}:host{--mds-paginator-background:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-scroll-behavior:smooth;align-items:center;display:flex;gap:calc(var(--spacing,.0025rem)*100)}.pages{margin-inline:calc(var(--spacing,.0025rem)*200);-webkit-overflow-scrolling:touch;-ms-overflow-style:none;border-radius:var(--radius-full,1000px);padding:calc(var(--spacing,.0025rem)*200);scrollbar-width:none;--tw-duration:.2s;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));align-items:center;background-color:var(--mds-paginator-background,rgb(var(--tone-neutral-09,76 76 76)));display:flex;flex-shrink:1;gap:2px;overflow:auto;scroll-behavior:var(--mds-paginator-scroll-behavior,smooth);transition-duration:.2s;transition-property:background-color,box-shadow;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}.pages::-webkit-scrollbar{display:none}:host-context(:root.pref-animation-reduce){--mds-paginator-scroll-behavior:auto;transition-duration:0s}:host-context(:root.pref-animation-reduce) .pages{--mds-paginator-scroll-behavior:auto;transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-paginator-background:rgb(var(--tone-neutral-09,76 76 76))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .pages{-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}:host-context(:root.pref-contrast-more) .pages{-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:host-context(:root.pref-contrast-more) .item{--mds-paginator-item-background-hover:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-shadow-hover:var(--shadow-outline-50) inset;--mds-paginator-item-shadow:none}:is(:host-context(:root.pref-contrast-more) .item-first,:host-context(:root.pref-contrast-more) .item-last,:host-context(:root.pref-contrast-more) .item-icon){--mds-paginator-item-shadow-disabled:var(--shadow-outline-50) inset;--mds-paginator-item-shadow-hover:var(--shadow-outline-50) inset;--mds-paginator-item-shadow:var(--shadow-outline-50) inset}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{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]))) .pages{--mds-paginator-scroll-behavior:auto;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-paginator-background:rgb(var(--tone-neutral-09,76 76 76))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .pages{-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .pages{-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item{--mds-paginator-item-background-hover:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-shadow-hover:var(--shadow-outline-50) inset;--mds-paginator-item-shadow:none}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item-first,:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item-icon,:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item-last{--mds-paginator-item-shadow-disabled:var(--shadow-outline-50) inset;--mds-paginator-item-shadow-hover:var(--shadow-outline-50) inset;--mds-paginator-item-shadow:var(--shadow-outline-50) inset}}`;
+const mdsPaginatorCss = () => `@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-paginator-background:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-scroll-behavior:smooth;--tw-ease:initial}}}:host(:not(:is([hydrated],.hydrated))),mds-paginator-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-paginator-scroll-behavior{syntax:"smooth|auto";inherits:false;initial-value:smooth}:host{--mds-paginator-background:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-scroll-behavior:smooth;--mds-paginator-transition-duration:var(--duration-200,.2s);--private-paginator-transition-duration:var(--mds-paginator-transition-duration);align-items:center;display:flex;gap:calc(var(--spacing,.0025rem)*100)}.pages{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));align-items:center;background-color:var(--mds-paginator-background,rgb(var(--tone-neutral-09,76 76 76)));border-radius:var(--radius-full,1000px);display:flex;flex-shrink:1;gap:2px;margin-inline:calc(var(--spacing,.0025rem)*200);overflow:auto;padding:calc(var(--spacing,.0025rem)*200);scroll-behavior:var(--mds-paginator-scroll-behavior,smooth);-webkit-transition-duration:var(--private-paginator-transition-duration);transition-duration:var(--private-paginator-transition-duration);transition-property:background-color,box-shadow;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}.pages::-webkit-scrollbar{display:none}:host([pref-animation=reduce]){--private-paginator-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-paginator-background:rgb(var(--tone-neutral-09,76 76 76))}:host([pref-theme=dark]:not([pref-theme-scheme=light])) .pages{-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}:host([pref-contrast=more]) .pages{-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:host([pref-contrast=more]) .item{--mds-paginator-item-background-hover:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-shadow-hover:var(--shadow-outline-50) inset;--mds-paginator-item-shadow:none}:host([pref-contrast=more]) :is(.item-first,.item-icon,.item-last){--mds-paginator-item-shadow-disabled:var(--shadow-outline-50) inset;--mds-paginator-item-shadow-hover:var(--shadow-outline-50) inset;--mds-paginator-item-shadow:var(--shadow-outline-50) inset}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host{--mds-paginator-scroll-behavior:auto}:host(:not([pref-animation])),:host([pref-animation=system]){--private-paginator-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-paginator-background:rgb(var(--tone-neutral-09,76 76 76))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))) .pages{-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}}@media (prefers-contrast:more){:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .pages{-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .item{--mds-paginator-item-background-hover:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-shadow-hover:var(--shadow-outline-50) inset;--mds-paginator-item-shadow:none}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) :is(.item-first,.item-icon,.item-last){--mds-paginator-item-shadow-disabled:var(--shadow-outline-50) inset;--mds-paginator-item-shadow-hover:var(--shadow-outline-50) inset;--mds-paginator-item-shadow:var(--shadow-outline-50) inset}}`;
 
 const MdsPaginator = class {
     constructor(hostRef) {
@@ -59,6 +60,42 @@ const MdsPaginator = class {
             }
             this.pageChangedEvent.emit({ page: this.currentPage, caller });
         };
+        this.handlePrevClick = (event) => {
+            this.goToPage(this.currentPage - 1, event.target);
+        };
+        this.handleFirstClick = (event) => {
+            this.goToPage(1, event.target);
+        };
+        this.handlePageClick = (page) => (event) => {
+            this.goToPage(page, event.target);
+        };
+        this.handleLastClick = (event) => {
+            this.goToPage(this.pages, event.target);
+        };
+        this.handleNextClick = (event) => {
+            this.goToPage(this.currentPage + 1, event.target);
+        };
+    }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = 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() {
         setTimeout(() => {
@@ -66,7 +103,7 @@ const MdsPaginator = class {
         }, 10);
     }
     render() {
-        return (h(Host, { key: '53dadbcd0f1a03c83615b9847868c3d16b8e2b04' }, h("mds-paginator-item", { key: 'e9e6a0ce2b6dd608c5bef66e9eb928794d2bebb7', class: "item-icon", icon: miBaselineArrowBack, disabled: this.currentPage === 1, onClick: (ev) => this.goToPage(this.currentPage - 1, ev.target) }), this.pages > 0 && (h("mds-paginator-item", { key: 'ab71d039385d9255485e44e99fc4847e8de97f4d', class: "item-first", selected: this.currentPage === 1, onClick: (ev) => this.goToPage(1, ev.target) }, "1")), this.pages > 2 && (h("div", { key: 'da162b65848571503faded3ea6b856e617dda1f8', class: "pages" }, Array.from(Array(this.pages - 2).keys()).map((i) => (h("mds-paginator-item", { key: i, class: "item", selected: this.currentPage === i + 2, onClick: (ev) => this.goToPage(i + 2, ev.target), onFocus: this.focus }, i + 2))))), this.pages > 1 && (h("mds-paginator-item", { key: '3b3206c3545b29c8fac56754b3d18918ea9d517f', class: "item-last", selected: this.currentPage === this.pages, onClick: (ev) => this.goToPage(this.pages, ev.target) }, this.pages)), h("mds-paginator-item", { key: '0b909ae6420a8744617ade4372aacbc4ca9e2795', class: "item-icon", icon: miBaselineArrowForward, disabled: this.currentPage === this.pages, onClick: (ev) => this.goToPage(this.currentPage + 1, ev.target) })));
+        return (h(Host, { key: 'bc0ed7f7a7267fad452ad2186692f7198797dada', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("mds-paginator-item", { key: '0704650f6f83b9a4ff5bc6f112b9d448feeac6ac', class: "item-icon", icon: miBaselineArrowBack, disabled: this.currentPage === 1, onClick: this.handlePrevClick }), this.pages > 0 && (h("mds-paginator-item", { key: '3247caa7de6b88ed40b8c1206d45b32de40c0ad0', class: "item-first", selected: this.currentPage === 1, onClick: this.handleFirstClick }, "1")), this.pages > 2 && (h("div", { key: 'a06359ddb8fef5e739d3700c2c1dce88bc44b49a', class: "pages" }, Array.from(Array(this.pages - 2).keys()).map((i) => (h("mds-paginator-item", { key: i, class: "item", selected: this.currentPage === i + 2, onClick: this.handlePageClick(i + 2), onFocus: this.focus }, i + 2))))), this.pages > 1 && (h("mds-paginator-item", { key: '5fdc19718a0e64787d10539fb1922aa5a917caf3', class: "item-last", selected: this.currentPage === this.pages, onClick: this.handleLastClick }, this.pages)), h("mds-paginator-item", { key: '24fb27d454ecc1bb01334958caf93e0d2de71b02', class: "item-icon", icon: miBaselineArrowForward, disabled: this.currentPage === this.pages, onClick: this.handleNextClick })));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/mds-policy-ai.entry.js

@@ -100,7 +100,7 @@ var localeIt = {
 	linkLabelTitle: linkLabelTitle
 };
 
-const mdsPolicyAiCss = () => `@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 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;:host(:not(:is([hydrated],.hydrated))),:is(mds-banner,mds-button,mds-chip,mds-dropdown,mds-help,mds-icon,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}:host(:not([variant=icon])){container:mds-policy-ai/inline-size;width:100%}mds-button{justify-self:start}.banner{--mds-banner-cockade-background:rgb(var(--variant-ai-05,202 174 251));--mds-banner-icon-color:rgb(var(--variant-ai-10,63 7 161))}.mini-card{background-color:rgb(var(--tone-neutral,0 0 0));border-radius:var(--radius-lg,16px);-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);display:inline-flex;gap:calc(var(--spacing,.0025rem)*300);grid-template-columns:repeat(1,minmax(1px,100%));padding:calc(var(--spacing,.0025rem)*400)}.mini-card-icon{background-color:rgb(var(--variant-ai-05,202 174 251));border-radius:var(--radius-2xl,24px);border-top-left-radius:var(--radius-none,0);border-top-right-radius:var(--radius-none,0);fill:rgb(var(--variant-ai-10,63 7 161));height:calc(var(--spacing,.0025rem)*600);margin-top:calc(var(--spacing,.0025rem)*-400);padding:calc(var(--spacing,.0025rem)*100);padding-top:calc(var(--spacing,.0025rem)*400);width:calc(var(--spacing,.0025rem)*600)}.link-label-short{display:none}.mini-card-content{display:grid;gap:calc(var(--spacing,.0025rem)*300);grid-template-columns:repeat(1,minmax(1px,100%))}.mini-card-button{max-width:min-content;min-width:0;width:100%}@container mds-policy-ai (max-width:260px){.mini-card{display:grid}.mini-card-icon{border-top-left-radius:var(--radius-none,0);border-top-right-radius:var(--radius-none,0);margin-top:calc(var(--spacing,.0025rem)*-400);padding-top:calc(var(--spacing,.0025rem)*200)}.mini-card-button{max-width:none}.link-label-long{display:none}.link-label-short{display:inline}}.chip{cursor:help}.chip-dropdown{max-width:calc(var(--spacing,.0025rem)*7200);padding:calc(var(--spacing,.0025rem)*300) calc(var(--spacing,.0025rem)*400)}.icon-help{background-color:rgb(var(--variant-ai-05,202 174 251));border:1px solid rgb(var(--tone-neutral,0 0 0));border-radius:calc(var(--spacing,.0025rem)*600);cursor:pointer;fill:rgb(var(--variant-ai-10,63 7 161));height:min-content;width:min-content}.icon-tip-content{display:grid;gap:calc(var(--spacing,.0025rem)*200)}.icon-help::part(icon){height:calc(var(--spacing,.0025rem)*600);padding:calc(var(--spacing,.0025rem)*100);width:calc(var(--spacing,.0025rem)*600)}`;
+const mdsPolicyAiCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-banner,mds-button,mds-chip,mds-dropdown,mds-help,mds-icon,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}:host(:not([variant=icon])){container:mds-policy-ai/inline-size;width:100%}mds-button{justify-self:start}.banner{--mds-banner-cockade-background:rgb(var(--variant-ai-05,202 174 251));--mds-banner-icon-color:rgb(var(--variant-ai-10,63 7 161))}.mini-card{background-color:rgb(var(--tone-neutral,0 0 0));border-radius:var(--radius-lg,16px);-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);display:inline-flex;gap:calc(var(--spacing,.0025rem)*300);grid-template-columns:repeat(1,minmax(1px,100%));padding:calc(var(--spacing,.0025rem)*400)}.mini-card-icon{background-color:rgb(var(--variant-ai-05,202 174 251));border-radius:var(--radius-2xl,24px);border-top-left-radius:var(--radius-none,0);border-top-right-radius:var(--radius-none,0);fill:rgb(var(--variant-ai-10,63 7 161));height:calc(var(--spacing,.0025rem)*600);margin-top:calc(var(--spacing,.0025rem)*-400);padding:calc(var(--spacing,.0025rem)*100);padding-top:calc(var(--spacing,.0025rem)*400);width:calc(var(--spacing,.0025rem)*600)}.link-label-short{display:none}.mini-card-content{display:grid;gap:calc(var(--spacing,.0025rem)*300);grid-template-columns:repeat(1,minmax(1px,100%))}.mini-card-button{max-width:min-content;min-width:0;width:100%}@container mds-policy-ai (max-width:260px){.mini-card{display:grid}.mini-card-icon{border-top-left-radius:var(--radius-none,0);border-top-right-radius:var(--radius-none,0);margin-top:calc(var(--spacing,.0025rem)*-400);padding-top:calc(var(--spacing,.0025rem)*200)}.mini-card-button{max-width:none}.link-label-long{display:none}.link-label-short{display:inline}}.chip{cursor:help}.chip-dropdown{max-width:calc(var(--spacing,.0025rem)*7200);padding:calc(var(--spacing,.0025rem)*300) calc(var(--spacing,.0025rem)*400)}.icon-help{background-color:rgb(var(--variant-ai-05,202 174 251));border:1px solid rgb(var(--tone-neutral,0 0 0));border-radius:calc(var(--spacing,.0025rem)*600);cursor:pointer;fill:rgb(var(--variant-ai-10,63 7 161));height:min-content;width:min-content}.icon-tip-content{display:grid;gap:calc(var(--spacing,.0025rem)*200)}.icon-help::part(icon){height:calc(var(--spacing,.0025rem)*600);padding:calc(var(--spacing,.0025rem)*100);width:calc(var(--spacing,.0025rem)*600)}`;
 
 const MdsPolicyAi = class {
     constructor(hostRef) {
@@ -119,7 +119,13 @@ const MdsPolicyAi = class {
          * Sets the pointing URL of the component
          */
         this.href = 'https://www.maggiolieditore.it/il-regolamento-europeo-sull-intelligenza-artificiale.html';
+        this.handleIconClick = () => {
+            window.open(this.href, '_blank');
+        };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
         this.t.update();
@@ -129,7 +135,7 @@ const MdsPolicyAi = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h(Host, { key: '52e4084390944e6b5997224013f16c85b79881b6' }, this.variant === 'icon' && (h("mds-help", { key: '13b88d273708b5c87a2e2217020d82a5bb3ecb63', icon: mggAiChatbot, class: "icon-help", onClick: () => window.open(this.href, '_blank'), part: "icon" }, h("div", { key: '435a308d598368d4fb7f94c704e1654228372e4f', class: "icon-tip-content" }, h("mds-text", { key: 'd7d12d83e7a40091faf657f9eef83577e59b91d5', typography: "tip" }, (_a = this.headline) !== null && _a !== void 0 ? _a : this.t.get('iconTooltip')), h("mds-text", { key: 'cc00b62ea4d83d3f4710a49eda0391e9a32d5e53', typography: "tip" }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get('iconLinkLabel'))))), this.variant === 'chip' && (h("div", { key: '16c46a6a4d593ef3e92de6e35467fef86bea776e', class: "chip-wrapper", part: "chip" }, h("mds-chip", { key: '9ff4a524805a36cbb6790f104c7ea08db292cf0d', id: "chip", icon: mggAiChatbot, class: "chip", variant: "ai", label: (_c = this.headline) !== null && _c !== void 0 ? _c : this.t.get('chipLabel') }), h("mds-dropdown", { key: '03c850f6519a43a51435e8efb922885f9cd63d9f', target: "#chip", class: "chip-dropdown", interaction: "mouseover" }, h("mds-text", { key: '486f6ff03cb46581c070fd9ee6eec7cef0b54cdf', typography: "tip" }, (_d = this.description) !== null && _d !== void 0 ? _d : this.t.get('cardDescription')), h("mds-button", { key: '15696484d187340f64874982bfa85645203ce258', icon: miOutlinePolicy, href: this.href, variant: "ai", tone: "weak", size: "sm" }, this.t.get('linkLabel'))))), this.variant === 'card' && (h("div", { key: 'b8a3a49f8860f280aafab125e86b19e87f10b64b', class: "mini-card", part: "card" }, h("mds-icon", { key: '50a3a9290642b35e55ab974e51787ac2805846b3', name: mggAiChatbot, class: "mini-card-icon" }), h("div", { key: '29e9d9fdf11586717208ea0d49772cb2a29e5fff', class: "mini-card-content" }, h("mds-text", { key: '7364a5dc1ae7138abc0143af1665090bd0c43b89', typography: "caption" }, (_e = this.description) !== null && _e !== void 0 ? _e : this.t.get('iconTooltip')), h("mds-button", { key: 'febc3610d58da8ea6ce532572a85af62236e11de', class: "mini-card-button", icon: miOutlinePolicy, href: this.href, variant: "ai", tone: "weak", size: "sm" }, h("span", { key: 'fec3de6d377fc90078c93a606056798dbfdd5cf5', class: "link-label-long" }, this.t.get('linkLabel')), h("span", { key: '4fb2efb5a11e1953c5e30c39abc641c1e914ffc6', class: "link-label-short" }, this.t.get('linkLabelShort')))))), this.variant === 'banner' && (h("mds-banner", { key: '8fe8399ba4b942b8d5ea0e54ee69857a5a5441d6', class: "banner", variant: "ai", tone: "weak", icon: mggAiChatbot, headline: (_f = this.headline) !== null && _f !== void 0 ? _f : this.t.get('bannerTitle'), part: "banner" }, h("mds-text", { key: '015aec47af1a58fad80cafd49c7b11334e862d8b', typography: "caption" }, (_g = this.description) !== null && _g !== void 0 ? _g : this.t.get('bannerDescription')), h("mds-button", { key: '4bcd115e47e83db1b48f8c8af23506410d280828', icon: miOutlinePolicy, slot: "action", href: this.href, variant: "ai", tone: "weak", size: "sm" }, h("span", { key: '40f2bd1b17300871148d76d278fb9082665bb429', class: "link-label-long" }, this.t.get('linkLabel')), h("span", { key: '27928dd565847e43e9585368add57e8304d05e7c', class: "link-label-short" }, this.t.get('linkLabelShort')))))));
+        return (h(Host, { key: 'd0343aba93633c4172c78cba1fe1ba78066d0703' }, this.variant === 'icon' && (h("mds-help", { key: 'ad4a20df4a631c216ad09fd6bc7ebfcf23ec17ae', icon: mggAiChatbot, class: "icon-help", onClick: this.handleIconClick, part: "icon" }, h("div", { key: '5c173707b353453e1f88071caa83ae7bef95ef63', class: "icon-tip-content" }, h("mds-text", { key: '02b915e883391648c0d7701869278c2e088c2349', typography: "tip" }, (_a = this.headline) !== null && _a !== void 0 ? _a : this.t.get('iconTooltip')), h("mds-text", { key: 'ee07386a254fa7ed397374e116f4b2cbb38e9bd8', typography: "tip" }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get('iconLinkLabel'))))), this.variant === 'chip' && (h("div", { key: 'c0f788345c6ea9e09f34bbdf8432bdf6119cb6f6', class: "chip-wrapper", part: "chip" }, h("mds-chip", { key: '7014d5bb99185352ddfa1767230c40487a27fba7', id: "chip", icon: mggAiChatbot, class: "chip", variant: "ai", label: (_c = this.headline) !== null && _c !== void 0 ? _c : this.t.get('chipLabel') }), h("mds-dropdown", { key: '46aee6235eb317f64d984c5d7ffeec6e9ef23b5d', target: "#chip", class: "chip-dropdown", interaction: "mouseover" }, h("mds-text", { key: '940a93b53ee5c78634eaf39ebdc4843de874c339', typography: "tip" }, (_d = this.description) !== null && _d !== void 0 ? _d : this.t.get('cardDescription')), h("mds-button", { key: 'e94a60aef4a8d754882070300ebe40ec52819354', icon: miOutlinePolicy, href: this.href, variant: "ai", tone: "weak", size: "sm" }, this.t.get('linkLabel'))))), this.variant === 'card' && (h("div", { key: '8f38c98a3f90a2daee5c0fe56dc08be4a5805724', class: "mini-card", part: "card" }, h("mds-icon", { key: 'e95bf26e2073d4ed6bcbe8458fb59d29242d803b', name: mggAiChatbot, class: "mini-card-icon" }), h("div", { key: '27f3d7807627409bcc7c12a2ff0b13a9aedb4a1a', class: "mini-card-content" }, h("mds-text", { key: '974df045532462567e64d46dd308281790c3a0a0', typography: "caption" }, (_e = this.description) !== null && _e !== void 0 ? _e : this.t.get('iconTooltip')), h("mds-button", { key: '79b09fbc1f0dc53de3094e5c2fc3618d3ae79afc', class: "mini-card-button", icon: miOutlinePolicy, href: this.href, variant: "ai", tone: "weak", size: "sm" }, h("span", { key: '06b0094335d78affa64fa2c6f9eab0ed657c8183', class: "link-label-long" }, this.t.get('linkLabel')), h("span", { key: '5c24c8b36cadec1ec9f0c9a671c268c153e5b609', class: "link-label-short" }, this.t.get('linkLabelShort')))))), this.variant === 'banner' && (h("mds-banner", { key: 'c787b1aa6437af944eb39d50a07a3f101f763b00', class: "banner", variant: "ai", tone: "weak", icon: mggAiChatbot, headline: (_f = this.headline) !== null && _f !== void 0 ? _f : this.t.get('bannerTitle'), part: "banner" }, h("mds-text", { key: '3cd7e4076bdbf770070c6d29e57a441ccc9921c3', typography: "caption" }, (_g = this.description) !== null && _g !== void 0 ? _g : this.t.get('bannerDescription')), h("mds-button", { key: '40388d6d8e3d02c8db0c94c585d2dffa879ae83b', icon: miOutlinePolicy, slot: "action", href: this.href, variant: "ai", tone: "weak", size: "sm" }, h("span", { key: 'e25299573ed2c28821773871091041604059d005', class: "link-label-long" }, this.t.get('linkLabel')), h("span", { key: 'cd5f7376104f6ec21f1a1fd8293004f49016bb56', class: "link-label-short" }, this.t.get('linkLabelShort')))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/mds-pref-animation.entry.js

@@ -2,6 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { m as miOutlineCircle } from './circle-lZldSMeV.js';
 import { m as miBaselineSettings } from './settings-XQgkfNpn.js';
 import { L as Locale } from './locale-a4oAcjYG.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 
 var miBaselineAnimation = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15 2c-2.71 0-5.05 1.54-6.22 3.78a7.062 7.062 0 0 0-3 3A7.014 7.014 0 0 0 2 15c0 3.87 3.13 7 7 7c2.71 0 5.05-1.54 6.22-3.78a7.062 7.062 0 0 0 3-3A7.014 7.014 0 0 0 22 9c0-3.87-3.13-7-7-7zM9 20a5.002 5.002 0 0 1-4-8c0 3.87 3.13 7 7 7c-.84.63-1.88 1-3 1zm3-3a5.002 5.002 0 0 1-4-8c0 3.86 3.13 6.99 7 7c-.84.63-1.88 1-3 1zm4.7-3.3c-.53.19-1.1.3-1.7.3c-2.76 0-5-2.24-5-5c0-.6.11-1.17.3-1.7c.53-.19 1.1-.3 1.7-.3c2.76 0 5 2.24 5 5c0 .6-.11 1.17-.3 1.7zM19 12c0-3.86-3.13-6.99-7-7a5.002 5.002 0 0 1 7 7z"/></svg>`;
 
@@ -49,7 +50,7 @@ var localeIt = {
 	systemSettings: systemSettings
 };
 
-const mdsPrefAnimationCss = () => `@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 reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-tab,mds-tab-item,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:grid;gap:calc(var(--spacing,.0025rem)*100)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--disabled,.item--enabled,.item--system{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}:host-context(:root.pref-contrast-more) .item{--mds-tab-item-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]))) .item{--mds-tab-item-color:rgb(var(--tone-neutral-01,255 255 255))}}`;
+const mdsPrefAnimationCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-tab,mds-tab-item,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:grid;gap:calc(var(--spacing,.0025rem)*100)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--disabled,.item--enabled,.item--system{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}:host([pref-contrast=more]) .item{--mds-tab-item-color:rgb(var(--tone-neutral-01,255 255 255))}@media (prefers-contrast:more){:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .item{--mds-tab-item-color:rgb(var(--tone-neutral-01,255 255 255))}}`;
 
 const MdsPrefAnimation = class {
     constructor(hostRef) {
@@ -82,7 +83,7 @@ const MdsPrefAnimation = class {
             this.prefChangeEvent.emit({ preference: 'animation' });
             this.mode = mode;
             localStorage.setItem(this.localStorageAlias, this.mode);
-            if (document) {
+            if (typeof document !== 'undefined') {
                 const element = document.querySelector('html');
                 for (const key in this.animation) {
                     if ({}.hasOwnProperty.call(this.animation, key)) {
@@ -93,10 +94,25 @@ const MdsPrefAnimation = class {
                 element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAlias, this.mode);
             }
         };
+        this.handleModeClick = (mode) => () => {
+            this.setAnimation(mode);
+        };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefContrast) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     componentWillRender() {
         var _a, _b;
         this.t.lang(this.element);
@@ -107,13 +123,7 @@ const MdsPrefAnimation = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'd8d97e6e1a5684af95b6a4602e759a1cbcf7cae7' }, h("mds-text", { key: '14bbea6444bc69042583a78ff48135ae6b87a1bf', class: "info", typography: "caption" }, h("b", { key: '5fc12248f44981ef9f2174a7073822b1640c93ad' }, this.t.get('label')), ' ', this.t.get(this.animation[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '9ecce808da035fca4887ccaeaeaba4d0479ceea9', fill: true, size: this.size }, h("mds-tab-item", { key: 'fbf817158e8aed566bc42b788b3c1e7e1bd70424', selected: this.mode === 'reduce', onClick: () => {
-                this.setAnimation('reduce');
-            }, class: "item item--reduce", icon: miOutlineCircle }), h("mds-tab-item", { key: '1d030f1e4b64ad1005581c77181a284f88906ae3', selected: this.mode === 'system', onClick: () => {
-                this.setAnimation('system');
-            }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: '6a1c4bbc869df8c0f9596ef522848ff6e99f7581', selected: this.mode === 'no-preference', onClick: () => {
-                this.setAnimation('no-preference');
-            }, class: "item item--no-preference", icon: miBaselineAnimation }))));
+        return (h(Host, { key: '8c4d271a4f27c766d76b37aa3f0755bba0a19d7c', "pref-contrast": this.prefContrast }, h("mds-text", { key: 'd06ce9519d9e4608219f4d10c9818af4b3430812', class: "info", typography: "caption" }, h("b", { key: '95ec18d11359fe4358a8a8d1b63ca695185a8c7e' }, this.t.get('label')), ' ', this.t.get(this.animation[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '579e25e9182c02c7d7deceaf46247ea254b676e3', fill: true, size: this.size }, h("mds-tab-item", { key: '076a7a88d63c9752fb1c5fce30a816abe52917d4', selected: this.mode === 'reduce', onClick: this.handleModeClick('reduce'), class: "item item--reduce", icon: miOutlineCircle }), h("mds-tab-item", { key: '8b7fe984365c966837e6d534251bac8be15e669e', selected: this.mode === 'system', onClick: this.handleModeClick('system'), class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: 'd7282679add90930f487e1ef3f35d804d286763f', selected: this.mode === 'no-preference', onClick: this.handleModeClick('no-preference'), class: "item item--no-preference", icon: miBaselineAnimation }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {