@muibook/components 1.0.0

package/dist/esm/mui-body/index.js

@@ -0,0 +1,82 @@
+import { getPartMap as i } from "../mui-utils/part-map/index.js";
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "weight", "variant"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+    const e = this.getAttribute("size") || "medium", t = this.getAttribute("weight") || "regular", o = this.getAttribute("variant") || "default";
+    this.setAttribute("size", e), this.setAttribute("variant", o), this.setAttribute("weight", t);
+  }
+  async connectedCallback() {
+    await this.waitForPartMap();
+    let t = (
+      /*html*/
+      `
+    <style>
+      :host { display: block; }
+
+      :host p {
+        color: var(--text-color);
+        margin: var(--space-000);
+        display: block;
+        width: 100%;
+      }
+
+      :host([size="x-small"]) p {
+        font-size: var(--text-font-size-xs);
+        line-height: var(--text-line-height-xs);
+      }
+
+      :host([size="small"]) p {
+        font-size: var(--text-font-size-s); 
+        line-height: var(--text-line-height-s);
+      }
+
+      :host([size="medium"]) p {
+        font-size: var(--text-font-size-m);
+        line-height: var(--text-line-height-m);
+      }
+
+      :host([size="large"]) p {
+        font-size: var(--text-font-size-l); 
+        line-height: var(--text-line-height-l);
+      }
+
+      :host([weight="regular"]) p { font-weight: var(--font-weight-regular); }
+      :host([weight="medium"]) p { font-weight: var(--font-weight-medium); }
+      :host([weight="bold"]) p { font-weight: var(--font-weight-bold); }
+
+      /* Variant */
+      :host([variant="default"]) p {
+        color: var(--text-color);
+      }
+      :host([variant="success"]) p {
+        color: var(--text-color-success);
+      }
+      :host([variant="warning"]) p {
+        color: var(--text-color-warning);
+      }
+      :host([variant="error"]) p {
+        color: var(--text-color-error);
+      }
+
+    </style>
+    
+    <p part="${i("spacing", "layout", "visual")}"><slot></slot></p>
+
+    `
+    );
+    this.shadowRoot && (this.shadowRoot.innerHTML = t);
+  }
+  waitForPartMap() {
+    return new Promise((e) => {
+      if (typeof i == "function") return e();
+      const t = () => {
+        typeof i == "function" ? e() : requestAnimationFrame(t);
+      };
+      t();
+    });
+  }
+}
+customElements.define("mui-body", r);

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

