@muibook/components 19.6.0 → 20.1.0

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

@@ -1,14 +1,31 @@
-import { getPartMap as b } from "../../utils/part-map/index.js";
-class h extends HTMLElement {
+import { getPartMap as f } from "../../utils/part-map/index.js";
+class g extends HTMLElement {
   static get observedAttributes() {
-    return ["onclick", "type", "aria-label", "disabled", "variant", "size", "usage"];
+    return [
+      "onclick",
+      "type",
+      "aria-label",
+      "disabled",
+      "pending",
+      "variant",
+      "stroke",
+      "stroke-ring-size",
+      "focus-ring",
+      "size",
+      "usage"
+    ];
   }
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
+  focus(t) {
+    var e;
+    const o = (e = this.shadowRoot) == null ? void 0 : e.querySelector("button");
+    o ? o.focus(t) : super.focus(t);
+  }
   async connectedCallback() {
-    if (this.hasAttribute("size") || this.setAttribute("size", "medium"), await this.waitForPartMap(), !this.shadowRoot) return;
-    let t = (
+    if (this.hasAttribute("size") || this.setAttribute("size", "medium"), this.syncRingSizeAttribute(), await this.waitForPartMap(), !this.shadowRoot) return;
+    let o = (
       /*html*/
       `
     <style>
@@ -18,6 +35,9 @@ class h extends HTMLElement {
       display: inline-block;
       width: auto;
       text-align: center;
+      --action-focus-outline: var(--stroke-size-400) var(--stroke-outset) var(--outline-color);
+      --action-focus-outline-inset-offset: var(--stroke-size-400);
+      --action-focus-outline-offset: calc(-1 * var(--action-focus-outline-inset-offset));
     }
     button {
       vertical-align: baseline;
@@ -26,6 +46,7 @@ class h extends HTMLElement {
       width: 100%;
       border-radius: var(--action-radius-medium);
       padding: var(--action-padding);
+      min-height: var(--action-size-medium);
       text-decoration: none;
       line-height: var(--action-line-height);
       display: inherit;
@@ -64,10 +85,19 @@ class h extends HTMLElement {
       cursor: not-allowed;
     }
 
+    :host([pending]) {
+      pointer-events: none;
+    }
+
+    :host([pending]) button {
+      cursor: progress;
+    }
+
     button, button:before, button:after {box-sizing: border-box;}
 
     button:focus-visible {
-      outline: var(--outline-thick);
+      outline: var(--action-focus-outline);
+      outline-offset: var(--action-focus-outline-offset);
     }
 
     :host button ::slotted(.mui-icon) { fill: var(--action-primary-text-color); }
@@ -245,14 +275,83 @@ class h extends HTMLElement {
     :host([variant="attention"]) button:focus-visible ::slotted(.mui-icon) { fill: var(--action-attention-text-color-focus); }
     :host([variant="attention"]) button:disabled ::slotted(.mui-icon) { fill: var(--action-attention-text-color-disabled); }
 
+    :host,
+    :host([variant="primary"]) {
+      --action-ring-color: var(--action-primary-border-color);
+      --action-ring-color-hover: var(--action-primary-border-color-hover);
+      --action-ring-color-focus: var(--action-primary-border-color-focus);
+      --action-ring-color-disabled: var(--action-primary-border-color-disabled);
+    }
+
+    :host([variant="secondary"]) {
+      --action-ring-color: var(--action-secondary-border-color);
+      --action-ring-color-hover: var(--action-secondary-border-color-hover);
+      --action-ring-color-focus: var(--action-secondary-border-color-focus);
+      --action-ring-color-disabled: var(--action-secondary-border-color-disabled);
+    }
+
+    :host([variant="tertiary"]) {
+      --action-ring-color: var(--action-tertiary-border-color);
+      --action-ring-color-hover: var(--action-tertiary-border-color-hover);
+      --action-ring-color-focus: var(--action-tertiary-border-color-focus);
+      --action-ring-color-disabled: var(--action-tertiary-border-color-disabled);
+    }
+
+    :host([variant="overlay"]) {
+      --action-ring-size: var(--stroke-size-100);
+      --action-ring-color: var(--action-overlay-border-color);
+      --action-ring-color-hover: var(--action-overlay-border-color-hover);
+      --action-ring-color-focus: var(--action-overlay-border-color-focus);
+      --action-ring-color-disabled: var(--action-overlay-border-color-disabled);
+    }
+
+    :host([variant="attention"]) {
+      --action-ring-color: var(--action-attention-border-color);
+      --action-ring-color-hover: var(--action-attention-border-color-hover);
+      --action-ring-color-focus: var(--action-attention-border-color-focus);
+      --action-ring-color-disabled: var(--action-attention-border-color-disabled);
+    }
+
+    :host([stroke="ring"]:not([usage="input"])) button {
+      border: none;
+      box-shadow: var(
+        --action-ring-shadow,
+        inset 0 0 0 var(--action-ring-size, var(--stroke-size-100)) var(--action-ring-color)
+      );
+    }
+
+    :host([stroke="ring"]:not([usage="input"])) button:hover {
+      border: none;
+      box-shadow: var(
+        --action-ring-shadow-hover,
+        inset 0 0 0 var(--action-ring-size, var(--stroke-size-100)) var(--action-ring-color-hover)
+      );
+    }
+
+    :host([stroke="ring"]:not([usage="input"])) button:focus-visible {
+      border: none;
+      box-shadow: var(
+        --action-ring-shadow-focus,
+        inset 0 0 0 var(--action-ring-size, var(--stroke-size-100)) var(--action-ring-color-focus)
+      );
+    }
+
+    :host([stroke="ring"]:not([usage="input"])) button:disabled {
+      border: none;
+      box-shadow: var(
+        --action-ring-shadow-disabled,
+        inset 0 0 0 var(--action-ring-size, var(--stroke-size-100)) var(--action-ring-color-disabled)
+      );
+    }
+
     /* Icon only
     ========================================= */
     :host([icon-only]) button {
       display: flex;
       justify-content: center;
       align-items: center;
-      height: var(--action-icon-only-size);
-      width: var(--action-icon-only-size);
+      height: var(--action-size-medium);
+      width: var(--action-size-medium);
       padding: var(--action-icon-only-padding);
     }
     /* ===================================== */
@@ -475,9 +574,10 @@ class h extends HTMLElement {
     :host([size="xx-small"]) button:hover,
     :host([size="xx-small"]) button:focus,
     :host([size="xx-small"]) button:disabled {
-      font-size: var(--font-size-15);
-      line-height: var(--line-height-25);
+      font-size: var(--text-font-size-xxs);
+      line-height: var(--text-line-height-xxs);
       font-weight: var(--font-weight-semi-bold);
+      min-height: var(--action-size-xx-small);
       padding: var(--space-025) var(--space-100);
       border-width: var(--stroke-size-100);
       border-radius: var(--action-radius-x-small);
@@ -490,6 +590,7 @@ class h extends HTMLElement {
       font-size: var(--text-font-size-xs);
       line-height: var(--text-line-height-xs);
       font-weight: var(--font-weight-semi-bold);
+      min-height: var(--action-size-x-small);
       padding: var(--action-padding-x-small);
       border-width: var(--stroke-size-100);
       border-radius: var(--action-radius-x-small);
@@ -498,6 +599,7 @@ class h extends HTMLElement {
     :host([size="small"]) button {
       font-size: var(--text-font-size-s);
       line-height: var(--text-line-height-s);
+      min-height: var(--action-size-small);
       padding: var(--action-padding-small);
       border-radius: var(--action-radius-small);
     }
@@ -505,12 +607,14 @@ class h extends HTMLElement {
     :host([size="medium"]) button {
       font-size: var(--text-font-size-m);
       line-height: var(--text-line-height-m);
+      min-height: var(--action-size-medium);
       border-radius: var(--action-radius-medium);
     }
 
     :host([size="large"]) button {
       font-size: var(--text-font-size-l);
       line-height: var(--text-line-height-l);
+      min-height: var(--action-size-large);
       padding: var(--action-padding-large);
       border-radius: var(--action-radius-large);
     }
@@ -560,26 +664,26 @@ class h extends HTMLElement {
     }
 
     :host([size="xx-small"][icon-only]) button {
-      height: calc(var(--action-icon-only-size-x-small) - var(--space-100));
-      width: calc(var(--action-icon-only-size-x-small) - var(--space-100));
+      height: var(--action-size-xx-small);
+      width: var(--action-size-xx-small);
       padding: var(--action-icon-only-padding);
     }
 
     :host([size="x-small"][icon-only]) button {
-      height: var(--action-icon-only-size-x-small);
-      width: var(--action-icon-only-size-x-small);
+      height: var(--action-size-x-small);
+      width: var(--action-size-x-small);
       padding: var(--action-icon-only-padding);
     }
 
     :host([size="small"][icon-only]) button {
-      height: var(--action-icon-only-size-small);
-      width: var(--action-icon-only-size-small);
+      height: var(--action-size-small);
+      width: var(--action-size-small);
       padding: var(--action-icon-only-padding);
     }
 
     :host([size="large"][icon-only]) button {
-      height: var(--action-icon-only-size-large);
-      width: var(--action-icon-only-size-large);
+      height: var(--action-size-large);
+      width: var(--action-size-large);
       padding: var(--action-icon-only-padding);
     }
 
@@ -676,8 +780,9 @@ class h extends HTMLElement {
       min-width: 0;
       min-height: 0;
       padding: var(--space-000);
-      border: none;
+      border: var(--action-avatar-border, none);
       background: transparent;
+      box-shadow: var(--action-avatar-shadow, none);
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -691,14 +796,76 @@ class h extends HTMLElement {
       margin-left: var(--space-000);
     }
 
+    :host([has-avatar-chip]) {
+      display: inline-flex;
+      width: auto;
+      text-align: left;
+    }
+
+    :host([has-avatar-chip]) button {
+      display: inline-flex;
+      width: auto;
+      min-width: 0;
+      align-items: center;
+      justify-content: flex-start;
+      text-align: left;
+    }
+
+    :host([has-avatar-chip][size="x-small"]) button {
+      padding-left: var(--space-100);
+    }    
+    :host([has-avatar-chip][size="small"]) button {
+      padding-left: var(--space-200);
+    }
+    :host([has-avatar-chip][size="medium"]) button {
+      padding-left: var(--space-300);
+    }
+    :host([has-avatar-chip][size="large"]) button {
+      padding-left: var(--space-400);
+    }
+
+    :host([has-video]) {
+      display: inline-block;
+      width: auto;
+      text-align: initial;
+    }
+
+    :host([has-video]) button,
+    :host([has-video]) button:hover,
+    :host([has-video]) button:focus,
+    :host([has-video]) button:focus-visible,
+    :host([has-video]) button:disabled {
+      display: block;
+      width: 100%;
+      min-height: 0;
+      padding: var(--space-000);
+      border: none;
+      border-radius: var(--radius-000);
+      background: transparent;
+      color: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      text-align: initial;
+      box-shadow: none;
+      outline-offset: var(--video-thumbnail-action-focus-outline-offset, var(--space-300));
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+
+    :host([focus-ring="outset"]) button:focus-visible {
+      outline-offset: var(--action-focus-outline-outset-offset, var(--stroke-size-200));
+    }
+
 
     </style>
 
     <button 
-      part="${b("text", "spacing", "layout", "visual")}"
+      part="${f("text", "spacing", "layout", "visual")}"
       onclick="${this.getAttribute("onclick")}" 
       type="${this.getAttribute("type") || "button"}" 
       aria-label="${this.getAttribute("aria-label") || ""}"
+      aria-busy="${this.hasAttribute("pending") ? "true" : "false"}"
       ${this.hasAttribute("disabled") ? "disabled" : ""}
     >
       <slot name="before"></slot>
@@ -708,104 +875,124 @@ class h extends HTMLElement {
 
     `
     );
-    this.shadowRoot.innerHTML = t, await customElements.whenDefined("mui-button"), [
+    this.shadowRoot.innerHTML = o;
+    const e = this.shadowRoot.querySelector("button");
+    e == null || e.addEventListener("click", (a) => {
+      this.hasAttribute("pending") && (a.preventDefault(), a.stopImmediatePropagation());
+    }), await customElements.whenDefined("mui-button"), [
       this.shadowRoot.querySelector("slot:not([name])"),
       this.shadowRoot.querySelector('slot[name="before"]'),
       this.shadowRoot.querySelector('slot[name="after"]')
-    ].forEach((r) => r == null ? void 0 : r.addEventListener("slotchange", () => this.syncButtonState())), requestAnimationFrame(() => this.syncButtonState());
+    ].forEach((a) => a == null ? void 0 : a.addEventListener("slotchange", () => this.syncButtonState())), requestAnimationFrame(() => this.syncButtonState());
   }
-  attributeChangedCallback(o, t, n) {
-    var r;
-    if (o === "disabled") {
-      const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("button");
-      e && (this.hasAttribute("disabled") ? e.setAttribute("disabled", "") : e.removeAttribute("disabled"));
+  attributeChangedCallback(t, o, e) {
+    var s, a;
+    if (t === "disabled") {
+      const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector("button");
+      i && (this.hasAttribute("disabled") ? i.setAttribute("disabled", "") : i.removeAttribute("disabled"));
     }
-    o === "size" && t !== n && this.shadowRoot && requestAnimationFrame(() => this.syncButtonState());
+    if (t === "pending") {
+      const i = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button");
+      i && i.setAttribute("aria-busy", this.hasAttribute("pending") ? "true" : "false");
+    }
+    t === "size" && o !== e && this.shadowRoot && requestAnimationFrame(() => this.syncButtonState()), t === "stroke-ring-size" && o !== e && this.syncRingSizeAttribute();
+  }
+  syncRingSizeAttribute() {
+    var s;
+    const t = (s = this.getAttribute("stroke-ring-size")) == null ? void 0 : s.trim();
+    if (!t) {
+      this.style.removeProperty("--action-ring-size");
+      return;
+    }
+    const o = t.startsWith("stroke-size-") ? t.replace("stroke-size-", "") : t, e = /^(100|200|300|400|500)$/.test(o);
+    this.style.setProperty("--action-ring-size", e ? `var(--stroke-size-${o})` : t);
   }
   syncButtonState() {
-    const o = this.shadowRoot;
-    if (!o) return;
-    const t = o.querySelector("slot:not([name])"), n = o.querySelector('slot[name="before"]'), r = o.querySelector('slot[name="after"]'), e = (a) => a ? a.assignedNodes({ flatten: !0 }).some((i) => {
-      var d;
-      return i.nodeType === Node.ELEMENT_NODE || i.nodeType === Node.TEXT_NODE && !!((d = i.textContent) != null && d.trim());
-    }) : !1, s = e(n), l = e(r);
-    this.toggleAttribute("has-before", s), this.toggleAttribute("has-after", l);
-    const c = (t == null ? void 0 : t.assignedNodes({ flatten: !0 })) ?? [], v = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], u = v.length === 1 && v[0].tagName.toLowerCase() === "mui-avatar" && c.every((a) => {
-      var i;
-      return a.nodeType === Node.TEXT_NODE ? !((i = a.textContent) != null && i.trim()) : a.nodeType === Node.ELEMENT_NODE ? a.tagName.toLowerCase() === "mui-avatar" : !1;
+    const t = this.shadowRoot;
+    if (!t) return;
+    const o = t.querySelector("slot:not([name])"), e = t.querySelector('slot[name="before"]'), s = t.querySelector('slot[name="after"]'), a = (r) => r ? r.assignedNodes({ flatten: !0 }).some((n) => {
+      var c;
+      return n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && !!((c = n.textContent) != null && c.trim());
+    }) : !1, i = a(e), l = a(s);
+    this.toggleAttribute("has-before", i), this.toggleAttribute("has-after", l);
+    const d = (o == null ? void 0 : o.assignedNodes({ flatten: !0 })) ?? [], u = (o == null ? void 0 : o.assignedElements({ flatten: !0 })) ?? [], b = u.some((r) => r.tagName.toLowerCase() === "mui-video-thumbnail"), h = u.some((r) => r.tagName.toLowerCase() === "mui-avatar-chip");
+    this.toggleAttribute("has-video", b), this.toggleAttribute("has-avatar-chip", h);
+    const v = !b && !h && u.length === 1 && u[0].tagName.toLowerCase() === "mui-avatar" && d.every((r) => {
+      var n;
+      return r.nodeType === Node.TEXT_NODE ? !((n = r.textContent) != null && n.trim()) : r.nodeType === Node.ELEMENT_NODE ? r.tagName.toLowerCase() === "mui-avatar" : !1;
     });
-    if (this.toggleAttribute("avatar-only", u), !u && c.every((a) => {
-      var i;
-      if (a.nodeType === Node.ELEMENT_NODE) {
-        const d = a;
-        return d.tagName.toLowerCase() === "svg" || d.classList.contains("mui-icon");
+    if (this.toggleAttribute("avatar-only", v), !v && !b && !h && d.every((r) => {
+      var n;
+      if (r.nodeType === Node.ELEMENT_NODE) {
+        const c = r;
+        return c.tagName.toLowerCase() === "svg" || c.classList.contains("mui-icon");
       }
-      return a.nodeType === Node.TEXT_NODE && !((i = a.textContent) != null && i.trim());
+      return r.nodeType === Node.TEXT_NODE && !((n = r.textContent) != null && n.trim());
     })) {
-      this.setAttribute("icon-only", ""), this.updateIconSizes(c, !0);
+      this.setAttribute("icon-only", ""), this.updateIconSizes(d, !0);
       return;
     }
-    this.removeAttribute("icon-only"), [n, t, r].forEach((a) => {
-      if (!a) return;
-      const i = a.assignedNodes({ flatten: !0 });
-      this.updateIconSizes(i, !1), u || this.updateAvatarSizes(i), this.updateBadgeSizes(i);
+    this.removeAttribute("icon-only"), [e, o, s].forEach((r) => {
+      if (!r) return;
+      const n = r.assignedNodes({ flatten: !0 });
+      this.updateIconSizes(n, !1), v || this.updateAvatarSizes(n), this.updateBadgeSizes(n);
     });
   }
   // Update avatar sizes based on button size
-  updateAvatarSizes(o) {
-    const t = this.getAttribute("size") || "medium", r = {
+  updateAvatarSizes(t) {
+    const o = this.getAttribute("size") || "medium", s = {
       "xx-small": "xx-small",
       "x-small": "xx-small",
       small: "xx-small",
       medium: "small",
       large: "medium"
-    }[t] || "small";
-    o.forEach((e) => {
-      if (e.nodeType === Node.ELEMENT_NODE) {
-        const s = e;
-        s.tagName.toLowerCase() === "mui-avatar" && s.setAttribute("size", r);
+    }[o] || "small";
+    t.forEach((a) => {
+      if (a.nodeType === Node.ELEMENT_NODE) {
+        const i = a;
+        i.tagName.toLowerCase() === "mui-avatar" && i.setAttribute("size", s);
       }
     });
   }
-  updateIconSizes(o, t) {
-    const n = this.getAttribute("size") || "medium", e = {
+  updateIconSizes(t, o) {
+    const e = this.getAttribute("size") || "medium", a = {
       "xx-small": "xx-small",
       "x-small": "x-small",
       small: "x-small",
-      medium: t ? "medium" : "small",
+      medium: o ? "medium" : "small",
       // small for regular, medium for icon-only
-      large: t ? "large" : "medium"
-    }[n] || "small";
-    o.forEach((s) => {
-      if (s.nodeType === Node.ELEMENT_NODE) {
-        const l = s;
-        (l.tagName.toLowerCase() === "svg" || l.classList.contains("mui-icon") || l.tagName.toLowerCase() === "mui-icon") && !l.hasAttribute("size") && l.setAttribute("size", e);
+      large: o ? "large" : "medium"
+    }[e] || "small";
+    t.forEach((i) => {
+      if (i.nodeType === Node.ELEMENT_NODE) {
+        const l = i;
+        (l.tagName.toLowerCase() === "svg" || l.classList.contains("mui-icon") || l.tagName.toLowerCase() === "mui-icon") && !l.hasAttribute("size") && l.setAttribute("size", a);
       }
     });
   }
-  updateBadgeSizes(o) {
-    const t = this.getAttribute("size") || "medium", r = {
+  updateBadgeSizes(t) {
+    const o = this.getAttribute("size") || "medium", s = {
       "xx-small": "x-small",
       "x-small": "x-small",
       small: "small",
       medium: "medium",
       large: "large"
-    }[t] || "medium";
-    o.forEach((e) => {
-      if (e.nodeType === Node.ELEMENT_NODE) {
-        const s = e;
-        s.tagName.toLowerCase() === "mui-badge" && s.setAttribute("size", r);
+    }[o] || "medium";
+    t.forEach((a) => {
+      if (a.nodeType === Node.ELEMENT_NODE) {
+        const i = a;
+        i.tagName.toLowerCase() === "mui-badge" && i.setAttribute("size", s);
       }
     });
   }
   waitForPartMap() {
-    return new Promise((o) => {
-      if (typeof b == "function") return o();
-      const t = () => {
-        typeof b == "function" ? o() : requestAnimationFrame(t);
+    return new Promise((t) => {
+      if (typeof f == "function") return t();
+      const o = () => {
+        typeof f == "function" ? t() : requestAnimationFrame(o);
       };
-      t();
+      o();
     });
   }
 }
-customElements.get("mui-button") || customElements.define("mui-button", h);
+customElements.get("mui-button") || customElements.define("mui-button", g);