@muibook/components 10.0.1 → 11.0.1

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

@@ -1,13 +1,13 @@
-class d extends HTMLElement {
+class l extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["active", "usage", "dismiss"];
+    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", (t) => {
-      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
+    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());
     });
   }
   attributeChangedCallback() {
@@ -15,45 +15,99 @@ class d extends HTMLElement {
   }
   updateIconSlots() {
     requestAnimationFrame(() => {
-      const t = this.shadowRoot;
-      if (!t) return;
-      const i = t.querySelector('slot[name="before"]'), e = t.querySelector('slot[name="after"]'), a = (s) => s ? s.assignedNodes({ flatten: !0 }).some((r) => {
-        var n;
-        return r.nodeType === Node.ELEMENT_NODE || r.nodeType === Node.TEXT_NODE && !!((n = r.textContent) != null && n.trim());
-      }) : !1, o = a(i), c = a(e);
-      this.toggleAttribute("has-before", o), this.toggleAttribute("has-after", c), this.forceAvatarSize(i), this.forceAvatarSize(e);
+      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);
     });
   }
-  forceAvatarSize(t) {
-    if (!t) return;
-    t.assignedNodes({ flatten: !0 }).forEach((e) => {
-      if (e.nodeType === Node.ELEMENT_NODE) {
-        const a = e, o = a.tagName.toLowerCase();
-        o === "mui-avatar" ? a.setAttribute("size", "x-small") : o.startsWith("mui-icon-") && a.setAttribute("size", "medium");
+  forceAvatarSize(r) {
+    if (!r) return;
+    const e = this.getAttribute("size") || "medium", a = {
+      "x-small": "xx-small",
+      small: "x-small",
+      medium: "medium",
+      large: "medium"
+    }[e] || "medium";
+    r.assignedNodes({ flatten: !0 }).forEach((o) => {
+      if (o.nodeType === Node.ELEMENT_NODE) {
+        const t = o, i = t.tagName.toLowerCase();
+        i === "mui-avatar" ? t.setAttribute("size", "x-small") : i.startsWith("mui-icon-") && t.setAttribute("size", a);
       }
     });
   }
   render() {
-    var i;
-    const t = (
+    var c;
+    const r = this.getAttribute("size") || "medium", e = {
+      "x-small": "x-small",
+      small: "x-small",
+      medium: "small",
+      large: "medium"
+    }, s = {
+      "x-small": "xx-small",
+      small: "xx-small",
+      medium: "x-small",
+      large: "small"
+    }, a = {
+      "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 = (
       /*css*/
       `
       :host {
         display: inline-flex;
         box-sizing: border-box;
       }
+      :host([disabled]) {
+        opacity: 0.4;
+      }
 
       .container {
         display: inline-grid;
         align-items: center;
-        height: 4rem;
+        height: var(--chip-height-medium);
         box-sizing: border-box;
         border: var(--border-thin);
-        padding: var(--space-100) var(--space-400);
-        gap: var(--space-200);
+        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);
+        filter: var(
+          --chip-filter,
+          drop-shadow(0 var(--stroke-size-100) var(--stroke-size-200) var(--black-opacity-20))
+        );
+      }
+
+      :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);
+      }
+
+      :host([size="small"]) .container {
+        height: var(--chip-height-small);
+        padding: var(--chip-padding-small);
+        gap: var(--chip-gap-small);
+        border-radius: var(--chip-radius-small);
+      }
+
+      :host([size="medium"]) .container {
+        height: var(--chip-height-medium);
+        border-radius: var(--chip-radius-medium);
+      }
+
+      :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);
       }
 
       /* CLICKABLE */
@@ -61,6 +115,10 @@ class d extends HTMLElement {
         cursor: pointer;
         transition: border-color var(--speed-200), background-color var(--speed-200);
       }
+      :host([variant="ghost"]) {
+        cursor: pointer;
+        transition: border-color var(--speed-200), background-color var(--speed-200);
+      }
 
       /* Before & After Slot
       ========================================= */
@@ -84,6 +142,27 @@ class d extends HTMLElement {
       /* Usage: input */
       :host([usage="input"]) .container {
         border-radius: var(--input-radius);
+        border: none;
+      }
+
+      :host([usage="input"][slot="before"]),
+      :host([usage="input"][slot="after"]) {
+        background: var(--chip-input-background, #333333);
+        padding: var(--chip-input-shell-padding, 2px);
+        border: var(--chip-input-shell-border, 1px solid var(--form-default-border-color));
+        box-sizing: border-box;
+      }
+
+      :host([usage="input"][slot="before"]) {
+        border-right: none;
+        border-top-left-radius: var(--input-radius);
+        border-bottom-left-radius: var(--input-radius);
+      }
+
+      :host([usage="input"][slot="after"]) {
+        border-left: none;
+        border-top-right-radius: var(--input-radius);
+        border-bottom-right-radius: var(--input-radius);
       }
 
       /* Hover and focus (natural) */
@@ -92,6 +171,14 @@ class d extends HTMLElement {
         border-color: var(--chip-border-color-hover);
         box-shadow: inset 0 0 0 1px var(--chip-border-color-hover);
       }
+      :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));
+      }
+      :host([variant="ghost"]:hover) .container {
+        background: var(--chip-ghost-background-hover, color-mix(in srgb, var(--surface-elevated-100) 55%, transparent));
+        border-color: var(--chip-ghost-border-color-hover, color-mix(in srgb, var(--border-color) 70%, transparent));
+      }
 
       :host([variant="clickable"]:focus) {
         outline: none;
@@ -102,6 +189,11 @@ class d extends HTMLElement {
         border-color: var(--chip-border-color-focus);
         outline: var(--outline-thick);
       }
+      :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);
+      }
 
       /* Active: mouse down OR programmatic */
       :host([variant="clickable"]:active) .container,
@@ -110,6 +202,12 @@ class d extends HTMLElement {
         box-shadow: inset 0 0 0 1px var(--chip-border-color-active);
         border-color: var(--chip-border-color-active);
       }
+      :host([variant="ghost"]:active) .container,
+      :host([variant="ghost"][active]) .container {
+        background: var(--chip-ghost-background-active, color-mix(in srgb, var(--surface-elevated-100) 68%, transparent));
+        box-shadow: inset 0 0 0 1px var(--chip-ghost-border-color-active, color-mix(in srgb, var(--border-color) 85%, transparent));
+        border-color: var(--chip-ghost-border-color-active, color-mix(in srgb, var(--border-color) 85%, transparent));
+      }
 
       :host([variant="clickable"]:active) mui-body::part(color),
       :host([variant="clickable"][active]) mui-body::part(color) {
@@ -137,9 +235,21 @@ 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 {
+        padding-right: calc(var(--space-050) + 0.1rem);
+      }
+
+      :host([dismiss][size="small"]) .container {
         padding-right: calc(var(--space-100) + 0.1rem);
       }
 
+      :host([dismiss][size="large"]) .container {
+        padding-right: calc(var(--space-300) + 0.1rem);
+      }
+
       /* Has Before */
       :host([dismiss][has-before]) .container {
         grid-template-columns: auto 1fr auto;
@@ -153,38 +263,48 @@ class d extends HTMLElement {
         padding: var(--space-025);
         border-radius: var(--radius-400);
         background: var(--chip-dismiss-action-background);
+        filter: var(--chip-dismiss-action-filter, var(--chip-filter));
       }
       mui-button::part(background):hover {
         background: var(--chip-dismiss-action-background-hover);
       }
+      :host([disabled]) mui-button {
+        pointer-events: none;
+      }
     `
     );
     this.hasAttribute("dismiss") ? (this.shadowRoot.innerHTML = /*html*/
     `
-        <style>${t}</style>
+        <style>${i}</style>
         <span class="container">
           <slot name="before"></slot>
-          <mui-body size="small" weight="bold">
+          <mui-body size="${n}" weight="bold">
             <slot></slot>
           </mui-body>
-          <mui-button part="dismiss-btn" variant="tertiary" aria-label="Remove chip">
-            <mui-icon-close size="x-small"></mui-icon-close>
+          <mui-button
+            part="dismiss-btn"
+            variant="tertiary"
+            size="${t}"
+            aria-label="Remove chip"
+            ${this.hasAttribute("disabled") ? "disabled" : ""}
+          >
+            <mui-icon-close size="${o}"></mui-icon-close>
           </mui-button>
         </span>
-      `, (i = this.shadowRoot.querySelector('[part="dismiss-btn"]')) == null || i.addEventListener("click", (e) => {
-      e.stopPropagation(), this.dispatchEvent(
+      `, (c = this.shadowRoot.querySelector('[part="dismiss-btn"]')) == null || c.addEventListener("click", (d) => {
+      this.hasAttribute("disabled") || (d.stopPropagation(), this.dispatchEvent(
         new CustomEvent("dismiss", {
           bubbles: !0,
           composed: !0,
           detail: { id: this.id }
         })
-      );
-    })) : (this.setAttribute("variant", "clickable"), this.shadowRoot.innerHTML = /*html*/
+      ));
+    })) : (this.hasAttribute("variant") || this.setAttribute("variant", "clickable"), this.shadowRoot.innerHTML = /*html*/
     `
-          <style>${t}</style>
+          <style>${i}</style>
           <span class="container">
             <slot name="before"></slot>
-            <mui-body size="small" weight="bold">
+            <mui-body size="${n}" weight="bold">
               <slot></slot>
             </mui-body>
             <slot name="after"></slot>
@@ -192,4 +312,4 @@ class d extends HTMLElement {
         `);
   }
 }
-customElements.get("mui-chip") || customElements.define("mui-chip", d);
+customElements.get("mui-chip") || customElements.define("mui-chip", l);