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

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

@@ -1,7 +1,8 @@
 'use strict';
 
 var index = require('./index-CNuKb6Lv.js');
-var floatingController = require('./floating-controller-DA8xyqCa.js');
+var floatingController = require('./floating-controller-CXEVR1wX.js');
+var preference = require('./preference-BdpIXWLP.js');
 require('./floating-ui.dom-DW-02Mib.js');
 require('./unit-Cm341q1R.js');
 require('./aria-BbJUuU9_.js');
@@ -11,7 +12,7 @@ var arrowSvg = `<svg width="15" height="9" viewBox="0 0 15 9" xmlns="http://www.
 </svg>
 `;
 
-const mdsTooltipCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-tooltip-arrow-background:var(--mds-tooltip-background,rgb(var(--tone-neutral,0 0 0)));--mds-tooltip-background:rgb(var(--tone-neutral,0 0 0));--mds-tooltip-delay:1s;--mds-tooltip-duration:.5s;--mds-tooltip-dot-padding:calc(var(--spacing,.0025rem)*100);--mds-tooltip-transform-from:scale(.9) translateY(-3%);--mds-tooltip-transform-to:scale(1) translate(0,0);--mds-tooltip-z-index:var(--magma-tooltip-z-index,4000);--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-text:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-tooltip-delay{syntax:"<time>";inherits:false;initial-value:1s}@property --mds-tooltip-duration{syntax:"<time>";inherits:false;initial-value:.5s}@property --mds-tooltip-transform-from{syntax:"<transform-function>";inherits:false;initial-value:scale(.9)}@property --mds-tooltip-transform-to{syntax:"<transform-list>";inherits:false;initial-value:scale(1)translate(0)}:host{--mds-tooltip-arrow-background:var(--mds-tooltip-background,rgb(var(--tone-neutral,0 0 0)));--mds-tooltip-background:rgb(var(--tone-neutral,0 0 0));--mds-tooltip-delay:1s;--mds-tooltip-drop-shadow:drop-shadow(0 10px 8px #0000000a) drop-shadow(0 4px 3px #0000001a) drop-shadow(0 0 1px #0000001a);--mds-tooltip-duration:.5s;--mds-tooltip-ease:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));--mds-tooltip-dot-padding:calc(var(--spacing,.0025rem)*100);--mds-tooltip-transform-from:scale(.9) translateY(calc(var(--spacing,.0025rem)*400*-1));--mds-tooltip-transform-to:scale(1) translate(0,0);--mds-tooltip-z-index:var(--magma-tooltip-z-index,4000);background-color:var(--mds-tooltip-background,rgb(var(--tone-neutral,0 0 0)));border-radius:.25rem;box-sizing:border-box;display:grid;filter:var(--mds-tooltip-drop-shadow);gap:calc(var(--spacing,.0025rem)*400);max-width:calc(var(--spacing,.0025rem)*6400);opacity:0;padding-block:calc(var(--spacing,.0025rem)*100);padding-inline:calc(var(--spacing,.0025rem)*200);pointer-events:none;position:fixed;-webkit-transform:var(--mds-tooltip-transform-from,scale(.9) translateY(-3%));transform:var(--mds-tooltip-transform-from,scale(.9) translateY(-3%));transition-delay:0s;-webkit-transition-duration:var(--mds-tooltip-duration,.5s);transition-duration:var(--mds-tooltip-duration,.5s);transition-property:opacity,transform,transform-origin;-webkit-transition-timing-function:var(--mds-tooltip-ease);transition-timing-function:var(--mds-tooltip-ease);width:fit-content;z-index:var(--mds-tooltip-z-index,var(--magma-tooltip-z-index,4000))}:host([strategy=absolute]){position:absolute}:host([strategy=fixed]){position:fixed}:host([visible]:not([visible=false])){opacity:1;pointer-events:auto;-webkit-transform:var(--mds-tooltip-transform-to,scale(1) translate(0,0));transform:var(--mds-tooltip-transform-to,scale(1) translate(0,0));-webkit-transition-delay:var(--mds-tooltip-delay,1s);transition-delay:var(--mds-tooltip-delay,1s)}.text{display:inline-flex;padding:var(--mds-tooltip-dot-padding,calc(var(--spacing,.0025rem)*100))}.arrow{--tw-duration:.3s;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));display:flex;fill:var(--mds-tooltip-arrow-background,var(--mds-tooltip-background,rgb(var(--tone-neutral,0 0 0))));pointer-events:none;position:fixed;top:-9px;transition-duration:.3s;transition-property:fill;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1));z-index:-1}::slotted(*){position:relative;z-index:10}:host-context(:root.pref-animation-reduce){--mds-tooltip-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-tooltip-background:rgb(var(--tone-neutral-09,76 76 76));--mds-tooltip-drop-shadow:drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3))}:host-context(:root.pref-contrast-more){--mds-tooltip-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-tooltip-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-tooltip-background:rgb(var(--tone-neutral-09,76 76 76));--mds-tooltip-drop-shadow:drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-tooltip-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}}`;
+const mdsTooltipCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-tooltip-arrow-background:var(--mds-tooltip-background,rgb(var(--tone-neutral,0 0 0)));--mds-tooltip-background:rgb(var(--tone-neutral,0 0 0));--mds-tooltip-delay:1s;--mds-tooltip-duration:.5s;--mds-tooltip-dot-padding:calc(var(--spacing,.0025rem)*100);--mds-tooltip-transform-from:scale(.9) translateY(-3%);--mds-tooltip-transform-to:scale(1) translate(0,0);--mds-tooltip-z-index:var(--magma-tooltip-z-index,4000);--tw-ease:initial}}}:host(:not(:is([hydrated],.hydrated))),mds-text:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-tooltip-delay{syntax:"<time>";inherits:false;initial-value:1s}@property --mds-tooltip-duration{syntax:"<time>";inherits:false;initial-value:.5s}@property --mds-tooltip-transform-from{syntax:"<transform-function>";inherits:false;initial-value:scale(.9)}@property --mds-tooltip-transform-to{syntax:"<transform-list>";inherits:false;initial-value:scale(1)translate(0)}:host{--mds-tooltip-arrow-background:var(--mds-tooltip-background,rgb(var(--tone-neutral,0 0 0)));--mds-tooltip-background:rgb(var(--tone-neutral,0 0 0));--mds-tooltip-delay:1s;--mds-tooltip-drop-shadow:drop-shadow(0 10px 8px #0000000a) drop-shadow(0 4px 3px #0000001a) drop-shadow(0 0 1px #0000001a);--mds-tooltip-duration:.5s;--private-tooltip-duration:var(--mds-tooltip-duration,.5s);--mds-tooltip-ease:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));--mds-tooltip-dot-padding:calc(var(--spacing,.0025rem)*100);--mds-tooltip-transform-from:scale(.9) translateY(calc(var(--spacing,.0025rem)*400*-1));--mds-tooltip-transform-to:scale(1) translate(0,0);--mds-tooltip-z-index:var(--magma-tooltip-z-index,4000);background-color:var(--mds-tooltip-background,rgb(var(--tone-neutral,0 0 0)));border-radius:.25rem;box-sizing:border-box;display:grid;filter:var(--mds-tooltip-drop-shadow);gap:calc(var(--spacing,.0025rem)*400);max-width:calc(var(--spacing,.0025rem)*6400);opacity:0;padding-block:calc(var(--spacing,.0025rem)*100);padding-inline:calc(var(--spacing,.0025rem)*200);pointer-events:none;position:fixed;-webkit-transform:var(--mds-tooltip-transform-from,scale(.9) translateY(-3%));transform:var(--mds-tooltip-transform-from,scale(.9) translateY(-3%));transition-delay:0s;-webkit-transition-duration:var(--private-tooltip-duration);transition-duration:var(--private-tooltip-duration);transition-property:opacity,transform,transform-origin;-webkit-transition-timing-function:var(--mds-tooltip-ease);transition-timing-function:var(--mds-tooltip-ease);width:fit-content;z-index:var(--mds-tooltip-z-index,var(--magma-tooltip-z-index,4000))}:host([strategy=absolute]){position:absolute}:host([strategy=fixed]){position:fixed}:host([visible]:not([visible=false])){opacity:1;pointer-events:auto;-webkit-transform:var(--mds-tooltip-transform-to,scale(1) translate(0,0));transform:var(--mds-tooltip-transform-to,scale(1) translate(0,0));-webkit-transition-delay:var(--mds-tooltip-delay,1s);transition-delay:var(--mds-tooltip-delay,1s)}.text{display:inline-flex;padding:var(--mds-tooltip-dot-padding,calc(var(--spacing,.0025rem)*100))}.arrow{--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));display:flex;fill:var(--mds-tooltip-arrow-background,var(--mds-tooltip-background,rgb(var(--tone-neutral,0 0 0))));pointer-events:none;position:fixed;top:-9px;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:fill;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1));z-index:-1}::slotted(*){position:relative;z-index:10}:host([pref-animation=reduce]){--private-tooltip-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-tooltip-background:rgb(var(--tone-neutral-09,76 76 76));--mds-tooltip-drop-shadow:drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3))}:host([pref-contrast=more]){--mds-tooltip-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-tooltip-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-tooltip-background:rgb(var(--tone-neutral-09,76 76 76));--mds-tooltip-drop-shadow:drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3))}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-tooltip-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}}`;
 
 const MdsTooltip = class {
     constructor(hostRef) {
@@ -19,15 +20,15 @@ const MdsTooltip = class {
         /**
          * @internal
          */
-        this.arrow = true;
+        this.hideArrow = false;
         /**
          * @internal
          */
         this.arrowPadding = 4;
         /**
-         * If set, the component will be placed automatically near it's caller.
+         * If set, the component will not be placed automatically near it's caller.
          */
-        this.autoPlacement = true;
+        this.disableAutoPlacement = false;
         /**
          * Specifies the placement of the component if no space is available where it is placed.
          */
@@ -45,9 +46,9 @@ const MdsTooltip = class {
          */
         this.typography = 'tip';
         /**
-         * If set, the component will be kept inside the viewport.
+         * If set, the component will not be kept inside the viewport.
          */
-        this.shift = true;
+        this.disableShift = false;
         /**
          * Sets a safe area distance between the tooltip and the viewport.
          */
@@ -64,10 +65,10 @@ const MdsTooltip = class {
             this.visible = visibility;
         };
     }
-    arrowChanged() {
+    hideArrowChanged() {
         this.floatingController.updatePosition();
     }
-    autoPlacementChanged() {
+    disableAutoPlacementChanged() {
         this.floatingController.updatePosition();
     }
     flipChanged() {
@@ -79,7 +80,7 @@ const MdsTooltip = class {
     placementChanged() {
         this.floatingController.updatePosition();
     }
-    shiftChanged() {
+    disableShiftChanged() {
         this.floatingController.updatePosition();
     }
     shiftPaddingChanged() {
@@ -98,12 +99,26 @@ const MdsTooltip = class {
     }
     targetChanged() {
         var _a;
-        if (!this.target)
+        if (this.target === '')
             return;
         this.caller = (_a = this.floatingController) === null || _a === void 0 ? void 0 : _a.updateCaller(this.target);
         this.caller.addEventListener('mouseleave', this.handleVisibility.bind(this, false));
         this.caller.addEventListener('mouseenter', this.handleVisibility.bind(this, true));
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
     componentDidLoad() {
         var _a;
         const arrow = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.arrow');
@@ -111,18 +126,23 @@ const MdsTooltip = class {
         this.targetChanged();
     }
     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.floatingController.dismiss();
     }
     render() {
-        return (index.h(index.Host, { key: 'd59dca4e9f7d244b236258da080e4692aa9b1aaf' }, index.h("div", { key: '645586e89d4431aa550e4029c1c4a0cd12482616', class: "arrow", innerHTML: arrowSvg }), index.h("mds-text", { key: '04afba74c1539e2065b366699d3ba0cd60cd2442', class: "text", typography: this.typography, part: "text" }, index.h("slot", { key: '14fdf2a3e7eb1758920b48e2a9bc3ecba7727617' }))));
+        return (index.h(index.Host, { key: 'd71141bf2839b6ab6fef43754887ea0a0098d709', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, index.h("div", { key: 'd7a256833a2102a5eb58bcf9b51c445a1a969000', class: "arrow", innerHTML: arrowSvg }), index.h("mds-text", { key: '19a0295a047e2a48ddbf52636fb81f6304891e43', class: "text", typography: this.typography, part: "text" }, index.h("slot", { key: '82bfa0ae911e8633ed3295b4f57d348ca357009e' }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
-        "arrow": [{
-                "arrowChanged": 0
+        "hideArrow": [{
+                "hideArrowChanged": 0
             }],
-        "autoPlacement": [{
-                "autoPlacementChanged": 0
+        "disableAutoPlacement": [{
+                "disableAutoPlacementChanged": 0
             }],
         "flip": [{
                 "flipChanged": 0
@@ -133,8 +153,8 @@ const MdsTooltip = class {
         "placement": [{
                 "placementChanged": 0
             }],
-        "shift": [{
-                "shiftChanged": 0
+        "disableShift": [{
+                "disableShiftChanged": 0
             }],
         "shiftPadding": [{
                 "shiftPaddingChanged": 0

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

@@ -39,7 +39,7 @@ var mdiFolderOpen = `<svg xmlns="http://www.w3.org/2000/svg" id="mdi-folder-open
 
 var miBaselineFolderClosed = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>`;
 
-const mdsTreeItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-tree-item-actions-border-radius:var(--mds-tree-actions-border-radius,var(--radius-lg,16px));--mds-tree-item-actions-gap:var(--mds-tree-actions-gap,calc(var(--spacing,.0025rem)*50));--mds-tree-item-branch-border-color:var(--mds-tree-branch-border-color,#000);--mds-tree-item-branch-border-radius:var(--mds-tree-branch-border-radius,var(--radius-lg,16px));--mds-tree-item-branch-border-size:var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50));--mds-tree-item-branch-dot-default-color:var(--mds-tree-branch-dot-default-color,#000);--mds-tree-item-branch-dot-expanded-color:var(--mds-tree-branch-dot-expanded-color,#000);--mds-tree-item-label-default-background:var(--mds-tree-label-default-background,transparent);--mds-tree-item-label-hover-background:var(--mds-tree-label-hover-background,transparent);--mds-tree-item-label-icon-default-color:var(--mds-tree-label-icon-default-color,#000);--mds-tree-item-label-icon-hover-color:var(--mds-tree-label-icon-hover-color,#000);--mds-tree-item-line-clamp:var(--mds-tree-line-clamp,1);--mds-tree-item-toggle-gap:var(--mds-tree-toggle-gap,calc(var(--spacing,.0025rem)*150));--mds-tree-item-toggle-icon-async-background:var(--mds-tree-toggle-icon-async-background,#000);--mds-tree-item-toggle-icon-async-color:var(--mds-tree-toggle-icon-async-color,#000);--mds-tree-item-toggle-icon-chevron-default-background:var(--mds-tree-toggle-icon-chevron-default-background,#000);--mds-tree-item-toggle-icon-chevron-default-color:var(--mds-tree-toggle-icon-chevron-default-color,#000);--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,#000));--mds-tree-item-toggle-icon-chevron-expanded-color:var(--mds-tree-item-toggle-icon-default-color);--mds-tree-item-toggle-icon-folder-default-background:var(--mds-tree-toggle-icon-folder-default-background,#000);--mds-tree-item-toggle-icon-folder-default-color:var(--mds-tree-toggle-icon-folder-default-color,#000);--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,#000));--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,#000));--mds-tree-item-toggle-icon-position-right-default-background:var(--mds-tree-toggle-icon-position-right-default-background,transparent);--mds-tree-item-toggle-icon-position-right-default-color:var(--mds-tree-toggle-icon-position-right-default-color,#000);--mds-tree-item-toggle-icon-position-right-expanded-background:var(--mds-tree-toggle-icon-position-right-expanded-background,transparent);--mds-tree-item-toggle-icon-position-right-expanded-color:var(--mds-tree-toggle-icon-position-right-expanded-color,#000);--mds-tree-item-toggle-size:var(--mds-tree-toggle-size);--mds-tree-item-transition-duration:var(--mds-tree-transition-duration,0s)}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@container style(--mds-tree-branch-use-rounded-border:true){:host-context(:not(.safari)){--mds-tree-branch-border-radius:var(--radius-lg,16px)}}@container style(--mds-tree-branch-use-rounded-border:false){:host-context(:not(.safari)){--mds-tree-branch-border-radius:0px}}:host{--mds-tree-item-actions-border-radius:var(--mds-tree-actions-border-radius,var(--radius-lg,16px));--mds-tree-item-actions-gap:var(--mds-tree-actions-gap,calc(var(--spacing,.0025rem)*50));--mds-tree-item-branch-border-color:var(--mds-tree-branch-border-color,#000);--mds-tree-item-branch-border-radius:var(--mds-tree-branch-border-radius,var(--radius-lg,16px));--mds-tree-item-branch-border-size:var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50));--mds-tree-item-branch-dot-default-color:var(--mds-tree-branch-dot-default-color,#000);--mds-tree-item-branch-dot-expanded-color:var(--mds-tree-branch-dot-expanded-color,#000);--mds-tree-item-label-default-background:var(--mds-tree-label-default-background,transparent);--mds-tree-item-label-hover-background:var(--mds-tree-label-hover-background,transparent);--mds-tree-item-label-icon-default-color:var(--mds-tree-label-icon-default-color,#000);--mds-tree-item-label-icon-hover-color:var(--mds-tree-label-icon-hover-color,#000);--mds-tree-item-line-clamp:var(--mds-tree-line-clamp,1);--mds-tree-item-toggle-gap:var(--mds-tree-toggle-gap,calc(var(--spacing,.0025rem)*150));--mds-tree-item-toggle-icon-async-background:var(--mds-tree-toggle-icon-async-background,#000);--mds-tree-item-toggle-icon-async-color:var(--mds-tree-toggle-icon-async-color,#000);--mds-tree-item-toggle-icon-chevron-default-background:var(--mds-tree-toggle-icon-chevron-default-background,#000);--mds-tree-item-toggle-icon-chevron-default-color:var(--mds-tree-toggle-icon-chevron-default-color,#000);--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,#000));--mds-tree-item-toggle-icon-chevron-expanded-color:var(--mds-tree-item-toggle-icon-chevron-default-color,var(--mds-tree-toggle-icon-chevron-default-color,#000));--mds-tree-item-toggle-icon-folder-default-background:var(--mds-tree-toggle-icon-folder-default-background,#000);--mds-tree-item-toggle-icon-folder-default-color:var(--mds-tree-toggle-icon-folder-default-color,#000);--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,#000));--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,#000));--mds-tree-item-toggle-icon-position-right-default-background:var(--mds-tree-toggle-icon-position-right-default-background,transparent);--mds-tree-item-toggle-icon-position-right-default-color:var(--mds-tree-toggle-icon-position-right-default-color,#000);--mds-tree-item-toggle-icon-position-right-expanded-background:var(--mds-tree-toggle-icon-position-right-expanded-background,transparent);--mds-tree-item-toggle-icon-position-right-expanded-color:var(--mds-tree-toggle-icon-position-right-expanded-color,#000);--mds-tree-item-toggle-size:var(--mds-tree-toggle-size);--mds-tree-item-transition-duration:var(--mds-tree-transition-duration,0s);--mds-tree-item-transition-timing-function:var(--mds-tree-transition-timing-function);--mds-tree-item-icon-background-color:var(--mds-tree-item-toggle-icon-chevron-default-background,var(--mds-tree-toggle-icon-chevron-default-background,#000));--mds-tree-item-icon-color:var(--mds-tree-item-toggle-icon-chevron-default-color,var(--mds-tree-toggle-icon-chevron-default-color,#000));--header-gap:calc(var(--spacing,.0025rem)*100);display:grid;-webkit-transition-duration:var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s));transition-duration:var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s));-webkit-transition-timing-function:var(--mds-tree-item-transition-timing-function);transition-timing-function:var(--mds-tree-item-transition-timing-function)}.header{--offset:calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size)) + var(--header-gap));align-items:flex-start;gap:var(--header-gap);position:relative;z-index:1}.header,.title{display:flex;min-width:0}.title{align-items:stretch;flex-grow:1;gap:calc(var(--spacing,.0025rem)*200);justify-content:space-between}.label-action{--mds-button-line-clamp:var(--mds-tree-item-line-clamp,var(--mds-tree-line-clamp,1));--padding:calc(var(--spacing,.0025rem)*100);background-color:var(--mds-tree-item-label-default-background,var(--mds-tree-label-default-background,transparent));border-radius:var(--radius-lg,16px);fill:var(--mds-tree-item-label-icon-default-color,var(--mds-tree-label-icon-default-color,#000));flex-grow:1;justify-content:flex-start;margin-left:calc(var(--padding)*-1);padding-left:var(--padding);padding-right:var(--padding)}.label-action:hover{background-color:var(--mds-tree-item-label-hover-background,var(--mds-tree-label-hover-background,transparent));fill:var(--mds-tree-item-label-icon-hover-color,var(--mds-tree-label-icon-hover-color,#000))}.actions-container{--duration-300:.3s;--ease:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));border-radius:var(--mds-tree-item-actions-border-radius,var(--mds-tree-actions-border-radius,var(--radius-lg,16px)));interpolate-size:allow-keywords;align-items:center;display:none;justify-content:flex-start;min-width:0;overflow:hidden;transition-behavior:allow-discrete;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:min-width,width,overflow;-webkit-transition-timing-function:var(--ease);transition-timing-function:var(--ease);width:0}.actions-container--has-actions{display:flex}.actions{align-items:center;border-radius:var(--mds-tree-item-actions-border-radius,var(--mds-tree-actions-border-radius,var(--radius-lg,16px)));display:inline-flex;flex-shrink:0;gap:var(--mds-tree-item-actions-gap,var(--mds-tree-actions-gap,calc(var(--spacing,.0025rem)*50)));pointer-events:none;transform:scale(0);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:transform;-webkit-transition-timing-function:var(--ease);transition-timing-function:var(--ease)}.header:focus-within .actions,.header:hover .actions{pointer-events:auto;transform:scale(1)}:host-context([actions=visible]) .actions-container{-webkit-animation:toggleOverflow var(--duration-300,.3s) forwards;animation:toggleOverflow var(--duration-300,.3s) forwards;min-width:fit-content;pointer-events:auto;width:fit-content}:host([actions=visible]):host-context([actions=auto]) .actions-container{-webkit-animation:toggleOverflow var(--duration-300,.3s) forwards;animation:toggleOverflow var(--duration-300,.3s) forwards;min-width:fit-content;pointer-events:auto;width:fit-content}.header:focus-within .actions-container,.header:hover .actions-container{-webkit-animation:toggleOverflow var(--duration-300,.3s) forwards;animation:toggleOverflow var(--duration-300,.3s) forwards;min-width:fit-content;width:fit-content}:host([actions=visible]):host-context([actions=auto]) .header:focus-within .actions{transform:scale(1)}:host([actions=visible]):host-context([actions=auto]) .header:hover .actions{transform:scale(1)}:host(:not([actions=auto])):host-context([actions=visible]) .actions{transform:scale(1)}:host(:not([actions=visible])):host-context([actions=auto]) .header:focus-within .actions{transform:scale(1)}:host(:not([actions=visible])):host-context([actions=auto]) .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,calc(var(--spacing,.0025rem) * 50)))) / 2);interpolate-size:allow-keywords;display:flex;flex-direction:column;height:0;overflow:clip;padding-left:var(--mds-tree-item-children-padding-left);position:relative;-webkit-transform:translateY(calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size))/2*-1));transform:translateY(calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size))/2*-1));-webkit-transition-duration:var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s));transition-duration:var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s));transition-property:height,transform;-webkit-transition-timing-function:var(--mds-tree-item-transition-timing-function);transition-timing-function:var(--mds-tree-item-transition-timing-function);z-index:0}.children--expanded{-webkit-animation:toggleOverflow var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s)) forwards;animation:toggleOverflow var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s)) forwards;-webkit-animation-timing-function:var(--mds-tree-item-transition-timing-function);animation-timing-function:var(--mds-tree-item-transition-timing-function);display:flex;height:auto;transform:translateY(0)}.children--empty,.children--hidden{display:none}@keyframes toggleOverflow{99.99%{overflow:hidden}to{overflow:visible}}@keyframes toggleDisplay{99.99%{display:flex}to{display:none}}.tree-node{--middle-pos-x:calc(50% - calc(var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem) * 50)))/2));align-items:center;box-sizing:border-box;display:inline-flex;flex-shrink:0;height:var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size));justify-content:center;pointer-events:none;position:relative;width:var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size));z-index:0}.tree-branch{--pos-y:calc(calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size)) / 2 + var(--mds-tree-item-branch-border-radius,var(--mds-tree-branch-border-radius,var(--radius-lg,16px)))) * -1);--tree-height:calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size)) + var(--mds-tree-item-branch-border-radius,var(--mds-tree-branch-border-radius,var(--radius-lg,16px))) + var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem) * 50))) / 2);--tree-width:calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size))/2);border-color:var(--mds-tree-item-branch-border-color,var(--mds-tree-branch-border-color,#000));border-radius:0 0 0 var(--mds-tree-item-branch-border-radius,var(--mds-tree-branch-border-radius,var(--radius-lg,16px)));border-style:solid;border-width:0 0 var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50))) var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50)));box-sizing:border-box;display:flex;height:var(--tree-height);inset:0;position:absolute;-webkit-transform:translateY(var(--pos-y));transform:translateY(var(--pos-y));width:calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size))/2);z-index:1}.tree-dot{--size:calc(calc(var(--spacing,.0025rem) * 300) + var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem) * 50))) * 2);background-color:var(--mds-tree-item-branch-border-color,var(--mds-tree-branch-border-color,#000));border-radius:var(--size);display:none;height:var(--size);position:relative;width:var(--size)}.header--has-children .tree-dot{display:inline-flex}.header:not(.header--has-children) .tree-node .tree-branch{width:calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size)) - var(--header-gap))}:host(:not(:last-child)) .header--has-children .tree-node:after{--size:calc(calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size)) / 2) + var(--mds-tree-item-branch-border-radius,var(--mds-tree-branch-border-radius,var(--radius-lg,16px))));--pos-y:calc(var(--size)/2);border-color:var(--mds-tree-item-branch-border-color,var(--mds-tree-branch-border-color,#000));border-radius:0 0 0 var(--mds-tree-item-branch-border-radius,var(--mds-tree-branch-border-radius,var(--radius-lg,16px)));border-style:solid;border-width:0 0 var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50))) var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50)));box-sizing:border-box;content:"";display:flex;height:var(--size);inset:0;position:absolute;-webkit-transform:translateY(var(--pos-y));transform:translateY(var(--pos-y));width:var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50)));z-index:1}:host(:not(:last-child)) .children--has-children:before{border-left:var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50))) solid var(--mds-tree-item-branch-border-color,var(--mds-tree-branch-border-color,#000));content:"";display:flex;height:calc(100% + var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size)));left:0;position:absolute;top:calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size))*-1)}.tree-dot:after{--pos-y:calc(var(--size)/2);background-color:var(--mds-tree-item-branch-border-color,var(--mds-tree-branch-border-color,#000));box-sizing:border-box;content:"";display:inline-flex;height:calc(var(--size)/2);inset:0 50% 0 0;position:absolute;-webkit-transform:translate(calc(var(--pos-y) - var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem) * 50))) / 2),var(--pos-y));transform:translate(calc(var(--pos-y) - var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem) * 50))) / 2),var(--pos-y));-webkit-transition-duration:var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s));transition-duration:var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s));transition-property:height;-webkit-transition-timing-function:var(--mds-tree-item-transition-timing-function);transition-timing-function:var(--mds-tree-item-transition-timing-function);width:var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50)));z-index:1}:host([expanded]) .tree-dot:after{height:calc(var(--size) + var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem) * 50))))}:host([depth="0"]) .children--has-children .tree-branch,:host([depth="0"]) .children--has-children:before,:host([depth="0"]) .header--has-children .tree-node:after,:host([depth="0"]) .tree-node .tree-branch,:host([depth="0"]) .tree-node:before{display:none}.toggle-icon{align-items:center;align-self:center;display:inline-flex;flex-shrink:0;height:var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size));justify-content:center;margin-left:calc(var(--offset)*-1);position:relative;transform:rotate(0);-webkit-transition-duration:var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s));transition-duration:var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s));transition-property:transform;-webkit-transition-timing-function:var(--mds-tree-item-transition-timing-function);transition-timing-function:var(--mds-tree-item-transition-timing-function);width:var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size));z-index:1}.toggle-icon mds-button{--size:calc(var(--spacing,.0025rem)*600);background-color:var(--mds-tree-item-icon-background-color);border:0;border-radius:var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size));color:var(--mds-tree-item-icon-color);fill:var(--mds-tree-item-icon-color);height:var(--size);min-height:var(--size);min-width:var(--size);overflow:hidden;width:var(--size)}.toggle-icon mds-button[await]{background-color:var(--mds-tree-item-toggle-icon-async-background,var(--mds-tree-toggle-icon-async-background,#000));color:var(--mds-tree-item-toggle-icon-async-color,var(--mds-tree-toggle-icon-async-color,#000))}:host-context([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,#000));--mds-tree-item-icon-color:var(--mds-tree-item-toggle-icon-chevron-default-color,var(--mds-tree-toggle-icon-chevron-default-color,#000))}:host([expanded]):host-context([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,#000)));--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{-webkit-box-shadow:0 calc(var(--spacing,.0025rem)*25) 0 0 var(--mds-tree-item-branch-border-color,var(--mds-tree-branch-border-color,#000));box-shadow:0 calc(var(--spacing,.0025rem)*25) 0 0 var(--mds-tree-item-branch-border-color,var(--mds-tree-branch-border-color,#000))}:host-context([toggle=folder]) .toggle-icon mds-button{--size:auto;border-radius:var(--radius);padding:calc(var(--spacing,.0025rem)*25) calc(var(--spacing,.0025rem)*50)}:host-context([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,#000));--mds-tree-item-icon-color:var(--mds-tree-item-toggle-icon-folder-default-color,var(--mds-tree-toggle-icon-folder-default-color,#000))}:host-context(mds-tree[toggle=folder]):host([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,#000)));--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,#000)))}:host-context(mds-tree[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,#000));background-color:#0000;order:1}:host([expanded]):host-context(mds-tree[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,#000))}:host([expanded]):host-context(mds-tree[toggle-position=left][toggle=chevron]) .toggle-icon{transform:rotate(90deg)}.header:not(.header--has-children) .toggle-icon{display:none}.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,#000));--mds-tree-item-icon-color:var(--mds-tree-item-toggle-icon-chevron-default-color,var(--mds-tree-toggle-icon-chevron-default-color,#000))}: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,#000)));--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-icon--folder mds-button{--size:auto;border-radius:var(--radius);-webkit-box-shadow:0 calc(var(--spacing,.0025rem)*25) 0 0 var(--mds-tree-item-branch-border-color,var(--mds-tree-branch-border-color,#000));box-shadow:0 calc(var(--spacing,.0025rem)*25) 0 0 var(--mds-tree-item-branch-border-color,var(--mds-tree-branch-border-color,#000));padding:calc(var(--spacing,.0025rem)*25) calc(var(--spacing,.0025rem)*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,#000));--mds-tree-item-icon-color:var(--mds-tree-item-toggle-icon-folder-default-color,var(--mds-tree-toggle-icon-folder-default-color,#000))}: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,#000)));--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,#000)))}:host-context(mds-tree[toggle-position=left]) .toggle-icon{order:0}:host-context(mds-tree[toggle-position=right]) .header--has-children .title{margin-right:var(--offset)}:host-context(mds-tree[toggle-position=left]):host([toggle=chevron][expanded]) .toggle-icon{transform:rotate(90deg)}:host-context(mds-tree[toggle-position=left]):host([toggle=chevron]:not([expanded])) .toggle-icon{transform:rotate(0)}:host([toggle=chevron]):host-context(mds-tree[toggle-position=right]) .toggle-icon{transform:rotate(90deg)}:host([toggle=chevron][expanded]):host-context(mds-tree[toggle-position=right]) .toggle-icon{transform:rotate(270deg)}:is(: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){transform:rotate(0)scale(.825)}:is(:host([toggle=chevron]):host-context(mds-tree[toggle-position=right]) .toggle-icon,:host([toggle=folder]):host-context(mds-tree[toggle-position=right]) .toggle-icon){background-color:#0000;fill:var(--mds-tree-item-branch-dot-default-color,var(--mds-tree-branch-dot-default-color,#000))}:is(: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){background-color:#0000;fill:var(--mds-tree-item-branch-dot-expanded-color,var(--mds-tree-branch-dot-expanded-color,#000))}:host-context([appearance=none]) .header{--offset:0;gap:0}:host-context([appearance=none]):host(:not(:last-child)) .children--has-children:before{display:none}:host-context([appearance=none]) .tree-dot{display:none}:host-context([appearance=none]) .tree-node{display:none}:host-context([appearance=none]) .label-action{--padding:calc(var(--spacing,.0025rem)*200);margin-left:0;padding-left:var(--padding);padding-right:var(--padding)}:host-context([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,calc(var(--spacing,.0025rem) * 50))) + var(--mds-tree-item-children-padding-left) * 2)}:host-context([appearance=none][toggle-position=right]) .children{padding-left:var(--mds-tree-item-children-padding-left)}`;
+const mdsTreeItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-tree-item-actions-border-radius:var(--mds-tree-actions-border-radius,var(--radius-lg,16px));--mds-tree-item-actions-gap:var(--mds-tree-actions-gap,calc(var(--spacing,.0025rem)*50));--mds-tree-item-branch-border-color:var(--mds-tree-branch-border-color,#000);--mds-tree-item-branch-border-radius:var(--mds-tree-branch-border-radius,var(--radius-lg,16px));--mds-tree-item-branch-border-size:var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50));--mds-tree-item-branch-dot-default-color:var(--mds-tree-branch-dot-default-color,#000);--mds-tree-item-branch-dot-expanded-color:var(--mds-tree-branch-dot-expanded-color,#000);--mds-tree-item-label-default-background:var(--mds-tree-label-default-background,#0000);--mds-tree-item-label-hover-background:var(--mds-tree-label-hover-background,#0000);--mds-tree-item-label-icon-default-color:var(--mds-tree-label-icon-default-color,#000);--mds-tree-item-label-icon-hover-color:var(--mds-tree-label-icon-hover-color,#000);--mds-tree-item-line-clamp:var(--mds-tree-line-clamp,1);--mds-tree-item-toggle-gap:var(--mds-tree-toggle-gap,calc(var(--spacing,.0025rem)*150));--mds-tree-item-toggle-icon-async-background:var(--mds-tree-toggle-icon-async-background,#000);--mds-tree-item-toggle-icon-async-color:var(--mds-tree-toggle-icon-async-color,#000);--mds-tree-item-toggle-icon-chevron-default-background:var(--mds-tree-toggle-icon-chevron-default-background,#000);--mds-tree-item-toggle-icon-chevron-default-color:var(--mds-tree-toggle-icon-chevron-default-color,#000);--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,#000));--mds-tree-item-toggle-icon-chevron-expanded-color:var(--mds-tree-item-toggle-icon-default-color);--mds-tree-item-toggle-icon-folder-default-background:var(--mds-tree-toggle-icon-folder-default-background,#000);--mds-tree-item-toggle-icon-folder-default-color:var(--mds-tree-toggle-icon-folder-default-color,#000);--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,#000));--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,#000));--mds-tree-item-toggle-icon-position-right-default-background:var(--mds-tree-toggle-icon-position-right-default-background,#0000);--mds-tree-item-toggle-icon-position-right-default-color:var(--mds-tree-toggle-icon-position-right-default-color,#000);--mds-tree-item-toggle-icon-position-right-expanded-background:var(--mds-tree-toggle-icon-position-right-expanded-background,#0000);--mds-tree-item-toggle-icon-position-right-expanded-color:var(--mds-tree-toggle-icon-position-right-expanded-color,#000);--mds-tree-item-toggle-size:var(--mds-tree-toggle-size);--mds-tree-item-transition-duration:var(--mds-tree-transition-duration,0s)}}}:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@container style(--mds-tree-branch-use-rounded-border:true){:host{--mds-tree-branch-border-radius:var(--radius-lg,16px)}}@container style(--mds-tree-branch-use-rounded-border:false){:host{--mds-tree-branch-border-radius:0px}}:host{--mds-tree-item-actions-border-radius:var(--mds-tree-actions-border-radius,var(--radius-lg,16px));--mds-tree-item-actions-gap:var(--mds-tree-actions-gap,calc(var(--spacing,.0025rem)*50));--mds-tree-item-branch-border-color:var(--mds-tree-branch-border-color,#000);--mds-tree-item-branch-border-radius:var(--mds-tree-branch-border-radius,var(--radius-lg,16px));--mds-tree-item-branch-border-size:var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50));--mds-tree-item-branch-dot-default-color:var(--mds-tree-branch-dot-default-color,#000);--mds-tree-item-branch-dot-expanded-color:var(--mds-tree-branch-dot-expanded-color,#000);--mds-tree-item-label-default-background:var(--mds-tree-label-default-background,#0000);--mds-tree-item-label-hover-background:var(--mds-tree-label-hover-background,#0000);--mds-tree-item-label-icon-default-color:var(--mds-tree-label-icon-default-color,#000);--mds-tree-item-label-icon-hover-color:var(--mds-tree-label-icon-hover-color,#000);--mds-tree-item-line-clamp:var(--mds-tree-line-clamp,1);--mds-tree-item-toggle-gap:var(--mds-tree-toggle-gap,calc(var(--spacing,.0025rem)*150));--mds-tree-item-toggle-icon-async-background:var(--mds-tree-toggle-icon-async-background,#000);--mds-tree-item-toggle-icon-async-color:var(--mds-tree-toggle-icon-async-color,#000);--mds-tree-item-toggle-icon-chevron-default-background:var(--mds-tree-toggle-icon-chevron-default-background,#000);--mds-tree-item-toggle-icon-chevron-default-color:var(--mds-tree-toggle-icon-chevron-default-color,#000);--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,#000));--mds-tree-item-toggle-icon-chevron-expanded-color:var(--mds-tree-item-toggle-icon-chevron-default-color,var(--mds-tree-toggle-icon-chevron-default-color,#000));--mds-tree-item-toggle-icon-folder-default-background:var(--mds-tree-toggle-icon-folder-default-background,#000);--mds-tree-item-toggle-icon-folder-default-color:var(--mds-tree-toggle-icon-folder-default-color,#000);--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,#000));--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,#000));--mds-tree-item-toggle-icon-position-right-default-background:var(--mds-tree-toggle-icon-position-right-default-background,#0000);--mds-tree-item-toggle-icon-position-right-default-color:var(--mds-tree-toggle-icon-position-right-default-color,#000);--mds-tree-item-toggle-icon-position-right-expanded-background:var(--mds-tree-toggle-icon-position-right-expanded-background,#0000);--mds-tree-item-toggle-icon-position-right-expanded-color:var(--mds-tree-toggle-icon-position-right-expanded-color,#000);--mds-tree-item-toggle-size:var(--mds-tree-toggle-size);--mds-tree-item-transition-duration:var(--mds-tree-transition-duration,0s);--mds-tree-item-transition-timing-function:var(--mds-tree-transition-timing-function);--mds-tree-item-icon-background-color:var(--mds-tree-item-toggle-icon-chevron-default-background,var(--mds-tree-toggle-icon-chevron-default-background,#000));--mds-tree-item-icon-color:var(--mds-tree-item-toggle-icon-chevron-default-color,var(--mds-tree-toggle-icon-chevron-default-color,#000));--header-gap:calc(var(--spacing,.0025rem)*100);display:grid;-webkit-transition-duration:var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s));transition-duration:var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s));-webkit-transition-timing-function:var(--mds-tree-item-transition-timing-function);transition-timing-function:var(--mds-tree-item-transition-timing-function)}.header{--offset:calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size)) + var(--header-gap));align-items:flex-start;gap:var(--header-gap);position:relative;z-index:1}.header,.title{display:flex;min-width:0}.title{align-items:stretch;flex-grow:1;gap:calc(var(--spacing,.0025rem)*200);justify-content:space-between}.label-action{--mds-button-line-clamp:var(--mds-tree-item-line-clamp,var(--mds-tree-line-clamp,1));--padding:calc(var(--spacing,.0025rem)*100);background-color:var(--mds-tree-item-label-default-background,var(--mds-tree-label-default-background,#0000));border-radius:var(--radius-lg,16px);fill:var(--mds-tree-item-label-icon-default-color,var(--mds-tree-label-icon-default-color,#000));flex-grow:1;justify-content:flex-start;margin-left:calc(var(--padding)*-1);padding-left:var(--padding);padding-right:var(--padding)}.label-action:hover{background-color:var(--mds-tree-item-label-hover-background,var(--mds-tree-label-hover-background,#0000));fill:var(--mds-tree-item-label-icon-hover-color,var(--mds-tree-label-icon-hover-color,#000))}.actions-container{--duration-300:.3s;--ease:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));border-radius:var(--mds-tree-item-actions-border-radius,var(--mds-tree-actions-border-radius,var(--radius-lg,16px)));interpolate-size:allow-keywords;align-items:center;display:none;justify-content:flex-start;min-width:0;overflow:hidden;transition-behavior:allow-discrete;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:min-width,width,overflow;-webkit-transition-timing-function:var(--ease);transition-timing-function:var(--ease);width:0}.actions-container--has-actions{display:flex}.actions{align-items:center;border-radius:var(--mds-tree-item-actions-border-radius,var(--mds-tree-actions-border-radius,var(--radius-lg,16px)));display:inline-flex;flex-shrink:0;gap:var(--mds-tree-item-actions-gap,var(--mds-tree-actions-gap,calc(var(--spacing,.0025rem)*50)));pointer-events:none;transform:scale(0);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:transform;-webkit-transition-timing-function:var(--ease);transition-timing-function:var(--ease)}.header:focus-within .actions,.header:hover .actions,:host([resolved-actions=visible]) .actions-container{pointer-events:auto}.header:focus-within .actions-container,.header:hover .actions-container,:host([resolved-actions=visible]) .actions-container{-webkit-animation:toggleOverflow var(--duration-300,.3s) forwards;animation:toggleOverflow var(--duration-300,.3s) forwards;min-width:fit-content;width:fit-content}.header:focus-within .actions,.header:hover .actions,:host([resolved-actions=visible]) .actions{transform:scale(1)}.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,calc(var(--spacing,.0025rem) * 50)))) / 2);interpolate-size:allow-keywords;display:flex;flex-direction:column;height:0;overflow:clip;padding-left:var(--mds-tree-item-children-padding-left);position:relative;-webkit-transform:translateY(calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size))/2*-1));transform:translateY(calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size))/2*-1));-webkit-transition-duration:var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s));transition-duration:var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s));transition-property:height,transform;-webkit-transition-timing-function:var(--mds-tree-item-transition-timing-function);transition-timing-function:var(--mds-tree-item-transition-timing-function);z-index:0}.children--expanded{-webkit-animation:toggleOverflow var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s)) forwards;animation:toggleOverflow var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s)) forwards;-webkit-animation-timing-function:var(--mds-tree-item-transition-timing-function);animation-timing-function:var(--mds-tree-item-transition-timing-function);display:flex;height:auto;transform:translateY(0)}.children--empty,.children--hidden{display:none}@keyframes toggleOverflow{99.99%{overflow:hidden}to{overflow:visible}}@keyframes toggleDisplay{99.99%{display:flex}to{display:none}}.tree-node{--middle-pos-x:calc(50% - calc(var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem) * 50)))/2));align-items:center;box-sizing:border-box;display:inline-flex;flex-shrink:0;height:var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size));justify-content:center;pointer-events:none;position:relative;width:var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size));z-index:0}.tree-branch{--pos-y:calc(calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size)) / 2 + var(--mds-tree-item-branch-border-radius,var(--mds-tree-branch-border-radius,var(--radius-lg,16px)))) * -1);--tree-height:calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size)) + var(--mds-tree-item-branch-border-radius,var(--mds-tree-branch-border-radius,var(--radius-lg,16px))) + var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem) * 50))) / 2);--tree-width:calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size))/2);border-color:var(--mds-tree-item-branch-border-color,var(--mds-tree-branch-border-color,#000));border-radius:0 0 0 var(--mds-tree-item-branch-border-radius,var(--mds-tree-branch-border-radius,var(--radius-lg,16px)));border-style:solid;border-width:0 0 var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50))) var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50)));box-sizing:border-box;display:flex;height:var(--tree-height);inset:0;position:absolute;-webkit-transform:translateY(var(--pos-y));transform:translateY(var(--pos-y));width:calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size))/2);z-index:1}.tree-dot{--size:calc(calc(var(--spacing,.0025rem) * 300) + var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem) * 50))) * 2);background-color:var(--mds-tree-item-branch-border-color,var(--mds-tree-branch-border-color,#000));border-radius:var(--size);display:none;height:var(--size);position:relative;width:var(--size)}.header--has-children .tree-dot{display:inline-flex}.header:not(.header--has-children) .tree-node .tree-branch{width:calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size)) - var(--header-gap))}:host(:not(:last-child)) .header--has-children .tree-node:after{--size:calc(calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size)) / 2) + var(--mds-tree-item-branch-border-radius,var(--mds-tree-branch-border-radius,var(--radius-lg,16px))));--pos-y:calc(var(--size)/2);border-color:var(--mds-tree-item-branch-border-color,var(--mds-tree-branch-border-color,#000));border-radius:0 0 0 var(--mds-tree-item-branch-border-radius,var(--mds-tree-branch-border-radius,var(--radius-lg,16px)));border-style:solid;border-width:0 0 var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50))) var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50)));box-sizing:border-box;content:"";display:flex;height:var(--size);inset:0;position:absolute;-webkit-transform:translateY(var(--pos-y));transform:translateY(var(--pos-y));width:var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50)));z-index:1}:host(:not(:last-child)) .children--has-children:before{border-left:var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50))) solid var(--mds-tree-item-branch-border-color,var(--mds-tree-branch-border-color,#000));content:"";display:flex;height:calc(100% + var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size)));left:0;position:absolute;top:calc(var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size))*-1)}.tree-dot:after{--pos-y:calc(var(--size)/2);background-color:var(--mds-tree-item-branch-border-color,var(--mds-tree-branch-border-color,#000));box-sizing:border-box;content:"";display:inline-flex;height:calc(var(--size)/2);inset:0 50% 0 0;position:absolute;-webkit-transform:translate(calc(var(--pos-y) - var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem) * 50))) / 2),var(--pos-y));transform:translate(calc(var(--pos-y) - var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem) * 50))) / 2),var(--pos-y));-webkit-transition-duration:var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s));transition-duration:var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s));transition-property:height;-webkit-transition-timing-function:var(--mds-tree-item-transition-timing-function);transition-timing-function:var(--mds-tree-item-transition-timing-function);width:var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem)*50)));z-index:1}:host([expanded]) .tree-dot:after{height:calc(var(--size) + var(--mds-tree-item-branch-border-size,var(--mds-tree-branch-border-size,calc(var(--spacing,.0025rem) * 50))))}:host([depth="0"]) .children--has-children .tree-branch,:host([depth="0"]) .children--has-children:before,:host([depth="0"]) .header--has-children .tree-node:after,:host([depth="0"]) .tree-node .tree-branch,:host([depth="0"]) .tree-node:before{display:none}.toggle-icon{align-items:center;align-self:center;display:inline-flex;flex-shrink:0;height:var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size));justify-content:center;margin-left:calc(var(--offset)*-1);position:relative;transform:rotate(0);-webkit-transition-duration:var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s));transition-duration:var(--mds-tree-item-transition-duration,var(--mds-tree-transition-duration,0s));transition-property:transform;-webkit-transition-timing-function:var(--mds-tree-item-transition-timing-function);transition-timing-function:var(--mds-tree-item-transition-timing-function);width:var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size));z-index:1}.toggle-icon mds-button{--size:calc(var(--spacing,.0025rem)*600);background-color:var(--mds-tree-item-icon-background-color);border:0;border-radius:var(--mds-tree-item-toggle-size,var(--mds-tree-toggle-size));color:var(--mds-tree-item-icon-color);fill:var(--mds-tree-item-icon-color);height:var(--size);min-height:var(--size);min-width:var(--size);overflow:hidden;width:var(--size)}.toggle-icon mds-button[await]{background-color:var(--mds-tree-item-toggle-icon-async-background,var(--mds-tree-toggle-icon-async-background,#000));color:var(--mds-tree-item-toggle-icon-async-color,var(--mds-tree-toggle-icon-async-color,#000))}: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,#000));--mds-tree-item-icon-color:var(--mds-tree-item-toggle-icon-chevron-default-color,var(--mds-tree-toggle-icon-chevron-default-color,#000))}: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,#000)));--mds-tree-item-icon-color:var(--mds-tree-item-toggle-icon-chevron-expanded-color,var(--mds-tree-item-toggle-icon-default-color))}:host([toggle=folder][toggle-position=left]) .toggle-icon mds-button{-webkit-box-shadow:0 calc(var(--spacing,.0025rem)*25) 0 0 var(--mds-tree-item-branch-border-color,var(--mds-tree-branch-border-color,#000));box-shadow:0 calc(var(--spacing,.0025rem)*25) 0 0 var(--mds-tree-item-branch-border-color,var(--mds-tree-branch-border-color,#000))}:host([toggle=folder]) .toggle-icon mds-button{--size:auto;border-radius:var(--radius);padding:calc(var(--spacing,.0025rem)*25) calc(var(--spacing,.0025rem)*50)}: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,#000));--mds-tree-item-icon-color:var(--mds-tree-item-toggle-icon-folder-default-color,var(--mds-tree-toggle-icon-folder-default-color,#000))}: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,#000)));--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,#000)))}: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,#0000));--mds-tree-item-icon-color:var(--mds-tree-item-toggle-icon-position-right-default-color,var(--mds-tree-toggle-icon-position-right-default-color,#000));background-color:#0000;order:1}: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,#0000));--mds-tree-item-icon-color:var(--mds-tree-item-toggle-icon-position-right-expanded-color,var(--mds-tree-toggle-icon-position-right-expanded-color,#000))}:host([expanded][toggle-position=left][toggle=chevron]) .toggle-icon{transform:rotate(90deg)}.header:not(.header--has-children) .toggle-icon{display:none}:host([toggle-position=left]) .toggle-icon{order:0}:host([toggle-position=right]) .header--has-children .title{margin-right:var(--offset)}:host([toggle-position=left][toggle=chevron][expanded]) .toggle-icon{transform:rotate(90deg)}:host([toggle-position=left][toggle=chevron]:not([expanded])) .toggle-icon{transform:rotate(0)}:host([toggle=chevron][toggle-position=right]) .toggle-icon{transform:rotate(90deg)}:host([toggle=chevron][expanded][toggle-position=right]) .toggle-icon{transform:rotate(270deg)}:host([toggle=chevron][toggle-position=right]) .toggle-icon--dot,:host([toggle=folder][toggle-position=right]) .toggle-icon--dot{transform:rotate(0)scale(.825)}:host([toggle=chevron][toggle-position=right]) .toggle-icon,:host([toggle=folder][toggle-position=right]) .toggle-icon{background-color:#0000;fill:var(--mds-tree-item-branch-dot-default-color,var(--mds-tree-branch-dot-default-color,#000))}:host([toggle=chevron][expanded][toggle-position=right]) .toggle-icon,:host([toggle=folder][expanded][toggle-position=right]) .toggle-icon{background-color:#0000;fill:var(--mds-tree-item-branch-dot-expanded-color,var(--mds-tree-branch-dot-expanded-color,#000))}:host([appearance=none]) .header{--offset:0;gap:0}:host([appearance=none]) .tree-dot,:host([appearance=none]) .tree-node,:host([appearance=none]:not(:last-child)) .children--has-children:before{display:none}:host([appearance=none]) .label-action{--padding:calc(var(--spacing,.0025rem)*200);margin-left:0;padding-left:var(--padding);padding-right:var(--padding)}: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,calc(var(--spacing,.0025rem) * 50))) + var(--mds-tree-item-children-padding-left) * 2)}:host([appearance=none][toggle-position=right]) .children{padding-left:var(--mds-tree-item-children-padding-left)}`;
 
 const MdsTreeItem = class {
     constructor(hostRef) {
@@ -89,7 +89,20 @@ const MdsTreeItem = class {
             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.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -106,14 +119,28 @@ const MdsTreeItem = class {
             this.collapsedEvent.emit({ element: this.host });
         }, unit.cssDurationToMilliseconds(this.cssToggleChildrenDuration));
     }
+    /**
+     * Expands the tree item, revealing its children.
+     */
     async expand() {
         this.expanded = true;
         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');
     }
@@ -127,7 +154,7 @@ const MdsTreeItem = class {
         this.childrenElement.removeEventListener('transitionend', this.checkChildrenTransitionEnd);
     }
     render() {
-        return (index.h(index.Host, { key: '4d9742bb5056fe5ec887cf205e59be84af6f7479' }, index.h("div", { key: '3b2849f13a57e4bb4ba5420717328454321ccc47', class: clsx.clsx('header', this.hasChildren && 'header--has-children') }, index.h("div", { key: '73f952b5cf6651cbdcd8a751b6b3f39dd575be53', class: "tree-node" }, index.h("div", { key: '67251d0dab30cf34ed3d45b28d7c86b3e994cc13', class: "tree-branch" }), index.h("div", { key: 'c4b5caf369bf18603ef6a6ce6d23131c1852acbd', class: "tree-dot" })), index.h("div", { key: '2105697b07dde1e064b78f3f1cb594adffe03ea4', class: clsx.clsx('toggle-icon', `toggle-icon--${this.toggle}`) }, index.h("mds-button", { key: 'a0bae2969bbb2ed2bd7922c7896e33ee54546017', await: this.await, onClick: this.onClick.bind(this), icon: !this.await ? this.currentToggleIcon : undefined, title: this.t.get(this.expanded ? 'collapse' : 'expand', { label: this.label }), variant: "dark", tone: "text", size: "sm" })), index.h("div", { key: 'af2ff287dc1a92a7f8b6bd88a608f9f43e63e074', class: "title" }, index.h("mds-button", { key: '3af511793f88b4464bea2d5345f7ff21183c0cc0', class: clsx.clsx('label-action', this.await && 'label-action--await'), disabled: this.await, icon: this.icon, onClick: this.onClick.bind(this), variant: "dark", tone: "text", truncate: this.truncate }, this.label), index.h("div", { key: 'ee94c987325d1ee8f5f1eb93a563ebd1db83447b', class: clsx.clsx('actions-container', this.hasActions && 'actions-container--has-actions'), part: "actions-container" }, index.h("div", { key: 'f32d4e90f0dc0cd903790497e560263586ddf266', class: "actions", part: "actions-list" }, index.h("slot", { key: 'b10a1d5e85ad00ebd0fb1a4abcafd95b8a3d70e4', name: "action" }))))), index.h("div", { key: '403e6fa954e7f9d5683ed8106a127b47a39fa607', class: clsx.clsx('children', this.hasChildren && 'children--has-children', this.expanded && 'children--expanded') }, index.h("slot", { key: '00011292864c1aeeba6bdf216659d03974bcf1e4' }))));
+        return (index.h(index.Host, { key: '288e9f505e7d61c35591a1a76b59e55d988da5eb', "resolved-actions": this.resolvedActions }, index.h("div", { key: '2dc6752b5df90b1240a582b1e834a56c8c469f0c', class: clsx.clsx('header', this.hasChildren && 'header--has-children') }, index.h("div", { key: 'c6492d4f1bfbe6fe609835b3e949f15eae2f2be8', class: "tree-node" }, index.h("div", { key: '981800c6964113b608f4f80ddad5f6a81cfd921b', class: "tree-branch" }), index.h("div", { key: '56b71655b2236135329b745acbd762fd02cf8a55', class: "tree-dot" })), index.h("div", { key: '69f0f6ae4613ee52eb721b5cd635dee31decedb4', class: "toggle-icon" }, index.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" })), index.h("div", { key: '629b3eb10a65f6f99137bee0dcbdbff2b9f21eac', class: "title" }, index.h("mds-button", { key: '82d41a1fbc2aa763920f64d23c877df335eb6f19', class: clsx.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), index.h("div", { key: 'ecc46798cf242dd36a499499aefd2a92d3dd3e81', class: clsx.clsx('actions-container', this.hasActions && 'actions-container--has-actions'), part: "actions-container" }, index.h("div", { key: '0d318f5697c3f9f13c41f818cfdeeaaf1cf3dd4d', class: "actions", part: "actions-list" }, index.h("slot", { key: 'adc4371e19dfb38e58feceaad187007a7a0a3108', name: "action" }))))), index.h("div", { key: '9f69e34dd1326bf419ba1c7395ced5433c351c4a', class: clsx.clsx('children', this.hasChildren && 'children--has-children', this.expanded && 'children--expanded') }, index.h("slot", { key: 'f04be5d65ec3e9628246958d7ae8c382bfb1af44' }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -136,6 +163,9 @@ const MdsTreeItem = class {
             }],
         "expanded": [{
                 "handleExpandedChange": 0
+            }],
+        "actions": [{
+                "handleActionsChange": 0
             }]
     }; }
 };

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-CNuKb6Lv.js');
 
-const mdsTreeCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-tree-actions-border-radius:0;--mds-tree-actions-gap:0;--mds-tree-label-default-background:transparent;--mds-tree-label-hover-background:transparent;--mds-tree-label-icon-default-color:#000;--mds-tree-label-icon-hover-color:#000;--mds-tree-line-clamp:1;--mds-tree-branch-border-color:#000;--mds-tree-branch-use-rounded-border:true;--mds-tree-branch-border-size:0;--mds-tree-branch-dot-default-color:#000;--mds-tree-branch-dot-expanded-color:#000;--mds-tree-toggle-gap:0;--mds-tree-toggle-icon-async-background:#000;--mds-tree-toggle-icon-async-color:#000;--mds-tree-toggle-icon-chevron-default-background:#000;--mds-tree-toggle-icon-chevron-default-color:#000;--mds-tree-toggle-icon-chevron-expanded-background:#000;--mds-tree-toggle-icon-chevron-expanded-color:#000;--mds-tree-toggle-icon-folder-default-background:#000;--mds-tree-toggle-icon-folder-default-color:#000;--mds-tree-toggle-icon-folder-expanded-background:#000;--mds-tree-toggle-icon-folder-expanded-color:#000;--mds-tree-toggle-icon-position-right-default-background:transparent;--mds-tree-toggle-icon-position-right-default-color:#000;--mds-tree-toggle-icon-position-right-expanded-background:transparent;--mds-tree-toggle-icon-position-right-expanded-color:#000;--mds-tree-transition-duration:0s;--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-tree-item:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-tree-actions-border-radius{syntax:"<length>";inherits:false;initial-value:0}@property --mds-tree-actions-gap{syntax:"<length>";inherits:false;initial-value:0}@property --mds-tree-label-default-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-tree-label-hover-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-tree-label-icon-default-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-label-icon-hover-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-line-clamp{syntax:"<integer>";inherits:false;initial-value:1}@property --mds-tree-branch-border-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-branch-use-rounded-border{syntax:"true|false";inherits:false;initial-value:true}@property --mds-tree-branch-border-size{syntax:"<length>";inherits:false;initial-value:0}@property --mds-tree-branch-dot-default-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-branch-dot-expanded-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-gap{syntax:"<length>";inherits:false;initial-value:0}@property --mds-tree-toggle-icon-async-background{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-async-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-chevron-default-background{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-chevron-default-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-chevron-expanded-background{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-chevron-expanded-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-folder-default-background{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-folder-default-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-folder-expanded-background{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-folder-expanded-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-position-right-default-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-tree-toggle-icon-position-right-default-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-position-right-expanded-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-tree-toggle-icon-position-right-expanded-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-transition-duration{syntax:"<time>";inherits:false;initial-value:0s}:host{--mds-tree-actions-border-radius:var(--radius-lg,16px);--mds-tree-actions-gap:calc(var(--spacing,.0025rem)*50);--mds-tree-label-default-background:transparent;--mds-tree-label-hover-background:rgb(var(--tone-neutral,0 0 0));--mds-tree-label-icon-default-color:rgb(var(--variant-primary-04,184 208 255));--mds-tree-label-icon-hover-color:var(--mds-tree-label-icon-default-color,#000);--mds-tree-line-clamp:2;--mds-tree-branch-border-color:rgb(var(--tone-neutral-07,134 134 134));--mds-tree-branch-use-rounded-border:true;--mds-tree-branch-border-size:calc(var(--spacing,.0025rem)*50);--mds-tree-branch-dot-default-color:rgb(var(--tone-neutral-07,134 134 134));--mds-tree-branch-dot-expanded-color:rgb(var(--tone-neutral-06,158 158 158));--mds-tree-toggle-gap:calc(var(--spacing,.0025rem)*150);--mds-tree-toggle-icon-async-background:rgb(var(--tone-neutral-09,76 76 76));--mds-tree-toggle-icon-async-color:rgb(var(--variant-primary-03,211 226 255));--mds-tree-toggle-icon-chevron-default-background:rgb(var(--variant-primary-04,184 208 255));--mds-tree-toggle-icon-chevron-default-color:rgb(var(--tone-neutral,0 0 0));--mds-tree-toggle-icon-chevron-expanded-background:var(--mds-tree-toggle-icon-chevron-default-background,#000);--mds-tree-toggle-icon-chevron-expanded-color:var(--mds-tree-toggle-icon-chevron-default-color,#000);--mds-tree-toggle-icon-folder-default-background:rgb(var(--tone-neutral-08,107 107 107));--mds-tree-toggle-icon-folder-default-color:rgb(var(--variant-primary-04,184 208 255));--mds-tree-toggle-icon-folder-expanded-background:var(--mds-tree-toggle-icon-folder-default-background,#000);--mds-tree-toggle-icon-folder-expanded-color:var(--mds-tree-toggle-icon-folder-default-color,#000);--mds-tree-toggle-icon-position-right-default-background:transparent;--mds-tree-toggle-icon-position-right-default-color:rgb(var(--tone-neutral-07,134 134 134));--mds-tree-toggle-icon-position-right-expanded-background:transparent;--mds-tree-toggle-icon-position-right-expanded-color:rgb(var(--tone-neutral-07,134 134 134));--mds-tree-transition-duration:.3s;--mds-tree-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));--mds-tree-toggle-border-radius:var(--radius-lg,16px);--mds-tree-toggle-size:calc(var(--spacing,.0025rem)*900);--tw-duration:.2s;--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));border-radius:calc(var(--spacing,.0025rem)*250);display:grid;padding:calc(var(--spacing,.0025rem)*50);transition-duration:.2s;transition-property:background-color;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}`;
+const mdsTreeCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-tree-actions-border-radius:0;--mds-tree-actions-gap:0;--mds-tree-label-default-background:#0000;--mds-tree-label-hover-background:#0000;--mds-tree-label-icon-default-color:#000;--mds-tree-label-icon-hover-color:#000;--mds-tree-line-clamp:1;--mds-tree-branch-border-color:#000;--mds-tree-branch-use-rounded-border:true;--mds-tree-branch-border-size:0;--mds-tree-branch-dot-default-color:#000;--mds-tree-branch-dot-expanded-color:#000;--mds-tree-toggle-gap:0;--mds-tree-toggle-icon-async-background:#000;--mds-tree-toggle-icon-async-color:#000;--mds-tree-toggle-icon-chevron-default-background:#000;--mds-tree-toggle-icon-chevron-default-color:#000;--mds-tree-toggle-icon-chevron-expanded-background:#000;--mds-tree-toggle-icon-chevron-expanded-color:#000;--mds-tree-toggle-icon-folder-default-background:#000;--mds-tree-toggle-icon-folder-default-color:#000;--mds-tree-toggle-icon-folder-expanded-background:#000;--mds-tree-toggle-icon-folder-expanded-color:#000;--mds-tree-toggle-icon-position-right-default-background:#0000;--mds-tree-toggle-icon-position-right-default-color:#000;--mds-tree-toggle-icon-position-right-expanded-background:#0000;--mds-tree-toggle-icon-position-right-expanded-color:#000;--mds-tree-transition-duration:0s;--tw-ease:initial}}}:host(:not(:is([hydrated],.hydrated))),mds-tree-item:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-tree-actions-border-radius{syntax:"<length>";inherits:false;initial-value:0}@property --mds-tree-actions-gap{syntax:"<length>";inherits:false;initial-value:0}@property --mds-tree-label-default-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-tree-label-hover-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-tree-label-icon-default-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-label-icon-hover-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-line-clamp{syntax:"<integer>";inherits:false;initial-value:1}@property --mds-tree-branch-border-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-branch-use-rounded-border{syntax:"true|false";inherits:false;initial-value:true}@property --mds-tree-branch-border-size{syntax:"<length>";inherits:false;initial-value:0}@property --mds-tree-branch-dot-default-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-branch-dot-expanded-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-gap{syntax:"<length>";inherits:false;initial-value:0}@property --mds-tree-toggle-icon-async-background{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-async-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-chevron-default-background{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-chevron-default-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-chevron-expanded-background{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-chevron-expanded-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-folder-default-background{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-folder-default-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-folder-expanded-background{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-folder-expanded-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-position-right-default-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-tree-toggle-icon-position-right-default-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-toggle-icon-position-right-expanded-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-tree-toggle-icon-position-right-expanded-color{syntax:"<color>";inherits:false;initial-value:#000}@property --mds-tree-transition-duration{syntax:"<time>";inherits:false;initial-value:0s}:host{--mds-tree-actions-border-radius:var(--radius-lg,16px);--mds-tree-actions-gap:calc(var(--spacing,.0025rem)*50);--mds-tree-label-default-background:#0000;--mds-tree-label-hover-background:rgb(var(--tone-neutral,0 0 0));--mds-tree-label-icon-default-color:rgb(var(--variant-primary-04,184 208 255));--mds-tree-label-icon-hover-color:var(--mds-tree-label-icon-default-color,#000);--mds-tree-line-clamp:2;--mds-tree-branch-border-color:rgb(var(--tone-neutral-07,134 134 134));--mds-tree-branch-use-rounded-border:true;--mds-tree-branch-border-size:calc(var(--spacing,.0025rem)*50);--mds-tree-branch-dot-default-color:rgb(var(--tone-neutral-07,134 134 134));--mds-tree-branch-dot-expanded-color:rgb(var(--tone-neutral-06,158 158 158));--mds-tree-toggle-gap:calc(var(--spacing,.0025rem)*150);--mds-tree-toggle-icon-async-background:rgb(var(--tone-neutral-09,76 76 76));--mds-tree-toggle-icon-async-color:rgb(var(--variant-primary-03,211 226 255));--mds-tree-toggle-icon-chevron-default-background:rgb(var(--variant-primary-04,184 208 255));--mds-tree-toggle-icon-chevron-default-color:rgb(var(--tone-neutral,0 0 0));--mds-tree-toggle-icon-chevron-expanded-background:var(--mds-tree-toggle-icon-chevron-default-background,#000);--mds-tree-toggle-icon-chevron-expanded-color:var(--mds-tree-toggle-icon-chevron-default-color,#000);--mds-tree-toggle-icon-folder-default-background:rgb(var(--tone-neutral-08,107 107 107));--mds-tree-toggle-icon-folder-default-color:rgb(var(--variant-primary-04,184 208 255));--mds-tree-toggle-icon-folder-expanded-background:var(--mds-tree-toggle-icon-folder-default-background,#000);--mds-tree-toggle-icon-folder-expanded-color:var(--mds-tree-toggle-icon-folder-default-color,#000);--mds-tree-toggle-icon-position-right-default-background:#0000;--mds-tree-toggle-icon-position-right-default-color:rgb(var(--tone-neutral-07,134 134 134));--mds-tree-toggle-icon-position-right-expanded-background:#0000;--mds-tree-toggle-icon-position-right-expanded-color:rgb(var(--tone-neutral-07,134 134 134));--mds-tree-transition-duration:.3s;--mds-tree-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));--mds-tree-toggle-border-radius:var(--radius-lg,16px);--mds-tree-toggle-size:calc(var(--spacing,.0025rem)*900);--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));border-radius:calc(var(--spacing,.0025rem)*250);display:grid;padding:calc(var(--spacing,.0025rem)*50);-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}@property --tw-ease{syntax:"*";inherits:false}`;
 
 const MdsTree = class {
     constructor(hostRef) {
@@ -39,6 +39,16 @@ const MdsTree = class {
                 element.toggle = newValue;
             });
         };
+        this.updateChildrenTogglePosition = (newValue) => {
+            this.childrenElements.forEach((element) => {
+                element.togglePosition = newValue;
+            });
+        };
+        this.updateChildrenAppearance = (newValue) => {
+            this.childrenElements.forEach((element) => {
+                element.appearance = newValue;
+            });
+        };
         this.updateChildrenTruncate = (newValue) => {
             this.childrenElements.forEach((element) => {
                 element.truncate = newValue;
@@ -61,6 +71,17 @@ const MdsTree = class {
     handleToggleChange(newValue) {
         this.updateChildrenToggle(newValue);
     }
+    handleTogglePositionChange(newValue) {
+        this.updateChildrenTogglePosition(newValue);
+    }
+    handleAppearanceChange(newValue) {
+        this.updateChildrenAppearance(newValue);
+    }
+    handleActionsChange() {
+        this.childrenElements.forEach((element) => {
+            void element.refreshActions();
+        });
+    }
     handleTruncateChange(newValue) {
         this.updateChildrenTruncate(newValue);
     }
@@ -68,15 +89,17 @@ const MdsTree = class {
         this.childrenElements = this.host.querySelectorAll('mds-tree-item');
         this.updateChildrenTruncate(this.truncate);
         this.updateChildrenToggle(this.toggle);
+        this.updateChildrenTogglePosition(this.togglePosition);
+        this.updateChildrenAppearance(this.appearance);
         const firstLevelElements = this.host.querySelectorAll(':scope > mds-tree-item');
-        if (firstLevelElements) {
+        if (firstLevelElements != null) {
             firstLevelElements.forEach((element) => {
                 element.depth = 0;
             });
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'ebef68448b4b4f0d2f1a560477649cbfa344ebd1' }, index.h("slot", { key: '470af7ca82cce1cacc7acb173f3f480f10cd1d0c', onSlotchange: this.updateElements })));
+        return (index.h(index.Host, { key: '5f12437a013f46e4ec19e8e5ecd246f07b2238f2' }, index.h("slot", { key: '0b8dbb5248df347958106a5ddb23b4c273e781d0', onSlotchange: this.updateElements })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -86,6 +109,15 @@ const MdsTree = class {
         "toggle": [{
                 "handleToggleChange": 0
             }],
+        "togglePosition": [{
+                "handleTogglePositionChange": 0
+            }],
+        "appearance": [{
+                "handleAppearanceChange": 0
+            }],
+        "actions": [{
+                "handleActionsChange": 0
+            }],
         "truncate": [{
                 "handleTruncateChange": 0
             }]

package/dist/cjs/mds-url-view.cjs.entry.js

@@ -4,6 +4,7 @@ var index = require('./index-CNuKb6Lv.js');
 var close$4 = require('./close-BS8N44H4.js');
 var keyboardManager = require('./keyboard-manager-BXKT5TGW.js');
 var locale = require('./locale-oGW3SvGJ.js');
+var preference = require('./preference-BdpIXWLP.js');
 
 var miBaselineExplore = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 10.9c-.61 0-1.1.49-1.1 1.1s.49 1.1 1.1 1.1c.61 0 1.1-.49 1.1-1.1s-.49-1.1-1.1-1.1zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm2.19 12.19L6 18l3.81-8.19L18 6l-3.81 8.19z"/></svg>`;
 
@@ -43,7 +44,7 @@ var localeIt = {
 	previewURL: previewURL
 };
 
-const mdsUrlViewCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-url-view-background:rgb(var(--tone-neutral-10,60 60 60));--mds-url-view-color:rgb(var(--tone-neutral-02,244 244 244));--mds-url-view-radius:var(--radius-md,12px);--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-icon,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-modal-custom-window-distance:0px;--mds-url-view-background:rgb(var(--tone-neutral-10,60 60 60));--mds-url-view-color:rgb(var(--tone-neutral-02,244 244 244));--mds-url-view-radius:var(--radius-md,12px);--mds-url-view-header-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-url-view-shadow:var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a);box-sizing:border-box;display:flex;flex-direction:column;height:100vh;margin:0;padding:calc(var(--spacing,.0025rem)*400)}.window{border-radius:var(--mds-url-view-radius,var(--radius-md,12px));-webkit-box-shadow:var(--mds-url-view-shadow);box-shadow:var(--mds-url-view-shadow);flex-direction:column;flex-grow:1;overflow:hidden;width:100%}.header,.window{--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:var(--mds-url-view-background,rgb(var(--tone-neutral-10,60 60 60)));display:flex;-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,box-shadow;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}.header{align-items:center;-webkit-box-shadow:var(--mds-url-view-header-shadow);box-shadow:var(--mds-url-view-header-shadow);color:var(--mds-url-view-color,rgb(var(--tone-neutral-02,244 244 244)));flex-shrink:0;gap:calc(var(--spacing,.0025rem)*200);justify-content:space-between;padding:calc(var(--spacing,.0025rem)*200);position:relative}.title{flex-grow:1;min-width:calc(var(--spacing,.0025rem)*0);overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.window-icon{flex-shrink:0}.button-close,.window-icon{fill:var(--mds-url-view-color,rgb(var(--tone-neutral-02,244 244 244)))}.button-close{cursor:pointer}.iframe{border:0;flex-grow:1;margin:0;padding:0;width:100%}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-animation-reduce) .window{transition-duration:0s}:host-context(:root.pref-animation-reduce) .header{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-url-view-shadow:var(--shadow-outline)}:host-context(:root.pref-contrast-more){--mds-url-view-shadow:var(--shadow-outline-50)}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))),:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .header,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .window{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-url-view-shadow:var(--shadow-outline)}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-url-view-shadow:var(--shadow-outline-50)}}`;
+const mdsUrlViewCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-url-view-background:rgb(var(--tone-neutral-10,60 60 60));--mds-url-view-color:rgb(var(--tone-neutral-02,244 244 244));--mds-url-view-radius:var(--radius-md,12px);--tw-ease:initial}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-icon,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-url-view-transition-duration:var(--duration-200,.2s);--private-url-view-transition-duration:var(--mds-url-view-transition-duration);--mds-modal-custom-window-distance:0px;--mds-url-view-background:rgb(var(--tone-neutral-10,60 60 60));--mds-url-view-color:rgb(var(--tone-neutral-02,244 244 244));--mds-url-view-radius:var(--radius-md,12px);--mds-url-view-header-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-url-view-shadow:var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a);box-sizing:border-box;display:flex;flex-direction:column;height:100vh;margin:0;padding:calc(var(--spacing,.0025rem)*400)}.window{border-radius:var(--mds-url-view-radius,var(--radius-md,12px));-webkit-box-shadow:var(--mds-url-view-shadow);box-shadow:var(--mds-url-view-shadow);flex-direction:column;flex-grow:1;overflow:hidden;width:100%}.header,.window{--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:var(--mds-url-view-background,rgb(var(--tone-neutral-10,60 60 60)));display:flex;-webkit-transition-duration:var(--private-url-view-transition-duration);transition-duration:var(--private-url-view-transition-duration);transition-property:background-color,box-shadow;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}.header{align-items:center;-webkit-box-shadow:var(--mds-url-view-header-shadow);box-shadow:var(--mds-url-view-header-shadow);color:var(--mds-url-view-color,rgb(var(--tone-neutral-02,244 244 244)));flex-shrink:0;gap:calc(var(--spacing,.0025rem)*200);justify-content:space-between;padding:calc(var(--spacing,.0025rem)*200);position:relative}.title{flex-grow:1;min-width:0;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.window-icon{flex-shrink:0}.button-close,.window-icon{fill:var(--mds-url-view-color,rgb(var(--tone-neutral-02,244 244 244)))}.button-close{cursor:pointer}.iframe{border:0;flex-grow:1;margin:0;padding:0;width:100%}:host([pref-animation=reduce]){--private-url-view-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-url-view-shadow:var(--shadow-outline)}:host([pref-contrast=more]){--mds-url-view-shadow:var(--shadow-outline-50)}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-url-view-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-url-view-shadow:var(--shadow-outline)}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-url-view-shadow:var(--shadow-outline-50)}}`;
 
 const MdsUrlView = class {
     constructor(hostRef) {
@@ -70,13 +71,27 @@ const MdsUrlView = class {
             this.closeEvent.emit();
             (_a = this.host.closest('mds-modal')) === null || _a === void 0 ? void 0 : _a.close();
         };
-        this.disconnectedCallback = () => {
-            this.km.detachClickBehavior();
-        };
     }
+    /**
+     * 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 = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
     componentWillLoad() {
         this.t.lang(this.host);
     }
@@ -86,9 +101,17 @@ const MdsUrlView = class {
         this.km.addElement(close);
         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 (index.h(index.Host, { key: 'db3646514778edd26539244016b06b39f6c0ab7f', "aria-label": this.t.get('previewURL', { url: this.urlDomain(this.src) }) }, index.h("div", { key: 'f747eb49ed04e2f0992091ecc927e5315806d2d7', class: "window" }, index.h("div", { key: '965b87ea11809a8e47f3a90a05520635a81753ab', class: "header" }, index.h("mds-icon", { key: '29e0996b81341d5d19dad1930b918a45b3e98dc0', class: "window-icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miBaselineExplore }), index.h("mds-text", { key: '554c30e335f9b982036f9de2adef429d78a6e4ba', class: "title", typography: "caption" }, (_b = this.label) !== null && _b !== void 0 ? _b : this.urlDomain(this.src)), index.h("mds-button", { key: 'ce209ba666d12b97734211f1f8431b168e72d2c6', title: this.t.get('close'), class: "action-close", variant: "dark", tone: "text", icon: close$4.miBaselineClose, onClick: this.closeUrlView })), index.h("iframe", { key: '29cd963366d5407e922f79c9a5afc83183b93715', class: "iframe", "aria-label": this.t.get('iframeURL', { url: this.urlDomain(this.src) }), src: this.src, loading: this.loading }))));
+        return (index.h(index.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 }, index.h("div", { key: '2205b5e3d0810ba101e3ba78e690f94ae156b042', class: "window" }, index.h("div", { key: 'cced352e1926c26eb05f122d8df152f19a695a78', class: "header" }, index.h("mds-icon", { key: '8b386b0a164a176f3a65dd8f0ae9b639efcfbe51', class: "window-icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miBaselineExplore }), index.h("mds-text", { key: '14b2574e7a3e28620a7fb098644e3cd1abb66208', class: "title", typography: "caption" }, (_b = this.label) !== null && _b !== void 0 ? _b : this.urlDomain(this.src)), index.h("mds-button", { key: 'eceac0ff4d497eaf88c675605b833fd3a7eac9f7', title: this.t.get('close'), class: "action-close", variant: "dark", tone: "text", icon: close$4.miBaselineClose, onClick: this.closeUrlView })), index.h("iframe", { key: 'a18133eb09c2ef5bf7b7ecdaabef6f3e00b91a8b', class: "iframe", "aria-label": this.t.get('iframeURL', { url: this.urlDomain(this.src) }), src: this.src, loading: this.loading }))));
     }
     get host() { return index.getElement(this); }
 };