@muibook/components 19.6.0 → 20.1.0

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

@@ -1,4 +1,4 @@
-class p extends HTMLElement {
+class f extends HTMLElement {
   static get observedAttributes() {
     return [
       "name",
@@ -18,57 +18,70 @@ class p extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
+  get value() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("textarea");
+    return (e == null ? void 0 : e.value) ?? this.getAttribute("value") ?? "";
+  }
+  set value(e) {
+    this.setAttribute("value", e ?? "");
+  }
+  focus(e) {
+    var r;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("textarea");
+    t ? t.focus(e) : super.focus(e);
+  }
   connectedCallback() {
     this.hasAttribute("size") || this.setAttribute("size", "medium"), this.render(), this.setupListener();
   }
   disconnectedCallback() {
     this.cleanupListeners();
   }
-  attributeChangedCallback(e, a, r) {
+  attributeChangedCallback(e, t, r) {
     var o;
-    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("textarea");
-    if (t) {
+    const a = (o = this.shadowRoot) == null ? void 0 : o.querySelector("textarea");
+    if (a) {
       if (e === "value") {
-        t.value = r ?? "", this.updateCharacterCount();
+        a.value = r ?? "", this.updateCharacterCount();
         return;
       }
       if (e === "disabled") {
-        r === null || r === "false" ? t.removeAttribute("disabled") : t.setAttribute("disabled", "");
+        r === null || r === "false" ? a.removeAttribute("disabled") : a.setAttribute("disabled", "");
         return;
       }
       if (e === "rows") {
-        r && t.setAttribute("rows", r);
+        r && a.setAttribute("rows", r);
         return;
       }
       ["placeholder", "label", "hide-label", "variant", "optional", "max-length", "size"].includes(e) && (this.render(), this.setupListener());
     }
   }
   cleanupListeners() {
-    var a;
-    const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector("textarea");
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("textarea");
     e && this._changeHandler && (e.removeEventListener("change", this._changeHandler), e.removeEventListener("input", this._changeHandler));
   }
   setupListener() {
     if (!this.shadowRoot) return;
     const e = this.shadowRoot.querySelector("textarea");
-    e && (this.cleanupListeners(), this._changeHandler = (a) => {
-      const r = a.target;
+    e && (this.cleanupListeners(), this._changeHandler = (t) => {
+      const r = t.target;
       this.setAttribute("value", r.value);
-      const t = {
+      const a = {
         detail: { value: r.value },
         bubbles: !0,
         composed: !0
       };
-      this.dispatchEvent(new CustomEvent("change", t)), this.dispatchEvent(new CustomEvent("input", t)), this.updateCharacterCount();
+      this.dispatchEvent(new CustomEvent("change", a)), this.dispatchEvent(new CustomEvent("input", a)), this.updateCharacterCount();
     }, e.addEventListener("change", this._changeHandler), e.addEventListener("input", this._changeHandler), this.updateCharacterCount());
   }
   updateCharacterCount() {
-    var r, t;
-    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("textarea"), a = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".char-count");
-    !e || !a || e.maxLength <= 0 || (a.textContent = `${e.value.length}/${e.maxLength}`);
+    var r, a;
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("textarea"), t = (a = this.shadowRoot) == null ? void 0 : a.querySelector(".char-count");
+    !e || !t || e.maxLength <= 0 || (t.textContent = `${e.value.length}/${e.maxLength}`);
   }
   render() {
-    const e = this.getAttribute("name") || "", a = this.getAttribute("value") || "", r = this.getAttribute("placeholder") || "", t = this.getAttribute("id") || `mui-textarea-${Math.random().toString(36).substr(2, 9)}`, o = this.getAttribute("label") || "", d = this.hasAttribute("optional"), n = this.hasAttribute("hide-label"), x = this.hasAttribute("disabled"), l = this.getAttribute("rows") || "4", i = this.getAttribute("max-length"), s = i && Number(i) > 0 ? String(Number(i)) : "", c = this.getAttribute("size") || "medium", u = ["x-small", "small", "medium", "large"].includes(c) ? c : "medium", v = n && o ? `aria-label="${o}"` : "", h = this.getAttribute("variant") || "", g = h || "", b = (
+    const e = this.getAttribute("name") || "", t = this.getAttribute("value") || "", r = this.getAttribute("placeholder") || "", a = this.getAttribute("id") || `mui-textarea-${Math.random().toString(36).substr(2, 9)}`, o = this.getAttribute("label") || "", d = this.hasAttribute("optional"), l = this.hasAttribute("hide-label"), u = this.hasAttribute("disabled"), n = this.getAttribute("rows") || "4", i = this.getAttribute("max-length"), s = i && Number(i) > 0 ? String(Number(i)) : "", c = this.getAttribute("size") || "medium", x = ["x-small", "small", "medium", "large"].includes(c) ? c : "medium", v = l && o ? `aria-label="${o}"` : "", h = this.getAttribute("variant") || "", g = h || "", b = (
       /*html*/
       `
       <style>
@@ -114,7 +127,7 @@ class p extends HTMLElement {
           padding-inline: var(--textarea-padding-inline-current);
           box-sizing: border-box;
           font-size: var(--textarea-font-size-current);
-          border-radius: var(--radius-100);
+          border-radius: var(--form-radius-medium);
           border: var(--border-thin);
           border-color: var(--form-default-border-color);
           color: var(--form-default-text-color);
@@ -131,24 +144,28 @@ class p extends HTMLElement {
           --textarea-line-height-current: var(--text-line-height-xs);
           --textarea-padding-block-current: var(--space-050);
           --textarea-padding-inline-current: var(--space-200);
+          border-radius: var(--form-radius-x-small);
         }
         textarea.size-small {
           --textarea-font-size-current: var(--text-font-size-s);
           --textarea-line-height-current: var(--text-line-height-s);
           --textarea-padding-block-current: calc(var(--space-100) - (var(--stroke-size-100) / 2));
           --textarea-padding-inline-current: var(--space-300);
+          border-radius: var(--form-radius-small);
         }
         textarea.size-medium {
           --textarea-font-size-current: var(--text-font-size);
           --textarea-line-height-current: var(--text-line-height);
           --textarea-padding-block-current: var(--space-200);
           --textarea-padding-inline-current: var(--space-300);
+          border-radius: var(--form-radius-medium);
         }
         textarea.size-large {
           --textarea-font-size-current: var(--text-font-size-l);
           --textarea-line-height-current: var(--text-line-height-l);
           --textarea-padding-block-current: var(--space-300);
           --textarea-padding-inline-current: var(--space-400);
+          border-radius: var(--form-radius-large);
         }
 
         textarea:hover {
@@ -278,23 +295,23 @@ class p extends HTMLElement {
         }
       </style>
 
-      ${o ? `<label for="${t}" class="${n ? "vh" : ""}">${o}${d ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>` : ""}
+      ${o ? `<label for="${a}" class="${l ? "vh" : ""}">${o}${d ? ' <span class="optional"><span class="optional-dot" aria-hidden="true">•</span><span class="optional-text">Optional</span></span>' : ""}</label>` : ""}
 
       <textarea
-        id="${t}"
+        id="${a}"
         name="${e}"
-        class="${[g, `size-${u}`].filter(Boolean).join(" ")}"
-        style="--textarea-rows: ${l};"
-        rows="${l}"
+        class="${[g, `size-${x}`].filter(Boolean).join(" ")}"
+        style="--textarea-rows: ${n};"
+        rows="${n}"
         placeholder="${r}"
         ${s ? `maxlength="${s}"` : ""}
-        ${x ? "disabled" : ""}
+        ${u ? "disabled" : ""}
         ${v}
-      >${a}</textarea>
+      >${t}</textarea>
       ${s ? '<div class="meta"><span class="char-count"></span></div>' : ""}
     `
     );
     this.shadowRoot.innerHTML = b, o || console.warn("mui-textarea: Missing required 'label' attribute for accessibility.");
   }
 }
-customElements.get("mui-textarea") || customElements.define("mui-textarea", p);
+customElements.get("mui-textarea") || customElements.define("mui-textarea", f);

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

@@ -0,0 +1,336 @@
+class x extends HTMLElement {
+  constructor() {
+    super(), this.hour = 12, this.minute = 0, this.ampm = "PM", this.attachShadow({ mode: "open" });
+    const r = /* @__PURE__ */ new Date();
+    this.hour = r.getHours(), this.minute = r.getMinutes();
+  }
+  static get observedAttributes() {
+    return ["value", "format", "step", "start", "end", "variant"];
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(r) {
+    this.setAttribute("value", r ?? "");
+  }
+  focus(r) {
+    var i;
+    const s = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".selected, .slot-btn, .column");
+    s && typeof s.focus == "function" ? s.focus(r) : super.focus(r);
+  }
+  connectedCallback() {
+    this.syncAttributes(), this.render();
+  }
+  attributeChangedCallback(r, s, i) {
+    var v, d;
+    s !== i && (this.syncAttributes(), r === "value" && ((v = this.shadowRoot) != null && v.querySelector(".time-picker-container") || (d = this.shadowRoot) != null && d.querySelector(".slots-container")) ? this.updateDOMForValue() : this.render());
+  }
+  updateDOMForValue() {
+    var s, i, v, d;
+    if ((this.getAttribute("variant") || "dial") === "slots") {
+      const g = (s = this.shadowRoot) == null ? void 0 : s.querySelectorAll(".slot-btn");
+      g && g.forEach((c) => {
+        c.getAttribute("data-value") === this.getAttribute("value") ? (c.classList.add("selected"), c.setAttribute("variant", "primary"), c.setAttribute("aria-selected", "true")) : (c.classList.remove("selected"), c.removeAttribute("variant"), c.setAttribute("aria-selected", "false"));
+      });
+    } else {
+      const g = (this.getAttribute("format") || "12h") === "12h", c = this.hour % 12 || 12, b = (i = this.shadowRoot) == null ? void 0 : i.getElementById("col-hours"), m = (v = this.shadowRoot) == null ? void 0 : v.getElementById("col-minutes"), y = (d = this.shadowRoot) == null ? void 0 : d.getElementById("col-ampm");
+      b && this.scrollToValue(b, g ? c : this.hour), m && this.scrollToValue(m, this.minute), y && this.scrollToValue(y, this.ampm);
+    }
+  }
+  scrollToValue(r, s) {
+    const i = r.querySelector(`[data-value="${s}"]`);
+    if (i) {
+      const v = i.offsetTop + i.offsetHeight / 2, d = r.offsetHeight / 2;
+      r.scrollTop = v - d;
+    }
+  }
+  syncAttributes() {
+    const r = this.getAttribute("value");
+    if (r) {
+      const s = r.trim().split(" "), i = s[0].split(":");
+      i.length === 2 && (this.hour = parseInt(i[0], 10) || 0, this.minute = parseInt(i[1], 10) || 0), s[1] && (s[1].toUpperCase() === "AM" || s[1].toUpperCase() === "PM") ? this.ampm = s[1].toUpperCase() : this.ampm = this.hour >= 12 ? "PM" : "AM";
+    }
+  }
+  updateTime() {
+    const r = this.getAttribute("format") || "12h";
+    let s = "";
+    if (r === "12h") {
+      let i = this.hour % 12;
+      i === 0 && (i = 12), s = `${String(i).padStart(2, "0")}:${String(this.minute).padStart(2, "0")} ${this.ampm}`;
+    } else {
+      let i = this.hour;
+      s = `${String(i).padStart(2, "0")}:${String(this.minute).padStart(2, "0")}`;
+    }
+    this.setAttribute("value", s), this.dispatchEvent(new CustomEvent("change", { detail: { value: s }, bubbles: !0, composed: !0 }));
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    (this.getAttribute("variant") || "dial") === "slots" ? this.renderSlots() : this.renderDial();
+  }
+  renderSlots() {
+    const r = parseInt(this.getAttribute("start") || "9", 10), s = parseInt(this.getAttribute("end") || "17", 10), i = parseInt(this.getAttribute("step") || "60", 10), d = (this.getAttribute("format") || "12h") === "12h", g = [];
+    for (let e = r; e <= s; e++)
+      for (let n = 0; n < 60 && !(e === s && n > 0); n += i) {
+        let u = "", t = `${String(e).padStart(2, "0")}:${String(n).padStart(2, "0")}`;
+        if (d) {
+          const o = e >= 12 ? "PM" : "AM";
+          u = `${e % 12 === 0 ? 12 : e % 12}:${String(n).padStart(2, "0")} ${o}`;
+        } else
+          u = t;
+        g.push({ label: u, val: d ? u : t, h: e, m: n });
+      }
+    const c = this.getAttribute("value") || "", b = (
+      /*html*/
+      `
+      <style>
+        :host {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          height: var(--time-picker-height);
+          font-family: inherit;
+          --time-picker-height: 24rem;
+        }
+        .slots-container {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          background: transparent;
+        }
+        .slots-scroll {
+          flex: 1 1 auto;
+          overflow-y: auto;
+          overflow-x: hidden;
+          margin: var(--stroke-size-200);
+          display: flex;
+          flex-direction: column;
+          gap: var(--space-100);
+          scrollbar-width: none; /* Firefox */
+        }
+        .slots-scroll::-webkit-scrollbar {
+          display: none; /* Chrome/Safari */
+        }
+        .slot-btn {
+          width: 100%;
+          font-variant-numeric: tabular-nums;
+        }
+        :host([slotted]) .slot-btn {
+          --action-radius-small: var(--stroke-size-200);
+        }
+      </style>
+      <div class="slots-container">
+        <div class="slots-scroll">
+          ${g.map(
+        (e) => `
+            <mui-button variant="${c === e.val ? "primary" : "tertiary"}" size="small" class="slot-btn" data-value="${e.val}" data-h="${e.h}" data-m="${e.m}">
+              ${e.label}
+            </mui-button>
+          `
+      ).join("")}
+        </div>
+      </div>
+    `
+    );
+    if (!this.shadowRoot) return;
+    this.shadowRoot.innerHTML = b, this.shadowRoot.querySelectorAll(".slot-btn").forEach((e) => {
+      e.addEventListener("click", () => {
+        const n = e.getAttribute("data-value"), u = parseInt(e.getAttribute("data-h"), 10), t = parseInt(e.getAttribute("data-m"), 10);
+        this.hour = u, this.minute = t, d && (this.ampm = u >= 12 ? "PM" : "AM"), this.setAttribute("value", n), this.dispatchEvent(new CustomEvent("change", { detail: { value: n }, bubbles: !0, composed: !0 })), this.renderSlots();
+      });
+    });
+    const y = this.shadowRoot.querySelector(".slots-scroll");
+    y == null || y.addEventListener("keydown", (e) => {
+      var u, t, o;
+      const n = e;
+      if (n.key === "ArrowDown" || n.key === "ArrowUp") {
+        n.preventDefault();
+        const a = this.shadowRoot ? this.shadowRoot.activeElement : null;
+        let p = a != null && a.classList.contains("slot-btn") ? a : null;
+        if (!p) {
+          p = ((u = this.shadowRoot) == null ? void 0 : u.querySelector(".slot-btn[variant='primary']")) || ((t = this.shadowRoot) == null ? void 0 : t.querySelector(".slot-btn")), p == null || p.focus();
+          return;
+        }
+        const f = Array.from(((o = this.shadowRoot) == null ? void 0 : o.querySelectorAll(".slot-btn")) || []), A = f.indexOf(p);
+        if (A === -1) return;
+        let l = n.key === "ArrowDown" ? A + 1 : A - 1;
+        l < 0 && (l = 0), l >= f.length && (l = f.length - 1), f[l].focus();
+      }
+    }), requestAnimationFrame(() => {
+      var n;
+      const e = (n = this.shadowRoot) == null ? void 0 : n.querySelector(".slot-btn.selected");
+      e && e.scrollIntoView({ behavior: "auto", block: "center" });
+    });
+  }
+  renderDial() {
+    const r = this.getAttribute("format") || "12h", s = parseInt(this.getAttribute("step") || "1", 10), i = r === "12h", v = i ? Array.from({ length: 12 }, (t, o) => o === 0 ? 12 : o) : Array.from({ length: 24 }, (t, o) => o), d = Array.from({ length: Math.floor(60 / s) }, (t, o) => o * s), g = (
+      /*html*/
+      `
+      <style>
+        :host {
+          display: inline-block;
+          font-family: inherit;
+          --time-picker-height: 24rem;
+          --time-item-height: 4rem;
+        }
+        .time-picker-container {
+          display: flex;
+          height: var(--time-picker-height);
+          background: var(--input-background);
+          border-radius: var(--time-picker-radius, var(--radius-200));
+          position: relative;
+          overflow: hidden;
+          padding: 0 var(--space-200);
+          gap: var(--space-100);
+        }
+        .time-picker-container::before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: var(--space-200);
+          right: var(--space-200);
+          height: var(--time-item-height);
+          transform: translateY(-50%);
+          background: var(--action-tertiary-background-hover);
+          border-radius: var(--radius-100);
+          pointer-events: none;
+          z-index: 1;
+        }
+        /* Top and Bottom faded masks */
+        .time-picker-container::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background: linear-gradient(
+            to bottom, 
+            var(--input-background) 0%, 
+            transparent 30%, 
+            transparent 70%, 
+            var(--input-background) 100%
+          );
+          pointer-events: none;
+          z-index: 2;
+        }
+        .column {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          overflow-y: scroll;
+          scroll-snap-type: y mandatory;
+          scrollbar-width: none;
+          z-index: 2;
+          border-radius: var(--radius-100);
+        }
+        .column:focus-visible {
+          outline: 2px solid var(--action-primary-background);
+          outline-offset: -2px;
+        }
+        .column::-webkit-scrollbar {
+          display: none; /* Chrome/Safari */
+        }
+        /* Add padding to allow first and last items to reach the center */
+        .column::before,
+        .column::after {
+          content: "";
+          display: block;
+          flex: 0 0 calc(50% - (var(--time-item-height) / 2));
+        }
+        .item {
+          flex: 0 0 var(--time-item-height);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: var(--text-font-size-l);
+          color: var(--text-color);
+          scroll-snap-align: center;
+          cursor: pointer;
+          user-select: none;
+          z-index: 3;
+          position: relative;
+          font-variant-numeric: tabular-nums;
+        }
+      </style>
+      <div class="time-picker-container">
+        <!-- Hours -->
+        <div class="column" id="col-hours">
+          ${v.map((t) => `<div class="item" data-value="${t}">${String(t).padStart(2, "0")}</div>`).join("")}
+        </div>
+        <!-- Minutes -->
+        <div class="column" id="col-minutes">
+          ${d.map((t) => `<div class="item" data-value="${t}">${String(t).padStart(2, "0")}</div>`).join("")}
+        </div>
+        <!-- AM/PM -->
+        ${i ? `
+          <div class="column" id="col-ampm">
+            <div class="item" data-value="AM">AM</div>
+            <div class="item" data-value="PM">PM</div>
+          </div>
+        ` : ""}
+      </div>
+    `
+    );
+    if (!this.shadowRoot) return;
+    this.shadowRoot.innerHTML = g;
+    const c = this.shadowRoot.getElementById("col-hours"), b = this.shadowRoot.getElementById("col-minutes"), m = this.shadowRoot.getElementById("col-ampm");
+    let y;
+    const e = (t, o) => {
+      clearTimeout(y), y = setTimeout(() => {
+        const a = t.scrollTop + t.offsetHeight / 2, p = Array.from(t.querySelectorAll(".item"));
+        let f = p[0], A = 1 / 0;
+        if (p.forEach((l) => {
+          const h = l.offsetTop + l.offsetHeight / 2, w = Math.abs(a - h);
+          w < A && (A = w, f = l);
+        }), f) {
+          const l = f.getAttribute("data-value");
+          if (o === "hour") {
+            const h = parseInt(l, 10);
+            this.getAttribute("format") === "12h" ? this.hour = h === 12 && this.ampm === "AM" ? 0 : h === 12 && this.ampm === "PM" ? 12 : this.ampm === "PM" ? h + 12 : h : this.hour = h;
+          } else if (o === "minute")
+            this.minute = parseInt(l, 10);
+          else if (o === "ampm") {
+            this.ampm = l;
+            const h = this.hour % 12 || 12;
+            this.hour = l === "AM" ? h === 12 ? 0 : h : h === 12 ? 12 : h + 12;
+          }
+          this.updateTime();
+        }
+      }, 150);
+    };
+    c.addEventListener("scroll", () => e(c, "hour")), b.addEventListener("scroll", () => e(b, "minute")), m && m.addEventListener("scroll", () => e(m, "ampm"));
+    const n = (t) => {
+      t.addEventListener("click", (o) => {
+        const a = o.target.closest(".item");
+        a && a.scrollIntoView({ behavior: "smooth", block: "center" });
+      });
+    }, u = (t) => {
+      t.setAttribute("tabindex", "0"), t.addEventListener("keydown", (o) => {
+        if (o.key === "ArrowUp" || o.key === "ArrowDown") {
+          o.preventDefault();
+          const a = Array.from(t.querySelectorAll(".item")), p = t.scrollTop + t.offsetHeight / 2;
+          let f = 0, A = 1 / 0;
+          a.forEach((h, w) => {
+            const S = h.offsetTop + h.offsetHeight / 2, k = Math.abs(p - S);
+            k < A && (A = k, f = w);
+          });
+          let l = o.key === "ArrowUp" ? f - 1 : f + 1;
+          l < 0 && (l = 0), l >= a.length && (l = a.length - 1), a[l].scrollIntoView({ behavior: "smooth", block: "center" });
+        } else if (o.key === "ArrowLeft") {
+          o.preventDefault();
+          const a = t.previousElementSibling;
+          a && a.classList.contains("column") && a.focus();
+        } else if (o.key === "ArrowRight") {
+          o.preventDefault();
+          const a = t.nextElementSibling;
+          a && a.classList.contains("column") && a.focus();
+        }
+      });
+    };
+    n(c), n(b), m && n(m), u(c), u(b), m && u(m), requestAnimationFrame(() => {
+      const t = this.hour % 12 || 12;
+      this.scrollToValue(c, i ? t : this.hour), this.scrollToValue(b, this.minute), m && this.scrollToValue(m, this.ampm);
+    });
+  }
+}
+customElements.get("mui-time") || customElements.define("mui-time", x);

package/dist/esm/components/mui-time-picker/index.js

@@ -0,0 +1,126 @@
+import "../mui-dropdown/index.js";
+import "../mui-input/index.js";
+import "../mui-time/index/index.js";
+import "../mui-icons/timer/index.js";
+class c extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(t) {
+    this.setAttribute("value", t ?? "");
+  }
+  focus(t) {
+    var i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("mui-input");
+    e && typeof e.focus == "function" ? e.focus(t) : super.focus(t);
+  }
+  connectedCallback() {
+    this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
+    `
+      <style>
+        :host {
+          display: flex;
+          box-sizing: border-box;
+        }
+        ::slotted(.time-pane) {
+          flex: 1 1 auto;
+          min-width: 160px;
+          display: flex;
+          flex-direction: column;
+          min-height: 0;
+        }
+      </style>
+      <slot></slot>
+    `);
+  }
+}
+customElements.get("mui-time-picker-popover") || customElements.define("mui-time-picker-popover", c);
+class m extends HTMLElement {
+  constructor() {
+    super(), this.selectedTime = "", this.initialized = !1, this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["value", "type", "label", "hide-label", "optional", "size", "variant"];
+  }
+  connectedCallback() {
+    this.syncAttributes(), this.render(), this.setupListeners(), this.initialized = !0;
+  }
+  attributeChangedCallback(t, e, i) {
+    var n, s;
+    if (e !== i)
+      if (t === "value") {
+        if (this.syncAttributes(), this.initialized) {
+          const o = (n = this.shadowRoot) == null ? void 0 : n.querySelector("mui-input"), u = (s = this.shadowRoot) == null ? void 0 : s.querySelector("mui-time");
+          o && o.setAttribute("value", this.getAttribute("value") || ""), u && this.selectedTime && u.setAttribute("value", this.selectedTime);
+        }
+      } else
+        this.render(), this.setupListeners();
+  }
+  syncAttributes() {
+    this.selectedTime = this.getAttribute("value") || "";
+  }
+  setupListeners() {
+    if (!this.shadowRoot) return;
+    const t = this.shadowRoot.querySelector("mui-time"), e = this.shadowRoot.querySelector("mui-input"), i = () => {
+      this.setAttribute("value", this.selectedTime), e && e.setAttribute("value", this.selectedTime), this.dispatchEvent(new CustomEvent("change", { detail: { value: this.selectedTime }, bubbles: !0, composed: !0 }));
+    };
+    t && t.addEventListener("change", (s) => {
+      const o = s.detail;
+      o && o.value && (this.selectedTime = o.value, i(), (this.getAttribute("type") || "time") === "timeslot" && requestAnimationFrame(() => {
+        var a;
+        const r = (a = this.shadowRoot) == null ? void 0 : a.querySelector("mui-dropdown");
+        r && typeof r.close == "function" && r.close();
+      }));
+    });
+    const n = this.shadowRoot.querySelector("mui-time-picker-popover");
+    n && n.addEventListener("click", (s) => {
+      s.stopPropagation();
+    });
+  }
+  render() {
+    if (!this.shadowRoot) return;
+    const t = this.getAttribute("value") || "", e = this.getAttribute("type") || "time", i = this.getAttribute("label") || "", n = this.hasAttribute("hide-label") ? "hide-label" : "", s = this.hasAttribute("optional") ? "optional" : "", o = this.getAttribute("size") || "medium", u = this.getAttribute("variant") || "", a = (
+      /*html*/
+      `
+      <style>
+        :host {
+          display: inline-block;
+          width: 100%;
+        }
+        .time-pane {
+          padding: var(--space-200);
+          height: 310px;
+        }
+        mui-dropdown {
+          width: 100%;
+          --dropdown-min-width: auto;
+        }
+      </style>
+      <mui-dropdown persistent>
+        <mui-input 
+          slot="action" 
+          value="${t}"
+          label="${i}"
+          size="${o}"
+          variant="${u}"
+          ${n}
+          ${s}
+          readonly>
+          <mui-button slot="after"><mui-icon-timer></mui-icon-timer></mui-button>
+        </mui-input>
+
+        <mui-time-picker-popover>
+          <div class="time-pane">
+            <mui-time variant="${e === "timeslot" ? "slots" : "wheels"}" value="${this.selectedTime}" slotted style="--time-picker-radius: var(--stroke-size-200);"></mui-time>
+          </div>
+        </mui-time-picker-popover>
+      </mui-dropdown>
+    `
+    );
+    this.shadowRoot.innerHTML = a;
+  }
+}
+customElements.get("mui-time-picker") || customElements.define("mui-time-picker", m);