@muibook/components 1.0.0

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

@@ -0,0 +1,30 @@
+class o extends HTMLElement {
+  constructor() {
+    super(), this.slotEl = null, this.mql = null;
+    const t = this.attachShadow({ mode: "open" }), e = (
+      /*css*/
+      `
+      :host { display: block; }
+    `
+    );
+    t.innerHTML = `
+      <style>${e}</style>
+      <slot></slot>
+    `, this.slotEl = t.querySelector("slot");
+  }
+  static get observedAttributes() {
+    return ["breakpoint"];
+  }
+  connectedCallback() {
+    const t = this.getAttribute("breakpoint");
+    if (!t || !this.slotEl) return;
+    this.mql = window.matchMedia(`(max-width: ${t}px)`);
+    const e = (s) => {
+      this.slotEl.setAttribute("name", s ? "showBelow" : "showAbove");
+    };
+    e(this.mql.matches), this.mql.addEventListener("change", (s) => {
+      e(s.matches);
+    });
+  }
+}
+customElements.define("mui-responsive", o);

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

@@ -0,0 +1,32 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["length", "weight", "direction"];
+  }
+  constructor() {
+    super();
+    const i = this.attachShadow({ mode: "open" });
+    let h = "horizontal", t = "100%", e = "1px";
+    this.setAttribute("role", "presentation"), this.setAttribute("direction", this.getAttribute("direction") || h), this.setAttribute("length", this.getAttribute("length") || t), this.setAttribute("weight", this.getAttribute("weight") || e);
+    const s = (
+      /*css*/
+      `
+      :host {
+        display: block;
+        background: var(--border-color);
+      }
+      :host([direction="horizontal"]) {
+        width: ${this.getAttribute("length") || t};
+        height: ${this.getAttribute("weight") || e};
+      }
+      :host([direction="vertical"]) {
+        height: ${this.getAttribute("length") || t};
+        width: ${this.getAttribute("weight") || e};
+      }
+    `
+    );
+    i.innerHTML = `
+    <style>${s}</style>
+  `;
+  }
+}
+customElements.define("mui-rule", r);

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

