@muibook/components 1.0.0

package/dist/esm/mui-stack/vstack/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", "alignX", "alignY"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.space = "var(--space-500)", this.alignX = "normal", this.alignY = "normal", this.styles = /*css*/
+    `
+      :host {
+        display: block;
+      }
+      slot {
+        display: grid;
+        gap: var(--space);
+        justify-items: var(--alignX);
+        align-items: var(--alignY);
+      }
+    `;
+  }
+  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};
+          --alignX: ${this.getAttribute("alignX") || this.alignX};
+          --alignY: ${this.getAttribute("alignY") || this.alignY};
+        ">
+      </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 === "alignX" && i.style.setProperty("--alignX", s || this.alignX), t === "alignY" && i.style.setProperty("--alignY", s || this.alignY));
+  }
+  waitForPartMap() {
+    return new Promise((t) => {
+      if (typeof a == "function") return t();
+      const s = () => {
+        typeof a == "function" ? t() : requestAnimationFrame(s);
+      };
+      s();
+    });
+  }
+}
+customElements.define("mui-v-stack", e);

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

@@ -0,0 +1,143 @@
+class h extends HTMLElement {
+  constructor() {
+    super(), this._checked = !1, this._checkbox = null, this.attachShadow({ mode: "open" }), this._checked = !1;
+  }
+  connectedCallback() {
+    var t;
+    this.render(), this._checkbox = this.shadowRoot.querySelector('input[type="checkbox"]'), this._checked = this.hasAttribute("checked"), this._checkbox && (this._checkbox.checked = this._checked), this._updateIcons(), this._updateDisabledState(), (t = this._checkbox) == null || t.addEventListener("change", () => {
+      this._checkbox && (this.checked = this._checkbox.checked, this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { checked: this.checked },
+          bubbles: !0,
+          composed: !0
+        })
+      ));
+    });
+  }
+  static get observedAttributes() {
+    return ["label", "disabled", "checked"];
+  }
+  attributeChangedCallback(t, e, i) {
+    if (t === "checked" && e !== i && (this._checked = i !== null, this._checkbox && (this._checkbox.checked = this._checked, this._updateIcons())), t === "disabled" && e !== i) {
+      const s = i !== null;
+      this._checkbox && (this._checkbox.disabled = s, this._checkbox.setAttribute("aria-disabled", s.toString())), this._updateDisabledState();
+    }
+  }
+  get checked() {
+    return this._checked;
+  }
+  set checked(t) {
+    const e = !!t;
+    this._checked !== e && (this._checked = e, e ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this._checkbox && (this._checkbox.checked = this._checked, this._checkbox.setAttribute("aria-checked", this._checked.toString()), this._updateIcons()));
+  }
+  _updateDisabledState() {
+    var e, i, s, c;
+    this.hasAttribute("disabled") ? (this.shadowRoot.host.classList.add("disabled"), (e = this._checkbox) == null || e.setAttribute("aria-disabled", "true"), (i = this._checkbox) == null || i.setAttribute("tabindex", "-1")) : (this.shadowRoot.host.classList.remove("disabled"), (s = this._checkbox) == null || s.removeAttribute("aria-disabled"), (c = this._checkbox) == null || c.removeAttribute("tabindex"));
+  }
+  _updateIcons() {
+    const t = this.shadowRoot.querySelector(
+      'slot[name="on-icon"]'
+    ), e = this.shadowRoot.querySelector(
+      'slot[name="off-icon"]'
+    );
+    t && t.assignedElements().forEach((i) => {
+      i.style.display = this._checked ? "inline" : "none";
+    }), e && e.assignedElements().forEach((i) => {
+      i.style.display = this._checked ? "none" : "inline";
+    });
+  }
+  render() {
+    const t = this.getAttribute("label");
+    t || console.warn(
+      "mui-switch Accessibility warning: Provide a 'label' to ensure the switch is described for assistive technologies."
+    ), this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host { display: inline-block; }
+
+        .switch {
+          position: relative;
+          display: inline-block;
+          width: var(--switch-width);
+          height: var(--switch-height);
+        }
+
+        .switch input {
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+
+        .switch input:focus-visible + .track {
+          outline: var(--outline-thick);
+        }
+
+        .track {
+          position: absolute;
+          cursor: pointer;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: var(--switch-track-background);
+          transition: background-color var(--speed-200);
+          border-radius: var(--switch-height);
+        }
+
+        .thumb {
+          position: absolute;
+          top: var(--switch-offset);
+          left: var(--switch-offset);
+          width: var(--switch-thumb-size);
+          height: var(--switch-thumb-size);
+          background-color: var(--switch-thumb-bg);
+          transition: transform var(--speed-200);
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        input:checked + .track {
+          background-color: var(--switch-track-background-checked);
+        }
+
+        input:checked + .track .thumb {
+          transform: translateX(calc(var(--switch-width) - var(--switch-thumb-size) - (var(--switch-offset) * 2)));
+        }
+
+        ::slotted([slot="on-icon"]),
+        ::slotted([slot="off-icon"]) {
+          width: 16px;
+          height: 16px;
+          fill: var(--switch-icon);
+        }
+
+        :host(.disabled) {
+          cursor: not-allowed;
+        }
+
+        :host(.disabled) .switch {
+          opacity: 0.4;
+          pointer-events: none;
+        }
+
+      </style>
+      <label class="switch">
+        <input 
+          type="checkbox"
+          role="switch"
+          aria-checked="${this._checked}"
+          ${t ? `aria-label="${t}"` : ""}
+        >
+        <span class="track">
+          <span class="thumb">
+            <slot name="on-icon"></slot>
+            <slot name="off-icon"></slot>
+          </span>
+        </span>
+      </label>
+    `;
+  }
+}
+customElements.define("mui-switch", h);

package/dist/esm/mui-table/cell/index.js

@@ -0,0 +1,64 @@
+class s extends HTMLElement {
+  static get observedAttributes() {
+    return ["align-y"];
+  }
+  constructor() {
+    super();
+    const t = this.attachShadow({ mode: "open" });
+    this.setAttribute("role", "cell");
+    const e = (
+      /*css*/
+      `
+    :host {
+      display: flex;
+      justify-content: space-between;
+      align-self: ${this.getAttribute("align-y") || "initial"};
+      text-align: left;
+    }
+    :host(*:first-of-type) {
+      padding-left: var(--space-600);
+    }
+    :host(*:last-of-type) {
+      padding-right: var(--space-600);
+    }
+
+    /* Card Slot (Supports: Table Cell, Accordion Block) */
+    :host(.card-slot:first-of-type) {
+      padding-left: var(--space-500);
+    }
+    :host(.card-slot:last-of-type) {
+      padding-right: var(--space-500);
+    }
+    @media (min-width: 768px) {
+      :host(.card-slot:first-of-type) {
+        padding-left: var(--space-600);
+      }
+      :host(.card-slot:last-of-type) {
+        padding-right: var(--space-600);
+      }
+    }
+
+    :host([checkbox]) {
+      width: auto;
+      padding: 0;
+      text-align: center;
+    }
+    :host([action]) {
+      width: 4.4rem;
+      height: 4.4rem;
+      padding: 0;
+      padding-right: var(--space-300);
+    }
+    :host([heading]) {
+      font-weight: bold;
+    }
+  `
+    );
+    t.innerHTML = /*html*/
+    `
+    <style>${e}</style>
+    <slot></slot>
+  `;
+  }
+}
+customElements.define("mui-cell", s);

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

@@ -0,0 +1,4 @@
+import "./cell/index.js";
+import "./row/index.js";
+import "./row-group/index.js";
+import "./table/index.js";

package/dist/esm/mui-table/row/index.js

@@ -0,0 +1,26 @@
+class t extends HTMLElement {
+  static get observedAttributes() {
+    return ["columns"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.setAttribute("role", "row"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+    <style>
+      :host {
+        display: grid;
+        grid-template-columns: ${this.getAttribute("columns")};
+        grid-gap: var(--space-500);
+        margin-bottom: var(--space-000);
+        padding: var(--space-300) var(--space-000);
+        border-top: var(--border-thin);
+        align-items: center;
+      }
+    </style>
+    <slot></slot>
+    `);
+  }
+}
+customElements.define("mui-row", t);

