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

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

@@ -1,12 +1,13 @@
 import clsx from "clsx";
 import { Host, h, } from "@stencil/core";
 import { cssDurationToMilliseconds } from "../../common/unit";
+import { subscribePreference } from "../../common/preference";
 import miBaselineClose from "@icon/mi/baseline/close.svg";
 /**
  * @part action-close - Selects the close button of the modal.
  * @part window - Selects the default window element of the modal when used.
  * @slot bottom - Contents that will be placed on bottom of the window. Add `text string`, `HTML elements` or `components` to this slot.
- * @slot default - Contents that will be placed in the center of the window. Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Contents that will be placed in the center of the window. Add `text string`, `HTML elements` or `components` to this slot.
  * @slot top - Contents that will be placed on top of the window. Add `text string`, `HTML elements` or `components` to this slot.
  * @slot window - Use directly a window component if you need it. Add `text string`, `HTML elements` or `components` to this slot.
  */
@@ -22,19 +23,15 @@ export class MdsModal {
          */
         this.opened = false;
         /**
-         * Specifies if the modal shows the backdrop
+         * Hides the modal backdrop
          */
-        this.backdrop = true;
+        this.hideBackdrop = false;
         /**
          * Specifies the animation position of the modal window
          */
         this.position = 'center';
         /**
-         * Specifies if the component is animating itself or not
-         */
-        this.animating = 'none';
-        /**
-         * Specifies if the component is animating itself or not
+         * Specifies the animation style of the modal window
          */
         this.animation = 'slide';
         /**
@@ -56,28 +53,25 @@ export class MdsModal {
                 (_a = elementStyles.getPropertyValue('--mds-modal-transition-duration')) !== null && _a !== void 0 ? _a : '500';
         };
         this.stopIntroAnimationWindow = () => {
-            this.animating = 'none';
-            this.host.setAttribute('animating', 'none'); // wtf?
+            this.setContentOverflow('auto');
             this.showEvent.emit();
             clearTimeout(this.animationDelayTimeout);
         };
         this.stopOutroAnimationWindow = () => {
-            this.animating = 'none';
-            this.host.setAttribute('animating', 'none');
             this.hideEvent.emit();
             clearTimeout(this.animationDelayTimeout);
         };
         this.disableOverflow = () => {
-            if (document) {
-                if (document.body.style.overflow) {
+            if (typeof document !== 'undefined') {
+                if (document.body.style.overflow !== '') {
                     this.bodyOverflow = document.body.style.overflow;
                 }
                 document.body.style.overflow = 'hidden';
             }
         };
         this.enableOverflow = () => {
-            if (document) {
-                if (this.bodyOverflow) {
+            if (typeof document !== 'undefined') {
+                if (this.bodyOverflow !== '') {
                     document.body.style.overflow = this.bodyOverflow;
                 }
                 else {
@@ -85,15 +79,39 @@ export class MdsModal {
                 }
             }
         };
+        // Freeze the content scroll container (overflow:hidden) for the whole slide,
+        // re-enabling it only once the window's transform transition has finished. A
+        // live overflow:auto with overflowing content janks the transform. Applied
+        // inline on the element on purpose: toggling it via a host attribute + CSS
+        // selector triggers a shadow-wide style recalc at the settle frame, which is
+        // what caused the visible jump.
+        this.setContentOverflow = (value) => {
+            if (this.windowContentWrapper) {
+                this.windowContentWrapper.style.overflow = value;
+            }
+        };
+        this.handleWindowTransitionEnd = (e) => {
+            if (e.propertyName !== 'transform') {
+                return;
+            }
+            if (this.opened) {
+                this.stopIntroAnimationWindow();
+            }
+            else {
+                this.stopOutroAnimationWindow();
+            }
+        };
         this.animateOpenWindow = () => {
-            this.animating = 'intro';
+            this.setContentOverflow('hidden');
             clearTimeout(this.animationDelayTimeout);
-            this.animationDelayTimeout = setTimeout(this.stopIntroAnimationWindow.bind(this), cssDurationToMilliseconds(this.cssTransitionDuration));
+            // Fallback only: `handleWindowTransitionEnd` is the primary settle. The
+            // buffer keeps this from firing before the transition actually ends.
+            this.animationDelayTimeout = setTimeout(this.stopIntroAnimationWindow.bind(this), cssDurationToMilliseconds(this.cssTransitionDuration) + 100);
         };
         this.animateCloseWindow = () => {
-            this.animating = 'outro';
+            this.setContentOverflow('hidden');
             clearTimeout(this.animationDelayTimeout);
-            this.animationDelayTimeout = setTimeout(this.stopOutroAnimationWindow.bind(this), cssDurationToMilliseconds(this.cssTransitionDuration));
+            this.animationDelayTimeout = setTimeout(this.stopOutroAnimationWindow.bind(this), cssDurationToMilliseconds(this.cssTransitionDuration) + 100);
         };
         this.setTouchStart = (event) => {
             this.touchStartX = event.touches[0].clientX;
@@ -119,20 +137,45 @@ export class MdsModal {
             this.windowElement.addEventListener('touchstart', this.setTouchStart);
             this.windowElement.addEventListener('touchend', this.setTouchEnd);
         };
-        this.closeModal = (e, force) => {
+        this.showDialog = () => {
+            if (!this.dialogEl || this.dialogEl.open) {
+                return;
+            }
+            // `showModal()` promotes the dialog to the top layer, traps focus and inerts
+            // the page. `show()` keeps it non-modal so the page behind stays interactive,
+            // preserving the legacy `hideBackdrop` click-through behaviour.
+            if (!this.hideBackdrop) {
+                this.dialogEl.showModal();
+            }
+            else {
+                this.dialogEl.show();
+            }
+        };
+        this.closeDialog = () => {
             var _a;
-            if (!force) {
-                if (this.interaction === 'strict')
-                    return;
-                if (((_a = e.target) === null || _a === void 0 ? void 0 : _a.localName) !== 'mds-modal') {
-                    return;
-                }
+            if ((_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.open) {
+                this.dialogEl.close();
             }
-            this.opened = e.target !== e.currentTarget;
-            if (!this.opened) {
-                this.closeEvent.emit();
+        };
+        this.handleBackdropClick = (e) => {
+            if (this.interaction === 'strict') {
+                return;
+            }
+            // A click whose target is the dialog itself (not its window contents) is a
+            // click on the backdrop area.
+            if (e.target === this.dialogEl) {
+                this.opened = undefined;
             }
         };
+        this.handleCancel = (e) => {
+            // Take over the native Esc dismissal so `strict` can veto it (and, later, so
+            // the outro animation can play).
+            e.preventDefault();
+            if (this.interaction === 'strict') {
+                return;
+            }
+            this.opened = undefined;
+        };
     }
     componentWillLoad() {
         var _a;
@@ -146,65 +189,103 @@ export class MdsModal {
             (_a = this.host.querySelector(':scope > [slot="window"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('role', 'dialog');
         }
     }
-    componentWillRender() {
-        this.animating = this.opened ? 'intro' : 'outro';
-    }
     componentDidLoad() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this.windowElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.window');
-        this.windowHeaderElement = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.window-header');
-        this.windowFooterElement = (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.window-footer');
-        if (this.windowHeaderElement) {
+        this.windowContentWrapper = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.window-content-wrapper');
+        this.windowHeaderElement = (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.window-header');
+        this.windowFooterElement = (_d = this.host.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.window-footer');
+        if (this.windowHeaderElement != null) {
             this.windowHeaderHeight = this.windowHeaderElement.offsetHeight;
         }
-        if (this.windowFooterElement) {
+        if (this.windowFooterElement != null) {
             this.windowFooterHeight = this.windowFooterElement.offsetHeight;
         }
-        if (this.windowElement) {
+        if (this.windowElement != null) {
             this.addMobileEvents();
+            this.windowElement.addEventListener('transitionend', this.handleWindowTransitionEnd);
         }
         this.updateCSSCustomProps();
+        // The `opened` watcher does not fire for the initial value, so open the
+        // native dialog here when the component mounts already open.
+        if (this.opened) {
+            this.showDialog();
+            this.animateOpenWindow();
+            this.openEvent.emit();
+        }
+    }
+    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);
         this.enableOverflow();
+        clearTimeout(this.animationDelayTimeout);
         if (this.windowElement) {
             this.windowElement.removeEventListener('touchstart', this.setTouchStart);
             this.windowElement.removeEventListener('touchend', this.setTouchEnd);
+            this.windowElement.removeEventListener('transitionend', this.handleWindowTransitionEnd);
         }
         this.enableOverflow();
     }
-    handleOpenProp(newValue) {
+    handleOpenProp(newValue, oldValue) {
         if (newValue) {
             if (this.overflow === 'auto') {
                 this.disableOverflow();
             }
+            this.showDialog();
             this.animateOpenWindow();
             this.openEvent.emit();
             return;
         }
+        if (!oldValue) {
+            return;
+        }
         this.opened = undefined;
+        this.closeDialog();
         if (this.overflow === 'auto') {
             this.enableOverflow();
         }
         this.animateCloseWindow();
+        this.closeEvent.emit();
     }
-    handleBackdropProp(newValue) {
+    handleHideBackdropProp(newValue) {
         if (newValue === false) {
-            this.backdrop = undefined;
+            this.hideBackdrop = undefined;
         }
     }
+    /**
+     * Closes the modal.
+     */
     async close() {
         this.opened = undefined;
     }
     render() {
-        return (h(Host, { key: 'ecade8e38b83c0576b5e073cf2ec243ba7eeb30f', "aria-modal": clsx(this.opened ? 'true' : 'false'), onMouseDown: (e) => {
-                this.closeModal(e);
+        return (h(Host, { key: 'fc1f34444951dfbfbac8481f38ff41980c5bc1a9', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("dialog", { key: '27145da0204be512f1e8cec0b726e34702c7890a', class: "dialog", part: "dialog", ref: (el) => (this.dialogEl = el), onClick: (e) => {
+                this.handleBackdropClick(e);
+            }, onCancel: (e) => {
+                this.handleCancel(e);
             } }, this.window ? (h("slot", { name: "window" })) : (h("div", { class: "window", part: "window" }, h("div", { class: clsx('window-header', this.top ? '' : 'window-content--empty') }, h("slot", { name: "top" })), h("div", { class: "window-content-wrapper" }, h("div", { class: "window-content", style: {
                 paddingTop: `${this.windowHeaderHeight}px`,
                 paddingBottom: `${this.windowFooterHeight}px`,
-            } }, h("slot", null))), h("div", { class: clsx('window-footer', this.bottom ? '' : 'window-content--empty') }, h("slot", { name: "bottom" })))), !this.window && (h("mds-button", { key: '6181aec117b9b237f9749926644c7bf591367e20', class: "action-close", icon: miBaselineClose, variant: "light", tone: "text", size: "xl", onClick: (e) => {
-                this.closeModal(e, true);
-            }, part: "action-close" }))));
+            } }, h("slot", null))), h("div", { class: clsx('window-footer', this.bottom ? '' : 'window-content--empty') }, h("slot", { name: "bottom" })))), !this.window && (h("mds-button", { key: '433726df160283e72a1e69ee532010c36dcc8e64', class: "action-close", icon: miBaselineClose, variant: "light", tone: "text", size: "xl", onClick: () => {
+                this.opened = undefined;
+            }, part: "action-close" })))));
     }
     static get is() { return "mds-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -240,7 +321,7 @@ export class MdsModal {
                 "attribute": "opened",
                 "defaultValue": "false"
             },
