npm - @maggioli-design-system/magma - Versions diffs - 2.0.0-beta.2 → 2.0.0-beta.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1150) hide show

package/dist/collection/components/mds-tooltip/mds-tooltip.css CHANGED Viewed

@@ -91,28 +91,28 @@ mds-text {
   --mds-tooltip-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04))
     drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)) drop-shadow(0 0 1px rgb(0 0 0 / 0.1));
   --mds-tooltip-duration: 0.5s;
+  --private-tooltip-duration: var(--mds-tooltip-duration, 0.5s);
   --mds-tooltip-ease: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
   --mds-tooltip-dot-padding: --spacing(100);
   --mds-tooltip-transform-from: scale(0.9) translateY(calc(--spacing(400) * -1));
   --mds-tooltip-transform-to: scale(1) translate(0, 0);
   --mds-tooltip-z-index: var(--magma-tooltip-z-index, 4000);
-  @apply gap-400
-    px-200
-    py-100
-    rounded;
   background-color: var(--mds-tooltip-background, rgb(var(--tone-neutral, 0 0 0)));
+  border-radius: 0.25rem;
   box-sizing: border-box;
   display: grid;
   filter: var(--mds-tooltip-drop-shadow);
+  gap: --spacing(400);
   max-width: --spacing(6400);
   opacity: 0;
+  padding-block: --spacing(100);
+  padding-inline: --spacing(200);
   pointer-events: none;
   position: fixed;
   transform: var(--mds-tooltip-transform-from, scale(0.9) translateY(-3%));
   transition-delay: 0s;
-  transition-duration: var(--mds-tooltip-duration, 0.5s);
+  transition-duration: var(--private-tooltip-duration);
   transition-property: opacity, transform, transform-origin;
   transition-timing-function: var(--mds-tooltip-ease);
   width: fit-content;
@@ -140,36 +140,48 @@ mds-text {
 }
 .arrow {
-  @apply duration-300
-    ease-in-out;
+  @apply ease-in-out;
   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: var(--duration-300, 300ms);
   transition-property: fill;
   z-index: -1;
 }
 ::slotted(*) {
-  @apply z-10;
   position: relative;
+  z-index: 10;
 }
-:host-context(:root.pref-animation-reduce) {
-  --mds-tooltip-duration: 0s;
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
+:host([pref-animation='reduce']) {
+  --private-tooltip-duration: 0s;
 }
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    --mds-tooltip-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-tooltip-duration: 0s;
   }
 }
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) {
+/* Theme preference. The component reflects the resolved theme mode and scheme
+ * from <html> onto its host as pref-theme + pref-theme-scheme (see
+ * subscribePreference in @common/preference); these plain shadow selectors refine
+ * for dark. `dark` is the explicit choice; `system` and no controller follow the
+ * OS via @media; the scheme axis gates it. Cross-browser, no :host-context. */
+:host([pref-theme='dark']:not([pref-theme-scheme='light'])) {
   --mds-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) / 0.05))
     drop-shadow(0 0 2px rgb(var(--tone-neutral-01, 255 255 255) / 0.3))
@@ -177,8 +189,8 @@ mds-text {
 }
 @media (prefers-color-scheme: dark) {
-  :host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-theme='system']:not([pref-theme-scheme='light'])),
+  :host(:not([pref-theme])) {
     --mds-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) / 0.05))
       drop-shadow(0 0 2px rgb(var(--tone-neutral-01, 255 255 255) / 0.3))
@@ -186,15 +198,20 @@ mds-text {
   }
 }
-:host-context(:root.pref-contrast-more) {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+:host([pref-contrast='more']) {
   --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01, 255 255 255) / 0.05))
     drop-shadow(0 0 4px rgb(var(--tone-neutral-01, 255 255 255) / 0.3))
     drop-shadow(0 0 4px rgb(var(--tone-neutral-01, 255 255 255) / 0.3));
 }
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     --mds-tooltip-drop-shadow: drop-shadow(0 0 4px rgb(var(--tone-neutral-01, 255 255 255) / 0.05))
       drop-shadow(0 0 4px rgb(var(--tone-neutral-01, 255 255 255) / 0.3))
       drop-shadow(0 0 4px rgb(var(--tone-neutral-01, 255 255 255) / 0.3));

package/dist/collection/components/mds-tooltip/mds-tooltip.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import arrowSvg from "./assets/arrow.svg";
 import { FloatingController } from "../../common/floating-controller";
