@muibook/components 20.0.0 → 20.1.0

package/dist/esm/components/mui-chip-rail/index.js

@@ -1,12 +1,13 @@
 import "../mui-button/index.js";
+import "../mui-chip/index.js";
 import "../mui-icons/left-chevron/index.js";
 import "../mui-icons/right-chevron/index.js";
-class n extends HTMLElement {
+class u extends HTMLElement {
   constructor() {
-    super(), this.scrollEl = null, this.slotEl = null, this.resizeObserver = null, this.mutationObserver = null, this.onScroll = () => this.syncEdges(), this.onSlotChange = () => this.syncSlottedItems(), this.onPreviousClick = () => this.scrollByPage(-1), this.onNextClick = () => this.scrollByPage(1), this.attachShadow({ mode: "open" });
+    super(), this.scrollEl = null, this.slotEl = null, this.resizeObserver = null, this.mutationObserver = null, this.onScroll = () => this.syncEdges(), this.onSlotChange = () => this.syncSlottedItems(), this.onFocusIn = (i) => this.scrollFocusedItemIntoView(i), this.onPreviousClick = () => this.scrollByPage(-1), this.onNextClick = () => this.scrollByPage(1), this.onSkipClick = () => this.skipRail(), this.onSkipKeyDown = (i) => this.handleSkipKeyDown(i), this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["size", "bleed", "bleed-inline-size", "bleed-block-size", "aria-label"];
+    return ["size", "bleed", "bleed-inline-size", "bleed-block-size", "skip-label", "aria-label"];
   }
   connectedCallback() {
     this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.syncBleed(), this.bindEvents(), this.syncSlottedItems();
@@ -14,21 +15,25 @@ class n extends HTMLElement {
   disconnectedCallback() {
     this.unbindEvents();
   }
-  attributeChangedCallback(e, i, t) {
-    if (i !== t && this.shadowRoot) {
-      if (e === "size") {
+  attributeChangedCallback(i, e, t) {
+    if (e !== t && this.shadowRoot) {
+      if (i === "size") {
         this.syncActionSizes(), this.syncSlottedItems();
         return;
       }
-      if (e === "bleed" || e === "bleed-inline-size" || e === "bleed-block-size") {
+      if (i === "bleed" || i === "bleed-inline-size" || i === "bleed-block-size") {
         this.syncBleed();
         return;
       }
-      e === "aria-label" && this.scrollEl && this.scrollEl.setAttribute("aria-label", t || "Chip rail");
+      if (i === "skip-label") {
+        this.render(), this.syncBleed(), this.bindEvents(), this.syncSlottedItems();
+        return;
+      }
+      i === "aria-label" && this.scrollEl && this.scrollEl.setAttribute("aria-label", t || "Chip rail");
     }
   }
   render() {
-    const e = this.normalizeSize(this.getAttribute("size")), i = this.getAttribute("aria-label") || "Chip rail", t = this.getIconSize(e);
+    const i = this.normalizeSize(this.getAttribute("size")), e = this.getAttribute("aria-label") || "Chip rail", t = this.getIconSize(i), l = this.getAttribute("skip-label") || "Skip";
     this.shadowRoot.innerHTML = /*html*/
     `
       <style>
@@ -42,29 +47,41 @@ class n extends HTMLElement {
           contain: inline-size;
           padding-block: var(--chip-rail-bleed-block-size);
           padding-inline: var(--chip-rail-bleed-inline-size);
-          --chip-rail-background: var(--surface-elevated-100);
+          --chip-rail-background: var(--surface);
           --chip-rail-bleed-inline-size: 0px;
           --chip-rail-bleed-block-size: 0px;
           --chip-rail-gap: var(--space-200);
+          --chip-rail-shadow-padding-block: var(--stroke-size-200);
+          --chip-rail-action-size: var(--chip-height-medium, 4rem);
           --chip-rail-edge-size: calc(var(--action-icon-only-size-medium) + var(--space-700));
+          --chip-rail-focus-scroll-margin-inline: calc(
+            var(--chip-rail-edge-size) + var(--chip-rail-bleed-inline-size) + var(--chip-rail-gap)
+          );
           --chip-rail-edge-solid: 54%;
         }
 
         :host([size="x-small"]) {
+          --chip-rail-action-size: var(--chip-height-x-small);
           --chip-rail-gap: var(--space-100);
           --chip-rail-edge-size: calc(var(--action-icon-only-size-x-small) + var(--space-500));
         }
 
         :host([size="small"]) {
+          --chip-rail-action-size: var(--chip-height-small);
           --chip-rail-gap: var(--space-100);
           --chip-rail-edge-size: calc(var(--action-icon-only-size-small) + var(--space-600));
         }
 
         :host([size="large"]) {
+          --chip-rail-action-size: var(--chip-height-large);
           --chip-rail-gap: var(--space-300);
           --chip-rail-edge-size: calc(var(--action-icon-only-size-large) + var(--space-800));
         }
 
+        :host([card-slot]) {
+          --chip-rail-background: var(--surface-elevated-100);
+        }
+
         .rail {
           position: relative;
           width: 100%;
@@ -78,6 +95,7 @@ class n extends HTMLElement {
           max-width: 100%;
           overflow-x: auto;
           overflow-y: hidden;
+          padding-block: var(--chip-rail-shadow-padding-block);
           scrollbar-width: none;
           scroll-behavior: smooth;
           overscroll-behavior-inline: contain;
@@ -87,7 +105,7 @@ class n extends HTMLElement {
           display: none;
         }
 
-        slot {
+        .items {
           display: flex;
           align-items: center;
           width: max-content;
@@ -95,15 +113,40 @@ class n extends HTMLElement {
           gap: var(--chip-rail-gap);
         }
 
+        .skip-chip,
         ::slotted(*) {
           flex: 0 0 auto;
+          scroll-margin-inline: var(--chip-rail-focus-scroll-margin-inline);
+        }
+
+        .skip-chip {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          overflow: hidden;
+          clip-path: inset(50%);
+          white-space: nowrap;
+        }
+
+        .skip-chip[hidden] {
+          display: none;
+        }
+
+        .skip-chip:focus,
+        .skip-chip:focus-visible {
+          position: static;
+          width: auto;
+          height: auto;
+          overflow: visible;
+          clip-path: none;
+          white-space: normal;
         }
 
         .edge {
           position: absolute;
           top: calc(-1 * var(--chip-rail-bleed-block-size));
           bottom: calc(-1 * var(--chip-rail-bleed-block-size));
-          z-index: 2;
+          z-index: 1;
           display: flex;
           align-items: center;
           width: calc(var(--chip-rail-edge-size) + var(--chip-rail-bleed-inline-size));
@@ -118,6 +161,27 @@ class n extends HTMLElement {
 
         .edge mui-button {
           pointer-events: auto;
+          --action-size-x-small: var(--chip-rail-action-size);
+          --action-size-small: var(--chip-rail-action-size);
+          --action-size-medium: var(--chip-rail-action-size);
+          --action-size-large: var(--chip-rail-action-size);
+          --action-icon-only-size-x-small: var(--chip-rail-action-size);
+          --action-icon-only-size-small: var(--chip-rail-action-size);
+          --action-icon-only-size-medium: var(--chip-rail-action-size);
+          --action-icon-only-size-large: var(--chip-rail-action-size);
+        }
+
+        .edge mui-button::part(height) {
+          height: var(--chip-rail-action-size);
+          min-height: var(--chip-rail-action-size);
+        }
+
+        .edge mui-button::part(width) {
+          width: var(--chip-rail-action-size);
+        }
+
+        .edge mui-button::part(padding) {
+          padding: var(--space-000);
         }
 
         .edge-start {
@@ -150,27 +214,30 @@ class n extends HTMLElement {
       </style>
 
       <div class="rail">
-        <div class="scroll" role="group" aria-label="${this.escapeAttribute(i)}">
-          <slot></slot>
-        </div>
-        <div class="edge edge-start" hidden>
-          <mui-button class="rail-action rail-action-start" variant="tertiary" size="${e}" icon-only aria-label="Previous items">
-            <mui-icon-left-chevron class="mui-icon" size="${t}"></mui-icon-left-chevron>
-          </mui-button>
+        <div class="scroll" role="group" aria-label="${this.escapeAttribute(e)}">
+          <div class="items">
+            <mui-chip class="skip-chip" variant="clickable" tabindex="-1" size="${i}" hidden aria-hidden="true">${this.escapeHtml(l)}</mui-chip>
+            <slot></slot>
+          </div>
         </div>
         <div class="edge edge-end" hidden>
-          <mui-button class="rail-action rail-action-end" variant="tertiary" size="${e}" icon-only aria-label="Next items">
+          <mui-button class="rail-action rail-action-end" variant="tertiary" size="${i}" icon-only aria-label="Next items">
             <mui-icon-right-chevron class="mui-icon" size="${t}"></mui-icon-right-chevron>
           </mui-button>
         </div>
+        <div class="edge edge-start" hidden>
+          <mui-button class="rail-action rail-action-start" variant="tertiary" size="${i}" icon-only aria-label="Previous items">
+            <mui-icon-left-chevron class="mui-icon" size="${t}"></mui-icon-left-chevron>
+          </mui-button>
+        </div>
       </div>
     `, this.scrollEl = this.shadowRoot.querySelector(".scroll"), this.slotEl = this.shadowRoot.querySelector("slot");
   }
   bindEvents() {
-    var t, s, l, r;
-    this.unbindEvents(), (t = this.scrollEl) == null || t.addEventListener("scroll", this.onScroll, { passive: !0 }), (s = this.slotEl) == null || s.addEventListener("slotchange", this.onSlotChange);
-    const e = (l = this.shadowRoot) == null ? void 0 : l.querySelector(".rail-action-start"), i = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".rail-action-end");
-    e == null || e.addEventListener("click", this.onPreviousClick), i == null || i.addEventListener("click", this.onNextClick), typeof ResizeObserver < "u" && this.scrollEl && (this.resizeObserver = new ResizeObserver(() => this.syncEdges()), this.resizeObserver.observe(this.scrollEl)), typeof MutationObserver < "u" && (this.mutationObserver = new MutationObserver(() => this.syncSlottedItems()), this.mutationObserver.observe(this, {
+    var l, o, s, r, a;
+    this.unbindEvents(), (l = this.scrollEl) == null || l.addEventListener("scroll", this.onScroll, { passive: !0 }), this.addEventListener("focusin", this.onFocusIn), (o = this.slotEl) == null || o.addEventListener("slotchange", this.onSlotChange);
+    const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".rail-action-start"), e = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".rail-action-end"), t = (a = this.shadowRoot) == null ? void 0 : a.querySelector(".skip-chip");
+    i == null || i.addEventListener("click", this.onPreviousClick), e == null || e.addEventListener("click", this.onNextClick), t == null || t.addEventListener("click", this.onSkipClick), t == null || t.addEventListener("keydown", this.onSkipKeyDown), typeof ResizeObserver < "u" && this.scrollEl && (this.resizeObserver = new ResizeObserver(() => this.syncEdges()), this.resizeObserver.observe(this.scrollEl)), typeof MutationObserver < "u" && (this.mutationObserver = new MutationObserver(() => this.syncSlottedItems()), this.mutationObserver.observe(this, {
       childList: !0,
       subtree: !0,
       attributes: !0,
@@ -178,38 +245,71 @@ class n extends HTMLElement {
     })), requestAnimationFrame(() => this.syncEdges());
   }
   unbindEvents() {
-    var e, i, t, s, l, r, a, o;
-    (e = this.scrollEl) == null || e.removeEventListener("scroll", this.onScroll), (i = this.slotEl) == null || i.removeEventListener("slotchange", this.onSlotChange), (s = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".rail-action-start")) == null || s.removeEventListener("click", this.onPreviousClick), (r = (l = this.shadowRoot) == null ? void 0 : l.querySelector(".rail-action-end")) == null || r.removeEventListener("click", this.onNextClick), (a = this.resizeObserver) == null || a.disconnect(), (o = this.mutationObserver) == null || o.disconnect(), this.resizeObserver = null, this.mutationObserver = null;
+    var i, e, t, l, o, s, r, a, n, c, h, d;
+    (i = this.scrollEl) == null || i.removeEventListener("scroll", this.onScroll), this.removeEventListener("focusin", this.onFocusIn), (e = this.slotEl) == null || e.removeEventListener("slotchange", this.onSlotChange), (l = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".rail-action-start")) == null || l.removeEventListener("click", this.onPreviousClick), (s = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".rail-action-end")) == null || s.removeEventListener("click", this.onNextClick), (a = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".skip-chip")) == null || a.removeEventListener("click", this.onSkipClick), (c = (n = this.shadowRoot) == null ? void 0 : n.querySelector(".skip-chip")) == null || c.removeEventListener("keydown", this.onSkipKeyDown), (h = this.resizeObserver) == null || h.disconnect(), (d = this.mutationObserver) == null || d.disconnect(), this.resizeObserver = null, this.mutationObserver = null;
   }
   syncSlottedItems() {
     var t;
-    const e = this.normalizeSize(this.getAttribute("size")), i = (t = this.slotEl) == null ? void 0 : t.assignedElements({ flatten: !0 });
-    i == null || i.forEach((s) => {
-      s.tagName.toLowerCase() === "mui-chip" && s.getAttribute("size") !== e && s.setAttribute("size", e);
+    const i = this.normalizeSize(this.getAttribute("size")), e = (t = this.slotEl) == null ? void 0 : t.assignedElements({ flatten: !0 });
+    e == null || e.forEach((l) => {
+      l.tagName.toLowerCase() === "mui-chip" && l.getAttribute("size") !== i && l.setAttribute("size", i);
     }), requestAnimationFrame(() => this.syncEdges());
   }
   syncActionSizes() {
-    var t, s;
-    const e = this.normalizeSize(this.getAttribute("size")), i = this.getIconSize(e);
-    (t = this.shadowRoot) == null || t.querySelectorAll("mui-button.rail-action").forEach((l) => {
-      l.setAttribute("size", e);
-    }), (s = this.shadowRoot) == null || s.querySelectorAll(".rail-action .mui-icon").forEach((l) => {
-      l.setAttribute("size", i);
-    });
+    var t, l, o, s;
+    const i = this.normalizeSize(this.getAttribute("size")), e = this.getIconSize(i);
+    (t = this.shadowRoot) == null || t.querySelectorAll("mui-button.rail-action").forEach((r) => {
+      r.setAttribute("size", i);
+    }), (l = this.shadowRoot) == null || l.querySelectorAll(".rail-action .mui-icon").forEach((r) => {
+      r.setAttribute("size", e);
+    }), (s = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".skip-chip")) == null || s.setAttribute("size", i);
   }
   syncEdges() {
     var r, a;
     if (!this.scrollEl || !this.shadowRoot) return;
-    const e = Math.max(0, this.scrollEl.scrollWidth - this.scrollEl.clientWidth), i = this.scrollEl.scrollLeft, t = e > 1, s = t && i > 1, l = t && i < e - 1;
-    (r = this.shadowRoot.querySelector(".edge-start")) == null || r.toggleAttribute("hidden", !s), (a = this.shadowRoot.querySelector(".edge-end")) == null || a.toggleAttribute("hidden", !l);
+    const i = Math.max(0, this.scrollEl.scrollWidth - this.scrollEl.clientWidth), e = this.scrollEl.scrollLeft, t = i > 1, l = t && e > 1, o = t && e < i - 1, s = this.shadowRoot.querySelector(".skip-chip");
+    (r = this.shadowRoot.querySelector(".edge-start")) == null || r.toggleAttribute("hidden", !l), (a = this.shadowRoot.querySelector(".edge-end")) == null || a.toggleAttribute("hidden", !o), s == null || s.toggleAttribute("hidden", !t), s == null || s.setAttribute("aria-hidden", t ? "false" : "true"), s == null || s.setAttribute("tabindex", t ? "0" : "-1");
   }
   syncBleed() {
     this.style.setProperty("--chip-rail-bleed-inline-size", this.getBleedInlineValue()), this.style.setProperty("--chip-rail-bleed-block-size", this.getBleedBlockValue());
   }
-  scrollByPage(e) {
+  scrollByPage(i) {
     if (!this.scrollEl) return;
-    const i = Math.max(this.scrollEl.clientWidth * 0.72, 120);
-    this.scrollEl.scrollBy({ left: i * e, behavior: "smooth" });
+    const e = Math.max(this.scrollEl.clientWidth * 0.72, 120);
+    this.scrollEl.scrollBy({ left: e * i, behavior: "smooth" });
+  }
+  skipRail() {
+    var s, r;
+    const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".rail-action-start"), e = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".rail-action-end"), t = i && !i.closest("[hidden]") ? i : e;
+    if (t) {
+      this.focusRailAction(t);
+      return;
+    }
+    const o = Array.from(
+      document.querySelectorAll(
+        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter((a) => !a.hasAttribute("disabled") && !a.closest("[hidden]") && !a.closest("[inert]")).find(
+      (a) => !!(this.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_FOLLOWING) && !this.contains(a)
+    );
+    o == null || o.focus();
+  }
+  handleSkipKeyDown(i) {
+    const e = i;
+    e.key !== "Enter" && e.key !== " " || (e.preventDefault(), this.skipRail());
+  }
+  focusRailAction(i) {
+    var t;
+    (((t = i.shadowRoot) == null ? void 0 : t.querySelector("button")) || i).focus();
+  }
+  scrollFocusedItemIntoView(i) {
+    var t;
+    const e = i.target;
+    e instanceof HTMLElement && ((t = this.shadowRoot) != null && t.contains(e) || this.contains(e) && e.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "nearest"
+    }));
   }
   getBleedInlineValue() {
     return this.normalizeBleedValue(this.getAttribute("bleed-inline-size") || this.getAttribute("bleed"));
@@ -217,23 +317,26 @@ class n extends HTMLElement {
   getBleedBlockValue() {
     return this.normalizeBleedValue(this.getAttribute("bleed-block-size"));
   }
-  normalizeBleedValue(e) {
-    const i = (e || "0").trim(), t = /* @__PURE__ */ new Set(["000", "025", "050", "100", "200", "300", "400", "500", "600", "700", "800"]);
-    return !i || i === "0" || i === "none" || i === "false" ? "0px" : t.has(i) ? `var(--space-${i})` : i;
+  normalizeBleedValue(i) {
+    const e = (i || "0").trim(), t = /* @__PURE__ */ new Set(["000", "025", "050", "100", "200", "300", "400", "500", "600", "700", "800"]);
+    return !e || e === "0" || e === "none" || e === "false" ? "0px" : t.has(e) ? `var(--space-${e})` : e;
   }
-  normalizeSize(e) {
-    return e && (/* @__PURE__ */ new Set(["x-small", "small", "medium", "large"])).has(e) ? e : "medium";
+  normalizeSize(i) {
+    return i && (/* @__PURE__ */ new Set(["x-small", "small", "medium", "large"])).has(i) ? i : "medium";
   }
-  getIconSize(e) {
+  getIconSize(i) {
     return {
       "x-small": "x-small",
       small: "x-small",
       medium: "medium",
       large: "large"
-    }[e] || "medium";
+    }[i] || "medium";
+  }
+  escapeAttribute(i) {
+    return i.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
   }
-  escapeAttribute(e) {
-    return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+  escapeHtml(i) {
+    return i.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
 }
-customElements.get("mui-chip-rail") || customElements.define("mui-chip-rail", n);
+customElements.get("mui-chip-rail") || customElements.define("mui-chip-rail", u);

package/dist/esm/components/mui-code/index.js

@@ -1,6 +1,6 @@
-class i extends HTMLElement {
+class o extends HTMLElement {
   static get observedAttributes() {
-    return ["size", "scrollable", "wrap"];
+    return ["size", "scrollable", "wrap", "inline"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
@@ -13,11 +13,18 @@ class i extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    const t = this.hasAttribute("scrollable"), e = this.hasAttribute("wrap"), o = (
+    const t = this.hasAttribute("scrollable"), e = this.hasAttribute("wrap"), i = (
       /*css*/
       `
       :host {
         display: grid;
+        --code-background: var(--surface-elevated-100);
+      }
+      :host([inline]) {
+        display: inline;
+      }
+      :host([card-slot]) {
+        --code-background: var(--surface-elevated-200);
       }
       :host([size="x-small"]) code {
         font-size: var(--text-font-size-xs);
@@ -41,7 +48,6 @@ class i extends HTMLElement {
         font-family: monospace;
         color: var(--code-text-color, var(--text-color));
         background: var(--code-background);
-        padding: var(--space-400) var(--space-500);
         box-sizing: border-box;
         width: 100%;
         overflow-x: ${e ? "hidden" : t ? "auto" : "visible"};
@@ -50,13 +56,26 @@ class i extends HTMLElement {
         word-break: ${e ? "break-word" : "normal"};
       }
 
+      :host(:not([inline])) code {
+        padding: var(--space-400) var(--space-500);
+      }
+
+      :host([inline]) code {
+        display: inline-block;
+        vertical-align: baseline;
+        padding: var(--space-050) var(--space-100);
+        width: auto;
+        overflow-x: visible;
+        white-space: ${e ? "pre-wrap" : "nowrap"};
+      }
+
       code:focus-visible {
         outline: ${t && !e ? "var(--outline-thick)" : "none"};
         outline-offset: ${t && !e ? "calc(-1 * var(--stroke-size-500))" : "none"};
       }
 
       @media (min-width: 600px) {
-        code {
+        :host(:not([inline])) code {
           padding: var(--space-500) var(--space-600);
         } 
       }
@@ -65,9 +84,9 @@ class i extends HTMLElement {
     );
     this.shadowRoot.innerHTML = /*html*/
     `
-      <style>${o}</style>
+      <style>${i}</style>
       <code><slot></slot></code>
-  `;
+    `;
   }
 }
-customElements.get("mui-code") || customElements.define("mui-code", i);
+customElements.get("mui-code") || customElements.define("mui-code", o);

package/dist/esm/components/mui-container/index.js

@@ -1,57 +1,80 @@
-class e extends HTMLElement {
+class i extends HTMLElement {
+  static get observedAttributes() {
+    return ["width"];
+  }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    let t = (
-      /*html*/
-      `
-    <style>
+    this.syncWidth(), this.render();
+  }
+  attributeChangedCallback() {
+    this.syncWidth();
+  }
+  getWidthValue() {
+    var e;
+    const t = (e = this.getAttribute("width")) == null ? void 0 : e.trim();
+    return t ? CSS.supports("max-width", t) ? t : /^\d+(\.\d+)?$/.test(t) ? `${Number(t) / 10}rem` : "" : "";
+  }
+  syncWidth() {
+    const t = this.getWidthValue();
+    if (t) {
+      this.style.setProperty("--container-max-width", t);
+      return;
+    }
+    this.style.removeProperty("--container-max-width");
+  }
+  render() {
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+          width: 95%;
+          width: calc(100% - 4.8rem);
+          max-width: var(--container-max-width, 118rem);
+          padding-top: 2.4rem;
+          padding-bottom: 2.4rem;
+          min-width: 27.2rem;
+          margin: 0 2.4rem;
+        }
 
-      :host {
-        display: block;
-        width: 95%;
-        width: calc( 100% - 4.8rem );
-        max-width: 118.0rem;
-        padding-top: 2.4rem;
-        padding-bottom: 2.4rem;
-        min-width: 27.2rem;
-        margin: 0 2.4rem; }
+        :host([center]) {
+          margin: 0 auto;
+        }
 
-      /* Center
-      ========================================= */
-      :host([center]) {
-        margin: 0 auto; }
-      /* ===================================== */
+        :host([fluid]),
+        :host([size="fluid"]) {
+          --container-max-width: 100%;
+        }
 
-      /* Fluid
-      ========================================= */
-      :host([fluid]) {
-        max-width: 100%; }
-      /* ===================================== */
+        :host([small]),
+        :host([size="small"]) {
+          --container-max-width: 54rem;
+        }
 
-      /* Small
-      ========================================= */
-      :host([small]) {
-        max-width: 54.0rem; }
-      /* ===================================== */
+        :host([medium]),
+        :host([size="medium"]) {
+          --container-max-width: 70rem;
+        }
 
-      /* Medium
-      ========================================= */
-      :host([medium]) {
-        max-width: 70.0rem; }
-      /* ===================================== */
+        :host([x-medium]),
+        :host([size="x-medium"]) {
+          --container-max-width: 96rem;
+        }
 
-      /* Large
-      ========================================= */
-      :host([large]) {
-        max-width: 118.0rem; }
-      /* ===================================== */
-    </style>
-    <slot></slot>
-    `
-    );
-    this.shadowRoot && (this.shadowRoot.innerHTML = t);
+        :host([large]),
+        :host([size="large"]) {
+          --container-max-width: 118rem;
+        }
+
+        :host([x-large]),
+        :host([size="x-large"]) {
+          --container-max-width: 148rem;
+        }
+      </style>
+      <slot></slot>
+    `);
   }
 }
-customElements.get("mui-container") || customElements.define("mui-container", e);
+customElements.get("mui-container") || customElements.define("mui-container", i);