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

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,6 +33,8 @@ export class MdsNotification {
             });
         };
         this.clean = (value) => {
+            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,6 +43,11 @@ export class MdsNotification {
             return Number(value).toLocaleString();
         };
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+    }
     componentDidRender() {
         if (this.target === '') {
             this.strategy = 'disabled';
@@ -61,6 +69,8 @@ export class MdsNotification {
         }
     }
     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: 'e4caa7112453beaebfde8d5144636410bed9121c', "aria-labelledby": this.target, "aria-label": (_a = this.value) !== null && _a !== void 0 ? _a : '0' }, h("mds-text", { key: '66204d238173dd8cf2db564907f8977728abf6c4', typography: "caption", class: "dot", "aria-hidden": "true" }, this.value !== 0 && !Number.isNaN(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: '4ed1b9e1dba19bfa2d273b9a6e97acdf70bcbd98' }, h("mds-paginator-item", { key: '61c2c9e923a9685a13521dce6e62f200346ac0f5', 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: 'add4aed4b4db4a9f80be51c5725831a5da470e5d', class: "item-first", selected: this.currentPage === 1, onClick: (ev) => this.goToPage(1, ev.target) }, "1")), this.pages > 2 && (h("div", { key: 'd0dc076d524c9069d5698861f8c04027d4c1533a', 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: '1df645052a85be2f27c51204a2e6bb62c3d38100', class: "item-last", selected: this.currentPage === this.pages, onClick: (ev) => this.goToPage(this.pages, ev.target) }, this.pages)), h("mds-paginator-item", { key: '68bbe209171c987c6ca3df09347ad430ad2bd179', 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",

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

@@ -116,6 +116,8 @@ mds-text {
 */
 
 :host {
+  --mds-paginator-item-transition-duration: var(--duration-200, 200ms);
+  --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));
@@ -132,8 +134,7 @@ mds-text {
   --mds-paginator-item-size: --spacing(900);
 
   @apply ease-out
-  focus-bounce
-  px-300;
+    focus-bounce;
 
   align-items: center;
   background-color: var(--mds-paginator-item-background, transparent);
@@ -147,7 +148,8 @@ mds-text {
   height: var(--mds-paginator-item-size, --spacing(900));
   justify-content: center;
   min-width: var(--mds-paginator-item-size, --spacing(900));
-  transition-duration: var(--duration-200, 200ms);
+  padding-inline: --spacing(300);
+  transition-duration: var(--private-paginator-item-transition-duration);
   transition-property: background-color, box-shadow, color, outline, outline-offset;
   user-select: none;
 }
@@ -164,7 +166,7 @@ mds-text {
 }
 
 :host([icon]) {
-  @apply p-0;
+  padding: 0;
 }
 
 :host([selected]) {
@@ -184,23 +186,35 @@ mds-text {
 }
 
 .icon {
-  @apply px-0;
-
   fill: currentcolor;
+  padding-inline: 0;
 }
 
-:host-context(:root.pref-animation-reduce) {
-  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). */
+
+:host([pref-animation='reduce']) {
+  --private-paginator-item-transition-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-paginator-item-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-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));
@@ -216,8 +230,8 @@ mds-text {
 }
 
 @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-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));

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { KeyboardManager } from "../../common/keyboard-manager";
+import { subscribePreference } from "../../common/preference";
 /**
  * @slot - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  */
@@ -7,6 +8,17 @@ export class MdsPaginatorItem {
     constructor() {
         this.km = new KeyboardManager();
     }
+    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);
         this.km.attachClickBehavior();
@@ -19,10 +31,14 @@ export class MdsPaginatorItem {
         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: 'a3ce23954b5e1d520399f1b21d70d585ee016d47', 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))))));
     }
     static get is() { return "mds-paginator-item"; }
     static get encapsulation() { return "shadow"; }
@@ -97,5 +113,12 @@ export class MdsPaginatorItem {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
     static get elementRef() { return "host"; }
 }

package/dist/collection/components/mds-policy-ai/mds-policy-ai.css

@@ -47,15 +47,15 @@ mds-button {
 }
 
 .mini-card-icon {
-  @apply -mt-400
-    rounded-2xl
-    rounded-t-none
-    p-100
-    pt-400;
-
   background-color: rgb(var(--variant-ai-05, 202 174 251));
+  border-radius: var(--radius-2xl, 24px);
+  border-top-left-radius: var(--radius-none, 0px);
+  border-top-right-radius: var(--radius-none, 0px);
   fill: rgb(var(--variant-ai-10, 63 7 161));
   height: --spacing(600);
+  margin-top: --spacing(-400);
+  padding: --spacing(100);
+  padding-top: --spacing(400);
   width: --spacing(600);
 }
 
@@ -82,7 +82,10 @@ mds-button {
   }
 
   .mini-card-icon {
-    @apply -mt-400 rounded-t-none pt-200;
+    border-top-left-radius: var(--radius-none, 0px);
+    border-top-right-radius: var(--radius-none, 0px);
+    margin-top: --spacing(-400);
+    padding-top: --spacing(200);
   }
 
   .mini-card-button {