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-banner/mds-banner.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -2,6 +2,7 @@ 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";
@@ -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 },
@@ -91,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) {
@@ -99,7 +119,7 @@ export class MdsBanner {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '8a3293e558bb74ac6b6f2da1f8716de46d6e1c0e', "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: '57b677034bdb2c45e838b5f0bfd285fb1588fb2d', class: "body" }, this.icon && h("mds-icon", { key: 'e721e46b80995d2fa81cff4bd60a5d8ad453e197', "aria-hidden": "true", class: "icon", name: this.icon }), h("div", { key: '6c6af935817431e4d89c29752d0ec32d1a204259', class: "content" }, this.headline && (h("mds-text", { key: 'cb3e60f23d08876841e635a61c2b67534e5d2833', "aria-hidden": "true", class: "headline", typography: "h6" }, this.headline)), h("div", { key: '248ed7b3b4e89099fa327d4954e6d56a35c781ca', class: "text", part: "text" }, h("slot", { key: '26a6b47c16abf4ac990c2f77b17f6a461dc94c1f' }))), this.deletable && (h("mds-button", { key: 'f6dce72fed0e6d32ad2cdef1d10521a9aee6ad71', class: "close-button", icon: miBaselineClose, onClick: this.closeBanner, title: this.t.get('cancel'), variant: this.closeButtonVariant, tone: "text" }))), this.actions && (h("div", { key: '28e0a3870b0d05250729d75b26c72c96f45e5bbc', class: "actions" }, h("slot", { key: '2b0f51b34cf364ac7efc27fb33d586e59ef3ddda', 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"; }
@@ -169,7 +189,7 @@ export class MdsBanner {
                 "attribute": "tone",
                 "defaultValue": "'weak'"
             },
-            "cockade": {
+            "hideCockade": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -181,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",
@@ -250,6 +270,10 @@ export class MdsBanner {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {},
             "closeButtonVariant": {}
         };

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

@@ -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-bibliography/mds-bibliography.css CHANGED Viewed

@@ -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;
 }

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

@@ -110,15 +110,3 @@ mds-button {
 :host::-webkit-scrollbar {
   display: none;
 }
-:host-context(:root.pref-animation-reduce) {
-  scroll-behavior: auto;
-}
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    scroll-behavior: auto;
-  }
-}

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

@@ -19,13 +19,13 @@ export class MdsBreadcrumb {
             it: localeIt,
         });
         /**
-         * Choose to display or not the back arrow button
+         * Hides the back arrow button
          */
