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

package/dist/collection/components/mds-push-notification/mds-push-notification.js

@@ -1,10 +1,9 @@
 import { Host, h, } from "@stencil/core";
 import { cssDurationToMilliseconds, cssSizeToNumber } from "../../common/unit";
+import { subscribePreference } from "../../common/preference";
 /**
  * @part notifications - The container wrapper of the notifications.
- * @slot top - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
- * @slot bottom - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
- * @slot default - Add `HTML elements` or `components`, it is **recommended** to use `mds-push-notification` element.
+ * @slot - Add `HTML elements` or `components`, it is **recommended** to use `mds-push-notification` element.
  */
 export class MdsPushNotification {
     constructor() {
@@ -79,7 +78,7 @@ export class MdsPushNotification {
             const elements = this.slotNotifications
                 .assignedElements()
                 .map((e) => e)
-                .filter((e) => !e.style.visibility);
+                .filter((e) => e.style.visibility === '');
             if (elements.length === 0)
                 return;
             elements.forEach(async (e) => {
@@ -99,19 +98,29 @@ export class MdsPushNotification {
             this.cssItemsOutroDuration =
                 (_c = elementStyles.getPropertyValue('--mds-push-notification-items-outro-delay')) !== null && _c !== void 0 ? _c : '0ms';
         };
+        this.clear = () => {
+            this.slotNotifications.assignedElements().forEach((e) => this.outroItem(e));
+            this.hide();
+        };
     }
-    clear() {
-        this.slotNotifications.assignedElements().forEach((e) => this.outroItem(e));
-        this.hide();
-    }
+    /**
+     * Shows the notification container.
+     */
     show() {
         this.visible = true;
         return Promise.resolve();
     }
+    /**
+     * Hides the notification container.
+     */
     hide() {
         this.visible = undefined;
         return Promise.resolve();
     }
+    /**
+     * Removes the given notification item(s) from the stack.
+     * @param notification the notification item or items to remove
+     */
     removeNotification(notification) {
         if (Array.isArray(notification)) {
             notification.forEach(this.outroItem);
@@ -121,6 +130,19 @@ export class MdsPushNotification {
         }
         return Promise.resolve();
     }
+    connectedCallback() {
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.unsubscribePrefTheme) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefThemeScheme) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
     componentDidLoad() {
         this.updateCSSCustomProps();
         this.slotNotifications.addEventListener('slotchange', this.handleSlotChange);
@@ -140,7 +162,7 @@ export class MdsPushNotification {
         this.visible = undefined;
     }
     render() {
-        return (h(Host, { key: '018cec5fec78b7abed252a3acc8a13352f534306' }, h("mds-button", { key: 'c96d02897f1fed58ae9d6252d9e53f8023d2c14a', variant: "dark", onClick: this.clear.bind(this) }, "Cancella notifiche"), h("div", { key: 'aabdf019411f23c91a3352ab9bc1a9c8aa02df9e', class: "notifications", part: "notifications" }, h("slot", { key: '52e483e93b453f8f860eaba64f4a2223a2eceb38', ref: (el) => (this.slotNotifications = el) }))));
+        return (h(Host, { key: '14c13d8af66f6c90da99f9f858d8696a796d01a7', "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("mds-button", { key: '61d7ab9ae3a1d0df6dd091f211b86aa7a8afb0c0', variant: "dark", onClick: this.clear }, "Cancella notifiche"), h("div", { key: '614552ee81de3151c82622a0cf209e8e93afb314', class: "notifications", part: "notifications" }, h("slot", { key: 'bd60fe0bbcc81ff17c30681f27452a5d5aca067e', ref: (el) => (this.slotNotifications = el) }))));
     }
     static get is() { return "mds-push-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -197,6 +219,12 @@ export class MdsPushNotification {
             }
         };
     }
+    static get states() {
+        return {
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "changedEvent",
@@ -267,7 +295,7 @@ export class MdsPushNotification {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Shows the notification container.",
                     "tags": []
                 }
             },
@@ -284,7 +312,7 @@ export class MdsPushNotification {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Hides the notification container.",
                     "tags": []
                 }
             },
@@ -294,7 +322,7 @@ export class MdsPushNotification {
                     "parameters": [{
                             "name": "notification",
                             "type": "HTMLMdsPushNotificationItemElement | HTMLMdsPushNotificationItemElement[]",
-                            "docs": ""
+                            "docs": "the notification item or items to remove"
                         }],
                     "references": {
                         "Promise": {
@@ -309,8 +337,11 @@ export class MdsPushNotification {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Removes the given notification item(s) from the stack.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "notification the notification item or items to remove"
+                        }]
                 }
             }
         };

package/dist/collection/components/mds-push-notification-item/mds-push-notification-item.css

@@ -69,6 +69,7 @@ mds-text {
 
 :host {
   --mds-push-notification-item-duration: 300ms;
+  --private-push-notification-item-duration: var(--mds-push-notification-item-duration, 300ms);
   --mds-push-notification-item-icon-background-color: transparent;
   --mds-push-notification-item-icon-color: rgb(var(--tone-neutral-04, 218 218 218));
   --mds-push-notification-item-message-line-clamp: 2;
@@ -76,25 +77,24 @@ mds-text {
   --mds-push-notification-item-subject-line-clamp: 1;
   --mds-push-notification-item-timing-function: var(--ease-in-out-quint, cubic-bezier(0.86, 0, 0.07, 1));
 
-  @apply gap-400
-  max-w-8000
-  min-w-7200
-  p-400
-  rounded-lg;
-
   align-items: flex-start;
   background-color: rgb(var(--tone-neutral, 0 0 0));
+  border-radius: var(--radius-lg, 16px);
   box-shadow: var(--mds-push-notification-item-shadow);
   color: rgb(var(--tone-neutral-02, 244 244 244));
   display: flex;
+  gap: --spacing(400);
+  max-width: --spacing(8000);
+  min-width: --spacing(7200);
+  padding: --spacing(400);
   pointer-events: auto;
   position: relative;
-  transition-duration: var(--mds-push-notification-item-duration, 300ms);
+  transition-duration: var(--private-push-notification-item-duration);
   transition-property: background-color, box-shadow, color, margin, transform;
   transition-timing-function: var(--mds-push-notification-item-timing-function);
 }
 
-:host([deletable]) {
+:host([deletable]:not([deletable='false'])) {
   @apply pr-800;
 }
 
@@ -104,12 +104,11 @@ mds-text {
 }
 
 .actions {
-  @apply gap-200
-  pt-200;
-
   display: flex;
   flex-wrap: wrap;
+  gap: --spacing(200);
   min-width: 1px;
+  padding-top: --spacing(200);
 }
 
 .avatar,
@@ -118,24 +117,23 @@ mds-text {
 }
 
 .picture {
-  @apply max-w-1200
-  rounded;
-
+  border-radius: 0.25rem;
   box-shadow: var(--shadow-sm-sharp, 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1));
+  max-width: --spacing(1200);
   width: 100%;
 }
 
 .close-button {
-  @apply p-150
-  transition-cosmetic;
+  @apply transition-cosmetic;
 
   opacity: 0;
+  padding: --spacing(150);
   position: absolute;
   right: 0;
   top: 0;
 }
 
-:host-context(:not(.safari)):host(:hover) .close-button {
+:host(:hover) .close-button {
   opacity: 1;
 }
 
@@ -146,10 +144,9 @@ mds-text {
 }
 
 .header {
-  @apply gap-100;
-
   align-items: baseline;
   display: flex;
+  gap: --spacing(100);
   justify-content: space-between;
   min-width: 0;
   overflow: hidden;
@@ -162,9 +159,8 @@ mds-text {
 }
 
 .time {
-  @apply mr-100;
-
   flex-shrink: 0;
+  margin-right: --spacing(100);
   white-space: nowrap;
 }
 
@@ -182,16 +178,15 @@ mds-text {
 }
 
 .avatar {
-  @apply h-900
-  w-900;
-
   background-color: var(--mds-push-notification-item-icon-background-color, transparent);
   border-radius: 1000px;
   fill: var(--mds-push-notification-item-icon-color, rgb(var(--tone-neutral-04, 218 218 218)));
+  height: --spacing(900);
+  width: --spacing(900);
 }
 
 .avatar::part(svg) {
-  @apply w-600;
+  width: --spacing(600);
 }
 
 :host([src]) .avatar {
@@ -199,44 +194,62 @@ mds-text {
 }
 
 :host([icon]) .avatar::part(wrapper) {
-  @apply p-150;
+  padding: --spacing(150);
 }
 
-:host-context(:root.pref-animation-reduce) {
-  transition-duration: 0s;
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
+
+:host([pref-animation='reduce']) {
+  --private-push-notification-item-duration: 0s;
 }
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-push-notification-item-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-push-notifications-shadow: var(--shadow-outline) inset;
 
   background-color: rgb(var(--tone-neutral-09, 76 76 76));
 }
 
 @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-push-notifications-shadow: var(--shadow-outline) inset;
 
     background-color: rgb(var(--tone-neutral-09, 76 76 76));
   }
 }
 
-: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-push-notification-item-shadow: var(--shadow-outline-strong-50) inset;
 
   color: rgb(var(--tone-neutral-01, 255 255 255));
 }
 
 @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-push-notification-item-shadow: var(--shadow-outline-strong-50) inset;
 
     color: rgb(var(--tone-neutral-01, 255 255 255));

package/dist/collection/components/mds-push-notification-item/mds-push-notification-item.js

@@ -8,7 +8,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import { Host, h, } from "@stencil/core";
 import { Locale } from "../../common/locale";
 import { sanitizeISO8601Date } from "../../common/date";
-dayjs.extend(relativeTime);
+import { subscribePreference } from "../../common/preference";
 /**
  * @part actions - The actions wrapper
  * @part content - The content wrapper of the message
@@ -30,9 +30,9 @@ export class MdsPushNotificationItem {
          */
         this.dateFormat = 'timeago';
         /**
-         * Specifies if the component is dismissable or not, it should be set to true by default is used with it's parent component `mds-push-notification-items`
+         * Specifies if the component is dismissable; when set, a dismiss button is shown.
          */
-        this.deletable = true;
+        this.deletable = false;
         /**
          * Specifies the message of the component
          */
@@ -50,17 +50,42 @@ export class MdsPushNotificationItem {
             this.closedEvent.emit();
         };
     }
+    /**
+     * 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 = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     componentDidLoad() {
         this.handleDeletableChange(this.deletable);
     }
     componentWillLoad() {
         var _a;
+        dayjs.extend(relativeTime);
         this.hasActions = this.host.querySelector(':scope > [slot="action"]') !== null;
         this.hasBadge = this.host.querySelector(':scope > [slot="badge"]') !== null;
-        if (this.datetime) {
+        if (this.datetime !== undefined && this.datetime !== '') {
             this.datetime = sanitizeISO8601Date((_a = this.datetime) === null || _a === void 0 ? void 0 : _a.toString());
         }
         this.t.lang(this.host);
@@ -88,9 +113,9 @@ export class MdsPushNotificationItem {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'cef1482e9e16dcc52b6fc255c7392f575f0c1772' }, ((_a = this.icon) !== null && _a !== void 0 ? _a : this.preview === 'avatar') && (h("mds-avatar", { key: '0bfdb9ecf0fa36599c981aa778a02f73d0b80a32', class: "avatar", icon: this.icon, initials: this.initials, part: "avatar", src: this.src, tone: this.tone, variant: this.variant })), this.src && this.preview !== 'avatar' && (h("mds-img", { key: '719fe7dae8dc94021f0efd96c50b86b614572aca', class: "picture", part: "picture", src: this.src })), h("div", { key: 'a5ead1ed262e19ed60a37f23cce81a29889daedb', class: "content", part: "content" }, h("div", { key: 'a747e13b1fcb292b193db53ebf2c6174eac99fd9', class: "header" }, h("div", { key: '4a402d86378e9b5269dc4ffbbc25a1b0b54be36d', class: "infos" }, this.hasBadge && (h("div", { key: '40eb647711cb32839e9ee5cec391c800b5a8d983' }, h("slot", { key: 'f73ddcfd20ebb75f62a0ff3b7dfe5dfa0a9477a4', name: "badge" }))), this.subject && (h("mds-text", { key: 'aab0df869115c44eecc4d5fa180210392c72e1e1', class: "subject", typography: "h6", variant: "title", truncate: "all" }, this.subject))), this.datetime && (h("mds-text", { key: 'e93ee1684aeb8a4df9203a9b416df5181bc2342f', class: "time", typography: "option" }, this.dateFormat === 'timeago'
+        return (h(Host, { key: 'f88bb513bce95850a6047ac54f4dcfa63978363e', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, ((_a = this.icon) !== null && _a !== void 0 ? _a : this.preview === 'avatar') && (h("mds-avatar", { key: 'f8cad6d2fae73aff043e52fef79075abede6df96', class: "avatar", icon: this.icon, initials: this.initials, part: "avatar", src: this.src, tone: this.tone, variant: this.variant })), this.src && this.preview !== 'avatar' && (h("mds-img", { key: '72f96d01bc55784f8c2c35e62da263e62d32a00b', class: "picture", part: "picture", src: this.src })), h("div", { key: 'fb71c722dec7dd0216b415c1469cd4af03be5d4e', class: "content", part: "content" }, h("div", { key: '6f6b128e2c72fa831a5603f05d3cb6141fdaec89', class: "header" }, h("div", { key: '8381e70ddf528dda33765863ed8e6c67af6afaab', class: "infos" }, this.hasBadge && (h("div", { key: '21882a488827403f500705436c23e4795aeea948' }, h("slot", { key: '262d5394fae6e68f5556f561ecff8582e34b6b9d', name: "badge" }))), this.subject && (h("mds-text", { key: '730388a07d901d1e742fb528db3e1bd2963fbd19', class: "subject", typography: "h6", variant: "title", truncate: "all" }, this.subject))), this.datetime && (h("mds-text", { key: '96cb3254f601083ce3f96b9d5fd635e9e92fc857', class: "time", typography: "option" }, this.dateFormat === 'timeago'
             ? dayjs(this.datetime).fromNow()
-            : dayjs(this.datetime).format(this.dateFormat)))), h("mds-text", { key: '4554d9ae482fefec3899d740d74227657d612fd5', class: "message", truncate: "all", typography: "caption", variant: "info" }, this.message), this.hasActions && (h("div", { key: 'ddc27141fb944f8ecf6c1e72082c9fc2428edb4e', class: "actions", part: "actions" }, h("slot", { key: '315db21f5d2f6e3f43849c64de4407422dfafed2', name: "action" })))), this.deletable && (h("mds-button", { key: '25190761bcc0b1afb4ae807bc6e880edd98d7dcc', class: "close-button", variant: "dark", tone: "text", title: this.t.get('dismiss'), icon: miBaselineCancel, onClick: this.onClickClose.bind(this) }))));
+            : dayjs(this.datetime).format(this.dateFormat)))), h("mds-text", { key: 'd4fa3358afbde90b5416a08cbf117fbd256eb8c5', class: "message", truncate: "all", typography: "caption", variant: "info" }, this.message), this.hasActions && (h("div", { key: '83b296d9cdadfe0a9e483f2d48b4b35ea3d40338', class: "actions", part: "actions" }, h("slot", { key: '91e29832a0de8bad5f5c37528dc2c1e3e09eeebf', name: "action" })))), this.deletable && (h("mds-button", { key: 'e4f30edac40e73e6ea41d9d48391b9d9d077f118', class: "close-button", variant: "dark", tone: "text", title: this.t.get('dismiss'), icon: miBaselineCancel, onClick: this.onClickClose }))));
     }
     static get is() { return "mds-push-notification-item"; }
     static get encapsulation() { return "shadow"; }
@@ -164,13 +189,13 @@ export class MdsPushNotificationItem {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies if the component is dismissable or not, it should be set to true by default is used with it's parent component `mds-push-notification-items`"
+                    "text": "Specifies if the component is dismissable; when set, a dismiss button is shown."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "deletable",
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
@@ -352,6 +377,10 @@ export class MdsPushNotificationItem {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {}
         };
     }
@@ -395,7 +424,7 @@ export class MdsPushNotificationItem {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

package/dist/collection/components/mds-push-notification-item/test/mds-push-notification-item.stories.js

@@ -25,7 +25,7 @@ export default {
         },
         deletable: {
             type: { name: 'boolean' },
-            description: "Specifies if the component is dismissable or not, it should be set to true by default is used with it's parent component `mds-push-notification-items`",
+            description: 'Specifies if the component is dismissable; when set, a dismiss button is shown.',
         },
         icon: {
             type: { name: 'string' },
@@ -90,7 +90,7 @@ export const Deletable = {
         icon: 'mi/baseline/email',
         message: 'You have 3 new messages from different accounts',
         subject: 'New messages',
-        deletable: false,
+        deletable: true,
     },
 };
 export const Thumb = {

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

@@ -19,9 +19,8 @@ mds-text {
 }
 
 .quote {
-  @apply gap-400;
-
   display: grid;
+  gap: --spacing(400);
   user-select: all;
 }
 
@@ -29,13 +28,18 @@ span {
   user-select: none;
 }
 
-: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']) {
   color: rgb(var(--tone-neutral-01, 255 255 255));
 }
 
 @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])) {
     color: rgb(var(--tone-neutral-01, 255 255 255));
   }
 }

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  * @slot author - Add `text string`, `HTML elements` or `components` to this slot.
  */
 export class MdsQuote {
@@ -14,8 +15,17 @@ export class MdsQuote {
          */
         this.tag = 'h3';
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefContrast) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     render() {
-        return (h(Host, { key: '26db9230c187400e8df30d1c9300e0a39b4a709f' }, h("mds-text", { key: '4a1227b9e6e66376831c457746e26ec0d47b3144', class: "open-quote", tag: "div", typography: this.typography }, h("span", { key: '9d6f5ae659999f27d8de5b8e92ee13bdff75244b' }, h("i", { key: '89a139df5d605e4695f67a995174a2fbe3ca263b' }, "\u275D\u00A0"))), h("div", { key: '73d10c6274ac92bf79f1acdad40c4e7144738b4f', class: "quote" }, h("mds-text", { key: '8e6d76eec0ed6ca49b1ce01bdf5448b14c84fc1a', tag: this.tag, typography: this.typography }, h("i", { key: 'b7f817a0eda2745607a9c84d77d1059763f3d5e3' }, h("slot", { key: '1617cb4cd4ed8dc8608447c49e8872677bf69367' }), h("span", { key: '2d9982646e27a1f642d3c62bc4007caab348012e' }, "\u00A0\u275E"))), h("slot", { key: '4283ff3a9b4a31cb1e98e88e3ead9aa7e27fedb3', name: "author" }))));
+        return (h(Host, { key: 'd4732bfc13bec29539203b1bbf2f475c2124161a', "pref-contrast": this.prefContrast }, h("mds-text", { key: 'bfe617d81d506022e982b8a97f1b88e99e06bb54', class: "open-quote", tag: "div", typography: this.typography }, h("span", { key: 'd42dd7538c075ef913397f3a58b0e327cf34d005' }, h("i", { key: '4a1a90c5bf4d36c8f5e93153964688e9858faa4a' }, "\u275D\u00A0"))), h("div", { key: '84b991190ae992b3f486821100731276386d1379', class: "quote" }, h("mds-text", { key: '91bbfd150358dd889e391483d2a2ba1fc4f0f0d6', tag: this.tag, typography: this.typography }, h("i", { key: '18150d9cc0da1116079fd76efe2291ef45247089' }, h("slot", { key: '1861ee78891e58fa60c781afdc4eca8e17db0074' }), h("span", { key: '96f6ed87102e3839e258b51b1341df409056d669' }, "\u00A0\u275E"))), h("slot", { key: 'f4d6dbbe5cc07ce987fd5c35dd6f3a88e75168cd', name: "author" }))));
     }
     static get is() { return "mds-quote"; }
     static get encapsulation() { return "shadow"; }
@@ -87,4 +97,9 @@ export class MdsQuote {
             }
         };
     }
+    static get states() {
+        return {
+            "prefContrast": {}
+        };
+    }
 }

package/dist/collection/components/mds-radial-menu/mds-radial-menu.js

@@ -3,6 +3,9 @@ import miBaselineMoreVert from "@icon/mi/baseline/more-vert.svg";
 import miBaselineClose from "@icon/mi/baseline/close.svg";
 import clsx from "clsx";
 import { Backdrop } from "../../common/floating-controller";
+/**
+ * @slot item - Add `mds-radial-menu-item` elements or `components` to this slot.
+ */
 export class MdsRadialMenu {
     constructor() {
         this.backdropController = new Backdrop('mds-radial-menu-backdrop');
@@ -111,7 +114,7 @@ export class MdsRadialMenu {
         this.onInteractionChange(this.interaction);
     }
     disconnectedCallback() {
-        if (!document)
+        if (typeof document === 'undefined')
             return;
         document.removeEventListener('contextmenu', this.toggleRightClickMenu);
     }
@@ -127,7 +130,7 @@ export class MdsRadialMenu {
         this.handleBackdrop();
     }
     onInteractionChange(newValue) {
-        if (!document)
+        if (typeof document === 'undefined')
             return;
         if (newValue === 'rightclick') {
             document.addEventListener('contextmenu', this.toggleRightClickMenu);
@@ -158,7 +161,7 @@ export class MdsRadialMenu {
         this.handleBackdrop();
     }
     render() {
-        return (h(Host, { key: '18679022a9759985a3c518df2d733b94d28473dc' }, h("mds-button", { key: '156f0692417d19bc2f9418469d1b011ea5f0f72f', class: clsx('menu-button', this.interaction !== 'click' && 'menu-button--hidden'), icon: this.opened ? miBaselineClose : this.icon, tone: this.tone, variant: this.variant, size: this.size, onClick: this.toggleMenu }), h("div", { key: '4277fb28c411a3ec3808d46e260e0800fc92eebb', class: "radial-menu", part: "radial-menu" }, h("slot", { key: 'ff21f4e1110c14954128ec0e891507ff178fa548', name: "item", onSlotchange: this.updateItems })), h("div", { key: 'e5dc3a9fbd3f813721bfdefbbf445fb4b4301995', class: "disc" })));
+        return (h(Host, { key: '6f7cf327cfc3a90b1ce80e9e9aab86f6423cbf41' }, h("mds-button", { key: '545b32a7fe48707ceb0eec5adb799a776421a053', class: clsx('menu-button', this.interaction !== 'click' && 'menu-button--hidden'), icon: this.opened ? miBaselineClose : this.icon, tone: this.tone, variant: this.variant, size: this.size, onClick: this.toggleMenu }), h("div", { key: '76acb7ae11c61f5f216c1870f61eb5cd50b1848b', class: "radial-menu", part: "radial-menu" }, h("slot", { key: '1f0a16e3505609ec32450384c40f35ec439c58ed', name: "item", onSlotchange: this.updateItems })), h("div", { key: 'cd886be843d69836088046472a720ceaac4b7676', class: "disc" })));
     }
     static get is() { return "mds-radial-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-radial-menu-item/mds-radial-menu-item.js

@@ -9,10 +9,13 @@ export class MdsRadialMenuItem {
          * Specifies the color variant for the button
          */
         this.variant = 'dark';
+        /**
+         * Specifies the size of the menu item.
+         */
         this.size = 'lg';
     }
     render() {
-        return (h(Host, { key: '9611b4afe26d59d69b5e934e6048998a5a6b15a1', slot: "item" }, h("mds-button", { key: '93984131bf9fe5aafcb1e08e3ceb86df18a2ee39', "aria-label": this.tooltip, class: "button", icon: this.icon, variant: this.variant, tone: this.tone, size: this.size }), this.tooltip && (h("mds-tooltip", { key: '849a979a53edeca55985f31b88f4e136558fea48', class: "tooltip", target: ".button", placement: "top", autoPlacement: false }, this.tooltip))));
+        return (h(Host, { key: '6ef1882d37a9f3f1d7bd014a4a257b03e310bffd', slot: "item" }, h("mds-button", { key: '697d5c349ee2083a4b766391ca7d82337b5b420b', "aria-label": this.tooltip, class: "button", icon: this.icon, variant: this.variant, tone: this.tone, size: this.size }), this.tooltip && (h("mds-tooltip", { key: '74f407d34d4d2b009a5b28d2bb2d49455b7e3423', class: "tooltip", target: ".button", placement: "top", disableAutoPlacement: true }, this.tooltip))));
     }
     static get is() { return "mds-radial-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -139,7 +142,7 @@ export class MdsRadialMenuItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Specifies the size of the menu item."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/mds-radial-progress/mds-radial-progress.js

@@ -71,7 +71,7 @@ export class MdsRadialProgress {
     render() {
         const progressVar = `${(this.animatedProgress * 100).toFixed(2)}%`;
         const progressText = this.progressPercentage(this.clampProgress(this.progress));
-        return (h(Host, { key: 'bcac88e69c445c6bfb5de1cbbfc649ffd507dc12', style: { '--mds-radial-progress': progressVar }, role: "progressbar" }, h("div", { key: 'c874c37272324a7edfa12252e22547c4ae6a8c5b', class: "value-container", part: "value-container" }, this.icon && h("mds-icon", { key: 'ab14594f35d5ed15f6997c2cce47ca44612eab1d', class: "icon", name: this.icon, part: "icon" }), h("div", { key: '107216f2319c2895f0a9c6936c1c1ae42a54a0b5', class: "value-container__text" }, h("mds-text", { key: '27127a11de571b6b1703690aa37553b20db84aff', class: "value", typography: this.typography }, progressText)))));
+        return (h(Host, { key: '83881b4057b76db8a56eff2185522ab7394f11aa', style: { '--mds-radial-progress': progressVar }, role: "progressbar" }, h("div", { key: 'f21da1d993decfa5cd242186559f2c25c0209030', class: "value-container", part: "value-container" }, this.icon && h("mds-icon", { key: '1f53b8c170ae2657ae097e4207e32b75ce91cf91', class: "icon", name: this.icon, part: "icon" }), h("div", { key: '7f5b4e719ccb8c484c633b2cfc07cb02f90b14f0', class: "value-container__text" }, h("mds-text", { key: '2a379a399770d3a0dac5dc5bf88fcda83ff9ad43', class: "value", typography: this.typography }, progressText)))));
     }
     static get is() { return "mds-radial-progress"; }
     static get encapsulation() { return "shadow"; }