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

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

@@ -226,13 +226,13 @@ mds-button {
 */
 
 @container style(--mds-tree-branch-use-rounded-border: true) {
-  :host-context(:not(.safari)) {
+  :host {
     --mds-tree-branch-border-radius: var(--radius-lg, 16px);
   }
 }
 
 @container style(--mds-tree-branch-use-rounded-border: false) {
-  :host-context(:not(.safari)) {
+  :host {
 
     /* stylelint-disable-next-line length-zero-no-unit */
     --mds-tree-branch-border-radius: 0px;
@@ -355,15 +355,18 @@ mds-button {
   transition-timing-function: var(--ease);
 }
 
-:host-context([actions='visible']) .actions-container,
-:host([actions='visible']):host-context([actions='auto']) .actions-container,
+/* Effective actions mode is resolved in JS (own value wins, else inherited from
+ * the nearest ancestor tree/tree-item) and reflected as resolved-actions on the
+ * host, so these read the item's own host instead of :host-context. 'auto' keeps
+ * the default hidden .actions (scale 0) revealed on hover/focus below. */
+
+:host([resolved-actions='visible']) .actions-container,
 .header:focus-within .actions,
 .header:hover .actions {
   pointer-events: auto;
 }
 
-:host-context([actions='visible']) .actions-container,
-:host([actions='visible']):host-context([actions='auto']) .actions-container,
+:host([resolved-actions='visible']) .actions-container,
 .header:focus-within .actions-container,
 .header:hover .actions-container {
   animation: toggleOverflow var(--duration-300, 300ms) forwards;
@@ -371,20 +374,12 @@ mds-button {
   width: fit-content;
 }
 
-:host([actions='visible']):host-context([actions='auto']) .header:focus-within .actions,
-:host([actions='visible']):host-context([actions='auto']) .header:hover .actions,
-:host(:not([actions='auto'])):host-context([actions='visible']) .actions,
-:host(:not([actions='visible'])):host-context([actions='auto']) .header:focus-within .actions,
-:host(:not([actions='visible'])):host-context([actions='auto']) .header:hover .actions,
+:host([resolved-actions='visible']) .actions,
 .header:focus-within .actions,
 .header:hover .actions {
   transform: scale(1);
 }
 
-:host(:not([actions='visible'])):host-context([actions='auto']) .actions {
-  transform: scale(0);
-}
-
 .children {
   --mds-tree-item-children-padding-left: calc(
     calc(var(--mds-tree-item-toggle-size, var(--mds-tree-toggle-size)) - var(--mds-tree-item-branch-border-size, var(--mds-tree-branch-border-size, --spacing(50)))) / 2
@@ -609,48 +604,51 @@ mds-button {
   color: var(--mds-tree-item-toggle-icon-async-color, var(--mds-tree-toggle-icon-async-color, rgb(0 0 0)));
 }
 
-:host-context([toggle='chevron']) .toggle-icon {
+/* toggle and toggle-position are propagated from mds-tree onto every item
+ * (reflected props), so these read the item's own host (no :host-context). */
+
+:host([toggle='chevron']) .toggle-icon {
   --mds-tree-item-icon-background-color: var(--mds-tree-item-toggle-icon-chevron-default-background, var(--mds-tree-toggle-icon-chevron-default-background, rgb(0 0 0)));
   --mds-tree-item-icon-color: var(--mds-tree-item-toggle-icon-chevron-default-color, var(--mds-tree-toggle-icon-chevron-default-color, rgb(0 0 0)));
 }
 
-:host([expanded]):host-context([toggle='chevron']) .toggle-icon {
+:host([expanded][toggle='chevron']) .toggle-icon {
   --mds-tree-item-icon-background-color: var(--mds-tree-item-toggle-icon-chevron-expanded-background, var(--mds-tree-item-toggle-icon-chevron-default-background, var(--mds-tree-toggle-icon-chevron-default-background, rgb(0 0 0))));
   --mds-tree-item-icon-color: var(--mds-tree-item-toggle-icon-chevron-expanded-color, var(--mds-tree-item-toggle-icon-default-color));
 }
 
-:host-context([toggle='folder'][toggle-position='left']) .toggle-icon mds-button {
+:host([toggle='folder'][toggle-position='left']) .toggle-icon mds-button {
   box-shadow: 0 --spacing(25) 0 0 var(--mds-tree-item-branch-border-color, var(--mds-tree-branch-border-color, rgb(0 0 0)));
 }
 
-:host-context([toggle='folder']) .toggle-icon mds-button {
+:host([toggle='folder']) .toggle-icon mds-button {
   --size: auto;
 
   border-radius: var(--radius);
   padding: --spacing(25) --spacing(50);
 }
 
-:host-context([toggle='folder']) .toggle-icon {
+:host([toggle='folder']) .toggle-icon {
   --mds-tree-item-icon-background-color: var(--mds-tree-item-toggle-icon-folder-default-background, var(--mds-tree-toggle-icon-folder-default-background, rgb(0 0 0)));
   --mds-tree-item-icon-color: var(--mds-tree-item-toggle-icon-folder-default-color, var(--mds-tree-toggle-icon-folder-default-color, rgb(0 0 0)));
 }
 
-:host-context(mds-tree[toggle='folder']):host([expanded]) .toggle-icon {
+:host([toggle='folder'][expanded]) .toggle-icon {
   --mds-tree-item-icon-background-color: var(--mds-tree-item-toggle-icon-folder-expanded-background, var(--mds-tree-item-toggle-icon-folder-default-background, var(--mds-tree-toggle-icon-folder-default-background, rgb(0 0 0))));
   --mds-tree-item-icon-color: var(--mds-tree-item-toggle-icon-folder-expanded-color, var(--mds-tree-item-toggle-icon-folder-default-color, var(--mds-tree-toggle-icon-folder-default-color, rgb(0 0 0))));
 }
 
-:host-context(mds-tree[toggle-position='right']) .toggle-icon {
+:host([toggle-position='right']) .toggle-icon {
   --mds-tree-item-icon-background-color: var(--mds-tree-item-toggle-icon-position-right-default-background, var(--mds-tree-toggle-icon-position-right-default-background, transparent));
   --mds-tree-item-icon-color: var(--mds-tree-item-toggle-icon-position-right-default-color, var(--mds-tree-toggle-icon-position-right-default-color, rgb(0 0 0)));
 }
 
-:host([expanded]):host-context(mds-tree[toggle-position='right']) .toggle-icon {
+:host([expanded][toggle-position='right']) .toggle-icon {
   --mds-tree-item-icon-background-color: var(--mds-tree-item-toggle-icon-position-right-expanded-background, var(--mds-tree-toggle-icon-position-right-expanded-background, transparent));
   --mds-tree-item-icon-color: var(--mds-tree-item-toggle-icon-position-right-expanded-color, var(--mds-tree-toggle-icon-position-right-expanded-color, rgb(0 0 0)));
 }
 
-:host([expanded]):host-context(mds-tree[toggle-position='left'][toggle='chevron']) .toggle-icon {
+:host([expanded][toggle-position='left'][toggle='chevron']) .toggle-icon {
   transform: rotate(90deg);
 }
 
@@ -658,100 +656,73 @@ mds-button {
   display: none;
 }
 
-/* Safari fixes used to sobstitute missing host-context support */
-
-.toggle-icon--chevron {
-  --mds-tree-item-icon-background-color: var(--mds-tree-item-toggle-icon-chevron-default-background, var(--mds-tree-toggle-icon-chevron-default-background, rgb(0 0 0)));
-  --mds-tree-item-icon-color: var(--mds-tree-item-toggle-icon-chevron-default-color, var(--mds-tree-toggle-icon-chevron-default-color, rgb(0 0 0)));
-}
-
-:host([expanded]) .toggle-icon--chevron {
-  --mds-tree-item-icon-background-color: var(--mds-tree-item-toggle-icon-chevron-expanded-background, var(--mds-tree-item-toggle-icon-chevron-default-background, var(--mds-tree-toggle-icon-chevron-default-background, rgb(0 0 0))));
-  --mds-tree-item-icon-color: var(--mds-tree-item-toggle-icon-chevron-expanded-color, var(--mds-tree-item-toggle-icon-default-color));
-
-  transform: rotate(90deg);
-}
+/* toggle-position is propagated from mds-tree onto every item (reflected prop),
+ * so these read the item's own host attribute instead of :host-context. */
 
-.toggle-icon--folder mds-button {
-  --size: auto;
-
-  border-radius: var(--radius);
-  box-shadow: 0 --spacing(25) 0 0 var(--mds-tree-item-branch-border-color, var(--mds-tree-branch-border-color, rgb(0 0 0)));
-  padding: --spacing(25) --spacing(50);
-}
-
-.toggle-icon--folder {
-  --mds-tree-item-icon-background-color: var(--mds-tree-item-toggle-icon-folder-default-background, var(--mds-tree-toggle-icon-folder-default-background, rgb(0 0 0)));
-  --mds-tree-item-icon-color: var(--mds-tree-item-toggle-icon-folder-default-color, var(--mds-tree-toggle-icon-folder-default-color, rgb(0 0 0)));
-}
-
-:host([expanded]) .toggle-icon--folder {
-  --mds-tree-item-icon-background-color: var(--mds-tree-item-toggle-icon-folder-expanded-background, var(--mds-tree-item-toggle-icon-folder-default-background, var(--mds-tree-toggle-icon-folder-default-background, rgb(0 0 0))));
-  --mds-tree-item-icon-color: var(--mds-tree-item-toggle-icon-folder-expanded-color, var(--mds-tree-item-toggle-icon-folder-default-color, var(--mds-tree-toggle-icon-folder-default-color, rgb(0 0 0))));
-}
-
-:host-context(mds-tree[toggle-position='left']) .toggle-icon {
+:host([toggle-position='left']) .toggle-icon {
   order: 0;
 }
 
-:host-context(mds-tree[toggle-position='right']) .header--has-children .title {
+:host([toggle-position='right']) .header--has-children .title {
   margin-right: var(--offset);
 }
 
-:host-context(mds-tree[toggle-position='left']):host([toggle='chevron'][expanded]) .toggle-icon {
+:host([toggle-position='left'][toggle='chevron'][expanded]) .toggle-icon {
   transform: rotate(90deg);
 }
 
-:host-context(mds-tree[toggle-position='left']):host([toggle='chevron']:not([expanded]))
-  .toggle-icon {
+:host([toggle-position='left'][toggle='chevron']:not([expanded])) .toggle-icon {
   transform: rotate(0deg);
 }
 
-:host-context(mds-tree[toggle-position='right']) .toggle-icon {
+:host([toggle-position='right']) .toggle-icon {
   background-color: transparent;
   order: 1;
 }
 
 /* chevron right */
 
-:host([toggle='chevron']):host-context(mds-tree[toggle-position='right']) .toggle-icon {
+:host([toggle='chevron'][toggle-position='right']) .toggle-icon {
   transform: rotate(90deg);
 }
 
-:host([toggle='chevron'][expanded]):host-context(mds-tree[toggle-position='right']) .toggle-icon {
+:host([toggle='chevron'][expanded][toggle-position='right']) .toggle-icon {
   transform: rotate(270deg);
 }
 
-:host([toggle='chevron']):host-context(mds-tree[toggle-position='right']) .toggle-icon--dot,
-:host([toggle='folder']):host-context(mds-tree[toggle-position='right']) .toggle-icon--dot {
+:host([toggle='chevron'][toggle-position='right']) .toggle-icon--dot,
+:host([toggle='folder'][toggle-position='right']) .toggle-icon--dot {
   transform: rotate(0) scale(0.825);
 }
 
-:host([toggle='chevron']):host-context(mds-tree[toggle-position='right']) .toggle-icon,
-:host([toggle='folder']):host-context(mds-tree[toggle-position='right']) .toggle-icon {
+:host([toggle='chevron'][toggle-position='right']) .toggle-icon,
+:host([toggle='folder'][toggle-position='right']) .toggle-icon {
   background-color: transparent;
   fill: var(--mds-tree-item-branch-dot-default-color, var(--mds-tree-branch-dot-default-color, rgb(0 0 0)));
 }
 
-:host([toggle='chevron'][expanded]):host-context(mds-tree[toggle-position='right']) .toggle-icon,
-:host([toggle='folder'][expanded]):host-context(mds-tree[toggle-position='right']) .toggle-icon {
+:host([toggle='chevron'][expanded][toggle-position='right']) .toggle-icon,
+:host([toggle='folder'][expanded][toggle-position='right']) .toggle-icon {
   background-color: transparent;
   fill: var(--mds-tree-item-branch-dot-expanded-color, var(--mds-tree-branch-dot-expanded-color, rgb(0 0 0)));
 }
 
-:host-context([appearance='none']) .header {
+/* appearance and toggle-position are propagated from mds-tree onto every item
+ * (reflected props), so these read the item's own host (no :host-context). */
+
+:host([appearance='none']) .header {
   --offset: 0;
 
   gap: 0;
 }
 
-:host-context([appearance='none']):host(:not(:last-child)) .children--has-children::before,
-:host-context([appearance='none']) .tree-dot,
-:host-context([appearance='none']) .tree-node {
+:host([appearance='none']:not(:last-child)) .children--has-children::before,
+:host([appearance='none']) .tree-dot,
+:host([appearance='none']) .tree-node {
   display: none;
 }
 
-:host-context([appearance='none']) .label-action {
+:host([appearance='none']) .label-action {
   --padding: --spacing(200);
 
   margin-left: 0;
@@ -759,14 +730,14 @@ mds-button {
   padding-right: var(--padding);
 }
 
-:host-context([appearance='none'][toggle-position='left']) .children {
+:host([appearance='none'][toggle-position='left']) .children {
   padding-left: calc(
     calc(var(--header-gap) * 2) + var(--mds-tree-item-branch-border-size, var(--mds-tree-branch-border-size, --spacing(50))) +
       var(--mds-tree-item-children-padding-left) * 2
   );
 }
 
-:host-context([appearance='none'][toggle-position='right']) .children {
+:host([appearance='none'][toggle-position='right']) .children {
   padding-left: var(--mds-tree-item-children-padding-left);
 }
 

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

@@ -60,6 +60,16 @@ export class MdsTreeItem {
             const elementStyles = window.getComputedStyle(this.host);
             this.cssToggleChildrenDuration = elementStyles.getPropertyValue('--mds-dropdown-backdrop-duration');
         };
+        /**
+         * Resolves the effective actions mode: the item's own value wins, otherwise it
+         * inherits the nearest ancestor (tree-item or tree) that sets one. Replaces the
+         * :host-context own-vs-ancestor cascade with a value reflected on the host.
+         */
+        this.resolveActions = () => {
+            var _a;
+            const source = this.host.closest('mds-tree-item[actions], mds-tree[actions]');
+            this.resolvedActions = (_a = source === null || source === void 0 ? void 0 : source.getAttribute('actions')) !== null && _a !== void 0 ? _a : 'auto';
+        };
     }
     /**
      * Updates the component's texts to the locale currently set on the host element.
@@ -88,9 +98,20 @@ export class MdsTreeItem {
         this.await = false;
         this.updateToggleIcon();
     }
+    handleActionsChange() {
+        this.resolveActions();
+    }
+    /**
+     * `internal` Re-resolves the effective actions; called by mds-tree when its own
+     * actions changes so items that inherit it stay in sync.
+     */
+    async refreshActions() {
+        this.resolveActions();
+    }
     componentWillLoad() {
         this.language = this.t.lang(this.host);
         this.updateToggleIcon();
+        this.resolveActions();
         this.hasActions = !!this.host.querySelector(':scope > [slot="action"]');
         this.hasChildren = !!this.host.querySelector('mds-tree-item');
     }
@@ -104,7 +125,7 @@ export class MdsTreeItem {
         this.childrenElement.removeEventListener('transitionend', this.checkChildrenTransitionEnd);
     }
     render() {
-        return (h(Host, { key: '1968b16ce09355cfd0846a76ca845541a1d4e10b' }, h("div", { key: 'f337a00b3dd1b2c7d4ea524efa2c62ac620e31aa', class: clsx('header', this.hasChildren && 'header--has-children') }, h("div", { key: '7c3929085de3ec9c2b4183f65fc7234cb5ecefe6', class: "tree-node" }, h("div", { key: '8c9e692bbd1c38dcb425b8f8cd519dbd67b5548f', class: "tree-branch" }), h("div", { key: '88893e48863cf9ad8042cc83bcedd8f6eade0cbf', class: "tree-dot" })), h("div", { key: '2ebab75cddfc0963310c514151dd379c550c6921', class: clsx('toggle-icon', `toggle-icon--${this.toggle}`) }, h("mds-button", { key: '56aaa210e2541d1c57b443ca5675accb315847c4', await: this.await, onClick: this.onClick, icon: !this.await ? this.currentToggleIcon : undefined, title: this.t.get(this.expanded ? 'collapse' : 'expand', { label: this.label }), variant: "dark", tone: "text", size: "sm" })), h("div", { key: '8e028b67775e9b925179efa649de9381cb69c040', class: "title" }, h("mds-button", { key: '2d74fbe69bae7efab8e8abcde95618b7fee8846f', class: clsx('label-action', this.await && 'label-action--await'), disabled: this.await, icon: this.icon, onClick: this.onClick, variant: "dark", tone: "text", truncate: this.truncate }, this.label), h("div", { key: '08f7872ed1464643a2c5d7a22752effe4b6dcf47', class: clsx('actions-container', this.hasActions && 'actions-container--has-actions'), part: "actions-container" }, h("div", { key: '3411e6321ac1fe58b03896b447dd7d48d7ca11b6', class: "actions", part: "actions-list" }, h("slot", { key: 'fe8f7cceba502abf3becfa8b2434d0bd1ea52bff', name: "action" }))))), h("div", { key: '74192610dccb1db384c083e0ddc61a980b9878c5', class: clsx('children', this.hasChildren && 'children--has-children', this.expanded && 'children--expanded') }, h("slot", { key: '098eb659d7e49634b756779911d9390ab5f109f0' }))));
+        return (h(Host, { key: '288e9f505e7d61c35591a1a76b59e55d988da5eb', "resolved-actions": this.resolvedActions }, h("div", { key: '2dc6752b5df90b1240a582b1e834a56c8c469f0c', class: clsx('header', this.hasChildren && 'header--has-children') }, h("div", { key: 'c6492d4f1bfbe6fe609835b3e949f15eae2f2be8', class: "tree-node" }, h("div", { key: '981800c6964113b608f4f80ddad5f6a81cfd921b', class: "tree-branch" }), h("div", { key: '56b71655b2236135329b745acbd762fd02cf8a55', class: "tree-dot" })), h("div", { key: '69f0f6ae4613ee52eb721b5cd635dee31decedb4', class: "toggle-icon" }, h("mds-button", { key: '1ff6586927d67697c6c79b9d8749a2d8f432ccf7', await: this.await, onClick: this.onClick, icon: !this.await ? this.currentToggleIcon : undefined, title: this.t.get(this.expanded ? 'collapse' : 'expand', { label: this.label }), variant: "dark", tone: "text", size: "sm" })), h("div", { key: '629b3eb10a65f6f99137bee0dcbdbff2b9f21eac', class: "title" }, h("mds-button", { key: '82d41a1fbc2aa763920f64d23c877df335eb6f19', class: clsx('label-action', this.await && 'label-action--await'), disabled: this.await, icon: this.icon, onClick: this.onClick, variant: "dark", tone: "text", truncate: this.truncate }, this.label), h("div", { key: 'ecc46798cf242dd36a499499aefd2a92d3dd3e81', class: clsx('actions-container', this.hasActions && 'actions-container--has-actions'), part: "actions-container" }, h("div", { key: '0d318f5697c3f9f13c41f818cfdeeaaf1cf3dd4d', class: "actions", part: "actions-list" }, h("slot", { key: 'adc4371e19dfb38e58feceaad187007a7a0a3108', name: "action" }))))), h("div", { key: '9f69e34dd1326bf419ba1c7395ced5433c351c4a', class: clsx('children', this.hasChildren && 'children--has-children', this.expanded && 'children--expanded') }, h("slot", { key: 'f04be5d65ec3e9628246958d7ae8c382bfb1af44' }))));
     }
     static get is() { return "mds-tree-item"; }
     static get encapsulation() { return "shadow"; }
@@ -229,6 +250,58 @@ export class MdsTreeItem {
                 "reflect": true,
                 "attribute": "toggle"
             },
+            "togglePosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonIconPositionType",
+                    "resolved": "\"left\" | \"right\" | undefined",
+                    "references": {
+                        "ButtonIconPositionType": {
+                            "location": "import",
+                            "path": "@type/button",
+                            "id": "src/type/button.ts::ButtonIconPositionType",
+                            "referenceLocation": "ButtonIconPositionType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Reflects the parent tree toggle icon position (set by mds-tree); drives the\ntoggle-icon layout without :host-context"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "toggle-position"
+            },
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeAppearance",
+                    "resolved": "\"depth\" | \"none\" | undefined",
+                    "references": {
+                        "TreeAppearance": {
+                            "location": "import",
+                            "path": "@type/tree",
+                            "id": "src/type/tree.ts::TreeAppearance",
+                            "referenceLocation": "TreeAppearance"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Reflects the parent tree appearance (set by mds-tree); drives the depth/none\nlayout without :host-context"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "appearance"
+            },
             "expanded": {
                 "type": "boolean",
                 "mutable": true,
@@ -302,6 +375,7 @@ export class MdsTreeItem {
             "hasChildren": {},
             "currentToggleIcon": {},
             "await": {},
+            "resolvedActions": {},
             "language": {}
         };
     }
@@ -387,6 +461,23 @@ export class MdsTreeItem {
                     "text": "Expands the tree item, revealing its children.",
                     "tags": []
                 }
+            },
+            "refreshActions": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "`internal` Re-resolves the effective actions; called by mds-tree when its own\nactions changes so items that inherit it stay in sync.",
+                    "tags": []
+                }
             }
         };
     }
@@ -398,6 +489,9 @@ export class MdsTreeItem {
             }, {
                 "propName": "expanded",
                 "methodName": "handleExpandedChange"
+            }, {
+                "propName": "actions",
+                "methodName": "handleActionsChange"
             }];
     }
 }

package/dist/collection/components/mds-url-view/mds-url-view.css

@@ -54,6 +54,8 @@ mds-text {
 */
 
 :host {
+  --mds-url-view-transition-duration: var(--duration-200, 200ms);
+  --private-url-view-transition-duration: var(--mds-url-view-transition-duration);
 
   /* stylelint-disable-next-line length-zero-no-unit */
   --mds-modal-custom-window-distance: 0px;
@@ -63,18 +65,16 @@ mds-text {
   --mds-url-view-header-shadow: var(--shadow-sm-sharp, 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1));
   --mds-url-view-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
 
-  @apply h-screen
-  p-400;
-
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  height: 100vh;
   margin: 0;
+  padding: --spacing(400);
 }
 
 .window {
-  @apply ease-out
-  w-full;
+  @apply ease-out;
 
   background-color: var(--mds-url-view-background, rgb(var(--tone-neutral-10, 60 60 60)));
   border-radius: var(--mds-url-view-radius, var(--radius-md, 12px));
@@ -83,14 +83,13 @@ mds-text {
   flex-direction: column;
   flex-grow: 1;
   overflow: hidden;
-  transition-duration: var(--duration-200, 200ms);
+  transition-duration: var(--private-url-view-transition-duration);
   transition-property: background-color, box-shadow;
+  width: 100%;
 }
 
 .header {
-  @apply ease-out
-  gap-200
-  p-200;
+  @apply ease-out;
 
   align-items: center;
   background-color: var(--mds-url-view-background, rgb(var(--tone-neutral-10, 60 60 60)));
@@ -98,17 +97,19 @@ mds-text {
   color: var(--mds-url-view-color, rgb(var(--tone-neutral-02, 244 244 244)));
   display: flex;
   flex-shrink: 0;
+  gap: --spacing(200);
   justify-content: space-between;
+  padding: --spacing(200);
   position: relative;
-  transition-duration: var(--duration-200, 200ms);
+  transition-duration: var(--private-url-view-transition-duration);
   transition-property: background-color, box-shadow;
 }
 
 .title {
-  @apply min-w-0
-  truncate;
+  @apply truncate;
 
   flex-grow: 1;
+  min-width: 0;
   text-align: center;
 }
 
@@ -130,42 +131,53 @@ mds-text {
   width: 100%;
 }
 
-:host-context(:root.pref-animation-reduce),
-:host-context(:root.pref-animation-reduce) .window,
-:host-context(:root.pref-animation-reduce) .header {
-  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-url-view-transition-duration: 0s;
+}
 
-    .window,
-    .header {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-url-view-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-url-view-shadow: var(--shadow-outline);
 }
 
 @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-url-view-shadow: var(--shadow-outline);
   }
 }
 
-: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']) {
   --mds-url-view-shadow: var(--shadow-outline-50);
 }
 
 @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])) {
     --mds-url-view-shadow: var(--shadow-outline-50);
   }
 }

package/dist/collection/components/mds-url-view/mds-url-view.js

@@ -3,6 +3,7 @@ import miBaselineExplore from "@icon/mi/baseline/explore.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";
@@ -37,6 +38,20 @@ export class MdsUrlView {
     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);
     }
@@ -47,11 +62,16 @@ export class MdsUrlView {
         this.km.attachClickBehavior();
     }
     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() {
         var _a, _b;
-        return (h(Host, { key: '7cdaedfa3a5f6852a33e04c376df2a46dd5f28a4', "aria-label": this.t.get('previewURL', { url: this.urlDomain(this.src) }) }, h("div", { key: '2d63ebc6278c37d8a3e6911b6a4606a7f33f6c2e', class: "window" }, h("div", { key: '3ea3657d096bfe1d921eb7853492c4d6ffe36924', class: "header" }, h("mds-icon", { key: 'd8a653fd83cc24550f43a8399c52b244757f02f3', class: "window-icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miBaselineExplore }), h("mds-text", { key: 'a39bbe9a04eeeb401aaae6ea2f843cfb2643f969', class: "title", typography: "caption" }, (_b = this.label) !== null && _b !== void 0 ? _b : this.urlDomain(this.src)), h("mds-button", { key: '8f86fd7f760d6b5f70ade98e413010945f30e7e0', title: this.t.get('close'), class: "action-close", variant: "dark", tone: "text", icon: miBaselineClose, onClick: this.closeUrlView })), h("iframe", { key: '92ef7219b3d9e5f6b5250714fc5ed31ed871a0a3', class: "iframe", "aria-label": this.t.get('iframeURL', { url: this.urlDomain(this.src) }), src: this.src, loading: this.loading }))));
+        return (h(Host, { key: '806641c36d9b4aa568b09ce3617f4ca860ed8817', "aria-label": this.t.get('previewURL', { url: this.urlDomain(this.src) }), "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: '2205b5e3d0810ba101e3ba78e690f94ae156b042', class: "window" }, h("div", { key: 'cced352e1926c26eb05f122d8df152f19a695a78', class: "header" }, h("mds-icon", { key: '8b386b0a164a176f3a65dd8f0ae9b639efcfbe51', class: "window-icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miBaselineExplore }), h("mds-text", { key: '14b2574e7a3e28620a7fb098644e3cd1abb66208', class: "title", typography: "caption" }, (_b = this.label) !== null && _b !== void 0 ? _b : this.urlDomain(this.src)), h("mds-button", { key: 'eceac0ff4d497eaf88c675605b833fd3a7eac9f7', title: this.t.get('close'), class: "action-close", variant: "dark", tone: "text", icon: miBaselineClose, onClick: this.closeUrlView })), h("iframe", { key: 'a18133eb09c2ef5bf7b7ecdaabef6f3e00b91a8b', class: "iframe", "aria-label": this.t.get('iframeURL', { url: this.urlDomain(this.src) }), src: this.src, loading: this.loading }))));
     }
     static get is() { return "mds-url-view"; }
     static get encapsulation() { return "shadow"; }
@@ -155,6 +175,10 @@ export class MdsUrlView {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {}
         };
     }