@muibook/components 19.6.0 → 20.1.0

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

@@ -0,0 +1,342 @@
+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 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.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", "skip-label", "aria-label"];
+  }
+  connectedCallback() {
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.syncBleed(), this.bindEvents(), this.syncSlottedItems();
+  }
+  disconnectedCallback() {
+    this.unbindEvents();
+  }
+  attributeChangedCallback(i, e, t) {
+    if (e !== t && this.shadowRoot) {
+      if (i === "size") {
+        this.syncActionSizes(), this.syncSlottedItems();
+        return;
+      }
+      if (i === "bleed" || i === "bleed-inline-size" || i === "bleed-block-size") {
+        this.syncBleed();
+        return;
+      }
+      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 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>
+        :host {
+          display: block;
+          box-sizing: border-box;
+          width: 100%;
+          min-width: 0;
+          max-width: 100%;
+          overflow: hidden;
+          contain: inline-size;
+          padding-block: var(--chip-rail-bleed-block-size);
+          padding-inline: var(--chip-rail-bleed-inline-size);
+          --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%;
+          min-width: 0;
+          max-width: 100%;
+        }
+
+        .scroll {
+          width: 100%;
+          min-width: 0;
+          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;
+        }
+
+        .scroll::-webkit-scrollbar {
+          display: none;
+        }
+
+        .items {
+          display: flex;
+          align-items: center;
+          width: max-content;
+          min-width: max-content;
+          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: 1;
+          display: flex;
+          align-items: center;
+          width: calc(var(--chip-rail-edge-size) + var(--chip-rail-bleed-inline-size));
+          pointer-events: none;
+          opacity: 1;
+          transition: opacity var(--speed-200) ease;
+        }
+
+        .edge[hidden] {
+          display: none;
+        }
+
+        .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 {
+          left: calc(-1 * var(--chip-rail-bleed-inline-size));
+          justify-content: flex-start;
+          padding-inline-start: var(--chip-rail-bleed-inline-size);
+          background:
+            linear-gradient(
+              90deg,
+              var(--chip-rail-background) 0%,
+              var(--chip-rail-background) var(--chip-rail-edge-solid),
+              color-mix(in srgb, var(--chip-rail-background) 68%, transparent) 78%,
+              transparent 100%
+            );
+        }
+
+        .edge-end {
+          right: calc(-1 * var(--chip-rail-bleed-inline-size));
+          justify-content: flex-end;
+          padding-inline-end: var(--chip-rail-bleed-inline-size);
+          background:
+            linear-gradient(
+              270deg,
+              var(--chip-rail-background) 0%,
+              var(--chip-rail-background) var(--chip-rail-edge-solid),
+              color-mix(in srgb, var(--chip-rail-background) 68%, transparent) 78%,
+              transparent 100%
+            );
+        }
+      </style>
+
+      <div class="rail">
+        <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="${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 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,
+      attributeFilter: ["hidden", "size"]
+    })), requestAnimationFrame(() => this.syncEdges());
+  }
+  unbindEvents() {
+    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 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, 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 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(i) {
+    if (!this.scrollEl) return;
+    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"));
+  }
+  getBleedBlockValue() {
+    return this.normalizeBleedValue(this.getAttribute("bleed-block-size"));
+  }
+  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(i) {
+    return i && (/* @__PURE__ */ new Set(["x-small", "small", "medium", "large"])).has(i) ? i : "medium";
+  }
+  getIconSize(i) {
+    return {
+      "x-small": "x-small",
+      small: "x-small",
+      medium: "medium",
+      large: "large"
+    }[i] || "medium";
+  }
+  escapeAttribute(i) {
+    return i.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", u);

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

@@ -1,6 +1,6 @@
-class s extends HTMLElement {
+class o extends HTMLElement {
   static get observedAttributes() {
-    return ["size", "scrollable", "wrap"];
+    return ["size", "scrollable", "wrap", "inline"];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
@@ -18,6 +18,13 @@ class s extends HTMLElement {
       `
       :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);
@@ -39,9 +46,8 @@ class s extends HTMLElement {
         display: block;
         border-radius: inherit;
         font-family: monospace;
-        color: var(--text-color);
+        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 s 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);
         } 
       }
@@ -67,7 +86,7 @@ class s extends HTMLElement {
     `
       <style>${i}</style>
       <code><slot></slot></code>
-  `;
+    `;
   }
 }
-customElements.get("mui-code") || customElements.define("mui-code", s);
+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);