@@ -0,0 +1,204 @@
+import { getPartMap as i } from "../mui-utils/part-map/index.js";
+class f extends HTMLElement {
+  constructor() {
+    super(), this.partMap = "", this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["name", "value", "id", "label", "options", "disabled", "hide-label", "variant"];
+  }
+  async connectedCallback() {
+    await this.waitForPartMap(), this.partMap = i("text", "visual"), this.render(), this.setupListener();
+  }
+  attributeChangedCallback(e, o) {
+    if (!this.shadowRoot) return;
+    const r = (
+      /** @type {HTMLSelectElement | null} */
+      this.shadowRoot.querySelector("select")
+    );
+    e === "value" && r && (r.value = o || ""), e === "disabled" && r && (o === null || o === "false" ? r.removeAttribute("disabled") : r.setAttribute("disabled", "")), ["options", "label", "hide-label"].includes(e) && (this.render(), this.setupListener());
+  }
+  setupListener() {
+    if (!this.shadowRoot) return;
+    const e = this.shadowRoot.querySelector("select");
+    if (e) {
+      const o = e.cloneNode(!0);
+      e.parentNode && e.parentNode.replaceChild(o, e), o.addEventListener("change", (r) => {
+        const a = r.target;
+        a && this.dispatchEvent(
+          new CustomEvent("change", {
+            detail: { value: a.value },
+            bubbles: !0,
+            composed: !0
+          })
+        );
+      });
+    }
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const e = this.getAttribute("name") || "", o = this.getAttribute("id") || `mui-select-${Math.random().toString(36).substr(2, 9)}`, r = this.getAttribute("label") || "", a = this.getAttribute("value") || "", s = this.hasAttribute("hide-label"), c = this.hasAttribute("disabled"), d = this.getAttribute("options") || "[]", b = this.getAttribute("aria-label") || "", l = this.getAttribute("variant") || "", h = l || "";
+    s && !r && console.warn(
+      "mui-select Accessibility warning: When using 'hide-label', please provide a 'label' attribute so an 'aria-label' can be generated for screen reader support."
+    ), !r && !b && console.warn(
+      "mui-select Accessibility warning: A 'label' or 'aria-label' attribute is required for screen reader accessibility."
+    );
+    const u = s && r ? `aria-label="${r}"` : "";
+    let n = [];
+    try {
+      n = JSON.parse(d);
+    } catch (t) {
+      console.error("Invalid JSON in options attribute", t);
+    }
+    const v = n.map((t) => `<option value="${t.value}" ${t.value === a ? "selected" : ""}>${t.label}</option>`).join(""), p = (
+      /*html*/
+      `
+      <style>
+        :host {
+          display: inline-block;
+          width: 100%;
+          position: relative;
+        }
+        label {
+          font-size: var(--text-font-size);
+          font-weight: var(--font-weight-medium);
+          margin-bottom: var(--space-100);
+          color: var(--text-color);
+          display: block;
+        }
+        select {
+          min-height: 4.4rem;
+          line-height: var(--text-line-height);
+          padding: var(--space-200) var(--space-300);
+          font-size: var(--text-font-size);
+          border: var(--border-thin);
+          border-color: var(--form-default-border-color);
+          border-radius: var(--radius-100);
+          color: var(--text-color);
+          background: var(--input-background);
+          width: 100%;
+          box-sizing: border-box;
+          appearance: none;
+        }
+        select:hover {
+          border-color: var(--form-default-border-color-hover);
+        }
+        select:focus {
+          outline: var(--outline-thick);
+        }
+        select:disabled {
+          opacity: 0.4;
+          background-color: var(--input-background-disabled);
+          cursor: not-allowed;
+        }
+        select.success {
+          color: var(--form-success-text-color);
+          border-color: var(--form-success-border-color);
+          box-shadow: 0 0 0 2px var(--form-success-border-color);
+        }
+        select.warning {
+          color: var(--form-warning-text-color);
+          border-color: var(--form-warning-border-color);
+          box-shadow: 0 0 0 2px var(--form-warning-border-color);
+        }
+        select.error {
+          color: var(--form-error-text-color);
+          border-color: var(--form-error-border-color);
+          box-shadow: 0 0 0 2px var(--form-error-border-color);
+        }
+        select.success:hover {
+          color: var(--form-success-text-color-hover);
+          border-color: var(--form-success-border-color-hover);
+          box-shadow: 0 0 0 2px var(--form-success-border-color-hover);
+        }
+        select.warning:hover {
+          color: var(--form-warning-text-color-hover);
+          border-color: var(--form-warning-border-color-hover);
+          box-shadow: 0 0 0 2px var(--form-warning-border-color-hover);
+        }
+        select.error:hover {
+          color: var(--form-error-text-color-hover);
+          border-color: var(--form-error-border-color-hover);
+          box-shadow: 0 0 0 2px var(--form-error-border-color-hover);
+        }
+        .vh {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          margin: -1px;
+          padding: 0;
+          overflow: hidden;
+          clip: rect(0 0 0 0);
+          white-space: nowrap;
+          border: 0;
+        }
+        .chevron {
+          position: absolute; 
+          right: var(--space-300);
+          top: 50%;
+          transform: translateY(-50%);
+          padding: var(--space-300);
+          padding-left: var(--space-000);
+          padding-right: var(--space-000);
+          background: var(--input-background);
+          box-shadow: -4px 0 4px 0 var(--input-background);
+          pointer-events: none;
+        }
+
+        /* ========================================================================== */
+        /* STYLE ADJUSTMENTS WHEN SELECT IS SLOTTED WITHIN INPUT                      */
+        /* Related styles unique to this usage is found in the mui-input/index.js     */
+        /* ========================================================================== */
+
+        /* ========================================================================== */
+        /* BEFORE: When a SELECT has slot="before" applied to host for INPUT usage    */
+        /* ========================================================================== */
+
+            :host([slot="before"]) select {
+              border-right: none;
+              border-top-right-radius: var(--radius-000);
+              border-bottom-right-radius: var(--radius-000);
+            }
+
+        /* ========================================================================== */
+        /* AFTER: When a SELECT has slot="after" applied to host for INPUT usage      */
+        /* ========================================================================== */
+
+            :host([slot="after"]) select {
+              border-left: none;
+              border-top-left-radius: var(--radius-000);
+              border-bottom-left-radius: var(--radius-000);
+            }
+
+            /* Ensure feedback styles appear above INPUT */
+            select.success,
+            select.warning,
+            select.error {
+              z-index: 1;
+            }
+
+        /* ========================================================================== */
+
+      </style>
+      ${r ? (
+        /*html*/
+        `<label for="${o}" class="${s ? "vh" : ""}">${r}</label>`
+      ) : ""}
+    <select class="${h}" part="${this.partMap || ""}" name="${e}" id="${o}" ${u} ${c ? "disabled" : ""} >
+        ${v}
+      </select>
+      <mui-icon-down-chevron class="chevron" size="x-small"></mui-icon-down-chevron>
+    `
+    );
+    this.shadowRoot.innerHTML = p;
+  }
+  waitForPartMap() {
+    return new Promise((e) => {
+      if (typeof i == "function") return e();
+      const o = () => {
+        typeof i == "function" ? e() : requestAnimationFrame(o);
+      };
+      o();
+    });
+  }
+}
+customElements.define("mui-select", f);

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