@@ -0,0 +1,296 @@
+import { getPartMap as n } from "../mui-utils/part-map/index.js";
+class s extends HTMLElement {
+  static get observedAttributes() {
+    return ["onclick", "type", "aria-label", "disabled", "variant"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  async connectedCallback() {
+    if (await this.waitForPartMap(), !this.shadowRoot) return;
+    let o = (
+      /*html*/
+      `
+    <style>
+
+
+    :host {
+      display: inline-block;
+    }
+    button {
+      vertical-align: baseline;
+      border: none;
+      cursor: pointer;
+      width: auto;
+      border-radius: var(--action-radius);
+      padding: var(--action-padding);
+      text-decoration: none;
+      line-height: var(--action-line-height);
+      display: inline-block;
+      text-transform: none;
+      overflow: visible;
+      -webkit-appearance: button;
+      font-family: var(--font-family);
+      font-size: var(--action-font-size);
+      font-weight: var(--action-font-weight);
+      background: var(--action-primary-background);
+      color: var(--action-primary-text-color);
+      border: var(--action-primary-stroke); 
+    }
+
+    // Turned back on for focus-visible
+    button:focus, button:active, button:hover { outline: var(--space-000); }
+
+    button:hover {
+      background: var(--action-primary-background-hover);
+      color: var(--action-primary-text-color-hover);
+    }
+
+    button:focus {
+      background: var(--action-primary-background-focus);
+      color: var(--action-primary-text-color-focus);
+    }
+
+    button:disabled {
+      background: var(--action-primary-background-disabled);
+      color: var(--action-primary-text-color-disabled);
+    }
+
+    button, button:before, button:after {box-sizing: border-box;}
+
+    button:focus-visible {
+      outline: var(--outline-thick);
+    }
+
+    /* Primary 
+    ========================================= */
+    :host([variant="primary"]) button {
+      background: var(--action-primary-background);
+      color: var(--action-primary-text-color);
+      border: var(--action-primary-stroke);
+    }
+
+    :host([variant="primary"]) button:hover {
+      background: var(--action-primary-background-hover);
+      color: var(--action-primary-text-color-hover);
+      border: var(--action-primary-stroke-hover);
+    }
+
+    :host([variant="primary"]) button:focus {
+      background: var(--action-primary-background-focus);
+      color: var(--action-primary-text-color-focus);
+      border: var(--action-primary-stroke-focus);
+    }
+
+    :host([variant="primary"]) button:disabled {
+      background: var(--action-primary-background-disabled);
+      color: var(--action-primary-text-color-disabled);
+      border: var(--action-primary-stroke-disabled);
+      cursor: not-allowed;
+    }
+
+    :host([variant="primary"]) button ::slotted(.mui-icon) { fill: var(--action-primary-text-color); }
+    :host([variant="primary"]) button:hover ::slotted(.mui-icon) { fill: var(--action-primary-text-color-hover); }
+    :host([variant="primary"]) button:focus ::slotted(.mui-icon) { fill: var(--action-primary-text-color-focus); }
+    :host([variant="primary"]) button:disabled ::slotted(.mui-icon) { fill: var(--action-primary-text-color-disabled); }
+
+    /* Secondary
+    ========================================= */
+
+    :host([variant="secondary"]) button {
+      background: var(--action-secondary-background);
+      color: var(--action-secondary-text-color);
+      border: var(--action-secondary-stroke); 
+    }
+
+    :host([variant="secondary"]) button:hover {
+      background: var(--action-secondary-background-hover);
+      color: var(--action-secondary-text-color-hover);
+      border: var(--action-secondary-stroke-hover); 
+    }
+
+    :host([variant="secondary"]) button:focus {
+      background: var(--action-secondary-background-focus);
+      color: var(--action-secondary-text-color-focus);
+      border: var(--action-secondary-stroke-focus); 
+    }
+
+    :host([variant="secondary"]) button:disabled {
+      background: var(--action-secondary-background-disabled);
+      color: var(--action-secondary-text-color-disabled);
+      border: var(--action-secondary-stroke-disabled); 
+      cursor: not-allowed;
+    }
+
+    :host([variant="secondary"]) button ::slotted(.mui-icon) { fill: var(--action-secondary-text-color); }
+    :host([variant="secondary"]) button:hover ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-hover); }
+    :host([variant="secondary"]) button:focus ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-focus); }
+    :host([variant="secondary"]) button:disabled ::slotted(.mui-icon) { fill: var(--action-secondary-text-color-disabled); }
+
+    /* Tertiary
+    ========================================= */
+
+    :host([variant="tertiary"]) button {
+      background: var(--action-tertiary-background);
+      color: var(--action-tertiary-text-color);
+      border: var(--action-tertiary-stroke);
+    }
+
+    :host([variant="tertiary"]) button:hover {
+      background: var(--action-tertiary-background-hover);
+      color: var(--action-tertiary-text-color-hover);
+      border: var(--action-tertiary-stroke-hover);
+    }
+
+    :host([variant="tertiary"]) button:focus {
+      background: var(--action-tertiary-background-focus);
+      color: var(--action-tertiary-text-color-focus);
+      border: var(--action-tertiary-stroke-focus);
+    }
+
+    :host([variant="tertiary"]) button:disabled {
+      background: var(--action-tertiary-background-disabled);
+      color: var(--action-tertiary-text-color-disabled);
+      border: var(--action-tertiary-stroke-disabled);
+      cursor: not-allowed;
+    }
+
+    :host([variant="tertiary"]) button ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color); }
+    :host([variant="tertiary"]) button:hover ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-hover); }
+    :host([variant="tertiary"]) button:focus ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-focus); }
+    :host([variant="tertiary"]) button:disabled ::slotted(.mui-icon) { fill: var(--action-tertiary-text-color-disabled); }
+
+    /* Attention
+    ========================================= */
+    :host([variant="attention"]) button {
+      background: var(--action-attention-background);
+      color: var(--action-attention-text-color);
+      border: var(--action-attention-stroke);
+    }
+
+    :host([variant="attention"]) button:hover {
+      background: var(--action-attention-background-hover);
+      color: var(--action-attention-text-color-hover);
+      border: var(--action-attention-stroke-hover);
+    }
+
+    :host([variant="attention"]) button:focus {
+      background: var(--action-attention-background-focus);
+      color: var(--action-attention-text-color-focus);
+      border: var(--action-attention-stroke-focus);
+    }
+
+    :host([variant="attention"]) button:disabled {
+      background: var(--action-attention-background-disabled);
+      color: var(--action-attention-text-color-disabled);
+      border: var(--action-attention-stroke-disabled);
+      cursor: not-allowed;
+    }
+
+    :host([variant="attention"]) button ::slotted(.mui-icon) { fill: var(--action-attention-text-color); }
+    :host([variant="attention"]) button:hover ::slotted(.mui-icon) { fill: var(--action-attention-text-color-hover); }
+    :host([variant="attention"]) button:focus ::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); }
+
+    /* Icon only
+    ========================================= */
+    :host([icon-only]) button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 44px;
+      width: 44px;
+      padding: var(--action-icon-only-padding);
+    }
+    /* ===================================== */
+
+
+    /* ========================================================================== */
+    /* STYLE ADJUSTMENTS WHEN BUTTON IS SLOTTED WITHIN INPUT                      */
+    /* Related styles unique to this usage is found in the mui-input/index.js     */
+    /* ========================================================================== */
+
+    /* ========================================================================== */
+    /* BEFORE: When a BUTTON has slot="before" applied to host for INPUT usage    */
+    /* ========================================================================== */
+
+        :host([slot="before"]) button {
+          border: var(--border-thin);
+          min-height: 4.4rem;
+          background: var(--action-secondary-background);
+          color: var(--action-secondary-text-color);
+          border-color: var(--form-default-border-color);
+          border-right: none;
+          border-top-right-radius: var(--radius-000);
+          border-bottom-right-radius: var(--radius-000);
+        }
+
+        :host([slot="before"]) button:hover {
+          background: var(--action-secondary-background-hover);
+          color: var(--action-secondary-text-color-hover);
+          border-color: var(--form-default-border-color-hover);
+        }
+
+    /* ========================================================================== */
+    /* AFTER: When a BUTTON has slot="after" applied to host for INPUT usage      */
+    /* ========================================================================== */
+
+        :host([slot="after"]) button {
+          border: var(--border-thin);
+          min-height: 4.4rem;
+          background: var(--action-secondary-background);
+          color: var(--action-secondary-text-color);
+          border-color: var(--form-default-border-color);
+          border-left: none;
+          border-top-left-radius: var(--radius-000);
+          border-bottom-left-radius: var(--radius-000);
+        }
+
+        :host([slot="after"]) button:hover,
+        :host([slot="after"]) button:focus {
+          background: var(--action-secondary-background-hover);
+          color: var(--action-secondary-text-color-hover);
+          border-color: var(--form-default-border-color-hover);
+        }
+
+    /* ========================================================================== */
+
+
+    </style>
+
+    <button 
+      part="${n("text", "spacing", "layout", "visual")}"
+      onclick="${this.getAttribute("onclick")}" 
+      type="${this.getAttribute("type") || "button"}" 
+      aria-label="${this.getAttribute("aria-label") || ""}"
+      ${this.hasAttribute("disabled") ? "disabled" : ""}
+    >
+      <slot></slot>
+    </button>
+
+    `
+    );
+    this.shadowRoot.innerHTML = o, await customElements.whenDefined("mui-button"), requestAnimationFrame(() => {
+      var e;
+      const a = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
+      ((a == null ? void 0 : a.assignedNodes({ flatten: !0 })) || []).every((t) => {
+        var i;
+        if (t.nodeType === Node.ELEMENT_NODE) {
+          const c = t;
+          return c.tagName.toLowerCase() === "svg" || c.classList.contains("mui-icon");
+        }
+        return t.nodeType === Node.TEXT_NODE && !((i = t.textContent) != null && i.trim());
+      }) ? this.setAttribute("icon-only", "") : this.removeAttribute("icon-only");
+    });
+  }
+  waitForPartMap() {
+    return new Promise((r) => {
+      if (typeof n == "function") return r();
+      const o = () => {
+        typeof n == "function" ? r() : requestAnimationFrame(o);
+      };
+      o();
+    });
+  }
+}
+customElements.define("mui-button", s);

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

@@ -0,0 +1,23 @@
+class e extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    let t = (
+      /*html*/
+      `
+    <style>      
+      :host {
+        display: flex;
+        gap: var(--space-200);
+      }
+      :host([right]) {
+        justify-content: flex-end;
+      }
+    </style>
+    <slot></slot>`
+    );
+    this.shadowRoot && (this.shadowRoot.innerHTML = t);
+  }
+}
+customElements.define("mui-button-group", e);

