@muibook/components 1.0.0

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

@@ -0,0 +1,117 @@
+class l extends HTMLElement {
+  constructor() {
+    super(), this.hasAttribute("direction") || this.setAttribute("direction", "horizontal"), this.handleTabChange = this.handleTabChange.bind(this), this.shadow = this.attachShadow({ mode: "open" }), this.shadow.innerHTML = /*html*/
+    `
+    <style>
+      :host {
+        display: block;
+        overflow: hidden;
+        position: relative;
+        background: var(--carousel-background);
+        border-radius: var(--carousel-radius);
+      }
+  
+      .panel-slot {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+  
+      .carousel-track {
+        display: grid;
+        transition: transform var(--speed-400) ease-in-out;
+        width: 100%;
+        height: 100%;
+        grid-auto-flow: column;
+        grid-auto-columns: 100%;
+      }
+  
+      ::slotted([slot="item"]) { width: 100%; height: 100%; }
+      .controls { display: flex; }
+
+
+      /* Base positioning for all control slots */
+      ::slotted([slot="controls"]) {
+        position: absolute;
+        z-index: 10;
+      }
+
+      ::slotted([slot="controls"][controlsPosition="top"]) {
+        top: var(--carousel-tab-position);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      ::slotted([slot="controls"][controlsPosition="right"]) {
+        top: 50%;
+        right: var(--carousel-tab-position);
+        transform: translateY(-50%);
+      }
+
+      ::slotted([slot="controls"][controlsPosition="bottom"]) {
+        bottom: var(--carousel-tab-position);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+        
+      ::slotted([slot="controls"][controlsPosition="left"]) {
+        top: 50%;
+        left: var(--carousel-tab-position);
+        transform: translateY(-50%);
+      }
+
+      ::slotted([slot="controls"][controlsPosition="top-left"]) {
+        top: var(--carousel-tab-position);
+        left: var(--carousel-tab-position);
+      }
+
+      ::slotted([slot="controls"][controlsPosition="top-right"]) {
+        top: var(--carousel-tab-position);
+        right: var(--carousel-tab-position);
+      }
+
+      ::slotted([slot="controls"][controlsPosition="bottom-right"]) {
+        bottom: var(--carousel-tab-position);
+        right: var(--carousel-tab-position);
+      }
+
+      ::slotted([slot="controls"][controlsPosition="bottom-left"]) {
+        bottom: var(--carousel-tab-position);
+        left: var(--carousel-tab-position);
+      }
+
+      /* Fallback (bottom-center) if no controlsPosition specified */
+      ::slotted([slot="controls"]:not([controlsPosition])) {
+        bottom: var(--carousel-tab-position);
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+    </style>
+  
+    <slot name="controls"></slot>
+    <div class="panel-slot">
+      <div class="carousel-track">
+        <slot name="item"></slot>
+      </div>
+    </div>
+  `;
+  }
+  connectedCallback() {
+    this.addEventListener("tab-change", this.handleTabChange);
+    const t = this.querySelector("tab-bar");
+    if (t) {
+      const o = t.querySelector("tab-item[active]");
+      o && this.updatePanels(o.id);
+    }
+  }
+  handleTabChange(t) {
+    const o = t;
+    this.updatePanels(o.detail.activeId);
+  }
+  updatePanels(t) {
+    const o = this.querySelectorAll("mui-carousel-panel"), e = this.shadow.querySelector(".carousel-track"), s = Array.from(o).findIndex((a) => a.getAttribute("item") === t);
+    s !== -1 && (e.style.transform = `translateX(-${s * 100}%)`);
+  }
+}
+customElements.define("mui-carousel-controller", l);

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

@@ -0,0 +1,2 @@
+import "./controller/index.js";
+import "./panel/index.js";

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

