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

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

@@ -2,6 +2,7 @@
 
 var index = require('./index-CNuKb6Lv.js');
 var locale = require('./locale-oGW3SvGJ.js');
+var preference = require('./preference-BdpIXWLP.js');
 
 const dont$3 = "Δεν επιτρέπεται";
 const info$3 = "Πληροφορία";
@@ -43,7 +44,7 @@ var localeIt = {
 	warn: warn
 };
 
-const mdsUsageCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-usage-border-color:rgb(var(--status-info-06,0 161 208));--mds-usage-header-background:rgb(var(--status-info-05,112 198 234));--mds-usage-header-color:rgb(var(--status-info-10,0 61 103));--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-icon,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-usage-border-color:rgb(var(--status-info-06,0 161 208));--mds-usage-header-background:var(--mds-usage-border-color,rgb(var(--status-info-06,0 161 208)));--mds-usage-header-color:rgb(var(--tone-neutral,0 0 0));border-radius:var(--radius-lg,16px);gap:calc(var(--spacing,.0025rem)*200);padding:calc(var(--spacing,.0025rem)*400);padding-top:calc(var(--spacing,.0025rem)*0);--tw-duration:.2s;--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));border-color:var(--mds-usage-border-color,rgb(var(--status-info-06,0 161 208)));border-style:solid;border-width:calc(var(--spacing,.0025rem)*50);display:grid;grid-auto-rows:-webkit-min-content;grid-auto-rows:min-content;grid-template-columns:minmax(0,100%);position:relative;transition-duration:.2s;transition-property:background-color,box-shadow,color;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));width:100%}.label{color:var(--mds-usage-header-color,rgb(var(--status-info-10,0 61 103)))}mds-icon{fill:var(--mds-usage-header-color,rgb(var(--status-info-10,0 61 103)));height:calc(var(--spacing,.0025rem)*400);width:calc(var(--spacing,.0025rem)*400)}.header{align-items:center;background-color:var(--mds-usage-border-color,rgb(var(--status-info-06,0 161 208)));border-bottom-left-radius:calc(var(--spacing,.0025rem)*200);border-bottom-right-radius:calc(var(--spacing,.0025rem)*200);display:inline-flex;gap:calc(var(--spacing,.0025rem)*200);height:calc(var(--spacing,.0025rem)*600);justify-self:start;padding-left:calc(var(--spacing,.0025rem)*200);padding-right:calc(var(--spacing,.0025rem)*200)}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-animation-reduce) .badge{transition-duration:0s}:host-context(:root.pref-contrast-more){--mds-usage-badge-color:rgb(var(--tone-neutral-01,255 255 255));--mds-usage-color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root.pref-contrast-more):host([variant=do]){--mds-usage-badge-color:rgb(var(--tone-neutral-01,255 255 255));--mds-usage-color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root.pref-contrast-more):host([variant=dont]){--mds-usage-badge-color:rgb(var(--tone-neutral-01,255 255 255));--mds-usage-color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root.pref-contrast-more):host([variant=warn]){--mds-usage-badge-color:rgb(var(--tone-neutral-01,255 255 255));--mds-usage-color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-usage-header-background:rgb(var(--status-info-05,112 198 234));-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=do]){--mds-usage-header-background:rgb(var(--status-success-05,107 206 147))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=dont]){--mds-usage-header-background:rgb(var(--status-error-05,250 165 160))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([variant=warn]){--mds-usage-header-background:rgb(var(--status-warning-05,237 177 0))}:host([variant=do]){--mds-usage-border-color:rgb(var(--status-success-05,107 206 147));--mds-usage-header-color:rgb(var(--status-success-10,0 69 0))}:host([variant=info]){--mds-usage-border-color:rgb(var(--status-info-05,112 198 234));--mds-usage-header-color:rgb(var(--status-info-10,0 61 103))}:host([variant=dont]){--mds-usage-border-color:rgb(var(--status-error-05,250 165 160));--mds-usage-header-color:rgb(var(--status-error-10,115 0 0))}:host([variant=warn]){--mds-usage-border-color:rgb(var(--status-warning-08,129 96 0));--mds-usage-header-color:rgb(var(--status-warning-02,255 237 185))}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion){:host-context(:root.pref-animation-system){transition-duration:0s}:host-context(:root:not([data-magma-pref])){transition-duration:0s}:host-context(:root:not([data-magma-pref])) .badge{transition-duration:0s}}@media (prefers-contrast:more){:host-context(:root.pref-contrast-system){--mds-usage-badge-color:rgb(var(--tone-neutral-01,255 255 255));--mds-usage-color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root:not([data-magma-pref])){--mds-usage-badge-color:rgb(var(--tone-neutral-01,255 255 255));--mds-usage-color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root:not([data-magma-pref])):host([variant=do]){--mds-usage-badge-color:rgb(var(--tone-neutral-01,255 255 255));--mds-usage-color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root:not([data-magma-pref])):host([variant=dont]){--mds-usage-badge-color:rgb(var(--tone-neutral-01,255 255 255));--mds-usage-color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root:not([data-magma-pref])):host([variant=warn]){--mds-usage-badge-color:rgb(var(--tone-neutral-01,255 255 255));--mds-usage-color:rgb(var(--tone-neutral-01,255 255 255))}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-usage-header-background:rgb(var(--status-info-05,112 198 234));-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=do]){--mds-usage-header-background:rgb(var(--status-success-05,107 206 147))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=dont]){--mds-usage-header-background:rgb(var(--status-error-05,250 165 160))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([variant=warn]){--mds-usage-header-background:rgb(var(--status-warning-05,237 177 0))}}`;
+const mdsUsageCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-usage-border-color:rgb(var(--status-info-06,0 161 208));--mds-usage-header-background:rgb(var(--status-info-05,112 198 234));--mds-usage-header-color:rgb(var(--status-info-10,0 61 103));--tw-ease:initial}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-icon,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-usage-border-color:rgb(var(--status-info-06,0 161 208));--mds-usage-header-background:var(--mds-usage-border-color,rgb(var(--status-info-06,0 161 208)));--mds-usage-header-color:rgb(var(--tone-neutral,0 0 0));--mds-usage-transition-duration:var(--duration-200,.2s);--private-usage-transition-duration:var(--mds-usage-transition-duration);--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));border-color:var(--mds-usage-border-color,rgb(var(--status-info-06,0 161 208)));border-radius:var(--radius-lg,16px);border-style:solid;border-width:calc(var(--spacing,.0025rem)*50);display:grid;gap:calc(var(--spacing,.0025rem)*200);grid-auto-rows:-webkit-min-content;grid-auto-rows:min-content;grid-template-columns:minmax(0,100%);padding:calc(var(--spacing,.0025rem)*400);padding-top:0;position:relative;-webkit-transition-duration:var(--private-usage-transition-duration);transition-duration:var(--private-usage-transition-duration);transition-property:background-color,box-shadow,color;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));width:100%}.label{color:var(--mds-usage-header-color,rgb(var(--status-info-10,0 61 103)))}mds-icon{fill:var(--mds-usage-header-color,rgb(var(--status-info-10,0 61 103)));height:calc(var(--spacing,.0025rem)*400);width:calc(var(--spacing,.0025rem)*400)}.header{align-items:center;background-color:var(--mds-usage-border-color,rgb(var(--status-info-06,0 161 208)));border-bottom-left-radius:calc(var(--spacing,.0025rem)*200);border-bottom-right-radius:calc(var(--spacing,.0025rem)*200);display:inline-flex;gap:calc(var(--spacing,.0025rem)*200);height:calc(var(--spacing,.0025rem)*600);justify-self:start;padding-left:calc(var(--spacing,.0025rem)*200);padding-right:calc(var(--spacing,.0025rem)*200)}:host([pref-animation=reduce]){--private-usage-transition-duration:0s}:host([pref-contrast=more]),:host([pref-contrast=more]):host([variant=do]),:host([pref-contrast=more]):host([variant=dont]),:host([pref-contrast=more]):host([variant=warn]){--mds-usage-badge-color:rgb(var(--tone-neutral-01,255 255 255));--mds-usage-color:rgb(var(--tone-neutral-01,255 255 255))}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-usage-header-background:rgb(var(--status-info-05,112 198 234));-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=do]){--mds-usage-header-background:rgb(var(--status-success-05,107 206 147))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=dont]){--mds-usage-header-background:rgb(var(--status-error-05,250 165 160))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([variant=warn]){--mds-usage-header-background:rgb(var(--status-warning-05,237 177 0))}:host([variant=do]){--mds-usage-border-color:rgb(var(--status-success-05,107 206 147));--mds-usage-header-color:rgb(var(--status-success-10,0 69 0))}:host([variant=info]){--mds-usage-border-color:rgb(var(--status-info-05,112 198 234));--mds-usage-header-color:rgb(var(--status-info-10,0 61 103))}:host([variant=dont]){--mds-usage-border-color:rgb(var(--status-error-05,250 165 160));--mds-usage-header-color:rgb(var(--status-error-10,115 0 0))}:host([variant=warn]){--mds-usage-border-color:rgb(var(--status-warning-08,129 96 0));--mds-usage-header-color:rgb(var(--status-warning-02,255 237 185))}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-usage-transition-duration:0s}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host(:not([pref-contrast])):host([variant=do]),:host(:not([pref-contrast])):host([variant=dont]),:host(:not([pref-contrast])):host([variant=warn]),:host([pref-contrast=system]){--mds-usage-badge-color:rgb(var(--tone-neutral-01,255 255 255));--mds-usage-color:rgb(var(--tone-neutral-01,255 255 255))}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-usage-header-background:rgb(var(--status-info-05,112 198 234));-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=do]){--mds-usage-header-background:rgb(var(--status-success-05,107 206 147))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=dont]){--mds-usage-header-background:rgb(var(--status-error-05,250 165 160))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([variant=warn]){--mds-usage-header-background:rgb(var(--status-warning-05,237 177 0))}}`;
 
 const MdsUsage = class {
     constructor(hostRef) {
@@ -59,12 +60,36 @@ const MdsUsage = class {
          */
         this.variant = 'info';
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    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);
+    }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '448aa090854adc543ebd50653234aae486f21037' }, index.h("div", { key: 'be4057f81c86c7accb98a003733af802da34b454', class: "header", part: "header" }, index.h("mds-icon", { key: 'c0264f5e80cf4ef8922f62935592138f0d6de0e9', name: "mi/baseline/info", part: "icon" }), index.h("mds-text", { key: 'a30fa64ebb19c2b0187d664b153ee35dae409293', typography: "label", class: "label", part: "label" }, (_a = this.alias) !== null && _a !== void 0 ? _a : this.t.get(this.variant))), index.h("div", { key: '1d0421d1ec8d2cae52c527db24f4bd30a25bb571', class: "content", role: this.variant === 'do' || this.variant === 'info' ? 'insertion' : 'deletion' }, index.h("slot", { key: '80c342f0def0b79695703512c70ecf71da61ab3e' }))));
+        return (index.h(index.Host, { key: '85c8efc0f31d70d317575637e4c4e4584170ab10', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, index.h("div", { key: 'b13cc0c447b185362dc7d8a2587ccc3f7f260ab9', class: "header", part: "header" }, index.h("mds-icon", { key: 'f739767d950f5f3d65e0571faf1270f73fa658da', name: "mi/baseline/info", part: "icon" }), index.h("mds-text", { key: '7df4c76d59a017beadb081603a25aab194f74b52', typography: "label", class: "label", part: "label" }, (_a = this.alias) !== null && _a !== void 0 ? _a : this.t.get(this.variant))), index.h("div", { key: '1d2fd3a6c1e8a83c59b8c8819d5119e91b4870da', class: "content", role: this.variant === 'do' || this.variant === 'info' ? 'insertion' : 'deletion' }, index.h("slot", { key: 'a951eb3d2e26814d585f04d1143d588ddd008b18' }))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/mds-video-wall.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-CNuKb6Lv.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
-const mdsVideoWallCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-video-wall-noise-background-color:rgb(var(--variant-primary-03,211 226 255)/.8);--mds-video-wall-noise-background-size:auto;--mds-video-wall-video-fit:cover}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-video-wall-noise-background-size{syntax:"auto|<length>";inherits:false;initial-value:auto}@property --mds-video-wall-video-fit{syntax:"contain|cover|fill|none|scale-down";inherits:false;initial-value:cover}:host{--mds-video-wall-noise-background-color:rgb(var(--variant-primary-03,211 226 255)/.8);--mds-video-wall-noise-background-size:auto;--mds-video-wall-noise-fitler:none;--mds-video-wall-video-fit:cover;aspect-ratio:var(--aspect-video,16/9);background-color:rgb(var(--tone-neutral-02,244 244 244));display:flex;position:relative}.content{align-items:center;display:flex;justify-content:center;position:relative;z-index:3}.content,.noise,video{height:100%;width:100%}.noise,video{inset:0;position:absolute}video{-o-object-fit:var(--mds-video-wall-video-fit,cover);object-fit:var(--mds-video-wall-video-fit,cover);z-index:1}.noise{background-color:var(--mds-video-wall-noise-background-color,rgb(var(--variant-primary-03,211 226 255)/.8));background-size:var(--mds-video-wall-noise-background-size,auto);filter:var(--mds-video-wall-noise-fitler);z-index:2}.noise--classic{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAALElEQVQYV2NkwAEYoeIzGRgYtjAwMGxmYGAAs2ESvlBBkDowGyaBYSDpRgEAkLwKoa+v7O8AAAAASUVORK5CYII=)}.noise--sharp{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAOklEQVQoU2NkYGAwZoCAs2hssCAjNkFkMZACGMBqEswErMaDTEJWgNUkmBU4HYpNAYpJyI4ESWCYBAAe2A7Vb66lfAAAAABJRU5ErkJggg==)}.noise--soft{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAAOElEQVQYV2NkYGAwZoCA51BaEpnPiKTgLFQCpgHMR1aA0wQpbEYzMDCArQKZAAMoRsOsBinAawIAOXkJ1Ff0CjwAAAAASUVORK5CYII=)}.noise--tv{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMElEQVQYV2NkYGDwZcABGP8zKBuD5Bj/P4coEf0Kod8wSjH+Z5CVgki+RZc0HghJADPEICMR8Ep/AAAAAElFTkSuQmCC)}:host-context(:root.pref-animation-reduce) video{display:none}@media (prefers-reduced-motion){:host-context(:root.pref-animation-system){display:none}:host-context(:root:not([data-magma-pref])) video{display:none}}`;
+const mdsVideoWallCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-video-wall-noise-background-color:rgb(var(--variant-primary-03,211 226 255)/.8);--mds-video-wall-noise-background-size:auto;--mds-video-wall-video-fit:cover}}}:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-video-wall-noise-background-size{syntax:"auto|<length>";inherits:false;initial-value:auto}@property --mds-video-wall-video-fit{syntax:"contain|cover|fill|none|scale-down";inherits:false;initial-value:cover}:host{--mds-video-wall-noise-background-color:rgb(var(--variant-primary-03,211 226 255)/.8);--mds-video-wall-noise-background-size:auto;--mds-video-wall-noise-fitler:none;--mds-video-wall-video-fit:cover;aspect-ratio:var(--aspect-video,16/9);background-color:rgb(var(--tone-neutral-02,244 244 244));display:flex;position:relative}.content{align-items:center;display:flex;justify-content:center;position:relative;z-index:3}.content,.noise,video{height:100%;width:100%}.noise,video{inset:0;position:absolute}video{-o-object-fit:var(--mds-video-wall-video-fit,cover);object-fit:var(--mds-video-wall-video-fit,cover);z-index:1}.noise{background-color:var(--mds-video-wall-noise-background-color,rgb(var(--variant-primary-03,211 226 255)/.8));background-size:var(--mds-video-wall-noise-background-size,auto);filter:var(--mds-video-wall-noise-fitler);z-index:2}.noise--classic{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAALElEQVQYV2NkwAEYoeIzGRgYtjAwMGxmYGAAs2ESvlBBkDowGyaBYSDpRgEAkLwKoa+v7O8AAAAASUVORK5CYII=)}.noise--sharp{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAOklEQVQoU2NkYGAwZoCAs2hssCAjNkFkMZACGMBqEswErMaDTEJWgNUkmBU4HYpNAYpJyI4ESWCYBAAe2A7Vb66lfAAAAABJRU5ErkJggg==)}.noise--soft{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAAOElEQVQYV2NkYGAwZoCA51BaEpnPiKTgLFQCpgHMR1aA0wQpbEYzMDCArQKZAAMoRsOsBinAawIAOXkJ1Ff0CjwAAAAASUVORK5CYII=)}.noise--tv{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMElEQVQYV2NkYGDwZcABGP8zKBuD5Bj/P4coEf0Kod8wSjH+Z5CVgki+RZc0HghJADPEICMR8Ep/AAAAAElFTkSuQmCC)}@media (prefers-reduced-motion:reduce){video{display:none}}`;
 
 const MdsVideoWall = class {
     constructor(hostRef) {
@@ -33,7 +33,7 @@ const MdsVideoWall = class {
         this.hasContent = this.hostElement.querySelector(':scope > [slot="content"]') !== null;
     }
     render() {
-        return (index.h(index.Host, { key: '82f1f142c13168968cc0652b21612a6872ba63fe' }, this.noise !== 'none' && (index.h("div", { key: 'a6f179747d63769ec0780986754d9bd04579c39d', "aria-hidden": "true", class: clsx.clsx('noise', `noise--${this.noise}`) })), index.h("video", { key: 'b6d9b4d16a414594624c3bbf6b3c6059538c99de', "aria-hidden": "true", autoplay: this.autoplay, loop: this.loop, muted: this.muted, poster: this.poster, preload: this.preload, src: this.src }, index.h("slot", { key: '3667c4c9bc1bb1cb28dd42ef0e71841fcbc92013' })), this.hasContent && (index.h("div", { key: 'a7173bd4b5306bbbada4d875fcbc25ba1702839a', class: "content" }, index.h("slot", { key: '6f5a6425717d2ee622f53055ac3c4633392110b4', name: "content" })))));
+        return (index.h(index.Host, { key: '8f07c944028bfe470b32b16318d116b11b8182e7' }, this.noise !== 'none' && (index.h("div", { key: '98490d2cc82b65ff2e3032856af679d455820224', "aria-hidden": "true", class: clsx.clsx('noise', `noise--${this.noise}`) })), index.h("video", { key: '6a7d2ecc5a053593b111f4a7bb55a0d559f514a0', "aria-hidden": "true", autoplay: this.autoplay, loop: this.loop, muted: this.muted, poster: this.poster, preload: this.preload, src: this.src }, index.h("slot", { key: '34d12c79883050650e0cc6c4585cdf74b2f0da5f' })), this.hasContent && (index.h("div", { key: 'ce5d918aa67250207d7e81698eb0b1d40a9f6a36', class: "content" }, index.h("slot", { key: '68e82013151c87a3b265d3d2cf398e92120e9b5a', name: "content" })))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -1,15 +1,37 @@
 'use strict';
 
 var index = require('./index-CNuKb6Lv.js');
+var preference = require('./preference-BdpIXWLP.js');
 
-const mdsZeroCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-zero-contents-max-width:none;--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;@property --mds-zero-contents-max-width{syntax:"<length>|none";inherits:false;initial-value:none}:host{--mds-zero-contents-max-width:400px;border-radius:var(--radius-xl,20px);--tw-duration:.2s;--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));align-items:center;background-color:rgb(var(--tone-neutral-10,60 60 60));display:flex;flex-direction:column;gap:calc(var(--spacing,.0025rem)*600);justify-items:center;padding:calc(var(--spacing,.0025rem)*1200);transition-duration:.2s;transition-property:box-shadow,background-color;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}:host .contents{display:flex;flex-direction:column;max-width:var(--mds-zero-contents-max-width,none);place-items:center;text-align:center}:host .actions{display:flex;gap:calc(var(--spacing,.0025rem)*200);place-items:center;width:100%}:host ::slotted([slot=action]){margin:auto}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){background-color:rgb(var(--tone-neutral-09,76 76 76));-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host-context(:root.pref-contrast-more){-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@media (min-width:480px){:host{padding-inline:calc(var(--spacing,.0025rem)*600)}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){background-color:rgb(var(--tone-neutral-09,76 76 76));-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}}`;
+const mdsZeroCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-zero-contents-max-width:none;--tw-ease:initial}}}@property --mds-zero-contents-max-width{syntax:"<length>|none";inherits:false;initial-value:none}:host{--mds-zero-contents-max-width:400px;--mds-zero-transition-duration:var(--duration-200,.2s);--private-zero-transition-duration:var(--mds-zero-transition-duration);--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));align-items:center;background-color:rgb(var(--tone-neutral-10,60 60 60));border-radius:var(--radius-xl,20px);display:flex;flex-direction:column;gap:calc(var(--spacing,.0025rem)*600);justify-items:center;padding:calc(var(--spacing,.0025rem)*1200);-webkit-transition-duration:var(--private-zero-transition-duration);transition-duration:var(--private-zero-transition-duration);transition-property:box-shadow,background-color;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}:host .contents{display:flex;flex-direction:column;max-width:var(--mds-zero-contents-max-width,none);place-items:center;text-align:center}:host .actions{align-items:center;display:flex;gap:calc(var(--spacing,.0025rem)*200);justify-items:center;width:100%}:host ::slotted([slot=action]){margin:auto}:host([pref-animation=reduce]){--private-zero-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){background-color:rgb(var(--tone-neutral-09,76 76 76));-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host([pref-contrast=more]){-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --tw-ease{syntax:"*";inherits:false}@media (min-width:480px){:host{padding-inline:calc(var(--spacing,.0025rem)*600)}}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-zero-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){background-color:rgb(var(--tone-neutral-09,76 76 76));-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}}`;
 
 const MdsZero = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    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);
+    }
     render() {
-        return (index.h(index.Host, { key: '4fa8ad6a12089daefb9f6c0c92a0e8e5d4d4514d' }, index.h("slot", { key: 'b75c4e9d7b1b37a6800fe27c83dbf870bf16bb33' }), index.h("div", { key: '06800749b5440e93d5d258aa71610ebc17841624', class: "contents", part: "contents" }, index.h("slot", { key: '802d32def4e717b196e0fa1d4666d316107ef04c', name: "content" })), index.h("footer", { key: '0da9f38014efaef387026489b81050360af244e7', class: "actions", part: "actions" }, index.h("slot", { key: '91f9ec1a9a3ace90eb721768d0e54600d057cf1d', name: "action" }))));
+        return (index.h(index.Host, { key: '6313fb7bb691178754bf339cb5ed9fe35c89bf40', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, index.h("slot", { key: 'ad07044307f4d6af9674c6f3f1b7dd1e53880936' }), index.h("div", { key: '2e99ce2ac84f02d16d119ab2952cfec09d16d8c6', class: "contents", part: "contents" }, index.h("slot", { key: 'e27e04c9b63d8312de6ca2ac44db5776ba7da30b', name: "content" })), index.h("footer", { key: '77d6ffcd4e3a8cc6d1e49662bdd06d91dc020177', class: "actions", part: "actions" }, index.h("slot", { key: '7c774123d4bd3061b6901c95bf7999bf7759ea99', name: "action" }))));
     }
 };
 MdsZero.style = mdsZeroCss();

package/dist/cjs/preference-BdpIXWLP.js

@@ -0,0 +1,81 @@
+'use strict';
+
+/**
+ * Shared, reactive read-model of the `<html>` accessibility preferences
+ * (theme / contrast / animation / consumption).
+ *
+ * The `mds-pref-*` controllers remain the sole writers/authority: they publish
+ * the resolved state as a `pref-<dim>-<value>` class on `<html>` (and the
+ * Storybook accessibility panel writes the same class). This store does NOT
+ * decide anything - it mirrors that published state behind a SINGLE shared
+ * MutationObserver, so consuming components subscribe to one central channel
+ * instead of each one sniffing `<html>` on its own.
+ *
+ * Consumers bind the value to a dedicated host attribute and style off it with
+ * plain `:host([pref-<dim>='...'])` selectors (no `:host-context`).
+ */
+// Allowed values per preference, mirroring the pref-<dim>-<value> classes the
+// controllers publish. Single-axis only for now - theme is multi-axis (mode +
+// scheme) and will need a dedicated resolver when it is converted.
+const PREFERENCE_VALUES = {
+    animation: ['reduce', 'system', 'no-preference'],
+    consumption: ['low', 'medium', 'high'],
+    contrast: ['more', 'no-preference', 'system'],
+    // theme is two independent single-axis prefs: mode (mds-pref-theme) + scheme
+    // (mds-pref-theme-variant). Resolved separately, both reflected on the host.
+    theme: ['light', 'dark', 'system'],
+    'theme-scheme': ['light', 'dark', 'all'],
+};
+const listeners = new Map();
+const current = new Map();
+let observer;
+const resolve = (preference) => {
+    var _a;
+    const values = (_a = PREFERENCE_VALUES[preference]) !== null && _a !== void 0 ? _a : [];
+    const { classList } = document.documentElement;
+    return values.find((value) => classList.contains(`pref-${preference}-${value}`));
+};
+const sync = () => {
+    listeners.forEach((set, preference) => {
+        const next = resolve(preference);
+        if (next !== current.get(preference)) {
+            current.set(preference, next);
+            set.forEach((listener) => listener(next));
+        }
+    });
+};
+const ensureObserver = () => {
+    if (observer || typeof MutationObserver === 'undefined') {
+        return;
+    }
+    observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+};
+/**
+ * Subscribe to a preference. The listener is called immediately with the
+ * current value (or `undefined` when no controller has published it) and again
+ * on every change. Returns a teardown to call from `disconnectedCallback`.
+ */
+const subscribePreference = (preference, listener) => {
+    if (typeof document === 'undefined') {
+        listener(undefined);
+        return () => { };
+    }
+    ensureObserver();
+    if (!listeners.has(preference)) {
+        listeners.set(preference, new Set());
+        current.set(preference, resolve(preference));
+    }
+    const set = listeners.get(preference);
+    set === null || set === void 0 ? void 0 : set.add(listener);
+    listener(current.get(preference));
+    return () => {
+        set === null || set === void 0 ? void 0 : set.delete(listener);
+        if (set && set.size === 0) {
+            listeners.delete(preference);
+            current.delete(preference);
+        }
+    };
+};
+
+exports.subscribePreference = subscribePreference;

package/dist/collection/common/floating-controller.js

@@ -32,7 +32,7 @@ export class FloatingController {
             return inset;
         };
         this.arrowTransform = (arrowPosition) => {
-            let transformProps = this._host.arrow && this._host.visible ? 'scale(1)' : 'scale(0)';
+            let transformProps = !this._host.hideArrow && this._host.visible ? 'scale(1)' : 'scale(0)';
             switch (arrowPosition) {
                 case 'bottom':
                     transformProps = `rotate(180deg) ${transformProps} translate(0, -100%)`;
@@ -90,19 +90,19 @@ export class FloatingController {
             if (this._host.shiftPadding) {
                 config.padding = this._host.shiftPadding;
             }
-            if (this._host.autoPlacement) {
+            if (!this._host.disableAutoPlacement) {
                 middleware.push(autoPlacement());
             }
             if (this._host.offset) {
                 middleware.push(offset(this._host.offset));
             }
-            if (!this._host.autoPlacement && this._host.flip) {
+            if (this._host.disableAutoPlacement && this._host.flip) {
                 middleware.push(flip(config));
             }
-            if (this._host.shift) {
+            if (!this._host.disableShift) {
                 middleware.push(shift(config));
             }
-            if (this.arrowEl && this._host.arrow) {
+            if (this.arrowEl && !this._host.hideArrow) {
                 middleware.push(arrow({
                     element: this.arrowEl,
                     padding: this._host.arrowPadding,

package/dist/collection/common/preference.js

@@ -0,0 +1,78 @@
+/**
+ * Shared, reactive read-model of the `<html>` accessibility preferences
+ * (theme / contrast / animation / consumption).
+ *
+ * The `mds-pref-*` controllers remain the sole writers/authority: they publish
+ * the resolved state as a `pref-<dim>-<value>` class on `<html>` (and the
+ * Storybook accessibility panel writes the same class). This store does NOT
+ * decide anything - it mirrors that published state behind a SINGLE shared
+ * MutationObserver, so consuming components subscribe to one central channel
+ * instead of each one sniffing `<html>` on its own.
+ *
+ * Consumers bind the value to a dedicated host attribute and style off it with
+ * plain `:host([pref-<dim>='...'])` selectors (no `:host-context`).
+ */
+// Allowed values per preference, mirroring the pref-<dim>-<value> classes the
+// controllers publish. Single-axis only for now - theme is multi-axis (mode +
+// scheme) and will need a dedicated resolver when it is converted.
+const PREFERENCE_VALUES = {
+    animation: ['reduce', 'system', 'no-preference'],
+    consumption: ['low', 'medium', 'high'],
+    contrast: ['more', 'no-preference', 'system'],
+    // theme is two independent single-axis prefs: mode (mds-pref-theme) + scheme
+    // (mds-pref-theme-variant). Resolved separately, both reflected on the host.
+    theme: ['light', 'dark', 'system'],
+    'theme-scheme': ['light', 'dark', 'all'],
+};
+const listeners = new Map();
+const current = new Map();
+let observer;
+const resolve = (preference) => {
+    var _a;
+    const values = (_a = PREFERENCE_VALUES[preference]) !== null && _a !== void 0 ? _a : [];
+    const { classList } = document.documentElement;
+    return values.find((value) => classList.contains(`pref-${preference}-${value}`));
+};
+const sync = () => {
+    listeners.forEach((set, preference) => {
+        const next = resolve(preference);
+        if (next !== current.get(preference)) {
+            current.set(preference, next);
+            set.forEach((listener) => listener(next));
+        }
+    });
+};
+const ensureObserver = () => {
+    if (observer || typeof MutationObserver === 'undefined') {
+        return;
+    }
+    observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+};
+/**
+ * Subscribe to a preference. The listener is called immediately with the
+ * current value (or `undefined` when no controller has published it) and again
+ * on every change. Returns a teardown to call from `disconnectedCallback`.
+ */
+const subscribePreference = (preference, listener) => {
+    if (typeof document === 'undefined') {
+        listener(undefined);
+        return () => { };
+    }
+    ensureObserver();
+    if (!listeners.has(preference)) {
+        listeners.set(preference, new Set());
+        current.set(preference, resolve(preference));
+    }
+    const set = listeners.get(preference);
+    set === null || set === void 0 ? void 0 : set.add(listener);
+    listener(current.get(preference));
+    return () => {
+        set === null || set === void 0 ? void 0 : set.delete(listener);
+        if (set && set.size === 0) {
+            listeners.delete(preference);
+            current.delete(preference);
+        }
+    };
+};
+export { subscribePreference };

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

@@ -68,36 +68,36 @@
   display: grid;
 }
 
-:host-context(:root.pref-animation-reduce) {
-  --mds-accordion-duration: 0s;
-}
+/* 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. */
 
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    --mds-accordion-duration: 0s;
-  }
-}
-
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) {
+:host([pref-theme='dark']:not([pref-theme-scheme='light'])) {
   --mds-accordion-border-color: rgb(var(--tone-neutral-06, 158 158 158));
 }
 
 @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-accordion-border-color: rgb(var(--tone-neutral-06, 158 158 158));
   }
 }
 
-: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-accordion-border-color: rgb(var(--tone-neutral-01, 255 255 255));
   --mds-accordion-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-accordion-border-color: rgb(var(--tone-neutral-01, 255 255 255));
     --mds-accordion-color: rgb(var(--tone-neutral-01, 255 255 255));
   }

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

@@ -1,6 +1,7 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
- * @slot default - Add `mds-accordion-item` element/s.
+ * @slot - Add `mds-accordion-item` element/s.
  */
 export class MdsAccordion {
     constructor() {
@@ -9,9 +10,9 @@ export class MdsAccordion {
          */
         this.multiple = false;
         /**
-         * Specifies if an item can be closed by user
+         * Prevents the user from closing the currently open item, forcing at least one panel to stay expanded
          */
-        this.closable = true;
+        this.disableClose = false;
         this.queryItems = () => this.element.querySelectorAll('mds-accordion-item');
         this.selectMultipleItems = () => {
             const items = this.queryItems();
@@ -28,18 +29,44 @@ export class MdsAccordion {
         this.changedChildrenHandler = (event) => {
             const items = this.queryItems();
             if (this.multiple) {
+                if (this.disableClose && !event.detail.selected) {
+                    const isLastOpenItem = !Array.from(items).some((item) => item.id !== event.detail.id && item.selected);
+                    if (isLastOpenItem) {
+                        const target = Array.from(items).find((item) => item.id === event.detail.id);
+                        if (target) {
+                            target.selected = true;
+                        }
+                    }
+                }
                 this.selectMultipleItems();
                 return;
             }
             items.forEach((item, key) => {
                 item.selected =
-                    `item-${key}` === event.detail.id && (event.detail.selected || !this.closable);
+                    `item-${key}` === event.detail.id && (event.detail.selected || this.disableClose);
                 if (item.selected) {
                     this.changedEvent.emit({ children: items, selected: key.toString() });
                 }
             });
         };
     }
+    connectedCallback() {
+        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;
+        (_a = this.unsubscribePrefContrast) === 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);
+    }
     componentWillLoad() {
         const items = this.queryItems();
         items.forEach((item, key) => (item.id = `item-${key}`));
@@ -51,7 +78,7 @@ export class MdsAccordion {
         this.changedChildrenHandler(event);
     }
     render() {
-        return (h(Host, { key: 'b0bb67801baf50bffd334901368ec18aceb9c677' }, h("slot", { key: 'babdb382cf841a21db5099025ddfb293265a5503' })));
+        return (h(Host, { key: '291876971fed6c87a8c6644472b2fa952b7998bb', "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("slot", { key: '7779b91cd742c90cab357edb0b798c853406d722' })));
     }
     static get is() { return "mds-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -87,7 +114,7 @@ export class MdsAccordion {
                 "attribute": "multiple",
                 "defaultValue": "false"
             },
-            "closable": {
+            "disableClose": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -99,16 +126,23 @@ export class MdsAccordion {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies if an item can be closed by user"
+                    "text": "Prevents the user from closing the currently open item, forcing at least one panel to stay expanded"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "closable",
-                "defaultValue": "true"
+                "attribute": "disable-close",
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "changedEvent",

package/dist/collection/components/mds-accordion/test/mds-accordion.stories.js

@@ -2,9 +2,10 @@ import { h } from "@stencil/core";
 export default {
     title: 'UI / Accordion',
     argTypes: {
-        closable: {
+        'disable-close': {
+            name: 'disableClose',
             type: { name: 'boolean' },
-            label: 'Specifies if an item can be closed by user',
+            label: 'Prevents the user from closing the currently open item',
         },
         multiple: {
             type: { name: 'boolean' },
@@ -21,7 +22,7 @@ export const Default = {
 export const ItemNotClosable = {
     render: Template,
     args: {
-        closable: false,
+        'disable-close': true,
     },
 };
 export const Multiple = {