package/dist/esm/mui-card/body/index.js

@@ -0,0 +1,48 @@
+class d extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    if (!this.shadowRoot) return;
+    const i = (
+      /*html*/
+      `
+      <style>
+        :host {
+          display: block;
+          box-sizing: border-box;
+        }
+        :host(.inner-space) {
+          padding: var(--space-500);
+        }
+        @media (min-width: 768px) {
+          :host(.inner-space) {
+            padding: var(--space-600);
+          }
+        }
+      </style>
+      <slot></slot>
+    `
+    );
+    this.shadowRoot.innerHTML = i, requestAnimationFrame(() => {
+      if (!this.shadowRoot) return;
+      const s = this.shadowRoot.querySelector("slot");
+      if (!s) return;
+      const r = s.assignedNodes({ flatten: !0 });
+      let o = !1;
+      r.forEach((a) => {
+        if (a.nodeType === Node.ELEMENT_NODE) {
+          const e = a, c = e.tagName.toLowerCase() === "mui-accordion-group" ? e : e.querySelector("mui-accordion-group");
+          c instanceof HTMLElement && (c.querySelectorAll("mui-accordion-block").forEach((t) => {
+            t.classList.add("card-slot");
+          }), o = !0);
+          const n = e.tagName.toLowerCase() === "mui-table" ? e : e.querySelector("mui-table");
+          n instanceof HTMLElement && (n.querySelectorAll("mui-cell").forEach((t) => {
+            t.classList.add("card-slot");
+          }), o = !0);
+        }
+      }), o || this.classList.add("inner-space");
+    });
+  }
+}
+customElements.define("mui-card-body", d);