package/dist/esm/mui-table/row-group/index.js

@@ -0,0 +1,24 @@
+class o extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.setAttribute("role", "rowgroup"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+    <style>
+      :host {
+        display: block;
+      }
+      :host([heading]) {
+        display: block;
+      }
+
+      :host([heading]) ::slotted(mui-row) {
+        border: none;
+      }
+    </style>
+    <slot></slot>
+    `);
+  }
+}
+customElements.define("mui-row-group", o);

package/dist/esm/mui-table/table/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: block;
+        box-sizing: border-box;
+        text-indent: initial;
+        width: 100%;
+        margin: var(--space-000);
+      }
+    </style>
+    <slot></slot>
+    `);
+  }
+}
+customElements.define("mui-table", t);

package/dist/esm/mui-tabs/controller/index.js

@@ -0,0 +1,23 @@
+class n extends HTMLElement {
+  constructor() {
+    super(), this.handleTabChange = this.handleTabChange.bind(this);
+  }
+  connectedCallback() {
+    this.addEventListener("tab-change", this.handleTabChange);
+    const e = this.querySelector("mui-tab-bar");
+    if (e) {
+      const t = e.querySelector("mui-tab-item[active]");
+      t && this.updatePanels(t.id);
+    }
+  }
+  handleTabChange(e) {
+    const t = e;
+    this.updatePanels(t.detail.activeId);
+  }
+  updatePanels(e) {
+    this.querySelectorAll("mui-tab-panel").forEach((a) => {
+      a.getAttribute("item") === e ? a.style.display = "" : a.style.display = "none";
+    });
+  }
+}
+customElements.define("mui-tab-controller", n);

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

