@muibook/components 19.6.0 → 20.1.0

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

@@ -1,4 +1,4 @@
-class l extends HTMLElement {
+class d extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
@@ -6,8 +6,8 @@ class l 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,80 +15,133 @@ class l extends HTMLElement {
   }
   updateIconSlots() {
     requestAnimationFrame(() => {
-      const r = this.shadowRoot;
-      if (!r) return;
-      const e = r.querySelector('slot[name="before"]'), s = r.querySelector('slot[name="after"]'), a = (t) => t ? t.assignedNodes({ flatten: !0 }).some((i) => {
-        var c;
-        return i.nodeType === Node.ELEMENT_NODE || i.nodeType === Node.TEXT_NODE && !!((c = i.textContent) != null && c.trim());
-      }) : !1, n = a(e), o = a(s);
-      this.toggleAttribute("has-before", n), this.toggleAttribute("has-after", o), 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", a = {
-      "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((o) => {
+    a.assignedNodes({ flatten: !0 }).forEach((o) => {
       if (o.nodeType === Node.ELEMENT_NODE) {
-        const t = o, i = t.tagName.toLowerCase();
-        i === "mui-avatar" ? t.setAttribute("size", "xx-small") : i.startsWith("mui-icon-") && t.setAttribute("size", a);
+        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 c;
-    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"
-    }, a = {
+    }, s = {
       "x-small": "x-small",
       small: "x-small",
       medium: "small",
       large: "small"
-    }, n = e[r] || "small", o = s[r] || "x-small", t = a[r] || "small", i = (
+    }, l = e[a] || "small", o = c[a] || "x-small", i = s[a] || "small", r = (
       /*css*/
       `
       :host {
         display: inline-flex;
         box-sizing: border-box;
+        min-width: 0;
+        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(--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(
           --chip-filter,
           drop-shadow(0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-20))
         );
       }
 
+      mui-body {
+        min-width: 0;
+        max-width: 100%;
+      }
+
+      mui-body::part(color) {
+        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 {
@@ -98,16 +151,53 @@ class l 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 */
@@ -120,28 +210,15 @@ class l 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;
       }
 
@@ -155,14 +232,24 @@ class l 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) */
@@ -171,6 +258,11 @@ class l extends HTMLElement {
         border-color: var(--chip-border-color-hover);
         box-shadow: inset 0 0 0 1px var(--chip-border-color-hover);
       }
+
+      :host([variant="clickable"]:hover) mui-body::part(color) {
+        color: var(--chip-text-color-hover, var(--chip-text-color, var(--text-color)));
+      }
+
       :host([variant="ghost"]) .container {
         background: var(--chip-ghost-background, transparent);
         border-color: var(--chip-ghost-border-color, color-mix(in srgb, var(--border-color) 50%, transparent));
@@ -187,12 +279,19 @@ class l extends HTMLElement {
       :host([variant="clickable"]:focus-visible) .container {
         background: var(--chip-background-focus);
         border-color: var(--chip-border-color-focus);
-        outline: var(--outline-thick);
+        outline: var(--chip-focus-outline, var(--outline-thick));
+        outline-offset: var(--chip-focus-outline-offset, 0px);
+      }
+
+      :host([variant="clickable"]:focus-visible) mui-body::part(color) {
+        color: var(--chip-text-color-focus, var(--chip-text-color, var(--text-color)));
       }
+
       :host([variant="ghost"]:focus-visible) .container {
         background: var(--chip-ghost-background-focus, color-mix(in srgb, var(--surface-elevated-100) 62%, transparent));
         border-color: var(--chip-ghost-border-color-focus, color-mix(in srgb, var(--border-color) 80%, transparent));
-        outline: var(--outline-thick);
+        outline: var(--chip-focus-outline, var(--outline-thick));
+        outline-offset: var(--chip-focus-outline-offset, 0px);
       }
 
       /* Active: mouse down OR programmatic */
@@ -211,21 +310,65 @@ class l extends HTMLElement {
 
       :host([variant="clickable"]:active) mui-body::part(color),
       :host([variant="clickable"][active]) mui-body::part(color) {
-        color: var(--chip-text-color-active);
+        color: var(--chip-text-color-active, var(--chip-text-color, var(--text-color)));
       }
 
       ::slotted(.mui-icon) {
         box-sizing: border-box;
         padding: var(--space-025);
         fill: var(--chip-icon-fill);
+        flex-shrink: 0;
+      }
+
+      :host([size="x-small"]) ::slotted(.mui-icon) {
+        padding: var(--space-025);
       }
 
-      :host([has-before]) ::slotted(.mui-icon) { 
-        margin-right: -4px;
+      :host([size="small"]) ::slotted(.mui-icon) {
+        padding: var(--space-025);
       }
 
-      :host([has-after]) ::slotted(.mui-icon) { 
-        margin-left: -4px;
+      :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([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);
       }
 
           
@@ -235,7 +378,6 @@ class l 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 {
@@ -246,21 +388,25 @@ class l 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 */
       mui-button::part(background) {
-        height: initial;
-        width: initial;
-        padding: var(--space-025);
+        height: var(--chip-dismiss-action-size);
+        width: var(--chip-dismiss-action-size);
+        min-height: var(--chip-dismiss-action-size);
+        padding: var(--space-000);
         border-radius: var(--radius-400);
         background: var(--chip-dismiss-action-background);
         filter: var(--chip-dismiss-action-filter, var(--chip-filter));
@@ -275,24 +421,24 @@ class l 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="${n}" weight="bold">
+          <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="${o}"></mui-icon-close>
           </mui-button>
         </span>
-      `, (c = this.shadowRoot.querySelector('[part="dismiss-btn"]')) == null || c.addEventListener("click", (d) => {
-      this.hasAttribute("disabled") || (d.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,
@@ -301,10 +447,10 @@ class l 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="${n}" weight="bold">
+            <mui-body size="${l}" weight="bold" truncate>
               <slot></slot>
             </mui-body>
             <slot name="after"></slot>
@@ -312,4 +458,4 @@ class l extends HTMLElement {
         `);
   }
 }
-customElements.get("mui-chip") || customElements.define("mui-chip", l);
+customElements.get("mui-chip") || customElements.define("mui-chip", d);