@@ -0,0 +1,21 @@
+class t extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.setAttribute("role", "table"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+    <style>
+      :host {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--space-500);
+        box-sizing: border-box;
+      }
+    </style>
+    <slot name="start"></slot>
+    <slot name="end"></slot>
+    `);
+  }
+}
+customElements.define("mui-slat", t);

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

@@ -0,0 +1,335 @@
+class b extends HTMLElement {
+  static get observedAttributes() {
+    return [
+      "state",
+      "number",
+      "variant",
+      "partner",
+      "type",
+      "logo",
+      "logo-width",
+      "logo-height",
+      "bg-color",
+      "bg-image",
+      "inverted"
+    ];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  connectedCallback() {
+    this.render();
+  }
+  render() {
+    const p = this.getAttribute("state") || "default", l = this.getAttribute("number") || "0000", n = this.getAttribute("bg-color"), o = this.getAttribute("bg-image"), u = this.getAttribute("variant") || "plain", e = this.hasAttribute("inverted"), s = this.getAttribute("type") || "", d = p === "frozen", c = this.getAttribute("logo") || "", g = this.getAttribute("partner") || "", a = this.getAttribute("logo-height"), t = a && !isNaN(parseInt(a, 10)) ? parseInt(a, 10) : void 0;
+    t && t > 126 && console.warn(
+      `[mui-smart-card] The logo height (${t}px) exceeds the recommended maximum of 126px. This may affect vertical alignment or visual consistency.`
+    );
+    let r = "card", i = "";
+    u === "animated" ? r += " animated" : r += " plain", o ? i = `
+        background-image: url(${o});
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+      ` : n ? i = `background: ${n};` : i = `
+        background: ${e ? "linear-gradient(180deg, var(--grey-900) 0%, var(--black) 100%)" : "linear-gradient(180deg, var(--grey-200) 0%, var(--white) 100%)"};
+      `, this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        @keyframes cardAnimationMobile {
+          0% {
+            background-size: 101.265823% auto;
+            background-position: center;
+          }
+          60% {
+            background-size: 106.329114% auto;
+            background-position: center;
+          }
+          100% {
+            background-size: 101.265823% auto;
+            background-position: center;
+          }
+        }
+
+        @keyframes cardAnimationDesktop {
+          0% {
+            background-size: 400px auto;
+            background-position: center;
+          }
+          60% {
+            background-size: 420px auto;
+            background-position: center;
+          }
+          100% {
+            background-size: 400px auto;
+            background-position: center;
+          }
+        }
+
+        @keyframes cardGradient {
+          0% { background-position: 0% 10%; }
+          50% { background-position: 100% 91%; }
+          100% { background-position: 0% 10%; }
+        }
+
+        :host {
+          width: 100%;
+          max-width: 395px;
+          min-width: 247px;
+          border-radius: var(--radius-300);
+          overflow: hidden;
+          box-shadow: 0 0px 8px rgb(0 0 0 / 12%), 0 2px 16px rgb(0 0 0 / 12%),
+            0 4px 20px rgb(0 0 0 / 12%), 0 12px 28px rgb(0 0 0 / 12%);
+        }
+
+        .card-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          padding: calc(var(--space-300) + var(--space-025));
+          padding-bottom: 0;
+        }
+
+        /* Company */
+        /* =========================================== */
+        .logo {
+          display: flex;
+          justify-content: flex-end;
+          align-items: start;
+          max-width: 60%;
+          max-height: 60%;
+          overflow: hidden;
+        }
+
+        .logo img {
+          max-width: 100%;
+          max-height: 100%;
+          object-fit: contain;
+          display: block;
+          width: auto;
+          height: ${t ? `calc(${t}px / 1.5)` : "auto"};
+        }
+
+        @media (min-width: 500px) {
+          .logo img {
+            width: auto;
+            height: ${t ? `${t}px` : "auto"};
+          }   
+        }
+
+        /* Invert Logic */
+        /* =========================================== */
+        .type,
+        .card-number::part(display) {
+          color: ${e ? "var(--white)" : "var(--black)"};
+          text-shadow: ${e ? "0 0px 8px rgb(0 0 0 / 12%);" : "0 0px 8px rgb(255 255 255 / 12%);"};
+        }
+
+        img { 
+          filter: ${e ? "drop-shadow(0px 1px 0px var(--black-opacity-60))" : "drop-shadow(0px 1px 0px var(--white-opacity-60))"};
+        }
+
+
+        .inner {
+          box-shadow: ${e ? "inset 0 1px 0 0 rgb(255 255 255 / 20%), 0 1px 0 0 rgb(0 0 0 / 10%)" : "inset 0 1px 0 0 rgb(255 255 255 / 60%), 0 1px 0 0 rgb(0 0 0 / 40%)"};
+        }
+
+        .card.animated .inner::after {
+          background: linear-gradient(${e ? "120deg, rgb(255 255 255 / 2%) 30%, rgb(255 255 255 / 8%) 40%, rgb(255 255 255 / 4%) 40%" : "120deg, rgb(255 255 255 / 2%) 30%, rgb(255 255 255 / 25%) 40%, rgb(255 255 255 / 8%) 40%"});
+        }
+
+        /* Type */
+        /* =========================================== */
+        .type {
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+          text-transform: uppercase;
+          letter-spacing: var(--space-025);
+          font-weight: var(--font-weight-medium);
+        }
+        @media (min-width: 500px) {
+          .type {
+            font-size: var(--text-font-size-s);
+            line-height: var(--text-line-height-s);
+         }    
+        }
+
+        /* Card Number */
+        /* =========================================== */
+        .card-number {
+          bottom: calc(var(--space-300) + var(--space-025));
+          left: calc(var(--space-300) + var(--space-025));
+          position: absolute;
+          z-index: 1;
+        }
+
+        .card-number::part(display) {
+          display: flex;
+          gap: var(--space-100);
+          box-sizing: border-box;
+          font-size: var(--text-font-size-xs);
+          line-height: var(--text-line-height-xs);
+          font-weight: var(--font-weight-medium);
+        }
+
+        @media (min-width: 500px) {
+          .card-number::part(display) {
+            font-size: var(--text-font-size-s);
+            line-height: var(--text-line-height-s);
+         }    
+        }
+
+        /* Provider */
+        /* =========================================== */
+        .card-partner {
+          height: auto;
+          width: auto;
+          display: flex;
+          justify-content: end;
+          align-items: end;
+          bottom: calc(var(--space-300) + var(--space-025));
+          right: calc(var(--space-300) + var(--space-025));
+          position: absolute;
+          z-index: 1;
+        }
+
+        .card-partner img {
+          width: calc(100% / 1.5);
+          height: auto;
+        }
+
+        @media (min-width: 500px) {
+          .card-partner img {
+            width: 100%;
+          } 
+        }
+
+        /* Variant - Base */
+        /* =========================================== */
+        .card {
+          position: relative;
+          box-sizing: border-box;
+          display: grid;
+          grid-template-rows: 1fr auto;
+          -webkit-font-smoothing: antialiased;
+          font-size: 14px;
+          width: 100%;
+          max-width: 395px;
+          max-height: 248px;
+          min-width: 247px;
+          aspect-ratio: 1014 / 638;
+        }
+
+        .inner {
+          display: grid;
+          grid-template-rows: 1fr auto;
+          border-radius: var(--radius-300);
+        }
+
+        /* Variant - Virtual */
+        /* =========================================== */
+        .card.animated .inner {
+          animation-name: cardAnimationMobile;
+          animation-duration: 10s;
+          transform: translateZ(0);
+          position: relative;
+          animation-iteration-count: infinite;
+          animation-direction: alternate;
+          animation-timing-function: ease-in-out;
+        }
+
+        @media (min-width: 500px) {
+          .card.animated .inner {
+            animation-name: cardAnimationDesktop;
+          }
+        }
+
+        .card.animated .inner::before {
+          content: "";
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          z-index: 1;
+          border-radius: 16px;
+        }
+
+        .card.animated .inner::after {
+          content: "";
+          width: 100%;
+          height: 100%;
+          border-radius: 16px;
+          background-size: 150% 150%;
+          animation: cardGradient 45s ease-in-out infinite;
+          transform: translateZ(0);
+          position: absolute;
+        }
+
+        /* Frozen State */
+        /* =========================================== */
+        .frozen {
+          filter: grayscale(100%);
+          transition: filter 0.2s ease-in-out;
+          position: relative;
+        }
+        .frozen .inner {
+          filter: blur(16px);
+          transition: filter 0.2s ease-in-out;
+        }
+        .frozen:hover {
+          filter: grayscale(0%);
+        }
+        .frozen:hover .inner {
+          filter: blur(0);
+        }
+        mui-badge {
+          position: absolute;
+          z-index: 1;
+          top: 50%;
+          left: 50%;
+          transform: translateX(-50%) translateY(-50%);
+          opacity: 1;
+          transition: opacity 0.2s ease-in-out;
+        }
+
+        .frozen:hover mui-badge { opacity: 0; }
+
+      </style>
+
+      <div
+
+        class="${r} 
+        ${d ? "frozen" : ""}" 
+        >
+        ${d ? "<mui-badge>Frozen</mui-badge>" : ""}
+
+        <div class="inner" style="${i}">
+          <div class="card-top">
+            <span class="type">${s ? `${s}` : ""}</span>
+            ${c ? `
+                  <div class="logo">
+                    <img src="${c}" class="logo-img" />
+                  </div>` : ""}
+          </div>
+
+          <mui-body class="card-number"><span>••••</span><span>${l}</span></mui-body>
+
+          <div class="card-partner">
+
+            ${g ? `
+       
+                    <img src="${g}" class="logo-img" alt="partner logo"/>
+                 ` : ""}
+
+
+
+          </div>
+        </div>
+
+      </div>
+    `);
+  }
+}
+customElements.define("mui-smart-card", b);