@@ -0,0 +1,4 @@
+import "./controller/index.js";
+import "./item/index.js";
+import "./panel/index.js";
+import "./tab-bar/index.js";

package/dist/esm/mui-tabs/item/index.js

@@ -0,0 +1,61 @@
+class s extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["active"];
+  }
+  attributeChangedCallback(t, i, a) {
+    t === "active" && this.updateActiveState();
+  }
+  connectedCallback() {
+    if (!this.shadowRoot) return;
+    const t = this.getAttribute("icon");
+    this.setAttribute("tabindex", this.hasAttribute("active") ? "0" : "-1"), this.shadowRoot.innerHTML = "";
+    const i = document.createElement("style");
+    if (i.textContent = /*html*/
+    `
+      :host {
+        user-select: none;
+        display: flex;
+        justify-content: center;
+        gap: var(--space-100);
+        align-items: center;
+        padding: var(--space-200) var(--space-400);
+        font-size: var(--text-font-size-m);
+        line-height: var(--text-line-height-m);
+        font-weight: var(--font-weight-bold);
+        color: var(--tab-text-color);
+        background: transparent;
+        white-space: nowrap;
+        cursor: pointer;
+        min-height: 4.2rem;
+        box-sizing: border-box;
+        border-radius: calc(var(--tab-radius) - 0.2rem);
+      }
+
+      :host(.active) {
+        color: var(--tab-text-color-active);
+      }
+
+      :host(.active:focus-visible) {
+        outline: var(--outline-thick);
+        outline-offset: -5px;
+      }
+
+      ::slotted(*) {
+        margin-left: var(--space-100);
+      }
+    `, this.shadowRoot.appendChild(i), t && t.trim() !== "" && customElements.get(t)) {
+      const e = document.createElement(t);
+      e.setAttribute("color", "var(--tab-icon)"), e.setAttribute("size", "small"), this.shadowRoot.appendChild(e), this.iconEl = e;
+    }
+    const a = document.createElement("slot");
+    this.shadowRoot.appendChild(a), this.updateActiveState();
+  }
+  updateActiveState() {
+    const t = this.hasAttribute("active");
+    this.classList.toggle("active", t), this.setAttribute("role", "tab"), this.setAttribute("aria-selected", t ? "true" : "false"), this.setAttribute("tabindex", t ? "0" : "-1"), this.iconEl && this.iconEl.setAttribute("color", t ? "var(--tab-icon-active)" : "var(--tab-icon)");
+  }
+}
+customElements.define("mui-tab-item", s);

package/dist/esm/mui-tabs/panel/index.js

