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

package/dist/collection/components/mds-avatar-stack-item/mds-avatar-stack-item.css

@@ -14,15 +14,6 @@ mds-avatar {
  * @prop --mds-avatar-stack-item-background: The background color of each avatar in the stack
  * @prop --mds-avatar-stack-item-count-background-color: Background color of the count badge in the stack
  * @prop --mds-avatar-stack-item-count-color: Text color for the count badge in the stack
- * @prop --mds-avatar-stack-item-lg-size: Size of large avatars in the stack
- * @prop --mds-avatar-stack-item-md-size: Size of medium avatars in the stack
- * @prop --mds-avatar-stack-item-sm-size: Size of small avatars in the stack
- * @prop --mds-avatar-stack-item-lg-border: Border width for large avatars
- * @prop --mds-avatar-stack-item-md-border: Border width for medium avatars
- * @prop --mds-avatar-stack-item-sm-border: Border width for small avatars
- * @prop --mds-avatar-stack-item-lg-offset: Overlap factor for large avatars (higher = more overlap)
- * @prop --mds-avatar-stack-item-md-offset: Overlap factor for medium avatars
- * @prop --mds-avatar-stack-item-sm-offset: Overlap factor for small avatars
  * @prop --mds-avatar-stack-item-border: Computed active border (based on selected size)
  * @prop --mds-avatar-stack-item-size: Computed active size (based on selected size)
  * @prop --mds-avatar-stack-item-offset: Computed active offset (based on selected size)
@@ -47,78 +38,6 @@ mds-avatar {
   syntax: '<color>';
 }
 
-@property --mds-avatar-stack-item-lg-size {
-  inherits: true;
-  initial-value: var(--mds-avatar-stack-lg-size, var(--spacing-1500, 3.75rem));
-  syntax: '<length>';
-}
-
-@property --mds-avatar-stack-item-md-size {
-  inherits: true;
-  initial-value: var(--mds-avatar-stack-md-size, var(--spacing-1200, 3rem));
-  syntax: '<length>';
-}
-
-@property --mds-avatar-stack-item-sm-size {
-  inherits: true;
-  initial-value: var(--mds-avatar-stack-sm-size, var(--spacing-900, 2.25rem));
-  syntax: '<length>';
-}
-
-@property --mds-avatar-stack-item-lg-border {
-  inherits: true;
-  initial-value: var(--mds-avatar-stack-lg-border, var(--spacing-100, 0.25rem));
-  syntax: '<length>';
-}
-
-@property --mds-avatar-stack-item-md-border {
-  inherits: true;
-  initial-value: var(--mds-avatar-stack-md-border, var(--spacing-100, 0.25rem));
-  syntax: '<length>';
-}
-
-@property --mds-avatar-stack-item-sm-border {
-  inherits: true;
-  initial-value: var(--mds-avatar-stack-sm-border, var(--spacing-50, 0.125rem));
-  syntax: '<length>';
-}
-
-@property --mds-avatar-stack-item-lg-offset {
-  inherits: true;
-  initial-value: var(--mds-avatar-stack-lg-offset, 2);
-  syntax: '<number>';
-}
-
-@property --mds-avatar-stack-item-md-offset {
-  inherits: true;
-  initial-value: var(--mds-avatar-stack-md-offset, 1.75);
-  syntax: '<number>';
-}
-
-@property --mds-avatar-stack-item-sm-offset {
-  inherits: true;
-  initial-value: var(--mds-avatar-stack-sm-offset, 1.5);
-  syntax: '<number>';
-}
-
-@property --mds-avatar-stack-item-lg-border {
-  inherits: true;
-  initial-value: var(--mds-avatar-stack-lg-border, var(--spacing-100, 0.25rem));
-  syntax: '<length>';
-}
-
-@property --mds-avatar-stack-item-md-border {
-  inherits: true;
-  initial-value: var(--mds-avatar-stack-md-border, var(--spacing-100, 0.25rem));
-  syntax: '<length>';
-}
-
-@property --mds-avatar-stack-item-sm-border {
-  inherits: true;
-  initial-value: var(--mds-avatar-stack-sm-border, var(--spacing-50, 0.125rem));
-  syntax: '<length>';
-}
-
 :host {
 
   /* private */
@@ -131,20 +50,12 @@ mds-avatar {
     --mds-avatar-stack-count-color,
     rgb(var(--tone-neutral-04, 218 218 218))
   );
-  --mds-avatar-stack-item-lg-size: var(--mds-avatar-stack-lg-size, --spacing(1500));
-  --mds-avatar-stack-item-md-size: var(--mds-avatar-stack-md-size, --spacing(1200));
-  --mds-avatar-stack-item-sm-size: var(--mds-avatar-stack-sm-size, --spacing(900));
-  --mds-avatar-stack-item-lg-border: var(--mds-avatar-stack-lg-border, --spacing(100));
-  --mds-avatar-stack-item-md-border: var(--mds-avatar-stack-md-border, --spacing(100));
-  --mds-avatar-stack-item-sm-border: var(--mds-avatar-stack-sm-border, --spacing(100));
-  --mds-avatar-stack-item-lg-offset: var(--mds-avatar-stack-lg-offset, 2);
-  --mds-avatar-stack-item-md-offset: var(--mds-avatar-stack-md-offset, 1.75);
-  --mds-avatar-stack-item-sm-offset: var(--mds-avatar-stack-sm-offset, 1.5);
 
-  /* apply */
-  --mds-avatar-stack-item-border: var(--mds-avatar-stack-md-border, var(--spacing-100, 0.25rem));
-  --mds-avatar-stack-item-size: var(--mds-avatar-stack-item-md-size, var(--mds-avatar-stack-md-size, var(--spacing-1200, 3rem)));
-  --mds-avatar-stack-item-offset: var(--mds-avatar-stack-item-md-offset, var(--mds-avatar-stack-md-offset, 1.75));
+  /* apply: default to the md variant for standalone use; inside a stack the
+   * parent overrides these via ::slotted (see mds-avatar-stack-slotted-size). */
+  --mds-avatar-stack-item-border: var(--mds-avatar-stack-md-border, --spacing(100));
+  --mds-avatar-stack-item-size: var(--mds-avatar-stack-md-size, --spacing(1200));
+  --mds-avatar-stack-item-offset: var(--mds-avatar-stack-md-offset, 1.75);
   --mds-avatar-stack-item-offset-margin: calc(
     var(--mds-avatar-stack-item-size) / var(--mds-avatar-stack-item-offset)
   );
@@ -174,22 +85,3 @@ mds-avatar {
   --mds-avatar-background-color: var(--mds-avatar-stack-item-count-background-color, var(--mds-avatar-stack-count-background-color, rgb(var(--tone-neutral-09, 76 76 76))));
   --mds-avatar-color: var(--mds-avatar-stack-item-count-color, var(--mds-avatar-stack-count-color, rgb(var(--tone-neutral-04, 218 218 218))));
 }
-
-:host-context(mds-avatar-stack[size='sm']) {
-  --mds-avatar-stack-item-size: var(--mds-avatar-stack-item-sm-size, var(--mds-avatar-stack-sm-size, var(--spacing-900, 2.25rem)));
-  --mds-avatar-stack-item-border: var(--mds-avatar-stack-item-sm-border, var(--mds-avatar-stack-sm-border, var(--spacing-50, 0.125rem)));
-  --mds-avatar-stack-item-offset: var(--mds-avatar-stack-item-sm-offset, var(--mds-avatar-stack-sm-offset, 1.5));
-}
-
-:host-context(mds-avatar-stack[size='md']) {
-  --mds-avatar-stack-item-size: var(--mds-avatar-stack-item-md-size, var(--mds-avatar-stack-md-size, var(--spacing-1200, 3rem)));
-  --mds-avatar-stack-item-border: var(--mds-avatar-stack-item-md-border, var(--mds-avatar-stack-md-border, var(--spacing-100, 0.25rem)));
-  --mds-avatar-stack-item-offset: var(--mds-avatar-stack-item-md-offset, var(--mds-avatar-stack-md-offset, 1.75));
-}
-
-:host-context(mds-avatar-stack[size='lg']) {
-  --mds-avatar-stack-item-size: var(--mds-avatar-stack-item-lg-size, var(--mds-avatar-stack-lg-size, var(--spacing-1500, 3.75rem)));
-  --mds-avatar-stack-item-border: var(--mds-avatar-stack-item-lg-border, var(--mds-avatar-stack-lg-border, var(--spacing-100, 0.25rem)));
-  --mds-avatar-stack-item-offset: var(--mds-avatar-stack-item-lg-offset, var(--mds-avatar-stack-lg-offset, 2));
-}
-

package/dist/collection/components/mds-avatar-stack-item/mds-avatar-stack-item.js

@@ -7,7 +7,7 @@ export class MdsAvatarStackItem {
         this.tone = 'weak';
     }
     render() {
-        return (h(Host, { key: '0626ca208c46043a55b76069f8c0c8de4a91f467' }, h("mds-avatar", { key: '376af8e3683bd2c4f19aa5c38728ca5e59ff4f57', class: "avatar", count: this.count, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant })));
+        return (h(Host, { key: '8ad5051f47c51387c968570afd0934423f8c48dd' }, h("mds-avatar", { key: '6b51faaa7960a47e919d0b486f2418d8d6acceb6', class: "avatar", count: this.count, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant })));
     }
     static get is() { return "mds-avatar-stack-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,6 +54,8 @@ mds-text {
   --mds-badge-border-width: 1px;
   --mds-badge-color: rgb(var(--label-sky-03, 191 232 251));
   --mds-badge-radius: var(--radius-lg, 10px);
+  --mds-badge-transition-duration: var(--duration-200, 200ms);
+  --private-badge-transition-duration: var(--mds-badge-transition-duration);
 
   align-items: center;
   background-color: var(--mds-badge-background, rgb(var(--label-sky-09, 6 76 107)));
@@ -62,7 +64,7 @@ mds-text {
   display: inline-flex;
   min-width: min-content;
   padding: --spacing(100) --spacing(200);
-  transition-duration: var(--duration-200, 200ms);
+  transition-duration: var(--private-badge-transition-duration);
   transition-property: background-color, border-color, border-width, color;
   transition-timing-function: var(--ease-out-quad, cubic-bezier(0.25, 0.46, 0.45, 0.94));
 }
@@ -343,18 +345,31 @@ mds-text {
 }
 
 
-: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-badge-transition-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-badge-transition-duration: 0s;
   }
 }
 
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) {
+/* Theme preference. The component reflects the resolved theme mode and scheme
+ * from <html> onto its host as pref-theme + pref-theme-scheme (see
+ * subscribePreference in @common/preference); these plain shadow selectors refine
+ * for dark. `dark` is the explicit choice; `system` and no controller follow the
+ * OS via @media; the scheme axis gates it. Cross-browser, no :host-context. */
+
+:host([pref-theme='dark']:not([pref-theme-scheme='light'])) {
   &:host([tone='strong']),
   &:host([tone='weak']) {
     box-shadow: var(--shadow-outline) inset;
@@ -362,8 +377,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])) {
     &:host([tone='strong']),
     &:host([tone='weak']) {
       box-shadow: var(--shadow-outline) inset;
@@ -371,39 +386,44 @@ mds-text {
   }
 }
 
-:host-context(:root.pref-contrast-more):host([tone='weak']) {
+/* 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']):host([tone='weak']) {
   box-shadow: var(--shadow-outline) inset;
 }
 
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])):host([tone='weak']) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])):host([tone='weak']) {
     box-shadow: var(--shadow-outline) inset;
   }
 }
 
-:host-context(:root.pref-contrast-more.pref-theme-dark):host([tone='strong']),
-:host-context(:root.pref-contrast-more.pref-theme-dark):host([tone='weak']) {
+:host([pref-contrast='more'][pref-theme='dark'][tone='strong']),
+:host([pref-contrast='more'][pref-theme='dark'][tone='weak']) {
   box-shadow: var(--shadow-outline-strong, rgb(0 0 0 / 0.25) 0px 1px 1px, rgb(0 0 0 / 0.13) 0px 0px 1px 1px) inset;
 }
 
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system.pref-theme-dark):host([tone='strong']),
-  :host-context(:root.pref-contrast-system.pref-theme-dark):host([tone='weak']) {
+  :host([pref-contrast='system'][pref-theme='dark'][tone='strong']),
+  :host([pref-contrast='system'][pref-theme='dark'][tone='weak']) {
     box-shadow: var(--shadow-outline-strong, rgb(0 0 0 / 0.25) 0px 1px 1px, rgb(0 0 0 / 0.13) 0px 0px 1px 1px) inset;
   }
 }
 
 @media (prefers-color-scheme: dark) {
-  :host-context(:root.pref-contrast-more.pref-theme-system):host([tone='strong']),
-  :host-context(:root.pref-contrast-more.pref-theme-system):host([tone='weak']) {
+  :host([pref-contrast='more'][pref-theme='system'][tone='strong']),
+  :host([pref-contrast='more'][pref-theme='system'][tone='weak']) {
     box-shadow: var(--shadow-outline-strong, rgb(0 0 0 / 0.25) 0px 1px 1px, rgb(0 0 0 / 0.13) 0px 0px 1px 1px) inset;
   }
 }
 
 @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
-  :host-context(:root.pref-contrast-system.pref-theme-system):host([tone='strong']),
-  :host-context(:root.pref-contrast-system.pref-theme-system):host([tone='weak']) {
+  :host([pref-contrast='system'][pref-theme='system'][tone='strong']),
+  :host([pref-contrast='system'][pref-theme='system'][tone='weak']) {
     box-shadow: var(--shadow-outline-strong, rgb(0 0 0 / 0.25) 0px 1px 1px, rgb(0 0 0 / 0.13) 0px 0px 1px 1px) inset;
   }
 }

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

@@ -1,7 +1,8 @@
 import { Host, h } from "@stencil/core";
 import { readSlottedLabel, sanitizeLabel } from "../../common/slot";
+import { subscribePreference } from "../../common/preference";
 /**
- * @slot default - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
+ * @slot - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  */
 export class MdsBadge {
     constructor() {
@@ -19,16 +20,37 @@ export class MdsBadge {
         this.typography = 'option';
         this.onSlotChangeHandler = () => {
             /* this should be removed in the future once slotted text is no longer used, use the label property instead */
-            if (this.label)
+            if (this.label !== undefined && this.label !== '')
                 return;
             this.label = readSlottedLabel(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);
+    }
     labelChanged(newValue) {
         this.label = sanitizeLabel(newValue);
     }
     render() {
-        return (h(Host, { key: 'bed5c0dccff0e7e796e7e5e76efe25d8330dec2c' }, h("mds-text", { key: 'b9fc73764d75faa0d3102a622b3ecc4d8392c613', tag: "span", typography: this.typography, variant: "info", text: this.label }, this.label || h("slot", { key: 'd8d0e54393b72cc270574e00197cdc703bff3d0a', onSlotchange: this.onSlotChangeHandler }))));
+        return (h(Host, { key: '61069108c37f3f39b301f1e028f76cc34dc15a89', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("mds-text", { key: '2086515f10e02ff4028eced12db1510b455245c4', tag: "span", typography: this.typography, variant: "info", text: this.label }, this.label || h("slot", { key: '34c6c046aa4bfed4e6f7324a4ceb5383a09dfad6', onSlotchange: this.onSlotChangeHandler }))));
     }
     static get is() { return "mds-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -146,6 +168,14 @@ export class MdsBadge {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{

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

@@ -113,6 +113,7 @@ mds-text {
   --mds-banner-radius: var(--radius-2xl, 24px);
   --mds-banner-shadow: none;
   --mds-banner-transition-duration: 300ms;
+  --private-banner-transition-duration: var(--mds-banner-transition-duration, 300ms);
   --mds-banner-transition-timing-function: var(--ease-in-out-expo, cubic-bezier(1, 0, 0, 1));
 
   @apply grid-cols-full;
@@ -128,7 +129,7 @@ mds-text {
   gap: --spacing(600);
   padding: --spacing(600);
   position: relative;
-  transition-duration: var(--mds-banner-transition-duration, 300ms);
+  transition-duration: var(--private-banner-transition-duration);
   transition-property: background-color, box-shadow, color;
   transition-timing-function: var(--mds-banner-transition-timing-function);
   width: 100%;
@@ -194,7 +195,8 @@ mds-text {
   }
 }
 
-:host([cockade]:not([cockade='false'])) .icon {
+:host(:not([hide-cockade])) .icon,
+:host([hide-cockade='false']) .icon {
   background-color: var(--mds-banner-cockade-background, rgb(var(--tone-neutral-09, 76 76 76)));
   border-bottom-left-radius: var(--radius-lg, 16px);
   border-bottom-right-radius: var(--radius-lg, 16px);
@@ -204,7 +206,8 @@ mds-text {
 }
 
 @container mds-banner (max-width: 300px) {
-  :host([cockade]:not([cockade='false'])) .icon {
+  :host(:not([hide-cockade])) .icon,
+  :host([hide-cockade='false']) .icon {
     padding-top: --spacing(200);
   }
 
@@ -384,35 +387,53 @@ mds-text {
   box-shadow: var(--shadow-box-solid-weak, rgb(0 0 0 / 0.3) 0px 2px 4px, rgb(0 0 0 / 0.03) 0px 0px 0px 1px, rgb(0 0 0 / 0.1) 0px 7px 13px -3px, rgb(0 0 0 / 0.2) 0px -3px 0px inset, rgb(255 255 255 / 0.1) 0px -8px 10px inset, rgb(255 255 255 / 0.15) 0px -4px 0px inset);
 }
 
-: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-banner-transition-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-banner-transition-duration: 0s;
   }
 }
 
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) {
+/* Theme preference. The component reflects the resolved theme mode and scheme
+ * from <html> onto its host as pref-theme + pref-theme-scheme (see
+ * subscribePreference in @common/preference); these plain shadow selectors refine
+ * for dark. `dark` is the explicit choice; `system` and no controller follow the
+ * OS via @media; the scheme axis gates it. Cross-browser, no :host-context. */
+
+:host([pref-theme='dark']:not([pref-theme-scheme='light'])) {
   box-shadow: var(--shadow-outline);
 }
 
 @media (prefers-color-scheme: dark) {
-  :host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-theme='system']:not([pref-theme-scheme='light'])),
+  :host(:not([pref-theme])) {
     box-shadow: var(--shadow-outline);
   }
 }
 
-:host-context(:root.pref-contrast-more) {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+
+:host([pref-contrast='more']) {
   box-shadow: var(--shadow-outline-strong-50), var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
 }
 
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     box-shadow: var(--shadow-outline-strong-50), var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
   }
 }

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

@@ -2,12 +2,13 @@ import { Host, h, } from "@stencil/core";
 import miBaselineClose from "@icon/mi/baseline/close.svg";
 import { KeyboardManager } from "../../common/keyboard-manager";
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
 import localeIt from "./meta/locale.it.json";
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  * @slot action - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
  * @part text - The text wrapper of the `default` and `content` slots
  */
@@ -29,9 +30,9 @@ export class MdsBanner {
          */
         this.tone = 'weak';
         /**
-         * Shows a decoration around the banner icon
+         * Hides the decoration around the banner icon
          */
-        this.cockade = true;
+        this.hideCockade = false;
         this.ariaVariants = {
             ai: { role: 'status', live: 'polite' },
             dark: { role: 'presentation', live: undefined },
@@ -67,11 +68,14 @@ export class MdsBanner {
             var _a;
             this.closeEvent.emit();
             const modalEL = (_a = this.host) === null || _a === void 0 ? void 0 : _a.closest('mds-modal');
-            if (modalEL) {
+            if (modalEL != null) {
                 modalEL.opened = false;
             }
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -88,7 +92,26 @@ export class MdsBanner {
     componentDidUpdate() {
         this.deletableHandler();
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
     disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
         this.km.detachClickBehavior();
     }
     variantHandler(newValue) {
@@ -96,7 +119,7 @@ export class MdsBanner {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '2afab272d56122cd81155dc183d7ab5e6cefc2c4', "aria-label": this.headline, role: this.ariaVariants[(_a = this.variant) !== null && _a !== void 0 ? _a : 'primary'].role, "aria-live": this.ariaVariants[(_b = this.variant) !== null && _b !== void 0 ? _b : 'primary'].live }, h("div", { key: 'e721e7375cb6f81f994c48aa65707dc133f71510', class: "body" }, this.icon && h("mds-icon", { key: '1542bdd9019d144105d09689c4b773ddd7626f13', "aria-hidden": "true", class: "icon", name: this.icon }), h("div", { key: 'acb819054179bf7fc16da97e0bfb64e9e9d08b5b', class: "content" }, this.headline && (h("mds-text", { key: '927594cdfd61d6af3b496761beeb5ab489832d8b', "aria-hidden": "true", class: "headline", typography: "h6" }, this.headline)), h("div", { key: '27cf3213f992682fe923a6a5f028d3ea5d1ae8ba', class: "text", part: "text" }, h("slot", { key: '1b4180568e80bf7b05c8c5dc1ba4d10bc0ca2cb6' }))), this.deletable && (h("mds-button", { key: 'c479abfc205e76cee8965f26b4c2ba1910e97100', class: "close-button", icon: miBaselineClose, onClick: this.closeBanner, title: this.t.get('cancel'), variant: this.closeButtonVariant, tone: "text" }))), this.actions && (h("div", { key: '991cdcbd6965e8df55a016a2b4ae7e6a24f09cf0', class: "actions" }, h("slot", { key: '147bf81d81e1e958fb2714b1fff0b41cb5865e9d', name: "action" })))));
+        return (h(Host, { key: 'b02dca5f0390c5b8abcb39de54213ee9e1516095', "aria-label": this.headline, role: this.ariaVariants[(_a = this.variant) !== null && _a !== void 0 ? _a : 'primary'].role, "aria-live": this.ariaVariants[(_b = this.variant) !== null && _b !== void 0 ? _b : 'primary'].live, "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: 'acf3e7e9f787f83f6f7848def2b5e83131c351d0', class: "body" }, this.icon && h("mds-icon", { key: '459143ba8c980883419639d5ee9e86e0f5e86d38', "aria-hidden": "true", class: "icon", name: this.icon }), h("div", { key: '1267fbd7179eb707f8badc49d51e4d0b6cea8675', class: "content" }, this.headline && (h("mds-text", { key: '32c2d53ae4d739c228906743b04da2ef12fe9239', "aria-hidden": "true", class: "headline", typography: "h6" }, this.headline)), h("div", { key: '5bf34c1cf8088b98822c6324e507021d4c4f9dcc', class: "text", part: "text" }, h("slot", { key: '0bdc3974118c6966dfd04507bd2322bd0f33224e' }))), this.deletable && (h("mds-button", { key: '54f0619d64b3f12706d96205a41a118bb52a4c45', class: "close-button", icon: miBaselineClose, onClick: this.closeBanner, title: this.t.get('cancel'), variant: this.closeButtonVariant, tone: "text" }))), this.actions && (h("div", { key: '6920ca28610c5ee19c79e7d635784c719e3fb3e4', class: "actions" }, h("slot", { key: '2d9e43fb91a34f076ef40e3dd451baa49222d5e6', name: "action" })))));
     }
     static get is() { return "mds-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -166,7 +189,7 @@ export class MdsBanner {
                 "attribute": "tone",
                 "defaultValue": "'weak'"
             },
-            "cockade": {
+            "hideCockade": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -178,13 +201,13 @@ export class MdsBanner {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Shows a decoration around the banner icon"
+                    "text": "Hides the decoration around the banner icon"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "cockade",
-                "defaultValue": "true"
+                "attribute": "hide-cockade",
+                "defaultValue": "false"
             },
             "deletable": {
                 "type": "boolean",
@@ -247,6 +270,10 @@ export class MdsBanner {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {},
             "closeButtonVariant": {}
         };
@@ -284,7 +311,7 @@ export class MdsBanner {
                     "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-banner/test/mds-banner.stories.js

@@ -5,9 +5,9 @@ import { toneMinimalBoxVariantDictionary } from "../../../type/tone";
 export default {
     title: 'UI / Banner',
     argTypes: {
-        cockade: {
+        'hide-cockade': {
             type: { name: 'boolean' },
-            description: 'Shows a decoration around the banner icon',
+            description: 'Hides the decoration around the banner icon',
         },
         deletable: {
             type: { name: 'boolean' },
@@ -49,7 +49,7 @@ export const Cockade = {
     render: Template,
     args: {
         icon: 'mi/baseline/warning',
-        cockade: true,
+        'hide-cockade': false,
     },
 };
 export const Headline = {

package/dist/collection/components/mds-benchmark-bar/mds-benchmark-bar.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { readSlottedLabel, sanitizeLabel } from "../../common/slot";
 /**
- * @slot default - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
+ * @slot - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  * @part progress-bar - The progress bar element
  */
 export class MdsBenchmarkBar {
@@ -24,7 +24,7 @@ export class MdsBenchmarkBar {
         this.size = 'md';
         this.onSlotChangeHandler = () => {
             /* this should be removed in the future once slotted text is no longer used, use the label property instead */
-            if (this.label)
+            if (this.label !== undefined && this.label !== '')
                 return;
             this.label = readSlottedLabel(this.host);
         };
@@ -34,7 +34,7 @@ export class MdsBenchmarkBar {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'd7b0e761d31d572d12036ff3aaf4c20b289cbf2f' }, h("div", { key: '704adf95c2c8d28158b4b42a79b618adcaacec37', class: "infos" }, h("mds-text", { key: 'aba9432355b5ecf6b2bc624851eeeb804b9d1ce7', typography: this.typography, class: "label", id: "label", truncate: "word" }, this.label || h("slot", { key: '87bf1c615242ec2df4c13a22bcb6b17d35286dbf', onSlotchange: this.onSlotChangeHandler })), h("mds-text", { key: '21d31020e10456f29b884c9cd0ed7744f9eeb2cf', typography: this.typography, class: "value", truncate: "word" }, (_a = this.alias) !== null && _a !== void 0 ? _a : this.value)), h("mds-progress", { key: '9e9db845895d9f0ea025df2a3ea55e206c11e255', "aria-labelledby": "label", "aria-valuetext": this.alias, class: "progress", variant: this.variant, progress: this.value / 100, size: this.size, part: "progress-bar" })));
+        return (h(Host, { key: '1c2d9a434915c3bd3487e3accddc100cb457178b' }, h("div", { key: '809bfc18d2042c97685adb031b65f3444a1ba3c4', class: "infos" }, h("mds-text", { key: 'f328a5c085a268ac48839e9553fe48a0d57873f8', typography: this.typography, class: "label", id: "label", truncate: "word" }, this.label || h("slot", { key: 'd61cde55186ab7d8aa186fb740b35fb9e5e964f4', onSlotchange: this.onSlotChangeHandler })), h("mds-text", { key: '2f0145a1c718cb646fb28e05e6f828c196c8902e', typography: this.typography, class: "value", truncate: "word" }, (_a = this.alias) !== null && _a !== void 0 ? _a : this.value)), h("mds-progress", { key: 'ad484ee140a19ccde21e5a50df8532c03508350a', "aria-labelledby": "label", "aria-valuetext": this.alias, class: "progress", variant: this.variant, progress: this.value / 100, size: this.size, part: "progress-bar" })));
     }
     static get is() { return "mds-benchmark-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -43,12 +43,12 @@ mds-text {
 }
 
 .link {
-  @apply duration-200
-    focus-bounce;
+  @apply focus-bounce;
 
   border-radius: var(--radius-lg, 16px);
   color: var(--mds-bibliography-color, rgb(var(--tone-neutral-03, 233 233 233)));
   text-decoration-color: var(--mds-bibliography-text-decoration, rgb(var(--tone-neutral-06, 158 158 158)));
+  transition-duration: var(--duration-200, 200ms);
   transition-property: text-decoration, color, outline, outline-offset;
 }