package/dist/esm/mui-card/card/index.js

@@ -0,0 +1,43 @@
+class n extends HTMLElement {
+  static get observedAttributes() {
+    return ["footer"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    if (!this.shadowRoot) return;
+    let d = (
+      /*html*/
+      `
+    <style>
+      :host {
+        display: block;
+        border-radius: var(--card-radius);
+        background: var(--surface-elevated-100);
+      }
+      ::slotted(*:last-child) {
+        margin-bottom: 0;
+      }
+      ::slotted(.inner-space-top) {
+      padding-top: 0;
+      }
+    </style>
+    <slot></slot>
+    `
+    );
+    this.shadowRoot.innerHTML = d;
+    const t = this.shadowRoot.querySelector("slot");
+    t && t.addEventListener("slotchange", () => {
+      const a = t.assignedElements(), r = a.some((o) => {
+        var e;
+        return ((e = o.tagName) == null ? void 0 : e.toLowerCase()) === "mui-card-header";
+      }), s = a.find((o) => {
+        var e;
+        return ((e = o.tagName) == null ? void 0 : e.toLowerCase()) === "mui-card-body";
+      });
+      s && (r ? s.classList.add("inner-space-top") : s.classList.remove("inner-space-top"));
+    });
+  }
+}
+customElements.define("mui-card", n);

package/dist/esm/mui-card/footer/index.js

@@ -0,0 +1,62 @@
+class d extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    if (!this.shadowRoot) return;
+    const i = (
+      /*html*/
+      `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          box-sizing: border-box;
+        }
+
+        :host(.inner-space) {
+          padding: var(--space-400) var(--space-500);
+        }
+
+        @media (min-width: 768px) {
+          :host(.inner-space) {
+            padding: var(--space-500) var(--space-600);
+          }
+        }
+
+        :host(.hidden) {
+          display: none;
+        }
+
+        ::slotted(mui-code) {
+          border-bottom-right-radius: calc(var(--card-radius) - 1px);
+          border-bottom-left-radius: calc(var(--card-radius) - 1px);
+        }
+      </style>
+      <slot></slot>
+    `
+    );
+    this.shadowRoot.innerHTML = i, requestAnimationFrame(() => {
+      if (!this.shadowRoot) return;
+      const s = this.shadowRoot.querySelector("slot");
+      if (!s) return;
+      const r = s.assignedNodes({ flatten: !0 }).filter((e) => {
+        var t;
+        return e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && ((t = e.textContent) == null ? void 0 : t.trim()) !== "";
+      });
+      if (r.length === 0) {
+        this.classList.add("hidden");
+        return;
+      }
+      let a = !1;
+      r.forEach((e) => {
+        var t;
+        if (e.nodeType === Node.ELEMENT_NODE) {
+          const o = e;
+          (o.tagName.toLowerCase() === "mui-code" || (t = o.querySelector) != null && t.call(o, "mui-code")) && (a = !0);
+        }
+      }), a || this.classList.add("inner-space");
+    });
+  }
+}
+customElements.define("mui-card-footer", d);

package/dist/esm/mui-card/header/index.js

@@ -0,0 +1,29 @@
+class t extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    if (!this.shadowRoot) return;
+    let e = (
+      /*html*/
+      `
+    <style>
+      :host {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+        padding: var(--space-400) var(--space-500);
+      }
+      @media (min-width: 768px) {
+        :host {
+          padding: var(--space-500) var(--space-600);
+        } 
+      }
+    </style>
+    <slot></slot>
+    `
+    );
+    this.shadowRoot.innerHTML = e;
+  }
+}
+customElements.define("mui-card-header", t);

package/dist/esm/mui-card/index.js

@@ -0,0 +1,4 @@
+import "./body/index.js";
+import "./card/index.js";
+import "./footer/index.js";
+import "./header/index.js";