@@ -0,0 +1,32 @@
+class e extends HTMLElement {
+  static get observedAttributes() {
+    return ["item"];
+  }
+  constructor() {
+    super();
+    const t = this.attachShadow({ mode: "open" });
+    t.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+        }
+        .inner {
+          padding: var(--tab-panel-padding, 0);
+        }
+      </style>
+      <div class="inner">
+        <slot></slot>
+      </div>
+    `;
+  }
+  get item() {
+    return this.getAttribute("item");
+  }
+  set item(t) {
+    t !== null ? this.setAttribute("item", t) : this.removeAttribute("item");
+  }
+  attributeChangedCallback(t, s, n) {
+  }
+}
+customElements.define("mui-tab-panel", e);

package/dist/esm/mui-tabs/tab-bar/index.js

@@ -0,0 +1,136 @@
+class c extends HTMLElement {
+  constructor() {
+    super(), this._animationSpeed = 200, this.attachShadow({ mode: "open" }), this._handleResize = this._handleResize.bind(this), this._hasInitialized = !1, this._resizeTimeout = null, this._observedTab = null, this._activeTab = null, this._resizeObserver = new ResizeObserver(() => {
+      this._activeTab && this._updateHighlight(this._activeTab);
+    });
+  }
+  connectedCallback() {
+    const i = this.getAttribute("speed") || "200";
+    this._animationSpeed = parseInt(i, 10);
+    const s = Array.from(this.children);
+    this.hasAttribute("full-width") && this.classList.add("full-width"), this.setAttribute("role", "tablist");
+    const n = this.getAttribute("orientation") || "horizontal";
+    this.setAttribute("aria-orientation", n), this.addEventListener("keydown", (e) => {
+      const t = Array.from(this.children), r = t.findIndex((l) => l.hasAttribute("active")), h = this.getAttribute("aria-orientation") || "horizontal";
+      let o = r;
+      switch (e.key) {
+        case "ArrowRight":
+          h === "horizontal" && (o = (r + 1) % t.length, e.preventDefault());
+          break;
+        case "ArrowLeft":
+          h === "horizontal" && (o = (r - 1 + t.length) % t.length, e.preventDefault());
+          break;
+        case "ArrowDown":
+          h === "vertical" && (o = (r + 1) % t.length, e.preventDefault());
+          break;
+        case "ArrowUp":
+          h === "vertical" && (o = (r - 1 + t.length) % t.length, e.preventDefault());
+          break;
+        case "Home":
+          o = 0, e.preventDefault();
+          break;
+        case "End":
+          o = t.length - 1, e.preventDefault();
+          break;
+        default:
+          return;
+      }
+      const d = t[o];
+      d && (this.setActiveTab(d), d.focus());
+    }), s.forEach((e, t) => {
+      e.classList.remove("first", "middle", "last", "only"), s.length === 1 ? e.classList.add("only") : t === 0 ? e.classList.add("first") : t === s.length - 1 ? e.classList.add("last") : e.classList.add("middle");
+    }), s.forEach((e) => {
+      const t = e;
+      t.addEventListener("click", () => {
+        this.setActiveTab(t);
+      });
+    }), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          --tab-animation-speed: ${this._animationSpeed}ms;
+          position: relative;
+          display: inline-flex;
+          border-width: var(--stroke-size-100);
+          border-style: var(--stroke-solid);
+          border-color: var(--tab-border-color);
+          border-radius: var(--tab-radius);
+          background: var(--tab-background);
+          will-change: transform;
+          box-sizing: border-box;
+          overflow: hidden;
+        }
+
+        :host(.full-width) {
+          display: flex;
+          width: 100%;
+        }
+
+        .highlight {
+          border-radius: calc(var(--tab-radius) - 0.2rem);
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          background: var(--tab-background-active);
+          transition: transform var(--tab-animation-speed) cubic-bezier(0.25, 1, 0.5, 1), width var(--tab-animation-speed) cubic-bezier(0.25, 1, 0.5, 1);
+          z-index: 0;
+          padding: var(--space-200) var(--space-400);
+          box-sizing: border-box;
+          box-shadow: 0 0 4px 4px var(--tab-shadow-active);
+          will-change: transform, width;
+          transform: translateX(0);
+          width: 0;
+        }
+
+        ::slotted(mui-tab-item) {
+          position: relative;
+          z-index: 1;
+          flex: 1;
+          contain: content; /* Performance optimization */
+        }
+      </style>
+      <div class="highlight"></div>
+      <slot></slot>
+    `, window.addEventListener("resize", this._handleResize), this._resizeObserver.observe(this), requestAnimationFrame(() => {
+      const e = this.shadowRoot.querySelector(".highlight");
+      e.style.transition = "none";
+      const t = s.find((r) => r.hasAttribute("active")) || s[0];
+      t && (this._activeTab = t, t.setAttribute("active", ""), this._updateHighlight(t), this._observedTab = t, this._resizeObserver.observe(t)), e.offsetWidth, requestAnimationFrame(() => {
+        e.style.transition = "", this._hasInitialized = !0;
+      });
+    }));
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", this._handleResize), this._observedTab && this._resizeObserver.unobserve(this._observedTab), this._resizeObserver.unobserve(this), this._resizeTimeout && clearTimeout(this._resizeTimeout), this._resizeObserver.disconnect();
+  }
+  _handleResize() {
+    if (!this._activeTab) return;
+    this._resizeTimeout && clearTimeout(this._resizeTimeout), this._activeTab && Array.from(this.children).forEach((s) => {
+      s === this._activeTab ? s.setAttribute("active", "") : s.removeAttribute("active");
+    });
+    const i = this.shadowRoot.querySelector(".highlight");
+    i && (i.style.transition = "none", this._updateHighlight(this._activeTab), i.offsetWidth, this._resizeTimeout = window.setTimeout(() => {
+      i.style.transition = "", this._updateHighlight(this._activeTab);
+    }, 100));
+  }
+  _updateHighlight(i) {
+    const s = this.shadowRoot.querySelector(".highlight"), a = i.getBoundingClientRect(), n = this.getBoundingClientRect(), e = parseFloat(getComputedStyle(this).borderWidth) || 0, t = a.left - n.left - e;
+    s.style.transform = `translateX(${t}px)`, s.style.width = `${a.width}px`;
+  }
+  setActiveTab(i) {
+    if (Array.from(this.children).forEach((a) => a.removeAttribute("active")), i.setAttribute("active", ""), this._activeTab = i, this._observedTab && this._observedTab !== i && this._resizeObserver.unobserve(this._observedTab), this._observedTab = i, this._resizeObserver.observe(i), this._hasInitialized)
+      this._updateHighlight(i);
+    else {
+      const a = this.shadowRoot.querySelector(".highlight");
+      a.style.transition = "none", this._updateHighlight(i), a.offsetWidth, a.style.transition = "", this._hasInitialized = !0;
+    }
+    this.dispatchEvent(
+      new CustomEvent("tab-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { activeId: i.id }
+      })
+    );
+  }
+}
+customElements.define("mui-tab-bar", c);

package/dist/esm/mui-utils/part-map/index.js

@@ -0,0 +1,49 @@
+const t = {
+  text: [
+    "color",
+    "font-family",
+    "font-size",
+    "font-weight",
+    "letter-spacing",
+    "line-height",
+    "text-transform",
+    "text-decoration",
+    "text-align"
+  ],
+  spacing: ["padding", "margin", "gap", "width", "height", "box-sizing"],
+  layout: [
+    "display",
+    "flex",
+    "flex-direction",
+    "flex-wrap",
+    "justify-content",
+    "align-items",
+    "align-content",
+    "align-self",
+    "grid-template-columns",
+    "grid-template-rows",
+    "grid-column",
+    "grid-row",
+    "place-items",
+    "place-content",
+    "vertical-align"
+  ],
+  visual: [
+    "background",
+    "border",
+    "border-radius",
+    "box-shadow",
+    "opacity",
+    "transition",
+    "outline",
+    "color"
+  ]
+}, a = Object.values(t).flat();
+function n(...e) {
+  return e.map((i) => t[i] || []).flat().join(" ");
+}
+export {
+  t as PartTypes,
+  a as Parts,
+  n as getPartMap
+};

package/dist/muibook/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200