+import { subscribePreference } from "../../common/preference";
 /**
  * @slot - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  */
@@ -9,15 +10,15 @@ export class MdsTooltip {
         /**
          * @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.
          */
@@ -35,9 +36,9 @@ export class MdsTooltip {
          */
         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.
          */
@@ -54,10 +55,10 @@ export class MdsTooltip {
             this.visible = visibility;
         };
     }
-    arrowChanged() {
+    hideArrowChanged() {
         this.floatingController.updatePosition();
     }
-    autoPlacementChanged() {
+    disableAutoPlacementChanged() {
         this.floatingController.updatePosition();
     }
     flipChanged() {
@@ -69,7 +70,7 @@ export class MdsTooltip {
     placementChanged() {
         this.floatingController.updatePosition();
     }
-    shiftChanged() {
+    disableShiftChanged() {
         this.floatingController.updatePosition();
     }
     shiftPaddingChanged() {
@@ -94,6 +95,20 @@ export class MdsTooltip {
         this.caller.addEventListener('mouseleave', this.handleVisibility.bind(this, false));
         this.caller.addEventListener('mouseenter', this.handleVisibility.bind(this, true));
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
     componentDidLoad() {
         var _a;
         const arrow = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.arrow');
@@ -101,10 +116,15 @@ export class MdsTooltip {
         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 (h(Host, { key: '3e87a5065fb0785a6c108b47b0508a20b2fcf3d0' }, h("div", { key: '224497f15c7616211c3d7a5eede797bb31f1f022', class: "arrow", innerHTML: arrowSvg }), h("mds-text", { key: '711e915a632bfcacb16dc1a598d6d817520de363', class: "text", typography: this.typography, part: "text" }, h("slot", { key: 'efad82b8107bf54e566a9c631b536219ba264462' }))));
+        return (h(Host, { key: 'd71141bf2839b6ab6fef43754887ea0a0098d709', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: 'd7a256833a2102a5eb58bcf9b51c445a1a969000', class: "arrow", innerHTML: arrowSvg }), h("mds-text", { key: '19a0295a047e2a48ddbf52636fb81f6304891e43', class: "text", typography: this.typography, part: "text" }, h("slot", { key: '82bfa0ae911e8633ed3295b4f57d348ca357009e' }))));
     }
     static get is() { return "mds-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -120,7 +140,7 @@ export class MdsTooltip {
     }
     static get properties() {
         return {
-            "arrow": {
+            "hideArrow": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -140,8 +160,8 @@ export class MdsTooltip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "arrow",
-                "defaultValue": "true"
+                "attribute": "hide-arrow",
+                "defaultValue": "false"
             },
             "arrowPadding": {
                 "type": "number",
@@ -166,7 +186,7 @@ export class MdsTooltip {
                 "attribute": "arrow-padding",
                 "defaultValue": "4"
             },
-            "autoPlacement": {
+            "disableAutoPlacement": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -178,13 +198,13 @@ export class MdsTooltip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If set, the component will be placed automatically near it's caller."
+                    "text": "If set, the component will not be placed automatically near it's caller."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "auto-placement",
-                "defaultValue": "true"
+                "attribute": "disable-auto-placement",
+                "defaultValue": "false"
             },
             "flip": {
                 "type": "boolean",
@@ -299,7 +319,7 @@ export class MdsTooltip {
                 "attribute": "typography",
                 "defaultValue": "'tip'"
             },
-            "shift": {
+            "disableShift": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -311,13 +331,13 @@ export class MdsTooltip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If set, the component will be kept inside the viewport."
+                    "text": "If set, the component will not be kept inside the viewport."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "shift",
-                "defaultValue": "true"
+                "attribute": "disable-shift",
+                "defaultValue": "false"
             },
             "shiftPadding": {
                 "type": "number",
@@ -388,14 +408,22 @@ export class MdsTooltip {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "arrow",
-                "methodName": "arrowChanged"
+                "propName": "hideArrow",
+                "methodName": "hideArrowChanged"
             }, {
-                "propName": "autoPlacement",
-                "methodName": "autoPlacementChanged"
+                "propName": "disableAutoPlacement",
+                "methodName": "disableAutoPlacementChanged"
             }, {
                 "propName": "flip",
                 "methodName": "flipChanged"
@@ -406,8 +434,8 @@ export class MdsTooltip {
                 "propName": "placement",
                 "methodName": "placementChanged"
             }, {
-                "propName": "shift",
-                "methodName": "shiftChanged"
+                "propName": "disableShift",
+                "methodName": "disableShiftChanged"
             }, {
                 "propName": "shiftPadding",
                 "methodName": "shiftPaddingChanged"

package/dist/collection/components/mds-tooltip/test/mds-tooltip.stories.js CHANGED Viewed

@@ -16,13 +16,13 @@ import { typographyTooltipDictionary } from "../../../type/typography";
 export default {
     title: 'UI / Tooltip',
     argTypes: {
-        arrow: {
+        'hide-arrow': {
             type: { name: 'boolean' },
-            description: 'If set, the component will have an arrow pointing to the caller',
+            description: 'If set, the component will not have an arrow pointing to the caller',
         },
-        'auto-placement': {
+        'disable-auto-placement': {
             type: { name: 'boolean' },
-            description: 'If set, the component will be placed automatically near it’s caller',
+            description: 'If set, the component will not be placed automatically near it’s caller',
         },
         delay: {
             type: { name: 'number' },
@@ -47,9 +47,9 @@ export default {
             options: typographyTooltipDictionary,
             control: { type: 'select' },
         },
-        shift: {
+        'disable-shift': {
             type: { name: 'boolean' },
-            description: 'If set, the component will be kept inside the viewport',
+            description: 'If set, the component will not be kept inside the viewport',
         },
         'shift-padding': {
             type: { name: 'number' },
@@ -91,7 +91,7 @@ export const CustomContents = {
 export const Arrow = {
     render: Template,
     args: {
-        arrow: true,
+        'hide-arrow': false,
         'shift-padding': 32,
         layout: 'flex justify-start',
     },
@@ -99,7 +99,7 @@ export const Arrow = {
 export const AutoPlacement = {
     render: Template,
     args: {
-        'auto-placement': true,
+        'disable-auto-placement': false,
         layout: 'flex justify-end',
     },
 };
@@ -120,7 +120,7 @@ export const Offset = {
 export const Placement = {
     render: Template,
     args: {
-        'auto-placement': false,
+        'disable-auto-placement': true,
         layout: 'flex justify-center items-center',
         placement: 'right-start',
     },
@@ -129,14 +129,14 @@ export const Shift = {
     render: Template,
     args: {
         layout: 'flex justify-end',
-        shift: true,
+        'disable-shift': false,
     },
 };
 export const ShiftPadding = {
     render: Template,
     args: {
         layout: 'flex justify-end',
-        shift: true,
+        'disable-shift': false,
         'shift-padding': 50,
     },
 };

package/dist/collection/components/mds-tree/mds-tree.css CHANGED Viewed

@@ -280,11 +280,11 @@ mds-tree-item {
   /* private */
   --mds-tree-toggle-size: --spacing(900);
-  @apply duration-200
-    ease-out;
+  @apply ease-out;
   border-radius: --spacing(250);
   display: grid;
   padding: --spacing(50);
+  transition-duration: var(--duration-200, 200ms);
   transition-property: background-color;
 }

package/dist/collection/components/mds-tree/mds-tree.js CHANGED Viewed

@@ -36,6 +36,16 @@ export class MdsTree {
                 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;
@@ -58,6 +68,17 @@ export class MdsTree {
     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);
     }
@@ -65,6 +86,8 @@ export class MdsTree {
         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 != null) {
             firstLevelElements.forEach((element) => {
@@ -73,7 +96,7 @@ export class MdsTree {
         }
     }
     render() {
-        return (h(Host, { key: '8eea9807bbf709cb9c13900003312a3364b2b0ad' }, h("slot", { key: 'f2ad520332f4d634ddcdf9a5c035d1145635d856', onSlotchange: this.updateElements })));
+        return (h(Host, { key: '5f12437a013f46e4ec19e8e5ecd246f07b2238f2' }, h("slot", { key: '0b8dbb5248df347958106a5ddb23b4c273e781d0', onSlotchange: this.updateElements })));
     }
     static get is() { return "mds-tree"; }
     static get encapsulation() { return "shadow"; }
@@ -291,6 +314,15 @@ export class MdsTree {
             }, {
                 "propName": "toggle",
                 "methodName": "handleToggleChange"
+            }, {
+                "propName": "togglePosition",
+                "methodName": "handleTogglePositionChange"
+            }, {
+                "propName": "appearance",
+                "methodName": "handleAppearanceChange"
+            }, {
+                "propName": "actions",
+                "methodName": "handleActionsChange"
             }, {
                 "propName": "truncate",
                 "methodName": "handleTruncateChange"