@muibook/components 20.0.0 → 20.1.0

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

@@ -6,29 +6,34 @@ class p extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
+  focus(e) {
+    var i;
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("input");
+    t ? t.focus(e) : super.focus(e);
+  }
   connectedCallback() {
     this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.setupListener();
   }
   disconnectedCallback() {
     this.cleanupListeners();
   }
-  attributeChangedCallback(e, t, s) {
-    var c, a, o;
+  attributeChangedCallback(e, t, i) {
+    var s, a, o;
     if (e === "checked") {
-      const i = (c = this.shadowRoot) == null ? void 0 : c.querySelector("input");
-      if (!i) return;
-      i.checked = s !== null;
+      const c = (s = this.shadowRoot) == null ? void 0 : s.querySelector("input");
+      if (!c) return;
+      c.checked = i !== null;
     }
     if (e === "disabled") {
-      const i = (a = this.shadowRoot) == null ? void 0 : a.querySelector("input");
-      if (!i) return;
-      i.disabled = s !== null;
+      const c = (a = this.shadowRoot) == null ? void 0 : a.querySelector("input");
+      if (!c) return;
+      c.disabled = i !== null;
     }
     if (e === "indeterminate") {
-      const i = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
-      if (!i) return;
-      const r = s !== null;
-      i.indeterminate = r, r && (i.checked = !0, this.setAttribute("checked", ""));
+      const c = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input");
+      if (!c) return;
+      const r = i !== null;
+      c.indeterminate = r, r && (c.checked = !0, this.setAttribute("checked", ""));
     }
     ["id", "size"].includes(e) && (this.render(), this.setupListener());
   }
@@ -40,11 +45,11 @@ class p extends HTMLElement {
   setupListener() {
     var t;
     const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("input");
-    e && (this.cleanupListeners(), e.indeterminate = this.hasAttribute("indeterminate"), this._changeHandler = (s) => {
-      const c = s.target;
-      c.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.removeAttribute("indeterminate"), this.dispatchEvent(
+    e && (this.cleanupListeners(), e.indeterminate = this.hasAttribute("indeterminate"), this._changeHandler = (i) => {
+      const s = i.target;
+      s.checked ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.removeAttribute("indeterminate"), this.dispatchEvent(
         new CustomEvent("change", {
-          detail: { checked: c.checked },
+          detail: { checked: s.checked },
           bubbles: !0,
           composed: !0
         })
@@ -52,7 +57,7 @@ class p extends HTMLElement {
     }, e.addEventListener("change", this._changeHandler));
   }
   render() {
-    const e = this.getAttribute("id") || `mui-checkbox-${Math.random().toString(36).substr(2, 9)}`, t = this.hasAttribute("checked"), s = this.hasAttribute("disabled"), c = this.getAttribute("size") || "medium", o = ["x-small", "small", "medium", "large"].includes(c) ? c : "medium", r = {
+    const e = this.getAttribute("id") || `mui-checkbox-${Math.random().toString(36).substr(2, 9)}`, t = this.hasAttribute("checked"), i = this.hasAttribute("disabled"), s = this.getAttribute("size") || "medium", o = ["x-small", "small", "medium", "large"].includes(s) ? s : "medium", r = {
       "x-small": "x-small",
       small: "x-small",
       medium: "small",
@@ -173,7 +178,7 @@ class p extends HTMLElement {
             id="${e}" 
             ${n ? "indeterminate" : ""}
             ${n || t ? "checked" : ""}
-            ${s ? "disabled" : ""} 
+            ${i ? "disabled" : ""} 
           />
           ${u}
         </span>

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

@@ -6,8 +6,8 @@ class d extends HTMLElement {
     return ["active", "usage", "dismiss", "size", "disabled", "variant"];
   }
   connectedCallback() {
-    this.render(), this.updateIconSlots(), !this.hasAttribute("tabindex") && !this.hasAttribute("dismiss") ? this.setAttribute("tabindex", "0") : this.hasAttribute("dismiss") && this.removeAttribute("tabindex"), this.addEventListener("keydown", (r) => {
-      this.hasAttribute("disabled") || (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this.click());
+    this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.updateIconSlots(), !this.hasAttribute("tabindex") && !this.hasAttribute("dismiss") ? this.setAttribute("tabindex", "0") : this.hasAttribute("dismiss") && this.removeAttribute("tabindex"), this.addEventListener("keydown", (a) => {
+      this.hasAttribute("disabled") || (a.key === "Enter" || a.key === " ") && (a.preventDefault(), this.click());
     });
   }
   attributeChangedCallback() {
@@ -15,48 +15,64 @@ class d extends HTMLElement {
   }
   updateIconSlots() {
     requestAnimationFrame(() => {
-      const r = this.shadowRoot;
-      if (!r) return;
-      const e = r.querySelector('slot[name="before"]'), s = r.querySelector('slot[name="after"]'), o = (t) => t ? t.assignedNodes({ flatten: !0 }).some((i) => {
-        var n;
-        return i.nodeType === Node.ELEMENT_NODE || i.nodeType === Node.TEXT_NODE && !!((n = i.textContent) != null && n.trim());
-      }) : !1, c = o(e), a = o(s);
-      this.toggleAttribute("has-before", c), this.toggleAttribute("has-after", a), this.forceAvatarSize(e), this.forceAvatarSize(s);
+      const a = this.shadowRoot;
+      if (!a) return;
+      const e = a.querySelector('slot[name="before"]'), c = a.querySelector('slot[name="after"]'), s = (i) => i ? i.assignedNodes({ flatten: !0 }).some((r) => {
+        var t;
+        return r.nodeType === Node.ELEMENT_NODE || r.nodeType === Node.TEXT_NODE && !!((t = r.textContent) != null && t.trim());
+      }) : !1, l = s(e), o = s(c);
+      this.toggleAttribute("has-before", l), this.toggleAttribute("has-after", o), this.forceAvatarSize(e), this.forceAvatarSize(c);
     });
   }
-  forceAvatarSize(r) {
-    if (!r) return;
-    const e = this.getAttribute("size") || "medium", o = {
-      "x-small": "xx-small",
-      small: "x-small",
+  forceAvatarSize(a) {
+    if (!a) return;
+    const e = this.getAttribute("size") || "medium", s = {
+      "x-small": "x-small",
+      small: "small",
       medium: "medium",
-      large: "medium"
+      large: "large"
     }[e] || "medium";
-    r.assignedNodes({ flatten: !0 }).forEach((a) => {
-      if (a.nodeType === Node.ELEMENT_NODE) {
-        const t = a, i = t.tagName.toLowerCase();
-        i === "mui-avatar" ? t.setAttribute("size", "xx-small") : i.startsWith("mui-icon-") && t.setAttribute("size", o);
+    a.assignedNodes({ flatten: !0 }).forEach((o) => {
+      if (o.nodeType === Node.ELEMENT_NODE) {
+        const i = o, r = i.tagName.toLowerCase();
+        if (r === "mui-avatar") {
+          const n = {
+            "x-small": "xxx-small",
+            small: "xx-small",
+            medium: "xx-small",
+            large: "x-small"
+          }[e] || "xx-small";
+          i.setAttribute("size", n);
+        } else if (r === "mui-badge") {
+          const n = {
+            "x-small": "xx-small",
+            small: "small",
+            medium: "medium",
+            large: "large"
+          }[e] || "medium";
+          i.setAttribute("size", n);
+        } else r.startsWith("mui-icon-") && i.setAttribute("size", s);
       }
     });
   }
   render() {
-    var n;
-    const r = this.getAttribute("size") || "medium", e = {
-      "x-small": "x-small",
+    var t;
+    const a = this.getAttribute("size") || "medium", e = {
+      "x-small": "xx-small",
       small: "x-small",
       medium: "small",
       large: "medium"
-    }, s = {
+    }, c = {
       "x-small": "xx-small",
       small: "xx-small",
       medium: "x-small",
       large: "small"
-    }, o = {
+    }, s = {
       "x-small": "x-small",
       small: "x-small",
       medium: "small",
       large: "small"
-    }, c = e[r] || "small", a = s[r] || "x-small", t = o[r] || "small", i = (
+    }, l = e[a] || "small", o = c[a] || "x-small", i = s[a] || "small", r = (
       /*css*/
       `
       :host {
@@ -66,23 +82,21 @@ class d extends HTMLElement {
         max-width: 100%;
         --chip-focus-outline: var(--stroke-size-300) var(--stroke-outset) var(--outline-color);
         --chip-focus-outline-offset: calc(-1 * var(--stroke-size-300));
-        --chip-dismiss-action-size: var(--chip-height-medium);
+        --chip-dismiss-action-size: var(--avatar-xx-small);
       }
       :host([disabled]) {
-        opacity: 0.4;
+        --chip-background: var(--chip-background-disabled);
+        --chip-text-color: var(--chip-text-color-disabled);
+        --chip-dismiss-action-background: var(--chip-dismiss-action-background-disabled);
       }
 
       .container {
         display: inline-grid;
         align-items: center;
-        height: var(--chip-height-medium);
         box-sizing: border-box;
         border: var(--border-thin);
-        padding: var(--chip-padding-medium);
-        gap: var(--chip-gap-medium);
         background: var(--chip-background);
         border-color: var(--chip-border-color);
-        border-radius: var(--chip-radius);
         min-width: 0;
         max-width: 100%;
         filter: var(
@@ -100,11 +114,34 @@ class d extends HTMLElement {
         color: var(--chip-text-color, var(--text-color));
       }
 
+      /* Base Before & After Slot Layout
+      ========================================= */
+      
+      :host([has-after][has-before]) .container {
+        grid-template-columns: auto 1fr auto;
+      }
+
+      :host([has-after]) .container {
+        grid-template-columns: 1fr auto;
+      }
+
+      :host([has-before]) .container {
+        grid-template-columns: auto 1fr;
+      }
+
       :host([size="x-small"]) .container {
         height: var(--chip-height-x-small);
         padding: var(--chip-padding-x-small);
         gap: var(--chip-gap-x-small);
         border-radius: var(--chip-radius-x-small);
+        --chip-dismiss-action-size: var(--avatar-xxx-small);
+      }
+
+      :host([size="x-small"][has-before]) .container {
+        padding-left: calc(var(--space-025) + var(--space-025));
+      }
+      :host([size="x-small"][has-after]) .container {
+        padding-right: calc(var(--space-025) + var(--space-025));
       }
 
       :host([size="small"]) .container {
@@ -114,16 +151,53 @@ class d extends HTMLElement {
         border-radius: var(--chip-radius-small);
       }
 
+      :host([size="small"][has-before]) .container {
+        padding-left: calc(var(--space-050) + var(--space-025));
+      }
+      :host([size="small"][has-after]) .container {
+        padding-right: calc(var(--space-050) + var(--space-025));
+      }
+
       :host([size="medium"]) .container {
         height: var(--chip-height-medium);
+        padding: var(--chip-padding-medium);
+        gap: var(--chip-gap-medium);
         border-radius: var(--chip-radius-medium);
       }
 
+      :host([size="medium"][has-before]) .container {
+        padding-left: calc(var(--space-200) + var(--space-025));
+      }
+      :host([size="medium"][has-after]) .container {
+        padding-right: calc(var(--space-200) + var(--space-025));
+      }
+
       :host([size="large"]) .container {
         height: var(--chip-height-large);
         padding: var(--chip-padding-large);
         gap: var(--chip-gap-large);
         border-radius: var(--chip-radius-large);
+        --chip-dismiss-action-size: var(--avatar-x-small);
+      }
+
+      :host([size="large"][has-before]) .container {
+        padding-left: var(--space-300);
+      }
+      :host([size="large"][has-after]) .container {
+        padding-right: var(--space-300);
+      }
+
+      :host([size="x-small"]) {
+        --chip-input-border-radius: var(--form-radius-x-small);
+      }
+      :host([size="small"]) {
+        --chip-input-border-radius: var(--form-radius-small);
+      }
+      :host([size="medium"]) {
+        --chip-input-border-radius: var(--form-radius-medium);
+      }
+      :host([size="large"]) {
+        --chip-input-border-radius: var(--form-radius-large);
       }
 
       /* CLICKABLE */
@@ -136,28 +210,15 @@ class d extends HTMLElement {
         transition: border-color var(--speed-200), background-color var(--speed-200);
       }
 
-      /* Before & After Slot
-      ========================================= */
-      
-      :host([has-after][has-before]) .container {
-        grid-template-columns: auto 1fr auto;
-        padding-right: var(--space-200);
-        padding-left: var(--space-200);
-      }
 
-      :host([has-after]) .container {
-        grid-template-columns: 1fr auto;
-        padding-right: var(--space-200);
-      }
-
-      :host([has-before]) .container {
-        grid-template-columns: auto 1fr;
-        padding-left: var(--space-200);
-      }
 
       /* Usage: input */
       :host([usage="input"]) .container {
-        border-radius: var(--input-radius);
+        border-radius: var(--radius-000);
+        border-top-left-radius: calc(var(--chip-radius-left, 0px) - (var(--space-025) + var(--stroke-size-100)));
+        border-bottom-left-radius: calc(var(--chip-radius-left, 0px) - (var(--space-025) + var(--stroke-size-100)));
+        border-top-right-radius: calc(var(--chip-radius-right, 0px) - (var(--space-025) + var(--stroke-size-100)));
+        border-bottom-right-radius: calc(var(--chip-radius-right, 0px) - (var(--space-025) + var(--stroke-size-100)));
         border: none;
       }
 
@@ -171,14 +232,24 @@ class d extends HTMLElement {
 
       :host([usage="input"][slot="before"]) {
         border-right: none;
-        border-top-left-radius: var(--input-radius);
-        border-bottom-left-radius: var(--input-radius);
+        border-top-left-radius: var(--chip-input-border-radius, var(--form-radius-medium));
+        border-bottom-left-radius: var(--chip-input-border-radius, var(--form-radius-medium));
+      }
+
+      :host([usage="input"][slot="before"]) .container {
+        border-top-left-radius: calc(var(--chip-input-border-radius, var(--form-radius-medium)) - (var(--space-025) + var(--stroke-size-100)));
+        border-bottom-left-radius: calc(var(--chip-input-border-radius, var(--form-radius-medium)) - (var(--space-025) + var(--stroke-size-100)));
       }
 
       :host([usage="input"][slot="after"]) {
         border-left: none;
-        border-top-right-radius: var(--input-radius);
-        border-bottom-right-radius: var(--input-radius);
+        border-top-right-radius: var(--chip-input-border-radius, var(--form-radius-medium));
+        border-bottom-right-radius: var(--chip-input-border-radius, var(--form-radius-medium));
+      }
+
+      :host([usage="input"][slot="after"]) .container {
+        border-top-right-radius: calc(var(--chip-input-border-radius, var(--form-radius-medium)) - (var(--space-025) + var(--stroke-size-100)));
+        border-bottom-right-radius: calc(var(--chip-input-border-radius, var(--form-radius-medium)) - (var(--space-025) + var(--stroke-size-100)));
       }
 
       /* Hover and focus (natural) */
@@ -249,12 +320,55 @@ class d extends HTMLElement {
         flex-shrink: 0;
       }
 
-      :host([has-before]) ::slotted(.mui-icon) { 
-        margin-right: -4px;
+      :host([size="x-small"]) ::slotted(.mui-icon) {
+        padding: var(--space-025);
+      }
+
+      :host([size="small"]) ::slotted(.mui-icon) {
+        padding: var(--space-025);
+      }
+
+      :host([size="medium"]) ::slotted(.mui-icon) {
+        padding: var(--space-025);
+      }
+
+      :host([size="large"]) ::slotted(.mui-icon) {
+        padding: var(--space-025);
+      }
+
+      slot[name="before"]::slotted(.mui-icon) { 
+        margin-right: calc(var(--space-050) * -1);
+      }
+      slot[name="after"]::slotted(.mui-icon) { 
+        margin-left: calc(var(--space-050) * -1);
+      }
+
+      :host([size="x-small"]) slot[name="before"]::slotted(.mui-icon) { 
+        margin-left: var(--space-050);
+      }
+      :host([size="x-small"]) slot[name="after"]::slotted(.mui-icon) { 
+        margin-right: var(--space-050);
+      }
+
+      :host([size="small"]) slot[name="before"]::slotted(.mui-icon) { 
+        margin-left: var(--space-025);
+      }
+      :host([size="small"]) slot[name="after"]::slotted(.mui-icon) { 
+        margin-right: var(--space-025);
+      }
+
+      :host([size="medium"]) slot[name="before"]::slotted(.mui-icon) { 
+        margin-left: var(--space-025);
+      }
+      :host([size="medium"]) slot[name="after"]::slotted(.mui-icon) { 
+        margin-right: var(--space-025);
       }
 
-      :host([has-after]) ::slotted(.mui-icon) { 
-        margin-left: -4px;
+      :host([size="large"]) slot[name="before"]::slotted(.mui-icon) { 
+        margin-left: var(--space-025);
+      }
+      :host([size="large"]) slot[name="after"]::slotted(.mui-icon) { 
+        margin-right: var(--space-025);
       }
 
           
@@ -264,7 +378,6 @@ class d extends HTMLElement {
       /* Disable pointer and focus styles when dismiss attribute is present */
       :host([dismiss]) .container {
         grid-template-columns: 1fr auto;
-        padding-right: calc(var(--space-200) + 0.1rem);
       }
 
       :host([dismiss][size="x-small"]) .container {
@@ -275,14 +388,17 @@ class d extends HTMLElement {
         padding-right: calc(var(--space-100) + 0.1rem);
       }
 
+      :host([dismiss][size="medium"]) .container {
+        padding-right: calc(var(--space-200) + 0.1rem);
+      }
+
       :host([dismiss][size="large"]) .container {
-        padding-right: calc(var(--space-300) + 0.1rem);
+        padding-right: calc(var(--space-200) + 0.1rem);
       }
 
       /* Has Before */
       :host([dismiss][has-before]) .container {
         grid-template-columns: auto 1fr auto;
-        padding-left: var(--space-200);
       }
 
       /* Dismiss Icon */
@@ -305,24 +421,24 @@ class d extends HTMLElement {
     );
     this.hasAttribute("dismiss") ? (this.shadowRoot.innerHTML = /*html*/
     `
-        <style>${i}</style>
+        <style>${r}</style>
         <span class="container">
           <slot name="before"></slot>
-          <mui-body size="${c}" weight="bold" truncate>
+          <mui-body size="${l}" weight="bold" truncate>
             <slot></slot>
           </mui-body>
           <mui-button
             part="dismiss-btn"
             variant="tertiary"
-            size="${t}"
+            size="${i}"
             aria-label="Remove chip"
             ${this.hasAttribute("disabled") ? "disabled" : ""}
           >
-            <mui-icon-close size="${a}"></mui-icon-close>
+            <mui-icon-close size="${o}"></mui-icon-close>
           </mui-button>
         </span>
-      `, (n = this.shadowRoot.querySelector('[part="dismiss-btn"]')) == null || n.addEventListener("click", (l) => {
-      this.hasAttribute("disabled") || (l.stopPropagation(), this.dispatchEvent(
+      `, (t = this.shadowRoot.querySelector('[part="dismiss-btn"]')) == null || t.addEventListener("click", (n) => {
+      this.hasAttribute("disabled") || (n.stopPropagation(), this.dispatchEvent(
         new CustomEvent("dismiss", {
           bubbles: !0,
           composed: !0,
@@ -331,10 +447,10 @@ class d extends HTMLElement {
       ));
     })) : (this.hasAttribute("variant") || this.setAttribute("variant", "clickable"), this.shadowRoot.innerHTML = /*html*/
     `
-          <style>${i}</style>
+          <style>${r}</style>
           <span class="container">
             <slot name="before"></slot>
-            <mui-body size="${c}" weight="bold" truncate>
+            <mui-body size="${l}" weight="bold" truncate>
               <slot></slot>
             </mui-body>
             <slot name="after"></slot>