package/dist/esm/mui-stack/hstack/index.js

@@ -0,0 +1,52 @@
+import { getPartMap as a } from "../../mui-utils/part-map/index.js";
+class e extends HTMLElement {
+  static get observedAttributes() {
+    return ["space", "alignY", "alignX"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.space = "var(--space-500)", this.alignY = "flex-start", this.alignX = "flex-start", this.styles = /*css*/
+    `
+      :host {
+        display: block;
+      }
+      slot {
+        display: flex;
+        gap: var(--space);
+        align-items: var(--alignY);
+        justify-content: var(--alignX);
+      }
+    `;
+  }
+  async connectedCallback() {
+    if (!this.shadowRoot) return;
+    await this.waitForPartMap();
+    const t = a("spacing", "layout", "visual");
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>${this.styles}</style>
+      <slot 
+        part="${t}" 
+        style="
+          --space: ${this.getAttribute("space") || this.space};
+          --alignY: ${this.getAttribute("alignY") || this.alignY};
+          --alignX: ${this.getAttribute("alignX") || this.alignX};
+        ">
+      </slot>
+    `;
+  }
+  attributeChangedCallback(t, s) {
+    if (!this.shadowRoot) return;
+    const i = this.shadowRoot.querySelector("slot");
+    i && (t === "space" && i.style.setProperty("--space", s || this.space), t === "alignY" && i.style.setProperty("--alignY", s || this.alignY), t === "alignX" && i.style.setProperty("--alignX", s || this.alignX));
+  }
+  waitForPartMap() {
+    return new Promise((t) => {
+      if (typeof a == "function") return t();
+      const s = () => {
+        typeof a == "function" ? t() : requestAnimationFrame(s);
+      };
+      s();
+    });
+  }
+}
+customElements.define("mui-h-stack", e);

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

@@ -0,0 +1,2 @@
+import "./hstack/index.js";
+import "./vstack/index.js";