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

package/dist/collection/components/mds-note/mds-note.js

@@ -2,12 +2,13 @@ import miBaselineClose from "@icon/mi/baseline/close.svg";
 import { Host, h, } from "@stencil/core";
 import { KeyboardManager } from "../../common/keyboard-manager";
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
 import localeIt from "./meta/locale.it.json";
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  * @slot title - Add `text string`, `HTML elements` or `components` to this slot.
  */
 export class MdsNote {
@@ -31,9 +32,26 @@ export class MdsNote {
             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);
     }
@@ -50,10 +68,15 @@ export class MdsNote {
         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" })));
     }
     static get is() { return "mds-note"; }
     static get encapsulation() { return "shadow"; }
@@ -120,6 +143,10 @@ export class MdsNote {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {}
         };
     }
@@ -156,7 +183,7 @@ export class MdsNote {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

package/dist/collection/components/mds-notification/mds-notification.css

@@ -111,6 +111,9 @@ mds-text {
   --mds-notification-ring-size: 2px;
   --mds-notification-size: 20px;
   --mds-notification-transition-duration: 200ms;
+  --private-notification-transition-duration: var(--mds-notification-transition-duration, 200ms);
+  --mds-notification-dot-transition-duration: var(--duration-300, 300ms);
+  --private-notification-dot-transition-duration: var(--mds-notification-dot-transition-duration);
   --mds-notification-transition-timing-function: var(--ease-out-cubic, cubic-bezier(0.215, 0.61, 0.355, 1));
   --mds-notification-translate-offset-x: -1.75;
   --mds-notification-translate-offset-y: -2;
@@ -119,10 +122,8 @@ mds-text {
     calc(var(--mds-notification-size, 20px) / var(--mds-notification-translate-offset-y, -2))
   );
 
-  @apply rounded-full
-    z-10;
-
   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;
@@ -131,6 +132,7 @@ mds-text {
   min-width: max-content;
   pointer-events: none;
   width: var(--mds-notification-size, 20px);
+  z-index: 10;
 }
 
 :host([strategy='absolute']),
@@ -142,7 +144,7 @@ mds-text {
     calc(var(--mds-notification-size, 20px) / var(--mds-notification-translate-offset-y, -2))
   )) scale(0);
   transform-origin: calc(100% - calc(var(--mds-notification-size, 20px) / 2)) 50%;
-  transition-duration: var(--mds-notification-transition-duration, 200ms);
+  transition-duration: var(--private-notification-transition-duration);
   transition-property: color, height, opacity, transform, width;
   transition-timing-function: var(--mds-notification-transition-timing-function);
 }
@@ -156,21 +158,22 @@ mds-text {
 }
 
 .dot {
-  @apply duration-300
-    ease-in-out
-    rounded-full;
+  @apply ease-in-out;
 
   align-items: center;
   background-color: var(--mds-notification-dot-background, rgb(var(--status-error-05, 250 165 160)));
+  border-radius: var(--radius-full, 1000px);
   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;
+  transition-duration: var(--private-notification-dot-transition-duration);
   transition-property: background-color, color, box-shadow;
   white-space: nowrap;
 }
@@ -187,24 +190,26 @@ mds-text {
   width: var(--mds-notification-min-width, var(--mds-notification-size, 20px));
 }
 