@@ -0,0 +1,29 @@
+class t extends HTMLElement {
+  static get observedAttributes() {
+    return ["item"];
+  }
+  constructor() {
+    super();
+    const e = this.attachShadow({ mode: "open" });
+    e.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+          box-sizing: border-box;
+          overflow: hidden;
+        }
+      </style>
+      <slot></slot>
+    `;
+  }
+  get item() {
+    return this.getAttribute("item");
+  }
+  set item(e) {
+    e !== null && this.setAttribute("item", e);
+  }
+  attributeChangedCallback(e, i, o) {
+  }
+}
+customElements.define("mui-carousel-panel", t);

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

@@ -0,0 +1,56 @@
+class i extends HTMLElement {
+  static get observedAttributes() {
+    return ["size"];
+  }
+  constructor() {
+    super();
+    const e = this.attachShadow({ mode: "open" }), t = this.getAttribute("size") || "x-small";
+    this.setAttribute("size", t);
+    const s = (
+      /*css*/
+      `
+      :host {
+        display: block;
+      }
+      :host([size="x-small"]) code {
+        font-size: var(--text-font-size-xs);
+        line-height: var(--text-line-height-xs);
+      }
+      :host([size="small"]) code {
+        font-size: var(--text-font-size-s);
+        line-height: var(--text-line-height-s);
+      }
+      :host([size="medium"]) code {
+        font-size: var(--text-font-size-m);
+        line-height: var(--text-line-height-m);
+      }
+      :host([size="large"]) code {
+        font-size: var(--text-font-size-l);
+        line-height: var(--text-line-height-l);
+      }
+      code {
+        display: block;
+        border-radius: inherit;
+        font-family: monospace;
+        color: var(--text-color);
+        background: var(--surface-elevated-200);
+        padding: var(--space-400) var(--space-500);
+        box-sizing: border-box;
+      }
+
+      @media (min-width: 600px) {
+        code {
+          padding: var(--space-500) var(--space-600);
+        } 
+      }
+
+    `
+    );
+    e.innerHTML = /*html*/
+    `
+      <style>${s}</style>
+      <code><slot></slot></code>
+  `;
+  }
+}
+customElements.define("mui-code", i);

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

@@ -0,0 +1,57 @@
+class e extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    let t = (
+      /*html*/
+      `
+    <style>
+
+      :host {
+        display: block;
+        width: 95%;
+        width: calc( 100% - 4.8rem );
+        max-width: 118.0rem;
+        padding-top: 2.4rem;
+        padding-bottom: 2.4rem;
+        min-width: 27.2rem;
+        margin: 0 2.4rem; }
+
+      /* Center
+      ========================================= */
+      :host([center]) {
+        margin: 0 auto; }
+      /* ===================================== */
+
+      /* Fluid
+      ========================================= */
+      :host([fluid]) {
+        max-width: 100%; }
+      /* ===================================== */
+
+      /* Small
+      ========================================= */
+      :host([small]) {
+        max-width: 54.0rem; }
+      /* ===================================== */
+
+      /* Medium
+      ========================================= */
+      :host([medium]) {
+        max-width: 70.0rem; }
+      /* ===================================== */
+
+      /* Large
+      ========================================= */
+      :host([large]) {
+        max-width: 118.0rem; }
+      /* ===================================== */
+    </style>
+    <slot></slot>
+    `
+    );
+    this.shadowRoot && (this.shadowRoot.innerHTML = t);
+  }
+}
+customElements.define("mui-container", e);

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

@@ -0,0 +1,44 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["variant", "message"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+    const t = this.getAttribute("variant") || "default";
+    this.setAttribute("variant", t);
+  }
+  connectedCallback() {
+    this.render(), this.passAttributesToChild();
+  }
+  attributeChangedCallback(t, e, a) {
+    (t === "variant" || t === "message") && (this.render(), this.passAttributesToChild());
+  }
+  passAttributesToChild() {
+    var i;
+    if (!this.shadowRoot) return;
+    const t = this.shadowRoot.querySelector("slot"), e = (i = t == null ? void 0 : t.assignedElements) == null ? void 0 : i.call(t)[0];
+    if (!e) return;
+    ["variant", "label", "hide-label"].forEach((s) => {
+      this.hasAttribute(s) ? e.setAttribute(s, this.getAttribute(s) || "") : e.removeAttribute(s);
+    });
+  }
+  render() {
+    const t = this.getAttribute("message"), e = this.getAttribute("variant");
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: block;
+        }
+
+        mui-body {
+          margin-top: var(--space-100);
+        }
+      </style>
+
+      <slot></slot>
+      ${t ? `<mui-body size="small" variant="${e}">${t}</mui-body>` : ""}
+    `);
+  }
+}
+customElements.define("mui-field", r);

package/dist/esm/mui-file-upload/index.js