-            "backdrop": {
+            "hideBackdrop": {
                 "type": "boolean",
                 "mutable": true,
                 "complexType": {
@@ -252,13 +333,13 @@ export class MdsModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies if the modal shows the backdrop"
+                    "text": "Hides the modal backdrop"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "backdrop",
-                "defaultValue": "true"
+                "attribute": "hide-backdrop",
+                "defaultValue": "false"
             },
             "position": {
                 "type": "string",
@@ -287,33 +368,6 @@ export class MdsModal {
                 "attribute": "position",
                 "defaultValue": "'center'"
             },
-            "animating": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "ModalAnimationStateType",
-                    "resolved": "\"intro\" | \"none\" | \"outro\" | undefined",
-                    "references": {
-                        "ModalAnimationStateType": {
-                            "location": "import",
-                            "path": "./meta/types",
-                            "id": "src/components/mds-modal/meta/types.ts::ModalAnimationStateType",
-                            "referenceLocation": "ModalAnimationStateType"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies if the component is animating itself or not"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "animating",
-                "defaultValue": "'none'"
-            },
             "animation": {
                 "type": "string",
                 "mutable": false,
@@ -333,7 +387,7 @@ export class MdsModal {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies if the component is animating itself or not"
+                    "text": "Specifies the animation style of the modal window"
                 },
                 "getter": false,
                 "setter": false,
@@ -397,6 +451,14 @@ export class MdsModal {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "openEvent",
@@ -475,7 +537,7 @@ export class MdsModal {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Closes the modal.",
                     "tags": []
                 }
             }
@@ -487,8 +549,8 @@ export class MdsModal {
                 "propName": "opened",
                 "methodName": "handleOpenProp"
             }, {
-                "propName": "backdrop",
-                "methodName": "handleBackdropProp"
+                "propName": "hideBackdrop",
+                "methodName": "handleHideBackdropProp"
             }];
     }
 }

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

@@ -10,8 +10,8 @@ export default {
             options: modalAnimationStyleDictionary,
             type: { name: 'string' },
         },
-        backdrop: {
-            description: 'Specifies if the modal shows the backdrop',
+        'hide-backdrop': {
+            description: 'Hides the modal backdrop',
             type: { name: 'boolean' },
         },
         interaction: {
@@ -36,6 +36,10 @@ export default {
             options: modalPositionDictionary,
             type: { name: 'string' },
         },
+        tallContent: {
+            description: 'QA Matrix only: render tall content to exercise large-window sliding',
+            type: { name: 'boolean' },
+        },
     },
 };
 const firstName = 'Mary';
@@ -261,6 +265,43 @@ const ShowTemplate = () => {
     }, []);
     return (h("div", null, h("mds-button", { id: "action", onClick: () => setOpened(true) }, "Open modal"), h("mds-modal", { id: "modal-focus", opened: opened === true ? true : undefined, position: "right" }, h("div", { class: "p-400" }, h("mds-input", { ref: input })))));
 };