-:host([visible='false'][strategy='absolute']),
-:host([visible='false'][strategy='fixed']) {
+:host([dismissed]:not([dismissed='false'])[strategy='absolute']),
+:host([dismissed]:not([dismissed='false'])[strategy='fixed']) {
   @apply ease-in-cubic
     opacity-100;
 
+  opacity: 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(0);
 }
 
-:host([visible='true'][strategy='absolute']),
-:host([visible='true'][strategy='fixed']),
-:host([strategy='absolute']:not([visible='false'])),
-:host([strategy='fixed']:not([visible='false'])) {
+:host([strategy='absolute']:not([dismissed])),
+:host([strategy='absolute'][dismissed='false']),
+:host([strategy='fixed']:not([dismissed])),
+:host([strategy='fixed'][dismissed='false']) {
   @apply ease-out-cubic
     opacity-100;
 
+  opacity: 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))
@@ -213,8 +218,7 @@ mds-text {
 
 :host([strategy='disabled']),
 :host(:not([target])) {
-  @apply opacity-100;
-
+  opacity: 1;
   position: static;
   transform: scale(1);
   transform-origin: unset;
@@ -226,19 +230,23 @@ mds-text {
   position: static;
 }
 
-:host-context(.pref-animation-reduce),
-:host-context(.pref-animation-reduce) .dot {
-  transition-duration: 0s;
-}
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
+:host([pref-animation='reduce']) {
+  --private-notification-transition-duration: 0s;
+  --private-notification-dot-transition-duration: 0s;
+}
 
-    .dot {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-notification-transition-duration: 0s;
+    --private-notification-dot-transition-duration: 0s;
   }
 }
 

package/dist/collection/components/mds-notification/mds-notification.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 import { autoUpdate, computePosition, offset, shift } from "@floating-ui/dom";
 export class MdsNotification {
     constructor() {
@@ -7,9 +8,9 @@ export class MdsNotification {
          */
         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
          */
@@ -32,7 +33,9 @@ export class MdsNotification {
             });
         };
         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()}`;
                 }
@@ -40,13 +43,18 @@ export class MdsNotification {
             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;
     }
@@ -54,13 +62,15 @@ export class MdsNotification {
         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) {
@@ -70,7 +80,7 @@ export class MdsNotification {
     }
     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))));
     }
     static get is() { return "mds-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -125,7 +135,7 @@ export class MdsNotification {
                 "attribute": "value",
                 "defaultValue": "0"
             },
-            "visible": {
+            "dismissed": {
                 "type": "boolean",
                 "mutable": true,
                 "complexType": {
@@ -137,13 +147,13 @@ export class MdsNotification {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies if the notification is visible"
+                    "text": "Specifies if the notification is dismissed"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "visible",
-                "defaultValue": "true"
+                "attribute": "dismissed",
+                "defaultValue": "false"
             },
             "strategy": {
                 "type": "string",
@@ -193,6 +203,11 @@ export class MdsNotification {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {}
+        };
+    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{

package/dist/collection/components/mds-notification/test/mds-notification.stories.js

@@ -13,8 +13,8 @@ export default {
             description: 'Specifies the number of notifications to display',
             type: { name: 'number' },
         },
-        visible: {
-            description: 'Specifies if the notification is displayed',
+        dismissed: {
+            description: 'Specifies if the notification is dismissed',
             type: { name: 'boolean' },
         },
     },
@@ -29,13 +29,13 @@ export const Value = {
     render: Template,
     args: {
         value: 7,
-        visible: true,
+        dismissed: false,
     },
 };
 export const NoValue = {
     render: Template,
     args: {
-        visible: true,
+        dismissed: false,
     },
 };
 export const Static = {
@@ -43,7 +43,7 @@ export const Static = {
     args: {
         strategy: 'disabled',
         value: 7,
-        visible: true,
+        dismissed: false,
     },
 };
 export const StaticPositioning = {
@@ -51,7 +51,7 @@ export const StaticPositioning = {
     args: {
         strategy: 'disabled',
         value: 31,
-        visible: true,
+        dismissed: false,
     },
 };
 export const Max = {
@@ -59,6 +59,6 @@ export const Max = {
     args: {
         value: 15,
         max: 9,
-        visible: true,
+        dismissed: false,
     },
 };

package/dist/collection/components/mds-paginator/mds-paginator.css

@@ -30,27 +30,40 @@ mds-paginator-item {
 :host {
   --mds-paginator-background: rgb(var(--tone-neutral-09, 76 76 76));
   --mds-paginator-scroll-behavior: smooth;
+  --mds-paginator-transition-duration: var(--duration-200, 200ms);
+  --private-paginator-transition-duration: var(--mds-paginator-transition-duration);
 
   align-items: center;
   display: flex;
   gap: --spacing(100);
 }
 
+/* Animation preference: scroll-behavior is a keyword and cannot be derived from
+ * is handled here, cross-browser, via @media (it follows the OS preference).
+ * The .pages transition-duration is reduced separately in
+ * css/mds-paginator-pref-animation.css. */
+
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    --mds-paginator-scroll-behavior: auto;
+  }
+}
+
 .pages {
-  @apply duration-200
-    hide-scrollbar
-    ease-in-out
-    mx-200
-    p-200
-    rounded-full;
+  @apply hide-scrollbar
+    ease-in-out;
 
   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: --spacing(200);
   overflow: auto;
+  padding: --spacing(200);
   scroll-behavior: var(--mds-paginator-scroll-behavior, smooth);
+  transition-duration: var(--private-paginator-transition-duration);
   transition-property: background-color, box-shadow;
 }
 
@@ -58,29 +71,31 @@ mds-paginator-item {
   display: none;
 }
 
-:host-context(:root.pref-animation-reduce),
-:host-context(:root.pref-animation-reduce) .pages {
-  --mds-paginator-scroll-behavior: auto;
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
 
-  transition-duration: 0s;
+:host([pref-animation='reduce']) {
+  --private-paginator-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    --mds-paginator-scroll-behavior: auto;
-
-    transition-duration: 0s;
-
-    .pages {
-      --mds-paginator-scroll-behavior: auto;
-
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-paginator-transition-duration: 0s;
   }
 }
 
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) {
+/* Theme preference. The component reflects the resolved theme mode and scheme
+ * from <html> onto its host as pref-theme + pref-theme-scheme (see
+ * subscribePreference in @common/preference); these plain shadow selectors refine
+ * for dark. `dark` is the explicit choice; `system` and no controller follow the
+ * OS via @media; the scheme axis gates it. Cross-browser, no :host-context. */
+
+:host([pref-theme='dark']:not([pref-theme-scheme='light'])) {
   --mds-paginator-background: rgb(var(--tone-neutral-09, 76 76 76));
 
   .pages {
@@ -89,8 +104,8 @@ mds-paginator-item {
 }
 
 @media (prefers-color-scheme: dark) {
-  :host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-theme='system']:not([pref-theme-scheme='light'])),
+  :host(:not([pref-theme])) {
     --mds-paginator-background: rgb(var(--tone-neutral-09, 76 76 76));
 
     .pages {
@@ -99,7 +114,12 @@ mds-paginator-item {
   }
 }
 
-:host-context(:root.pref-contrast-more) {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+
+:host([pref-contrast='more']) {
   .pages {
     box-shadow: var(--shadow-outline-50) inset;
   }
@@ -120,8 +140,8 @@ mds-paginator-item {
 }
 
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     .pages {
       box-shadow: var(--shadow-outline-50) inset;
     }

package/dist/collection/components/mds-paginator/mds-paginator.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 import miBaselineArrowBack from "@icon/mi/baseline/arrow-back.svg";
 import miBaselineArrowForward from "@icon/mi/baseline/arrow-forward.svg";
 export class MdsPaginator {
@@ -54,6 +55,42 @@ export class MdsPaginator {
             }
             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(() => {
@@ -61,7 +98,7 @@ export class MdsPaginator {
         }, 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 })));
     }
     static get is() { return "mds-paginator"; }
     static get encapsulation() { return "shadow"; }
@@ -119,6 +156,14 @@ export class MdsPaginator {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "pageChangedEvent",