@@ -0,0 +1,100 @@
+class r extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.acceptedFileTypes = this.getAttribute("acceptedFileTypes") || "", this.currentFileName = this.getAttribute("currentFileName") || "", this.selectedFileName = null, this.render(), this.cacheElements(), this.attachEvents();
+  }
+  render() {
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        .wrapper {
+          transition: background-color var(--speed-300) ease;
+          cursor: pointer;
+          align-items: center;
+          justify-content: space-between;
+          padding-left: 16px;
+          display: flex;
+          width: 100%;
+          line-height: var(--text-line-height-s);
+          box-sizing: border-box;
+          font-size: var(--text-font-size-s);
+          border-radius: var(--radius-100);
+          border: var(--border-thin);
+          border-style: dashed;
+          border-color: var(--form-default-border-color);
+          color: var(--text-color);
+          background: var(--input-background);
+          min-height: 4.2rem;
+        }
+        .wrapper:hover {
+          border-color: var(--form-default-border-color-hover);
+        }
+        .label {
+          width: 90px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        @media (min-width: 340px) {
+          .label {
+            width: 115px;
+          }
+        }
+        @media (min-width: 440px) {
+          .label {
+            width: 175px;
+          }
+        }
+        @media (min-width: 600px) {
+          .label {
+            width: 220px;
+          }
+        }
+
+        mui-button::part(height) {
+          margin-right: 0.1rem;
+        }
+
+        mui-button::part(height) {
+          height: calc(4.2rem - 0.4rem);
+          padding: var(--space-400);
+          padding-top: var(--space-000);
+          padding-bottom: var(--space-000);
+
+        }
+
+        mui-button::part(border-radius) {
+          border-radius: calc(var(--radius-100) - 2px);
+        }
+
+        input[type="file"] {
+          display: none;
+        }
+      </style>
+      <div class="wrapper">
+        <span class="label">${this.currentFileName}</span>
+        <mui-button variant="tertiary">Browse</mui-button>
+        <input type="file" accept="${this.acceptedFileTypes}" />
+      </div>
+    `);
+  }
+  cacheElements() {
+    this.shadowRoot && (this.wrapper = this.shadowRoot.querySelector(".wrapper"), this.label = this.shadowRoot.querySelector(".label"), this.button = this.shadowRoot.querySelector(".button"), this.input = this.shadowRoot.querySelector('input[type="file"]'));
+  }
+  attachEvents() {
+    this.wrapper.addEventListener("click", () => {
+      this.input.click();
+    }), this.input.addEventListener("change", this.handleFileChange.bind(this));
+  }
+  handleFileChange(i) {
+    var t;
+    const e = (t = i.target.files) == null ? void 0 : t[0];
+    e && (this.selectedFileName = e.name, this.label.textContent = e.name, this.dispatchEvent(
+      new CustomEvent("file-upload", {
+        detail: { file: e },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+}
+customElements.define("mui-file-upload", r);

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

@@ -0,0 +1,42 @@
+import { getPartMap as s } from "../mui-utils/part-map/index.js";
+class i extends HTMLElement {
+  static get observedAttributes() {
+    return ["col", "space"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  async connectedCallback() {
+    await this.waitForPartMap();
+    const t = this.getAttribute("col") || "1fr 1fr", e = this.getAttribute("space") || "var(--space-000)", a = s("layout", "spacing"), o = (
+      /*css*/
+      `
+      :host {
+        display: block;
+      }
+      div {
+        display: grid;
+        grid-template-columns: var(--col);
+        gap: var(--gap);
+      }
+    `
+    );
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>${o}</style>
+      <div part="${a}" style="--col: ${t}; --gap: ${e};">
+        <slot></slot>
+      </div>
+    `);
+  }
+  waitForPartMap() {
+    return new Promise((t) => {
+      if (typeof s == "function") return t();
+      const e = () => {
+        typeof s == "function" ? t() : requestAnimationFrame(e);
+      };
+      e();
+    });
+  }
+}
+customElements.define("mui-grid", i);

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

