@maggioli-design-system/magma 1.0.0-beta → 1.0.1

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

@@ -2,9 +2,31 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 const close = require('./close-8bff2816.js');
-const keyboardManager = require('./keyboard-manager-fa9d665b.js');
+const keyboardManager = require('./keyboard-manager-952eef32.js');
+const locale = require('./locale-9add6645.js');
+require('./_commonjsHelpers-e6ff1d6e.js');
+
+const deleteLabel$3 = "Αφαίρεση";
+const localeEl = {
+	deleteLabel: deleteLabel$3
+};
+
+const deleteLabel$2 = "Remove";
+const localeEn = {
+	deleteLabel: deleteLabel$2
+};
+
+const deleteLabel$1 = "Eliminar";
+const localeEs = {
+	deleteLabel: deleteLabel$1
+};
+
+const deleteLabel = "Rimuovi";
+const localeIt = {
+	deleteLabel: deleteLabel
+};
 
 const mdsNoteCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-note-background: Sets the background-color of the component\n * @prop --mds-note-color: Sets the text color of the component\n * @prop --mds-note-fold-size: Sets the size of the fold decoration at the bottom right of the component\n * @prop --mds-note-selection-background: Sets the selection text background-color of the component\n * @prop --mds-note-selection-color: Sets the selection text color of the component\n */\n\n:host {\n\n  --mds-note-background: rgb(var(--label-yellow-10));\n  --mds-note-color: rgb(var(--label-yellow-02));\n  --mds-note-fold-color: rgb(var(--tone-neutral-10));\n  --mds-note-fold-size: 40px;\n  --mds-note-selection-background: var(--magma-selection-background, rgb(var(--label-yellow-09)));\n  --mds-note-selection-color: var(--magma-selection-color, rgb(var(--label-yellow-02)));\n  gap: 0.5rem;\n  border-radius: 0.25rem;\n  padding: 1.5rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-note-background);\n  color: var(--mds-note-color);\n  display: grid;\n  overflow: hidden;\n  position: relative;\n  -webkit-transition-property: color, background-color;\n  transition-property: color, background-color;\n}\n\n:host ::slotted( mds-text ) {\n\n  --mds-text-selection-background: var(--mds-note-selection-background);\n  --mds-text-selection-color: var(--mds-note-selection-color);\n}\n\n:host( [deletable]:not([deletable=\"false\"]) ) {\n  padding-right: 4rem;\n}\n\n:host( [deletable]:not([deletable=\"false\"]) ) .button-close {\n  right: 1rem;\n  top: 1rem;\n\n  position: absolute;\n}\n\n.fold {\n  height: 0rem;\n  width: 0rem;\n  opacity: 0.4;\n\n  border-color: transparent transparent var(--mds-note-fold-color) transparent;\n  border-style: solid;\n  border-width: 0 0 var(--mds-note-fold-size) var(--mds-note-fold-size);\n  bottom: 0;\n  display: block;\n  -webkit-filter: drop-shadow(0 0 var(--mds-note-fold-size) var(--mds-note-color));\n  filter: drop-shadow(0 0 var(--mds-note-fold-size) var(--mds-note-color));\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  -webkit-transition-duration: inherit;\n  transition-duration: inherit;\n  -webkit-transition-property: border;\n  transition-property: border;\n}\n\n.button-close {\n  border-radius: 9999px;\n  padding: 0.25rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  background-color: transparent;\n  cursor: pointer;\n  fill: var(--mds-note-color);\n  -webkit-transition-property: background-color, fill, outline, outline-offset;\n  transition-property: background-color, fill, outline, outline-offset;\n}\n\n.button-close:hover {\n  background-color: rgb(var(--tone-neutral) / 0.5);\n}\n\n.title {\n  gap: 1rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.title .button-close {\n  margin-left: auto;\n}\n\n@tailwind utilities;\n\n:host( [variant=\"amaranth\"] ) {\n\n  --mds-note-background: rgb(var(--label-amaranth-09));\n  --mds-note-color: rgb(var(--label-amaranth-02));\n  --mds-note-selection-background: rgb(var(--label-amaranth-08));\n  --mds-note-selection-color: rgb(var(--label-amaranth-04));\n}\n\n:host( [variant=\"aqua\"] ) {\n\n  --mds-note-background: rgb(var(--label-aqua-09));\n  --mds-note-color: rgb(var(--label-aqua-02));\n  --mds-note-selection-background: rgb(var(--label-aqua-08));\n  --mds-note-selection-color: rgb(var(--label-aqua-04));\n}\n\n:host( [variant=\"blue\"] ) {\n\n  --mds-note-background: rgb(var(--label-blue-09));\n  --mds-note-color: rgb(var(--label-blue-02));\n  --mds-note-selection-background: rgb(var(--label-blue-08));\n  --mds-note-selection-color: rgb(var(--label-blue-04));\n}\n\n:host( [variant=\"green\"] ) {\n\n  --mds-note-background: rgb(var(--label-green-09));\n  --mds-note-color: rgb(var(--label-green-02));\n  --mds-note-selection-background: rgb(var(--label-green-08));\n  --mds-note-selection-color: rgb(var(--label-green-04));\n}\n\n:host( [variant=\"lime\"] ) {\n\n  --mds-note-background: rgb(var(--label-lime-09));\n  --mds-note-color: rgb(var(--label-lime-02));\n  --mds-note-selection-background: rgb(var(--label-lime-08));\n  --mds-note-selection-color: rgb(var(--label-lime-04));\n}\n\n:host( [variant=\"orange\"] ) {\n\n  --mds-note-background: rgb(var(--label-orange-09));\n  --mds-note-color: rgb(var(--label-orange-02));\n  --mds-note-selection-background: rgb(var(--label-orange-08));\n  --mds-note-selection-color: rgb(var(--label-orange-04));\n}\n\n:host( [variant=\"orchid\"] ) {\n\n  --mds-note-background: rgb(var(--label-orchid-09));\n  --mds-note-color: rgb(var(--label-orchid-02));\n  --mds-note-selection-background: rgb(var(--label-orchid-08));\n  --mds-note-selection-color: rgb(var(--label-orchid-04));\n}\n\n:host( [variant=\"sky\"] ) {\n\n  --mds-note-background: rgb(var(--label-sky-09));\n  --mds-note-color: rgb(var(--label-sky-02));\n  --mds-note-selection-background: rgb(var(--label-sky-08));\n  --mds-note-selection-color: rgb(var(--label-sky-04));\n}\n\n:host( [variant=\"violet\"] ) {\n\n  --mds-note-background: rgb(var(--label-violet-09));\n  --mds-note-color: rgb(var(--label-violet-02));\n  --mds-note-selection-background: rgb(var(--label-violet-08));\n  --mds-note-selection-color: rgb(var(--label-violet-04));\n}\n\n:host( [variant=\"yellow\"] ) {\n\n  --mds-note-background: rgb(var(--label-yellow-09));\n  --mds-note-color: rgb(var(--label-yellow-02));\n  --mds-note-selection-background: rgb(var(--label-yellow-08));\n  --mds-note-selection-color: rgb(var(--label-yellow-04));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .fold {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .fold {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n  }\n\n  :host( [variant=\"amaranth\"] ) {\n\n    --mds-note-background: rgb(var(--label-amaranth-08));\n    --mds-note-fold-color: rgb(var(--label-amaranth-06));\n    --mds-note-color: rgb(var(--label-amaranth-02));\n    --mds-note-selection-background: rgb(var(--label-amaranth-07));\n    --mds-note-selection-color: rgb(var(--label-amaranth-03));\n  }\n  \n  :host( [variant=\"aqua\"] ) {\n  \n    --mds-note-background: rgb(var(--label-aqua-08));\n    --mds-note-fold-color: rgb(var(--label-aqua-06));\n    --mds-note-color: rgb(var(--label-aqua-02));\n    --mds-note-selection-background: rgb(var(--label-aqua-07));\n    --mds-note-selection-color: rgb(var(--label-aqua-03));\n  }\n  \n  :host( [variant=\"blue\"] ) {\n  \n    --mds-note-background: rgb(var(--label-blue-08));\n    --mds-note-fold-color: rgb(var(--label-blue-06));\n    --mds-note-color: rgb(var(--label-blue-02));\n    --mds-note-selection-background: rgb(var(--label-blue-07));\n    --mds-note-selection-color: rgb(var(--label-blue-03));\n  }\n  \n  :host( [variant=\"green\"] ) {\n  \n    --mds-note-background: rgb(var(--label-green-08));\n    --mds-note-fold-color: rgb(var(--label-green-06));\n    --mds-note-color: rgb(var(--label-green-02));\n    --mds-note-selection-background: rgb(var(--label-green-07));\n    --mds-note-selection-color: rgb(var(--label-green-03));\n  }\n  \n  :host( [variant=\"lime\"] ) {\n  \n    --mds-note-background: rgb(var(--label-lime-08));\n    --mds-note-fold-color: rgb(var(--label-lime-06));\n    --mds-note-color: rgb(var(--label-lime-02));\n    --mds-note-selection-background: rgb(var(--label-lime-07));\n    --mds-note-selection-color: rgb(var(--label-lime-03));\n  }\n  \n  :host( [variant=\"orange\"] ) {\n  \n    --mds-note-background: rgb(var(--label-orange-08));\n    --mds-note-fold-color: rgb(var(--label-orange-06));\n    --mds-note-color: rgb(var(--label-orange-02));\n    --mds-note-selection-background: rgb(var(--label-orange-07));\n    --mds-note-selection-color: rgb(var(--label-orange-03));\n  }\n  \n  :host( [variant=\"orchid\"] ) {\n  \n    --mds-note-background: rgb(var(--label-orchid-08));\n    --mds-note-fold-color: rgb(var(--label-orchid-06));\n    --mds-note-color: rgb(var(--label-orchid-02));\n    --mds-note-selection-background: rgb(var(--label-orchid-07));\n    --mds-note-selection-color: rgb(var(--label-orchid-03));\n  }\n  \n  :host( [variant=\"sky\"] ) {\n  \n    --mds-note-background: rgb(var(--label-sky-08));\n    --mds-note-fold-color: rgb(var(--label-sky-06));\n    --mds-note-color: rgb(var(--label-sky-02));\n    --mds-note-selection-background: rgb(var(--label-sky-07));\n    --mds-note-selection-color: rgb(var(--label-sky-03));\n  }\n  \n  :host( [variant=\"violet\"] ) {\n  \n    --mds-note-background: rgb(var(--label-violet-08));\n    --mds-note-fold-color: rgb(var(--label-violet-06));\n    --mds-note-color: rgb(var(--label-violet-02));\n    --mds-note-selection-background: rgb(var(--label-violet-07));\n    --mds-note-selection-color: rgb(var(--label-violet-03));\n  }\n  \n  :host( [variant=\"yellow\"] ) {\n  \n    --mds-note-background: rgb(var(--label-yellow-08));\n    --mds-note-fold-color: rgb(var(--label-yellow-06));\n    --mds-note-color: rgb(var(--label-yellow-02));\n    --mds-note-selection-background: rgb(var(--label-yellow-07));\n    --mds-note-selection-color: rgb(var(--label-yellow-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n  \n  @media (prefers-color-scheme: dark) {\n    :host {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n    }\n\n    :host( [variant=\"amaranth\"] ) {\n\n      --mds-note-background: rgb(var(--label-amaranth-08));\n      --mds-note-fold-color: rgb(var(--label-amaranth-06));\n      --mds-note-color: rgb(var(--label-amaranth-02));\n      --mds-note-selection-background: rgb(var(--label-amaranth-07));\n      --mds-note-selection-color: rgb(var(--label-amaranth-03));\n    }\n    \n    :host( [variant=\"aqua\"] ) {\n    \n      --mds-note-background: rgb(var(--label-aqua-08));\n      --mds-note-fold-color: rgb(var(--label-aqua-06));\n      --mds-note-color: rgb(var(--label-aqua-02));\n      --mds-note-selection-background: rgb(var(--label-aqua-07));\n      --mds-note-selection-color: rgb(var(--label-aqua-03));\n    }\n    \n    :host( [variant=\"blue\"] ) {\n    \n      --mds-note-background: rgb(var(--label-blue-08));\n      --mds-note-fold-color: rgb(var(--label-blue-06));\n      --mds-note-color: rgb(var(--label-blue-02));\n      --mds-note-selection-background: rgb(var(--label-blue-07));\n      --mds-note-selection-color: rgb(var(--label-blue-03));\n    }\n    \n    :host( [variant=\"green\"] ) {\n    \n      --mds-note-background: rgb(var(--label-green-08));\n      --mds-note-fold-color: rgb(var(--label-green-06));\n      --mds-note-color: rgb(var(--label-green-02));\n      --mds-note-selection-background: rgb(var(--label-green-07));\n      --mds-note-selection-color: rgb(var(--label-green-03));\n    }\n    \n    :host( [variant=\"lime\"] ) {\n    \n      --mds-note-background: rgb(var(--label-lime-08));\n      --mds-note-fold-color: rgb(var(--label-lime-06));\n      --mds-note-color: rgb(var(--label-lime-02));\n      --mds-note-selection-background: rgb(var(--label-lime-07));\n      --mds-note-selection-color: rgb(var(--label-lime-03));\n    }\n    \n    :host( [variant=\"orange\"] ) {\n    \n      --mds-note-background: rgb(var(--label-orange-08));\n      --mds-note-fold-color: rgb(var(--label-orange-06));\n      --mds-note-color: rgb(var(--label-orange-02));\n      --mds-note-selection-background: rgb(var(--label-orange-07));\n      --mds-note-selection-color: rgb(var(--label-orange-03));\n    }\n    \n    :host( [variant=\"orchid\"] ) {\n    \n      --mds-note-background: rgb(var(--label-orchid-08));\n      --mds-note-fold-color: rgb(var(--label-orchid-06));\n      --mds-note-color: rgb(var(--label-orchid-02));\n      --mds-note-selection-background: rgb(var(--label-orchid-07));\n      --mds-note-selection-color: rgb(var(--label-orchid-03));\n    }\n    \n    :host( [variant=\"sky\"] ) {\n    \n      --mds-note-background: rgb(var(--label-sky-08));\n      --mds-note-fold-color: rgb(var(--label-sky-06));\n      --mds-note-color: rgb(var(--label-sky-02));\n      --mds-note-selection-background: rgb(var(--label-sky-07));\n      --mds-note-selection-color: rgb(var(--label-sky-03));\n    }\n    \n    :host( [variant=\"violet\"] ) {\n    \n      --mds-note-background: rgb(var(--label-violet-08));\n      --mds-note-fold-color: rgb(var(--label-violet-06));\n      --mds-note-color: rgb(var(--label-violet-02));\n      --mds-note-selection-background: rgb(var(--label-violet-07));\n      --mds-note-selection-color: rgb(var(--label-violet-03));\n    }\n    \n    :host( [variant=\"yellow\"] ) {\n    \n      --mds-note-background: rgb(var(--label-yellow-08));\n      --mds-note-fold-color: rgb(var(--label-yellow-06));\n      --mds-note-color: rgb(var(--label-yellow-02));\n      --mds-note-selection-background: rgb(var(--label-yellow-07));\n      --mds-note-selection-color: rgb(var(--label-yellow-03));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n  }\n\n  .fold {\n    bottom: 0.125rem;\n    right: 0.125rem;\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n    }\n\n    .fold {\n      bottom: 0.125rem;\n      right: 0.125rem;\n    }\n  }\n}\n\n\n";
 const MdsNoteStyle0 = mdsNoteCss;
@@ -14,12 +36,25 @@ const MdsNote = class {
         index.registerInstance(this, hostRef);
         this.deleteEvent = index.createEvent(this, "mdsNoteDelete", 7);
         this.km = new keyboardManager.KeyboardManager();
+        this.t = new locale.Locale({
+            el: localeEl,
+            en: localeEn,
+            es: localeEs,
+            it: localeIt,
+        });
         this.onClickClose = () => {
             this.deleteEvent.emit();
         };
+        this.language = undefined;
         this.deletable = false;
         this.variant = 'yellow';
     }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
+    componentWillLoad() {
+        this.t.lang(this.host);
+    }
     componentDidLoad() {
         this.km.addElement(this.host);
         this.km.attachClickBehavior();
@@ -36,7 +71,7 @@ const MdsNote = class {
         this.km.detachClickBehavior();
     }
     render() {
-        return (index.h(index.Host, { key: '0061316e8b45ddaa8bc270f2f99064554a577ee9' }, this.deletable && index.h("mds-button", { key: '4107ba7508cd5101766f2562530d8367b5340ee6', title: "Rimuovi", icon: close.miBaselineClose, class: "button-close", onClick: this.onClickClose.bind(this) }), index.h("slot", { key: '3e252f0cdb45d29e4c4926294a7fbb743a909913', name: "title" }), index.h("slot", { key: '64ba06a7afaf6a839aba7240078f7f99f2cb17a2' }), index.h("div", { key: 'a326dcf3687ab4c47c8ec9efc98166128eaa44c0', class: "fold" })));
+        return (index.h(index.Host, { key: '8b7b1454764a5e61ce35963293bbf62e2f8aa272', role: "note" }, this.deletable && index.h("mds-button", { key: '5ac0423815feb88271c1ff2e3fc1c1d2efe7d48b', title: this.t.get('deleteLabel'), icon: close.miBaselineClose, class: "button-close", onClick: this.onClickClose.bind(this) }), index.h("slot", { key: 'a4f0f3550782aef46870a4a46b502d84b0bc8b34', name: "title" }), index.h("slot", { key: 'd8e4ee7b3965f9797c2e2cfe82110fe13644d5ab' }), index.h("div", { key: '07f7653371018dd0b63c2ee6ecac9f363caae509', "aria-hidden": "true", class: "fold" })));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-58e05c82.js');
+const index = require('./index-eccfa195.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-4d912aff.js');
 
 const mdsNotificationCss = "@tailwind utilities;\n\n/**\n * @prop --mds-notification-color: Sets the text color of the component\n * @prop --mds-notification-dot-background: Sets the background-color of the component\n * @prop --mds-notification-dot-padding: Sets the size of the component\n * @prop --mds-notification-size: Sets the size of the component\n * @prop --mds-notification-ring-size: Sets the border size of ring around the notification\n * @prop --mds-notification-ring-color: Sets the border color of ring around the notification\n * @prop --mds-notification-translate-offset-x: Sets offset x positioning of the notification\n * @prop --mds-notification-translate-offset-y: Sets offset y positioning of the notification\n */\n\n:host {\n\n  --mds-notification-color: rgb(var(--tone-neutral));\n  --mds-notification-dot-background: rgb(var(--status-error-05));\n  --mds-notification-dot-padding: 6px;\n  --mds-notification-size: 20px;\n  --mds-notification-ring-size: 2px;\n  --mds-notification-ring-color: rgb(var(--tone-neutral));\n  --mds-notification-translate-offset-x: -1.75;\n  --mds-notification-translate-offset-y: -2;\n  --mds-notification-translate: translate(calc(var(--mds-notification-size) / var(--mds-notification-translate-offset-x)), calc(var(--mds-notification-size) / var(--mds-notification-translate-offset-y)));\n  --mds-notification-min-width: var(--mds-notification-size);\n  z-index: 10;\n  border-radius: 9999px;\n  opacity: 0;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  bottom: 100%;\n  color: var(--mds-notification-color);\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  height: var(--mds-notification-size);\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n  min-width: -moz-max-content;\n  min-width: -webkit-max-content;\n  min-width: max-content;\n  pointer-events: none;\n  right: 100%;\n  -webkit-transform: var(--mds-notification-translate) scale(0);\n  transform: var(--mds-notification-translate) scale(0);\n  -webkit-transform-origin: calc(100% - calc(var(--mds-notification-size) / 2)) 50%;\n  transform-origin: calc(100% - calc(var(--mds-notification-size) / 2)) 50%;\n  -webkit-transition-property: color, height, opacity, width, -webkit-transform;\n  transition-property: color, height, opacity, width, -webkit-transform;\n  transition-property: color, height, opacity, transform, width;\n  transition-property: color, height, opacity, transform, width, -webkit-transform;\n  width: var(--mds-notification-size);\n}\n\n.dot{\n\n  border-radius: 9999px;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-notification-dot-background);\n  -webkit-box-shadow: 0 0 0 var(--mds-notification-ring-size) var(--mds-notification-ring-color);\n  box-shadow: 0 0 0 var(--mds-notification-ring-size) var(--mds-notification-ring-color);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-pack: center;\n  justify-content: center;\n  line-height: var(--mds-notification-size);\n  min-width: var(--mds-notification-min-width);\n  padding-left: var(--mds-notification-dot-padding);\n  padding-right: var(--mds-notification-dot-padding);\n  position: absolute;\n  -webkit-transition-property: background-color, color, -webkit-box-shadow;\n  transition-property: background-color, color, -webkit-box-shadow;\n  transition-property: background-color, color, box-shadow;\n  transition-property: background-color, color, box-shadow, -webkit-box-shadow;\n  white-space: nowrap;\n}\n\n.spacer {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  height: var(--mds-notification-size);\n  width: var(--mds-notification-min-width);\n}\n\n:host( [visible=\"false\"][strategy=\"absolute\"] ),\n:host( [visible=\"false\"][strategy=\"fixed\"] ){\n\n  opacity: 1;\n\n  -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n\n  -webkit-transform: var(--mds-notification-translate) scale(0);\n\n  transform: var(--mds-notification-translate) scale(0);\n}\n\n:host( [visible=\"true\"][strategy=\"absolute\"] ),\n:host( [visible=\"true\"][strategy=\"fixed\"] ),\n:host( [strategy=\"absolute\"]:not([visible=\"false\"]) ),\n:host( [strategy=\"fixed\"]:not([visible=\"false\"]) ){\n\n  opacity: 1;\n\n  -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n\n  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n\n  -webkit-transform: var(--mds-notification-translate) scale(1);\n\n  transform: var(--mds-notification-translate) scale(1);\n}\n\n:host( [strategy=\"absolute\"] ) {\n  position: absolute;\n}\n\n:host( [strategy=\"fixed\"] ) {\n  position: fixed;\n}\n\n:host( [strategy=\"disabled\"] ),\n:host( :not([target]) ){\n\n  opacity: 1;\n\n  position: static;\n  -webkit-transform: scale(1);\n  transform: scale(1);\n}\n\n:host( [strategy=\"static\"] ) .dot,\n:host( :not([target]) ) .dot {\n  position: static;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .dot {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .dot {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n";
 const MdsNotificationStyle0 = mdsNotificationCss;
@@ -71,7 +71,8 @@ const MdsNotification = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'c42ba41c2d9c58bbbbbbfd92957fd8c1a7798a41' }, index.h("mds-text", { key: 'a3d539060f7d7e5594c13dcaf1c0bbe6e0d56a30', typography: "caption", class: "dot" }, this.value ? this.clean(this.value) : '')));
+        var _a;
+        return (index.h(index.Host, { key: '4ac9b53e962be966d5c287047a6c60ff4ceb0aec', "aria-labelledby": this.target, "aria-label": (_a = this.value) !== null && _a !== void 0 ? _a : '0' }, index.h("mds-text", { key: '0cce8fe4e389cf21846eb61bc926b304f9c1b0be', typography: "caption", class: "dot", "aria-hidden": "true" }, this.value ? this.clean(this.value) : '')));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
-const keyboardManager = require('./keyboard-manager-fa9d665b.js');
+const index = require('./index-eccfa195.js');
+const keyboardManager = require('./keyboard-manager-952eef32.js');
 
-const mdsPaginatorItemCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-paginator-item-background-disabled: Sets the background-color of the item when is disabled\n * @prop --mds-paginator-item-background-hover: Sets the background-color of the item when the mouse is over it\n * @prop --mds-paginator-item-background-selected: Sets the background-color of the item when is selected\n * @prop --mds-paginator-item-background: Sets the background-color of the pages area and the item\n * @prop --mds-paginator-item-color-disabled: Sets the color of the item when is disabled\n * @prop --mds-paginator-item-color-hover: Sets the text color of the item when the mouse is over it\n * @prop --mds-paginator-item-color-selected: Sets the text color of the item when is selected\n * @prop --mds-paginator-item-color: Sets the text color of the component\n * @prop --mds-paginator-item-radius: Sets the border-radius of the component\n * @prop --mds-paginator-item-shadow-disabled: Sets the box-shadow of the item when is disabled\n * @prop --mds-paginator-item-shadow-hover: Sets the box-shadow of the item when the mouse is over it\n * @prop --mds-paginator-item-shadow-selected: Sets the box-shadow of the item when is selected\n * @prop --mds-paginator-item-shadow: Sets the box-shadow of the component\n * @prop --mds-paginator-item-size: Sets the height and the min-width of the paginator item\n */\n\n:host {\n\n  --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n  --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n  --mds-paginator-item-background-selected: rgb(var(--brand-maggioli-03));\n  --mds-paginator-item-background: transparent;\n  --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n  --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n  --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n  --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n  --mds-paginator-item-radius: 200px;\n  --mds-paginator-item-shadow-disabled: none;\n  --mds-paginator-item-shadow-hover: none;\n  --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n  --mds-paginator-item-shadow: none;\n  --mds-paginator-item-size: 2.25rem;\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n}\n\n:host:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n:host {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-paginator-item-background);\n  border-radius: var(--mds-paginator-item-radius);\n  -webkit-box-shadow: var(--mds-paginator-item-shadow);\n  box-shadow: var(--mds-paginator-item-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: var(--mds-paginator-item-color);\n  cursor: pointer;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  height: var(--mds-paginator-item-size);\n  -ms-flex-pack: center;\n  justify-content: center;\n  min-width: var(--mds-paginator-item-size);\n  -webkit-transition-property: background-color, color, outline, outline-offset, -webkit-box-shadow;\n  transition-property: background-color, color, outline, outline-offset, -webkit-box-shadow;\n  transition-property: background-color, box-shadow, color, outline, outline-offset;\n  transition-property: background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host(:focus-visible) {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n:host(:hover) {\n  background-color: var(--mds-paginator-item-background-hover);\n  -webkit-box-shadow: var(--mds-paginator-item-shadow-hover);\n  box-shadow: var(--mds-paginator-item-shadow-hover);\n  color: var(--mds-paginator-item-color-hover);\n  fill: var(--mds-paginator-item-color-hover);\n}\n\n:host([icon]) {\n  padding: 0rem;\n}\n\n:host([selected]) {\n  background-color: var(--mds-paginator-item-background-selected);\n  -webkit-box-shadow: var(--mds-paginator-item-shadow-selected);\n  box-shadow: var(--mds-paginator-item-shadow-selected);\n  color: var(--mds-paginator-item-color-selected);\n  fill: var(--mds-paginator-item-color-selected);\n  pointer-events: none;\n}\n\n:host([disabled]) {\n  background-color: var(--mds-paginator-item-background-disabled);\n  -webkit-box-shadow: var(--mds-paginator-item-shadow-disabled);\n  box-shadow: var(--mds-paginator-item-shadow-disabled);\n  color: var(--mds-paginator-item-color-disabled);\n  fill: var(--mds-paginator-item-color-disabled);\n  pointer-events: none;\n}\n\n.icon {\n  padding-left: 0rem;\n  padding-right: 0rem;\n\n  fill: currentcolor;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n    --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n    --mds-paginator-item-background-selected: rgb(var(--brand-maggioli-03));\n    --mds-paginator-item-background: transparent;\n    --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n    --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n    --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n    --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n    --mds-paginator-item-shadow-disabled: none;\n    --mds-paginator-item-shadow-hover: none;\n    --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n    --mds-paginator-item-shadow: none;\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n      --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n      --mds-paginator-item-background-selected: rgb(var(--brand-maggioli-03));\n      --mds-paginator-item-background: transparent;\n      --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n      --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n      --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n      --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n      --mds-paginator-item-shadow-disabled: none;\n      --mds-paginator-item-shadow-hover: none;\n      --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n      --mds-paginator-item-shadow: none;\n    }\n  }\n}\n\n";
+const mdsPaginatorItemCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-paginator-item-background-disabled: Sets the background-color of the item when is disabled\n * @prop --mds-paginator-item-background-hover: Sets the background-color of the item when the mouse is over it\n * @prop --mds-paginator-item-background-selected: Sets the background-color of the item when is selected\n * @prop --mds-paginator-item-background: Sets the background-color of the pages area and the item\n * @prop --mds-paginator-item-color-disabled: Sets the color of the item when is disabled\n * @prop --mds-paginator-item-color-hover: Sets the text color of the item when the mouse is over it\n * @prop --mds-paginator-item-color-selected: Sets the text color of the item when is selected\n * @prop --mds-paginator-item-color: Sets the text color of the component\n * @prop --mds-paginator-item-radius: Sets the border-radius of the component\n * @prop --mds-paginator-item-shadow-disabled: Sets the box-shadow of the item when is disabled\n * @prop --mds-paginator-item-shadow-hover: Sets the box-shadow of the item when the mouse is over it\n * @prop --mds-paginator-item-shadow-selected: Sets the box-shadow of the item when is selected\n * @prop --mds-paginator-item-shadow: Sets the box-shadow of the component\n * @prop --mds-paginator-item-size: Sets the height and the min-width of the paginator item\n */\n\n:host {\n\n  --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n  --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n  --mds-paginator-item-background-selected: rgb(var(--variant-primary-03));\n  --mds-paginator-item-background: transparent;\n  --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n  --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n  --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n  --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n  --mds-paginator-item-radius: 200px;\n  --mds-paginator-item-shadow-disabled: none;\n  --mds-paginator-item-shadow-hover: none;\n  --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n  --mds-paginator-item-shadow: none;\n  --mds-paginator-item-size: 2.25rem;\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n}\n\n:host:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n:host {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-paginator-item-background);\n  border-radius: var(--mds-paginator-item-radius);\n  -webkit-box-shadow: var(--mds-paginator-item-shadow);\n  box-shadow: var(--mds-paginator-item-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: var(--mds-paginator-item-color);\n  cursor: pointer;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  height: var(--mds-paginator-item-size);\n  -ms-flex-pack: center;\n  justify-content: center;\n  min-width: var(--mds-paginator-item-size);\n  -webkit-transition-property: background-color, color, outline, outline-offset, -webkit-box-shadow;\n  transition-property: background-color, color, outline, outline-offset, -webkit-box-shadow;\n  transition-property: background-color, box-shadow, color, outline, outline-offset;\n  transition-property: background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host(:focus-visible) {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n:host(:hover) {\n  background-color: var(--mds-paginator-item-background-hover);\n  -webkit-box-shadow: var(--mds-paginator-item-shadow-hover);\n  box-shadow: var(--mds-paginator-item-shadow-hover);\n  color: var(--mds-paginator-item-color-hover);\n  fill: var(--mds-paginator-item-color-hover);\n}\n\n:host([icon]) {\n  padding: 0rem;\n}\n\n:host([selected]) {\n  background-color: var(--mds-paginator-item-background-selected);\n  -webkit-box-shadow: var(--mds-paginator-item-shadow-selected);\n  box-shadow: var(--mds-paginator-item-shadow-selected);\n  color: var(--mds-paginator-item-color-selected);\n  fill: var(--mds-paginator-item-color-selected);\n  pointer-events: none;\n}\n\n:host([disabled]) {\n  background-color: var(--mds-paginator-item-background-disabled);\n  -webkit-box-shadow: var(--mds-paginator-item-shadow-disabled);\n  box-shadow: var(--mds-paginator-item-shadow-disabled);\n  color: var(--mds-paginator-item-color-disabled);\n  fill: var(--mds-paginator-item-color-disabled);\n  pointer-events: none;\n}\n\n.icon {\n  padding-left: 0rem;\n  padding-right: 0rem;\n\n  fill: currentcolor;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n    --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n    --mds-paginator-item-background-selected: rgb(var(--variant-primary-03));\n    --mds-paginator-item-background: transparent;\n    --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n    --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n    --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n    --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n    --mds-paginator-item-shadow-disabled: none;\n    --mds-paginator-item-shadow-hover: none;\n    --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n    --mds-paginator-item-shadow: none;\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));\n      --mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));\n      --mds-paginator-item-background-selected: rgb(var(--variant-primary-03));\n      --mds-paginator-item-background: transparent;\n      --mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));\n      --mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));\n      --mds-paginator-item-color-selected: rgb(var(--tone-neutral));\n      --mds-paginator-item-color: rgb(var(--tone-neutral-02));\n      --mds-paginator-item-shadow-disabled: none;\n      --mds-paginator-item-shadow-hover: none;\n      --mds-paginator-item-shadow-selected: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);\n      --mds-paginator-item-shadow: none;\n    }\n  }\n}\n\n";
 const MdsPaginatorItemStyle0 = mdsPaginatorItemCss;
 
 const MdsPaginatorItem = class {
@@ -31,9 +31,9 @@ const MdsPaginatorItem = class {
         this.km.detachClickBehavior();
     }
     render() {
-        return (index.h(index.Host, { key: '8ec92da5acd06c04be839e666ba88a53c535046c', tabindex: "0" }, this.icon !== undefined
+        return (index.h(index.Host, { key: 'ac7aae9e5e126c5da025f5ddee4000bae44d69e1', tabindex: "0" }, this.icon !== undefined
             ? index.h("mds-icon", { class: "icon", name: this.icon })
-            : index.h("mds-text", { class: "text", typography: "detail" }, index.h("slot", null))));
+            : index.h("mds-text", { class: "text", typography: "caption" }, index.h("b", null, index.h("slot", null)))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 const arrowBack = require('./arrow-back-58b847f5.js');
 const arrowForward = require('./arrow-forward-8a81fb5c.js');
 
@@ -61,8 +61,8 @@ const MdsPaginator = class {
         }, 10);
     }
     render() {
-        return (index.h(index.Host, { key: 'e293d1a9534a70b3026b9ed75af6ae954e359b7e' }, index.h("mds-paginator-item", { key: '9df1ca9d1552b81a45b57dd0a960b37351e78af8', class: "item-icon", icon: arrowBack.miBaselineArrowBack, disabled: this.currentPage === 1, onClick: ev => this.goToPage(this.currentPage - 1, ev.target) }), this.pages > 0 && index.h("mds-paginator-item", { key: 'ad0e1205bbdc54758d030f0262a1937b350656f8', class: "item-first", selected: this.currentPage === 1, onClick: ev => this.goToPage(1, ev.target) }, "1"), this.pages > 2 &&
-            index.h("div", { key: 'dfc301098cb5bfb9982076d621a0912c32c273fe', class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => index.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 && index.h("mds-paginator-item", { key: '7711e38886eba63e9266e4414318d74e6c29e43b', class: "item-last", selected: this.currentPage === this.pages, onClick: ev => this.goToPage(this.pages, ev.target) }, this.pages), index.h("mds-paginator-item", { key: '15147fca53d73364ebac1b99ce90d7fcb4f86f8f', class: "item-icon", icon: arrowForward.miBaselineArrowForward, disabled: this.currentPage === this.pages, onClick: ev => this.goToPage(this.currentPage + 1, ev.target) })));
+        return (index.h(index.Host, { key: 'd953ca7204857c62d0240dcae6e06195a44bddda' }, index.h("mds-paginator-item", { key: '2a60bf16b677dc5e43215b38bf912aea9a87456e', class: "item-icon", icon: arrowBack.miBaselineArrowBack, disabled: this.currentPage === 1, onClick: ev => this.goToPage(this.currentPage - 1, ev.target) }), this.pages > 0 && index.h("mds-paginator-item", { key: '546989f1d6df76d9cdc57ac1e6ec9f8f838cb5fb', class: "item-first", selected: this.currentPage === 1, onClick: ev => this.goToPage(1, ev.target) }, "1"), this.pages > 2 &&
+            index.h("div", { key: '3f099d2c8373b0f225a746549e40ebb44fc83d38', class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => index.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 && index.h("mds-paginator-item", { key: '7dea80b2f11556b8a6da6f0a8cbbcc6806251e63', class: "item-last", selected: this.currentPage === this.pages, onClick: ev => this.goToPage(this.pages, ev.target) }, this.pages), index.h("mds-paginator-item", { key: '4998205aced65057e50b94325666e8e96c78ce44', class: "item-icon", icon: arrowForward.miBaselineArrowForward, disabled: this.currentPage === this.pages, onClick: ev => this.goToPage(this.currentPage + 1, ev.target) })));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 const circle = require('./circle-93c4e1b4.js');
 const settings = require('./settings-73f9834a.js');
-const locale = require('./locale-c6c02a3a.js');
-require('./_commonjsHelpers-0192c5b3.js');
+const locale = require('./locale-9add6645.js');
+require('./_commonjsHelpers-e6ff1d6e.js');
 
 const 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>`;
 
@@ -99,13 +99,15 @@ const MdsPrefAnimation = class {
                 element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAlias, this.mode);
             }
         };
+        this.language = undefined;
         this.mode = undefined;
     }
-    componentWillRender() {
-        this.t.lang(this.element);
+    async updateLang() {
+        this.language = this.t.lang(this.element);
     }
-    componentDidLoad() {
+    componentWillRender() {
         var _a, _b;
+        this.t.lang(this.element);
         this.setAnimation((_b = (_a = this.mode) !== null && _a !== void 0 ? _a : localStorage.getItem(this.localStorageAlias)) !== null && _b !== void 0 ? _b : this.defaultMode);
     }
     modeChanged(newValue) {
@@ -113,7 +115,7 @@ const MdsPrefAnimation = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '497a68c86034b1a0e39772d947bc7af3843f3571' }, index.h("mds-text", { key: '732524e8e7eb7c743186beba93de84296fe36c57', class: "info", typography: "caption" }, index.h("b", { key: 'b6a2d803268fbda728dbdf08c0731b4a2b984b86' }, this.t.get('label')), " ", this.t.get(this.animation[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), index.h("mds-tab", { key: 'f40cedfc652dc37d8a13bedbe653070a9ec0cd5d' }, index.h("mds-tab-item", { key: 'cedb845d6f2b431e93734565cc8482f100553255', selected: this.mode === 'reduce', onClick: () => { this.setAnimation('reduce'); }, class: "item item--reduce", icon: circle.miOutlineCircle }), index.h("mds-tab-item", { key: '7699acbf11d73db6fb4d8f77c83246803ba9fc61', selected: this.mode === 'system', onClick: () => { this.setAnimation('system'); }, class: "item item--system", icon: settings.miBaselineSettings }), index.h("mds-tab-item", { key: 'a2ff94ca323d08f25b82fb1b81ca360f4191af54', selected: this.mode === 'no-preference', onClick: () => { this.setAnimation('no-preference'); }, class: "item item--no-preference", icon: miBaselineAnimation }))));
+        return (index.h(index.Host, { key: 'a51aee1481fe52a192a76dc1940732566a0ccb71' }, index.h("mds-text", { key: '0ce8e1d74e412d437aefb923bcfa49229e68289e', class: "info", typography: "caption" }, index.h("b", { key: '1fb6e300398aade36b2e3b0fb69fa7e3002a827e' }, this.t.get('label')), " ", this.t.get(this.animation[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), index.h("mds-tab", { key: '39531570c525ea29f5e524e3c980350461c0e002' }, index.h("mds-tab-item", { key: 'e741e1b7e30b59366a747b6c1b8e2939d22a9d84', selected: this.mode === 'reduce', onClick: () => { this.setAnimation('reduce'); }, class: "item item--reduce", icon: circle.miOutlineCircle }), index.h("mds-tab-item", { key: '27b8c88f59f649a09d4bf10625db794e224801c2', selected: this.mode === 'system', onClick: () => { this.setAnimation('system'); }, class: "item item--system", icon: settings.miBaselineSettings }), index.h("mds-tab-item", { key: 'f43c7a20d4fe443a460c99415130230409091976', selected: this.mode === 'no-preference', onClick: () => { this.setAnimation('no-preference'); }, class: "item item--no-preference", icon: miBaselineAnimation }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-pref-consumption.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
-const locale = require('./locale-c6c02a3a.js');
-require('./_commonjsHelpers-0192c5b3.js');
+const index = require('./index-eccfa195.js');
+const locale = require('./locale-9add6645.js');
+require('./_commonjsHelpers-e6ff1d6e.js');
 
 const mggConsumptionLow = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path d="M13.314 12.492c-.943-.837-4.99-3.526-8.385-5.563 2.037 3.395 4.726 7.442 5.563 8.384q.045.052.094.101a2 2 0 1 0 2.728-2.922"/>
@@ -113,13 +113,15 @@ const MdsPrefContrast = class {
                 element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAlias, this.mode);
             }
         };
+        this.language = undefined;
         this.mode = undefined;
     }
-    componentWillRender() {
-        this.t.lang(this.element);
+    async updateLang() {
+        this.language = this.t.lang(this.element);
     }
-    componentDidLoad() {
+    componentWillRender() {
         var _a, _b;
+        this.t.lang(this.element);
         this.setConsumption((_b = (_a = this.mode) !== null && _a !== void 0 ? _a : localStorage.getItem(this.localStorageAlias)) !== null && _b !== void 0 ? _b : this.defaultMode);
     }
     modeChanged(newValue) {
@@ -127,7 +129,7 @@ const MdsPrefContrast = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '8e2cd538f863c348dc751956431a06fb01e954cf' }, index.h("mds-text", { key: 'df14d1054084e81f88a9c8fde1051d8d85aa3c8f', class: "info", typography: "caption" }, index.h("b", { key: '041732c8c0f12dc348080e70adee7962f436d359' }, this.t.get('label')), " ", this.t.get(this.consumption[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), index.h("mds-tab", { key: '8d1445add7a821a5ffd8a5cbc5587f88c8fecd08' }, index.h("mds-tab-item", { key: '8372d0f16b6f171f5b89ad229bda6e07b80ee08f', selected: this.mode === 'low', onClick: () => { this.setConsumption('low'); }, class: "item item--low", icon: mggConsumptionLow }), index.h("mds-tab-item", { key: 'f39312f1bf193cc4e8bb703d47517214f6c2aa17', selected: this.mode === 'medium', onClick: () => { this.setConsumption('medium'); }, class: "item item--medium", icon: mggConsumptionMedium }), index.h("mds-tab-item", { key: 'd71a62a6a3910c6f8dc116dfc9fa9ac613cc8a85', selected: this.mode === 'high', onClick: () => { this.setConsumption('high'); }, class: "item item--high", icon: mggConsumptionHigh }))));
+        return (index.h(index.Host, { key: '845689a3978e310110ea0431d8a1c7f85413c371' }, index.h("mds-text", { key: '279b08048064fcf560d36cd106d08f6a5e864090', class: "info", typography: "caption" }, index.h("b", { key: 'f9e414661aa53296d5f57e239638640132f22683' }, this.t.get('label')), " ", this.t.get(this.consumption[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), index.h("mds-tab", { key: '41e0b940f5f8583c1d2d489fa719b71d1e8d6bf2' }, index.h("mds-tab-item", { key: '1f7123ea9dd6432f74a9c7db591b9fb45462c32a', selected: this.mode === 'low', onClick: () => { this.setConsumption('low'); }, class: "item item--low", icon: mggConsumptionLow }), index.h("mds-tab-item", { key: '12dffe43fc347b72cb8d211e60f7b08905229d20', selected: this.mode === 'medium', onClick: () => { this.setConsumption('medium'); }, class: "item item--medium", icon: mggConsumptionMedium }), index.h("mds-tab-item", { key: 'ef9733014704464c182864fc6d9a58e263d1eb43', selected: this.mode === 'high', onClick: () => { this.setConsumption('high'); }, class: "item item--high", icon: mggConsumptionHigh }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-pref-contrast.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
+const index = require('./index-eccfa195.js');
 const settings = require('./settings-73f9834a.js');
-const locale = require('./locale-c6c02a3a.js');
-require('./_commonjsHelpers-0192c5b3.js');
+const locale = require('./locale-9add6645.js');
+require('./_commonjsHelpers-e6ff1d6e.js');
 
 const miBaselineContrast = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 22c5.52 0 10-4.48 10-10S17.52 2 12 2S2 6.48 2 12s4.48 10 10 10zm1-17.93c3.94.49 7 3.85 7 7.93s-3.05 7.44-7 7.93V4.07z"/></svg>`;
 
@@ -122,13 +122,15 @@ const MdsPrefContrast = class {
                 element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAlias, this.mode);
             }
         };
+        this.language = undefined;
         this.mode = undefined;
     }
-    componentWillRender() {
-        this.t.lang(this.element);
+    async updateLang() {
+        this.language = this.t.lang(this.element);
     }
-    componentDidLoad() {
+    componentWillRender() {
         var _a, _b;
+        this.t.lang(this.element);
         this.setContrast((_b = (_a = this.mode) !== null && _a !== void 0 ? _a : localStorage.getItem(this.localStorageAlias)) !== null && _b !== void 0 ? _b : this.defaultMode);
     }
     modeChanged(newValue, oldValue) {
@@ -138,7 +140,7 @@ const MdsPrefContrast = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'f108eda4017cc6dbd89059a74928a0d3712dc24b' }, index.h("mds-text", { key: '84a7b7df54d10998e3ce4588d1ffc3d7e2147433', class: "info", typography: "caption" }, index.h("b", { key: '67c93f5272c39749bfdf23116021aeb8d464d13e' }, this.t.get('label')), " ", this.t.get(this.contrast[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), index.h("mds-tab", { key: 'fff6a461e6e111134734411cbe44d1728981280e' }, index.h("mds-tab-item", { key: '1a28ea6f5bb9eaa69ad022b82947d8acaa16dbbc', selected: this.mode === 'more', onClick: () => { this.setContrast('more'); }, class: "item item--more", icon: miBaselineContrast }), index.h("mds-tab-item", { key: '0a4f8a6fd898043fba97caebde14cc954a21dbb3', selected: this.mode === 'system', onClick: () => { this.setContrast('system'); }, class: "item item--system", icon: settings.miBaselineSettings }), index.h("mds-tab-item", { key: 'e12f104728c146daa01ee90a45be49ce2d52dd5e', selected: this.mode === 'no-preference', onClick: () => { this.setContrast('no-preference'); }, class: "item item--default", icon: this.mode === 'no-preference' ? miBaselineAutoAwesome : miOutlineAutoAwesome }))));
+        return (index.h(index.Host, { key: 'cb36b19fcae35c2182d8c079856db3fc14b22083' }, index.h("mds-text", { key: '021e5ad28b3a745623ce26f9ec968a2059930e1f', class: "info", typography: "caption" }, index.h("b", { key: 'a3d0c6c5221fc9d0ff84bead98ee2a453bd7cc02' }, this.t.get('label')), " ", this.t.get(this.contrast[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), index.h("mds-tab", { key: 'ddaf4c6818c399abde338f2fe52f240ff6236437' }, index.h("mds-tab-item", { key: '1a437816ff500de8ab2c1ba3de0b9c0f83a5c759', selected: this.mode === 'more', onClick: () => { this.setContrast('more'); }, class: "item item--more", icon: miBaselineContrast }), index.h("mds-tab-item", { key: '313efd1d02f763b4662d10c71394de6e06f0607e', selected: this.mode === 'system', onClick: () => { this.setContrast('system'); }, class: "item item--system", icon: settings.miBaselineSettings }), index.h("mds-tab-item", { key: '7fe309b846c197155bd484e07a8d47b8d9b8a9ee', selected: this.mode === 'no-preference', onClick: () => { this.setContrast('no-preference'); }, class: "item item--default", icon: this.mode === 'no-preference' ? miBaselineAutoAwesome : miOutlineAutoAwesome }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-pref-language-item.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9808fc83.js');
-const locale = require('./locale-c6c02a3a.js');
+const index = require('./index-eccfa195.js');
+const locale = require('./locale-9add6645.js');
 const checkCircle = require('./check-circle-ae0813fe.js');
 const circle = require('./circle-93c4e1b4.js');
-require('./_commonjsHelpers-0192c5b3.js');
+require('./_commonjsHelpers-e6ff1d6e.js');
 
 const af = "Afrikaans";
 const ar = "العربية";
@@ -239,14 +239,21 @@ const MdsPrefLanguageItem = class {
         this.handleClick = () => {
             this.selectLanguageEvent.emit({ language: this.code });
         };
+        this.language = undefined;
         this.code = undefined;
         this.selected = false;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.element);
+    }
     componentWillRender() {
+        if (!localeDefault[this.code]) {
+            throw Error(`Language code not found: ${this.code}`);
+        }
         this.t.lang(this.element);
     }
     render() {
-        return (index.h(index.Host, { key: '6dab1fa475e88e3143cce9c0f9f8201a2c5c9850', onClick: this.handleClick }, this.code
+        return (index.h(index.Host, { key: '5bbbcd698ddbd64e19500ae8ea15f1f9cc98d7ef', onClick: this.handleClick }, this.code
             ? index.h("mds-button", { icon: this.selected ? checkCircle.miBaselineCheckCircle : circle.miOutlineCircle, variant: "dark", tone: "quiet" }, localeDefault[this.code])
             : index.h("mds-button", { icon: checkCircle.miBaselineCheckCircle, variant: "error", tone: "quiet" }, this.t.get('noCode'))));
     }