+/**
+ * QA Matrix: one trigger per position x animation, so the enter/exit animation
+ * can be eyeballed across the whole grid in a single place. Use the Controls
+ * panel to toggle `backdrop`, `interaction` (strict/relaxed) and `tallContent`
+ * (small vs large window, which reveals percentage-based slide distances).
+ */
+const QAMatrixTemplate = (args) => {
+    const [opened, setOpened] = useState(false);
+    const [position, setPosition] = useState('center');
+    const [animation, setAnimation] = useState('slide');
+    useEffect(() => {
+        const modalElement = document.querySelector('#qa-modal');
+        const reset = () => setOpened(false);
+        modalElement === null || modalElement === void 0 ? void 0 : modalElement.addEventListener('mdsModalClose', reset);
+        modalElement === null || modalElement === void 0 ? void 0 : modalElement.addEventListener('mdsModalHide', reset);
+        return () => {
+            modalElement === null || modalElement === void 0 ? void 0 : modalElement.removeEventListener('mdsModalClose', reset);
+            modalElement === null || modalElement === void 0 ? void 0 : modalElement.removeEventListener('mdsModalHide', reset);
+        };
+    }, []);
+    const open = (nextPosition, nextAnimation) => {
+        setPosition(nextPosition);
+        setAnimation(nextAnimation);
+        setOpened(true);
+    };
+    return (h("div", { class: "p-400 grid gap-600" }, h("mds-text", { typography: "caption" }, "Click a cell to open that position / animation. backdrop, interaction and tallContent are in the Controls panel."), modalAnimationStyleDictionary.map((anim) => (h("div", { key: anim, class: "grid gap-200" }, h("mds-text", { typography: "h6" }, anim), h("div", { class: "grid grid-cols-3 gap-200 max-w-[480px]" }, modalPositionDictionary.map((pos) => (h("mds-button", { key: `${anim}-${pos}`, onClick: () => open(pos, anim) }, pos))))))), h("mds-modal", { id: "qa-modal", position: position, animation: animation, interaction: args.interaction, hideBackdrop: args['hide-backdrop'] ? true : undefined, opened: opened === true ? true : undefined }, h("div", { class: "p-400 grid gap-400 grid-cols-full" }, h("mds-text", { typography: "h5" }, position, " / ", animation), args.tallContent ? (Array(14)
+        .fill(null)
+        .map((_value, index) => (h("mds-text", { key: index }, "Line ", index + 1, " - tall content to exercise large-window sliding.")))) : (h("mds-text", null, "Small content."))))));
+};
+export const QAMatrix = {
+    render: QAMatrixTemplate,
+    args: {
+        backdrop: true,
+        interaction: 'relaxed',
+        tallContent: false,
+    },
+};
 export const Default = {
     render: Template,
     args: {
@@ -294,7 +335,7 @@ export const Backdrop = {
     args: {
         position: 'right',
         opened: true,
-        backdrop: undefined,
+        'hide-backdrop': true,
     },
 };
 export const BodyOverflowDisabled = {

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

@@ -61,18 +61,20 @@ mds-button {
   --mds-note-fold-size: 40px;
   --mds-note-selection-background: var(--magma-selection-background, rgb(var(--label-yellow-09, 89 68 3)));
   --mds-note-selection-color: var(--magma-selection-color, rgb(var(--label-yellow-02, 253 238 190)));
+  --mds-note-transition-duration: var(--duration-300, 300ms);
+  --private-note-transition-duration: var(--mds-note-transition-duration);
 
-  @apply ease-in-out
-  gap-200
-  p-600
-  rounded;
+  @apply ease-in-out;
 
   background-color: var(--mds-note-background, rgb(var(--label-yellow-10, 75 57 3)));
+  border-radius: 0.25rem;
   color: var(--mds-note-color, rgb(var(--label-yellow-02, 253 238 190)));
   display: grid;
+  gap: --spacing(200);
   overflow: hidden;
+  padding: --spacing(600);
   position: relative;
-  transition-duration: var(--duration-300, 300ms);
+  transition-duration: var(--private-note-transition-duration);
   transition-property: color, background-color;
 }
 
@@ -82,42 +84,40 @@ mds-button {
 }
 
 :host([deletable]:not([deletable='false'])) {
-  @apply pr-1600;
+  padding-right: --spacing(1600);
 }
 
 :host([deletable]:not([deletable='false'])) .button-close {
-  @apply right-400
-  top-400;
-
   position: absolute;
+  right: --spacing(400);
+  top: --spacing(400);
 }
 
 .fold {
-  @apply h-0
-  opacity-40
-  w-0;
-
   border-color: transparent transparent var(--mds-note-fold-color, rgb(var(--tone-neutral-10, 60 60 60))) transparent;
   border-style: solid;
   border-width: 0 0 var(--mds-note-fold-size, 40px) var(--mds-note-fold-size, 40px);
   bottom: 0;
   display: block;
   filter: drop-shadow(0 0 var(--mds-note-fold-size, 40px) var(--mds-note-color, rgb(var(--label-yellow-02, 253 238 190))));
+  height: 0;
+  opacity: 0.4;
   pointer-events: none;
   position: absolute;
   right: 0;
   transition-duration: inherit;
   transition-property: border;
+  width: 0;
 }
 
 .button-close {
-  @apply ease-out
-  p-100
-  rounded-full;
+  @apply ease-out;
 
   background-color: transparent;
+  border-radius: var(--radius-full, 1000px);
   cursor: pointer;
   fill: var(--mds-note-color, rgb(var(--label-yellow-02, 253 238 190)));
+  padding: --spacing(100);
   transition-duration: var(--duration-200, 200ms);
   transition-property: background-color, fill, outline, outline-offset;
 }
@@ -127,10 +127,9 @@ mds-button {
 }
 
 .title {
-  @apply gap-400;
-
   align-items: flex-start;
   display: flex;
+  gap: --spacing(400);
 }
 
 .title .button-close {
@@ -207,23 +206,31 @@ mds-button {
   --mds-note-selection-color: rgb(var(--label-yellow-04, 248 202 60));
 }
 
-:host-context(:root.pref-animation-reduce),
-:host-context(:root.pref-animation-reduce) .fold {
-  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-note-transition-duration: 0s;
+}
 
-    .fold {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-note-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'])) {
   box-shadow: var(--shadow-outline) inset;
 
   &:host([variant='amaranth']) {
@@ -308,8 +315,8 @@ mds-button {
 }
 
 @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])) {
     box-shadow: var(--shadow-outline) inset;
 
     &:host([variant='amaranth']) {
@@ -394,7 +401,12 @@ mds-button {
   }
 }
 
-: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']) {
   box-shadow: var(--shadow-outline-50) inset;
 
   .fold {
@@ -404,8 +416,8 @@ mds-button {
 }
 
 @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])) {
     box-shadow: var(--shadow-outline-50) inset;
 
     .fold {