-        this.back = true;
+        this.hideBack = false;
         this.queryItems = () => this.element.querySelectorAll('mds-breadcrumb-item');
         this.updateBackButton = (id) => {
             var _a;
-            if (!this.back)
+            if (this.hideBack)
                 return;
             const backElement = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.back');
             if (id === 0) {
@@ -70,7 +70,7 @@ export class MdsBreadcrumb {
         if (!item || item.id === 'item-0') {
             this.updateBackButton(0);
         }
-        if (this.back) {
+        if (!this.hideBack) {
             const backElement = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.back');
             this.kb.addElement(backElement);
             this.kb.attachClickBehavior();
@@ -78,7 +78,7 @@ export class MdsBreadcrumb {
     }
     componentDidUpdate() {
         var _a;
-        if (this.back) {
+        if (!this.hideBack) {
             const backElement = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.back');
             this.kb.addElement(backElement);
             this.kb.attachClickBehavior();
@@ -105,7 +105,7 @@ export class MdsBreadcrumb {
         this.onChanged(selectedId, event.target);
     }
     render() {
-        return (h(Host, { key: 'd6153c0dc519e28bb3e6d4abcc21e7525f93bcd6' }, this.back && (h("mds-button", { key: '06352e01170f89f85263a8f5ce6430c05cbbe4c2', title: this.t.get('back'), class: "back", tone: "text", variant: "dark", icon: miBaselineArrowBack, onClick: this.togglePrevious })), h("slot", { key: '6355194ad2a8d7b51ee76d5537dfd206a831c86f' })));
+        return (h(Host, { key: '816f24af4192b1e5fb296887f817fbdde2a3fb68' }, !this.hideBack && (h("mds-button", { key: '75c612c333cc14a018500bd3fc14ccff835ad642', title: this.t.get('back'), class: "back", tone: "text", variant: "dark", icon: miBaselineArrowBack, onClick: this.togglePrevious })), h("slot", { key: '49aa5944b4553e82bf19d34bde70adc14aee0ccc' })));
     }
     static get is() { return "mds-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
@@ -121,7 +121,7 @@ export class MdsBreadcrumb {
     }
     static get properties() {
         return {
-            "back": {
+            "hideBack": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -133,13 +133,13 @@ export class MdsBreadcrumb {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Choose to display or not the back arrow button"
+                    "text": "Hides the back arrow button"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "back",
-                "defaultValue": "true"
+                "attribute": "hide-back",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -2,9 +2,9 @@ import { h } from "@stencil/core";
 export default {
     title: 'UI / Breadcrumb',
     argTypes: {
-        back: {
+        'hide-back': {
             type: { name: 'boolean', required: false },
-            description: 'Choose to display or not the back arrow button',
+            description: 'Hides the back arrow button',
         },
     },
 };

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

@@ -150,6 +150,8 @@ mds-text {
 :host {
   --mds-button-await-duration: 0.725s;
+  --mds-button-transition-duration: var(--duration-300, 300ms);
+  --private-button-transition-duration: var(--mds-button-transition-duration);
   --mds-button-background: rgb(var(--mds-button-border-color-rgb, 0 0 0));
   --mds-button-border-color-rgb: var(--variant-primary-02, 230 239 255);
   --mds-button-border-hover-opacity: 0.75;
@@ -167,8 +169,7 @@ mds-text {
   --mds-button-line-clamp: 1;
   --mds-button-radius: var(--radius-2xl, 24px);
-  @apply duration-200
-    focus-bounce;
+  @apply focus-bounce;
   align-items: center;
   background-color: var(--mds-button-background, rgb(var(--variant-primary-02, 230 239 255)));
@@ -185,6 +186,7 @@ mds-text {
   justify-content: center;
   padding: 0 --spacing(400);
   position: relative;
+  transition-duration: var(--duration-200, 200ms);
   transition-property:
     background-color, border-color, box-shadow, color, outline, outline-offset, transform;
   transition-timing-function: var(--ease-out-quad, cubic-bezier(0.25, 0.46, 0.45, 0.94));
@@ -212,28 +214,18 @@ mds-text {
   flex-shrink: 0;
   justify-content: center;
   pointer-events: none;
-  transition-duration: var(--duration-300, 300ms);
+  transition-duration: var(--private-button-transition-duration);
   transition-property: fill;
   transition-timing-function: var(--ease-in-out-quad, cubic-bezier(0.455, 0.03, 0.515, 0.955));
 }
-:host-context(mds-button-group):host(:not(:first-child)) {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-}
-:host-context(mds-button-group):host(:not(:last-child)) {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-}
 .await {
   display: none;
   height: --spacing(600);
   margin-right: calc(calc(-1 * var(--mds-button-gap, 0.5rem)) - --spacing(600));
   transform: scale(0);
   transition-behavior: allow-discrete;
-  transition-duration: var(--duration-300, 300ms);
+  transition-duration: var(--private-button-transition-duration);
   transition-property: display, margin-right, opacity, transform, width;
   transition-timing-function: var(--ease-in-out-quad, cubic-bezier(0.455, 0.03, 0.515, 0.955));
   width: --spacing(600);
@@ -819,7 +811,12 @@ mds-text {
   --mds-button-border-opacity: 100%;
 }
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) {
+/* Theme preference (service variants). The component reflects the resolved theme
+ * mode + scheme from <html> onto its host as pref-theme + pref-theme-scheme (see
+ * subscribePreference in @common/preference); `dark` is explicit, `system` and no
+ * controller follow the OS via @media, the scheme axis gates it. Cross-browser. */
+:host([pref-theme='dark']:not([pref-theme-scheme='light'])) {
   &:host([variant='google']),
   &:host([variant='google'][tone]) {
     --mds-button-border-width: --spacing(50);
@@ -838,8 +835,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([variant='apple']),
     &:host([variant='apple'][tone]) {
       --mds-button-background: rgb(var(--tone-neutral-01, 255 255 255));
@@ -902,20 +899,21 @@ mds-text {
   }
 }
-:host-context(:root.pref-animation-reduce) {
-  .await,
-  .icon {
-    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-button-transition-duration: 0s;
 }
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    .await,
-    .icon {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-button-transition-duration: 0s;
   }
 }

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

@@ -4,6 +4,7 @@ import { buttonSizeTypographyVariant } from "./meta/variants";
 import { setAttributeIfEmpty, unslugName } from "../../common/aria";
 import { isIconFormatIsBase64, isIconFormatIsSVG } from "../../common/icon";
 import { readSlottedLabel, sanitizeLabel } from "../../common/slot";
+import { subscribePreference } from "../../common/preference";
 import mdiApple from "@icon/mdi/apple.svg";
 import logoGoogle from "./asset/logo-google.svg";
 /**
@@ -192,15 +193,28 @@ export class MdsButton {
         this.km.attachClickBehavior();
     }
     connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
         if (!this.disabled)
             this.host.removeAttribute('disabled');
     }
     disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefTheme) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefThemeScheme) === null || _c === void 0 ? void 0 : _c.call(this);
         this.km.detachClickBehavior();
     }
     render() {
         this.typography = buttonSizeTypographyVariant[this.size];
-        return (h(Host, { key: '742df7f0ff9096e2af56b47970cad3ce1d97ded9', onMouseDown: this.mouseDown, onMouseUp: this.mouseUp, onMouseOut: this.mouseUp, tabindex: "0" }, h("div", { key: 'feb94db67f8782363ff7cd8bc2472617ef668c1c', class: "await" }, h("mds-spinner", { key: 'f43ddd7651ff63bde32e58b21ae688ad9f99e3fc', class: "spinner", running: this.await })), this.icon && this.iconPosition === 'left' && (h("mds-icon", { key: '9977013bc0251f8c3184c09a7718e7b111191941', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" })), h("mds-text", { key: 'c77755a17e22c8e00457a093a3041d42936c807c', class: "text", part: "label", tag: "span", typography: this.typography, truncate: this.truncate, animation: this.animation, text: this.label }, this.label || h("slot", { key: 'da65921ecf3fdcf43a9a657ca79b9c31d1c1f4d4', onSlotchange: this.onSlotChangeHandler })), this.hasNotification && h("slot", { key: '6fa74b557775f3ac3b13898c2b6271c7cfac74e8', name: "notification" }), this.icon && this.iconPosition === 'right' && (h("mds-icon", { key: 'bf6d2d99d3e9c405edec7d1778df8197cd3b453e', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" }))));
+        return (h(Host, { key: '56280f982ec58bc7892cc675a32c2864ced12307', onMouseDown: this.mouseDown, onMouseUp: this.mouseUp, onMouseOut: this.mouseUp, tabindex: "0", "pref-animation": this.prefAnimation, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: 'eba4a361bce886870bcfcc36da4faae20555077a', class: "await" }, h("mds-spinner", { key: '9b7b713a50197bf0363008c64becdda0b6ddb883', class: "spinner", running: this.await })), this.icon && this.iconPosition === 'left' && (h("mds-icon", { key: '3c969c5f9e056fb0f23db60a1e3d08e8fe4019ef', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" })), h("mds-text", { key: '9c0870359c1e08293172d0b426d0049ea75d08ec', class: "text", part: "label", tag: "span", typography: this.typography, truncate: this.truncate, animation: this.animation, text: this.label }, this.label || h("slot", { key: '8b85b4d200a73b8c62a3f59269f86bc477e5b9ad', onSlotchange: this.onSlotChangeHandler })), this.hasNotification && h("slot", { key: '23c08a47307b635e93ef1153ee19d2d9362bc63e', name: "notification" }), this.icon && this.iconPosition === 'right' && (h("mds-icon", { key: '2d2544dd68e2580ae007bb33813d43ed257c6e17', "aria-hidden": "true", class: "icon", name: this.icon, part: "icon" }))));
     }
     static get is() { return "mds-button"; }
     static get encapsulation() { return "shadow"; }
@@ -568,6 +582,13 @@ export class MdsButton {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{

package/dist/collection/components/mds-button-group/mds-button-group.css CHANGED Viewed

@@ -9,6 +9,21 @@ mds-button {
   }
 }
+/* Joined-group radii are driven from the parent: mds-button-group flattens the
+ * inner edges of its slotted buttons via ::slotted, instead of each button
+ * reading its parent. Cross-browser (no :host-context); ::slotted (outer tree)
+ * wins over the button's own host radius. */
+::slotted(mds-button:not(:first-child)) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+::slotted(mds-button:not(:last-child)) {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
 :host {
   display: inline-flex;