@@ -0,0 +1,36 @@
+class t extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "level"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    if (!this.shadowRoot) return;
+    const e = this.getAttribute("size") || "1", i = `h${this.getAttribute("level") || e}`;
+    this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        @import url("./css/mui-reset.css");
+        :host { display: block; }
+
+        h1, h2, h3, h4, h5, h6 {
+          margin: var(--space-000);
+          font-weight: var(--heading-font-weight);
+          color: var(--heading-text-color);
+        }
+
+        .size-1 { font-size: var(--heading-font-size-100); line-height: var(--heading-line-height-100); }
+        .size-2 { font-size: var(--heading-font-size-200); line-height: var(--heading-line-height-200); }
+        .size-3 { font-size: var(--heading-font-size-300); line-height: var(--heading-line-height-300); }
+        .size-4 { font-size: var(--heading-font-size-400); line-height: var(--heading-line-height-400); }
+        .size-5 { font-size: var(--heading-font-size-500); line-height: var(--heading-line-height-500); }
+        .size-6 { font-size: var(--heading-font-size-600); line-height: var(--heading-line-height-600); }
+      </style>
+      <${i} class="size-${e}">
+        <slot></slot>
+      </${i}>
+    `;
+  }
+}
+customElements.define("mui-heading", t);

package/dist/esm/mui-icons/accessibility/index.js

@@ -0,0 +1,55 @@
+class c extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, i) {
+    (e === "size" || e === "color") && t !== i && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", s = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, o = s[e] ?? s.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${o};
+          height: ${o};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M17.992 35C8.65 35 1 27.35 1 18.008S8.65 1 17.992 1 35 8.666 35 18.008 27.334 35 17.992 35m0-4.932c6.686 0 12.06-5.39 12.06-12.06 0-6.686-5.39-12.06-12.06-12.06s-12.06 5.374-12.06 12.06c0 6.67 5.39 12.06 12.06 12.06m0-18.02a1.92 1.92 0 0 1-1.913-1.912c0-1.043.854-1.897 1.913-1.897s1.913.854 1.913 1.897a1.92 1.92 0 0 1-1.913 1.913m0 .98c2.102 0 5.058-.347 6.48-.584a3 3 0 0 1 .396-.032c.348 0 .743.285.743.822 0 .396-.221.727-.617.838-.458.142-3.825.522-4.236.6-.41.096-.664.443-.664.95 0 .758 0 3.192.174 4.314.158 1.091 1.454 6.418 1.518 6.655.142.569-.19 1.059-.775 1.059-.41 0-.711-.221-.838-.775-.252-1.074-1.17-4.757-1.454-5.642-.205-.633-.38-.87-.727-.87-.364 0-.506.237-.711.87-.285.9-1.201 4.568-1.47 5.642-.158.554-.427.775-.838.775-.585 0-.917-.49-.775-1.06.064-.236 1.344-5.563 1.518-6.654.19-1.122.221-3.556.19-4.315-.016-.506-.27-.853-.68-.948-.427-.08-3.778-.475-4.236-.6-.395-.096-.617-.444-.617-.839 0-.537.364-.822.743-.822.127 0 .269.016.395.032 1.423.237 4.395.585 6.481.585"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-accessibility", c);

package/dist/esm/mui-icons/add/index.js

@@ -0,0 +1,55 @@
+class r extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, o) {
+    (e === "size" || e === "color") && t !== o && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, s = i[e] ?? i.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${s};
+          height: ${s};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+      <path
+        d="M6 18.507a2.536 2.536 0 0 1 2.522-2.536h6.95V9.036A2.54 2.54 0 0 1 18.006 6.5a2.536 2.536 0 0 1 2.522 2.536v6.935h6.949A2.536 2.536 0 0 1 30 18.507a2.524 2.524 0 0 1-2.522 2.522h-6.95v6.949a2.524 2.524 0 0 1-2.521 2.522 2.527 2.527 0 0 1-2.536-2.522v-6.95H8.522A2.524 2.524 0 0 1 6 18.508"
+      ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-add", r);

package/dist/esm/mui-icons/attention/index.js

@@ -0,0 +1,55 @@
+class c extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(e, t, o) {
+    (e === "size" || e === "color") && t !== o && this.render();
+  }
+  render() {
+    const e = this.getAttribute("size") || "small", t = this.getAttribute("color"), l = t && {
+      default: "var(--icon-color-default)",
+      inverted: "var(--icon-color-inverted)"
+    }[t] || t || "var(--icon-color-default)", i = {
+      "x-small": "1.6rem",
+      small: "2.4rem",
+      medium: "3.6rem",
+      large: "4.8rem"
+    }, s = i[e] ?? i.small;
+    this.classList.add("mui-icon"), this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          width: ${s};
+          height: ${s};
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          fill: ${l};
+        }
+        svg {
+          width: 100%;
+          display: block;
+          fill: inherit; 
+        }
+      </style>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 36 36"
+      >
+        <path
+          d="M13.75 32.5c-1.856 0-3.196-.697-4.279-1.954l-5.104-5.959C3.271 23.317 3 22.51 3 20.815v-5.63c0-1.695.27-2.501 1.367-3.772l5.104-5.945C10.554 4.197 11.894 3.5 13.75 3.5h8.502c1.855 0 3.235.67 4.278 1.968l4.86 5.945C32.553 12.834 33 13.49 33 15.185v5.63c0 1.695-.27 2.501-1.367 3.772l-5.104 5.959c-1.083 1.257-2.423 1.954-4.278 1.954zm4.277-12.723c1.07 0 1.692-.588 1.76-1.709l.244-5.084c.054-1.188-.772-1.981-2.031-1.981-1.245 0-2.071.793-2.004 1.981l.23 5.098c.068 1.093.704 1.695 1.801 1.695m0 5.138c1.205 0 2.112-.71 2.112-1.886 0-1.134-.893-1.858-2.112-1.858-1.218 0-2.139.71-2.139 1.858 0 1.175.92 1.886 2.14 1.886"
+        ></path>
+      </svg>
+
+
+    `);
+  }
+}
+customElements.define("mui-icon-attention", c);