@editora/ui-core 0.1.24 → 0.2.0

package/dist/input.esm.js

@@ -6,13 +6,16 @@ const q = `
   </svg>
 `, N = `
   :host {
-    --ui-input-padding: var(--ui-padding, 10px 12px);
-    --ui-input-border-color: var(--ui-color-border, var(--ui-border-color, #cbd5e1));
+    --ui-input-action-size: 24px;
+    --ui-input-padding: var(--ui-padding, 0);
+    --ui-input-pad-x: calc(var(--ui-control-padding-inline-2, 12px) - 1px);
+    --ui-input-font-size: var(--ui-control-font-size-2, 14px);
+    --ui-input-border-color: var(--ui-color-line, var(--ui-color-border, var(--ui-border-color, #cbd5e1)));
     --ui-input-border-width: 1px;
     --ui-input-border-style: solid;
     --ui-input-border: var(--base-input-border, var(--ui-input-border-width) var(--ui-input-border-style) var(--ui-input-border-color));
-    --ui-input-border-radius: var(--ui-radius, 4px);
-    --ui-input-min-height: var(--ui-min-height, var(--base-input-height-md, 40px));
+    --ui-input-border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    --ui-input-min-height: var(--ui-min-height, var(--base-input-height-md, var(--ui-control-height-2, 32px)));
     --ui-input-width: 100%;
     --ui-input-bg: var(--base-input-bg, var(--ui-color-surface, var(--ui-surface, #ffffff)));
     --ui-input-color: var(--ui-color-text, var(--ui-text, #0f172a));
@@ -27,7 +30,7 @@ const q = `
     --ui-input-gap: var(--ui-default-gap, 8px);
     --ui-input-meta-gap: 4px;
     --ui-input-shell-gap: var(--ui-default-gap, 8px);
-    --ui-input-placeholder: color-mix(in srgb, var(--ui-input-color) 40%, transparent);
+    --ui-input-placeholder: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-input-color) 62%, transparent));
     color-scheme: light dark;
     display: block;
     inline-size: var(--ui-input-width);
@@ -96,7 +99,7 @@ const q = `
     gap: var(--ui-input-shell-gap);
     box-sizing: border-box;
     min-block-size: var(--ui-input-min-height);
-    padding-inline: 10px;
+    padding-inline: var(--ui-input-pad-x);
     border: var(--ui-input-border);
     border-radius: var(--ui-input-border-radius);
     background: var(--ui-input-bg);
@@ -105,8 +108,14 @@ const q = `
   }
 
   .shell:focus-within {
-    border-color: color-mix(in srgb, var(--ui-input-focus-ring) 56%, var(--ui-input-border-color));
-    box-shadow: var(--base-input-focus-ring, 0 0 0 3px color-mix(in srgb, var(--ui-input-focus-ring) 24%, transparent));
+    border-color: var(--ui-ring-color, var(--ui-input-focus-ring));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-input-focus-ring));
+    outline-offset: -1px;
+    box-shadow: var(--base-input-focus-ring, none);
+  }
+
+  .shell:hover:not(:focus-within) {
+    border-color: var(--ui-color-line-strong, var(--ui-input-border-color));
   }
 
   .prefix,
@@ -179,7 +188,7 @@ const q = `
     border: none;
     background: transparent;
     color: inherit;
-    font: 500 var(--ui-default-font-size, var(--font-size-2, 14px))/var(--ui-default-line-height, var(--line-height-2, 20px)) var(--ui-font-family, var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif));
+    font: 500 var(--ui-input-font-size)/var(--ui-default-line-height, var(--line-height-2, 20px)) var(--ui-font-family, var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif));
     padding: var(--ui-input-padding);
     min-block-size: calc(var(--ui-input-min-height) - 2px);
     margin: 0;
@@ -199,9 +208,10 @@ const q = `
     border: none;
     outline: none;
     cursor: pointer;
-    inline-size: 22px;
-    block-size: 22px;
-    border-radius: var(--ui-radius, 4px);
+    inline-size: var(--ui-input-action-size);
+    block-size: var(--ui-input-action-size);
+    margin-block: var(--ui-input-action-bleed, 0px);
+    border-radius: var(--ui-radius, 6px);
     display: inline-grid;
     place-items: center;
     background: color-mix(in srgb, var(--ui-input-color) 8%, transparent);
@@ -269,30 +279,27 @@ const q = `
     pointer-events: none;
   }
 
-  :host([size="sm"]),
+    :host([size="sm"]),
   :host([size="1"]) {
-    --ui-input-min-height: 34px;
-    --ui-input-padding: 7px 8px;
+    --ui-input-min-height: var(--ui-min-height, var(--base-input-height-sm, var(--ui-control-height-1, 24px)));
+    --ui-input-pad-x: calc(var(--ui-control-padding-inline-1, 8px) - 1px);
+    --ui-input-font-size: var(--ui-control-font-size-1, 12px);
+    --ui-input-border-radius: var(--ui-control-radius-1, var(--ui-radius, 6px));
+    --ui-input-action-size: 24px;
+    --ui-input-action-bleed: -1px;
     --ui-input-shell-gap: 6px;
   }
 
-  :host([size="sm"]) input,
-  :host([size="1"]) input {
-    font-size: 12px;
-  }
-
   :host([size="lg"]),
   :host([size="3"]) {
-    --ui-input-min-height: 46px;
-    --ui-input-padding: 11px 14px;
+    --ui-input-min-height: var(--ui-min-height, var(--base-input-height-lg, var(--ui-control-height-3, 40px)));
+    --ui-input-pad-x: calc(var(--ui-control-padding-inline-3, 16px) - 1px);
+    --ui-input-font-size: var(--ui-control-font-size-3, 16px);
+    --ui-input-border-radius: var(--ui-control-radius-3, var(--ui-radius, 6px));
+    --ui-input-action-size: 28px;
     --ui-input-shell-gap: 10px;
   }
 
-  :host([size="lg"]) input,
-  :host([size="3"]) input {
-    font-size: 16px;
-  }
-
   :host([variant="classic"]),
   :host([variant="outlined"]) {
     --ui-input-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
@@ -392,7 +399,7 @@ const q = `
   }
 
   :host([validation="error"]) .shell {
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-input-error) 20%, transparent);
+    box-shadow: 0 0 0 1px var(--ui-input-error);
   }
 
   :host([radius="none"]) {
@@ -487,7 +494,7 @@ const q = `
 function r(a) {
   return a.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function z(a) {
+function w(a) {
   if (!a) return !1;
   const t = a.assignedNodes({ flatten: !0 });
   return t.length ? t.some((e) => e.nodeType === Node.TEXT_NODE ? !!e.textContent?.trim() : e.nodeType === Node.ELEMENT_NODE) : !1;
@@ -559,13 +566,13 @@ class L extends S {
   }
   _syncControlAttrs() {
     if (this._syncHostTokens(), !this._input) return;
-    const t = this._input, e = this.getAttribute("type") || "text", i = this.getAttribute("placeholder") || "", n = this.getAttribute("name") || "", o = this.getAttribute("pattern") || "", s = this.getAttribute("inputmode") || "", g = this.getAttribute("autocomplete") || "", p = this.getAttribute("min") || "", u = this.getAttribute("max") || "", l = this.getAttribute("step") || "", c = this.getAttribute("spellcheck") || "", d = this.getAttribute("maxlength") || "", h = this.getAttribute("minlength") || "", b = A(this, "disabled"), f = this.hasAttribute("required"), m = this.hasAttribute("readonly");
+    const t = this._input, e = this.getAttribute("type") || "text", i = this.getAttribute("placeholder") || "", n = this.getAttribute("name") || "", s = this.getAttribute("pattern") || "", o = this.getAttribute("inputmode") || "", g = this.getAttribute("autocomplete") || "", p = this.getAttribute("min") || "", u = this.getAttribute("max") || "", l = this.getAttribute("step") || "", c = this.getAttribute("spellcheck") || "", d = this.getAttribute("maxlength") || "", h = this.getAttribute("minlength") || "", b = A(this, "disabled"), f = this.hasAttribute("required"), v = this.hasAttribute("readonly");
     try {
       t.type = e;
     } catch {
       t.type = "text";
     }
-    t.placeholder = i, t.disabled = b, t.required = f, t.readOnly = m, t.name = n, o ? t.setAttribute("pattern", o) : t.removeAttribute("pattern"), s ? t.setAttribute("inputmode", s) : t.removeAttribute("inputmode"), g ? t.setAttribute("autocomplete", g) : t.removeAttribute("autocomplete"), p ? t.setAttribute("min", p) : t.removeAttribute("min"), u ? t.setAttribute("max", u) : t.removeAttribute("max"), l ? t.setAttribute("step", l) : t.removeAttribute("step"), c ? t.setAttribute("spellcheck", c) : t.removeAttribute("spellcheck"), d && Number.isFinite(Number(d)) ? t.setAttribute("maxlength", d) : t.removeAttribute("maxlength"), h && Number.isFinite(Number(h)) ? t.setAttribute("minlength", h) : t.removeAttribute("minlength");
+    t.placeholder = i, t.disabled = b, t.required = f, t.readOnly = v, t.name = n, s ? t.setAttribute("pattern", s) : t.removeAttribute("pattern"), o ? t.setAttribute("inputmode", o) : t.removeAttribute("inputmode"), g ? t.setAttribute("autocomplete", g) : t.removeAttribute("autocomplete"), p ? t.setAttribute("min", p) : t.removeAttribute("min"), u ? t.setAttribute("max", u) : t.removeAttribute("max"), l ? t.setAttribute("step", l) : t.removeAttribute("step"), c ? t.setAttribute("spellcheck", c) : t.removeAttribute("spellcheck"), d && Number.isFinite(Number(d)) ? t.setAttribute("maxlength", d) : t.removeAttribute("maxlength"), h && Number.isFinite(Number(h)) ? t.setAttribute("minlength", h) : t.removeAttribute("minlength");
   }
   attributeChangedCallback(t, e, i) {
     if (e === i) return;
@@ -649,16 +656,16 @@ class L extends S {
   _registerWithForm() {
     this._formUnregister && (this._formUnregister(), this._formUnregister = null);
     try {
-      const n = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), o = this.getAttribute("name");
-      n && typeof n.registerField == "function" && o && (this._formUnregister = n.registerField(o, {
-        name: o,
+      const n = this.getRootNode().host?.closest?.("ui-form") || null || this.closest("ui-form"), s = this.getAttribute("name");
+      n && typeof n.registerField == "function" && s && (this._formUnregister = n.registerField(s, {
+        name: s,
         getValue: () => this.value,
-        setValue: (s) => {
-          this.value = String(s ?? "");
+        setValue: (o) => {
+          this.value = String(o ?? "");
         },
         validate: async () => this._input ? { valid: this._input.checkValidity(), message: this._input.validationMessage || void 0 } : { valid: !0 },
-        setError: (s) => {
-          s ? (this.setAttribute("validation", "error"), this.setAttribute("data-error", s)) : (this.removeAttribute("validation"), this.removeAttribute("data-error"));
+        setError: (o) => {
+          o ? (this.setAttribute("validation", "error"), this.setAttribute("data-error", o)) : (this.removeAttribute("validation"), this.removeAttribute("data-error"));
         }
       }));
     } catch {
@@ -671,8 +678,8 @@ class L extends S {
     this._input && this._input.value !== t && (this._input.value = t), this._clearBtn && (A(this, "clearable") && t.length > 0 && !A(this, "disabled") && !this.hasAttribute("readonly") ? this._clearBtn.removeAttribute("hidden") : this._clearBtn.setAttribute("hidden", ""));
     const e = this.root.querySelector(".counter");
     if (e && this.hasAttribute("counter")) {
-      const n = this.getAttribute("maxlength"), o = n ? `${t.length}/${n}` : String(t.length);
-      e.textContent = o;
+      const n = this.getAttribute("maxlength"), s = n ? `${t.length}/${n}` : String(t.length);
+      e.textContent = s;
     }
     const i = this.root.querySelector(".shell");
     i && i.setAttribute("data-has-value", t ? "true" : "false");
@@ -681,13 +688,13 @@ class L extends S {
     this._syncDerivedState();
   }
   _syncDerivedState() {
-    const t = this.root.querySelector('slot[name="label"]'), e = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), n = this.root.querySelector('slot[name="prefix"]'), o = this.root.querySelector('slot[name="suffix"]'), s = (this.getAttribute("label") || "").trim(), g = (this.getAttribute("description") || "").trim(), p = (this.getAttribute("data-error") || "").trim(), u = !!s || z(t), l = !!g || z(e), c = !!p || z(i), d = z(n), h = z(o), b = this.root.querySelector(".label"), f = this.root.querySelector(".description"), m = this.root.querySelector(".prefix"), v = this.root.querySelector(".suffix"), x = this.root.querySelector(".meta"), y = this.root.querySelector(".footer"), _ = this.root.querySelector(".error"), C = this.root.querySelector(".counter");
-    b && (u ? b.removeAttribute("hidden") : b.setAttribute("hidden", "")), f && (l ? f.removeAttribute("hidden") : f.setAttribute("hidden", "")), m && (d ? m.removeAttribute("hidden") : m.setAttribute("hidden", "")), v && (h ? v.removeAttribute("hidden") : v.setAttribute("hidden", "")), x && (u || l ? x.removeAttribute("hidden") : x.setAttribute("hidden", ""));
+    const t = this.root.querySelector('slot[name="label"]'), e = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="error"]'), n = this.root.querySelector('slot[name="prefix"]'), s = this.root.querySelector('slot[name="suffix"]'), o = (this.getAttribute("label") || "").trim(), g = (this.getAttribute("description") || "").trim(), p = (this.getAttribute("data-error") || "").trim(), u = !!o || w(t), l = !!g || w(e), c = !!p || w(i), d = w(n), h = w(s), b = this.root.querySelector(".label"), f = this.root.querySelector(".description"), v = this.root.querySelector(".prefix"), m = this.root.querySelector(".suffix"), x = this.root.querySelector(".meta"), y = this.root.querySelector(".footer"), _ = this.root.querySelector(".error"), C = this.root.querySelector(".counter");
+    b && (u ? b.removeAttribute("hidden") : b.setAttribute("hidden", "")), f && (l ? f.removeAttribute("hidden") : f.setAttribute("hidden", "")), v && (d ? v.removeAttribute("hidden") : v.setAttribute("hidden", "")), m && (h ? m.removeAttribute("hidden") : m.setAttribute("hidden", "")), x && (u || l ? x.removeAttribute("hidden") : x.setAttribute("hidden", ""));
     const k = this.hasAttribute("counter");
     if (C && (k ? C.removeAttribute("hidden") : C.setAttribute("hidden", "")), _ && (c ? _.removeAttribute("hidden") : _.setAttribute("hidden", "")), y && (c || k ? y.removeAttribute("hidden") : y.setAttribute("hidden", "")), this._input) {
       E(this._input, this, u ? `${this._uid}-label` : null);
-      const w = [];
-      l && w.push(`${this._uid}-description`), c && w.push(`${this._uid}-error`), $(this._input, this, this._uid, w), this.getAttribute("validation") === "error" || !!p ? this._input.setAttribute("aria-invalid", "true") : this._input.removeAttribute("aria-invalid"), this.hasAttribute("required") ? this._input.setAttribute("aria-required", "true") : this._input.removeAttribute("aria-required");
+      const z = [];
+      l && z.push(`${this._uid}-description`), c && z.push(`${this._uid}-error`), $(this._input, this, this._uid, z), this.getAttribute("validation") === "error" || !!p ? this._input.setAttribute("aria-invalid", "true") : this._input.removeAttribute("aria-invalid"), this.hasAttribute("required") ? this._input.setAttribute("aria-required", "true") : this._input.removeAttribute("aria-required");
     }
   }
   _onNativeInput(t) {
@@ -713,14 +720,14 @@ class L extends S {
     }
   }
   render() {
-    const t = this.getAttribute("value") || "", e = this.getAttribute("placeholder") || "", i = A(this, "disabled"), n = A(this, "clearable"), o = this.getAttribute("type") || "text", s = this.getAttribute("name") || "", g = this.hasAttribute("required"), p = this.getAttribute("pattern") || "", u = this.getAttribute("inputmode") || "", l = this.getAttribute("autocomplete") || "", c = this.getAttribute("min") || "", d = this.getAttribute("max") || "", h = this.getAttribute("step") || "", b = this.getAttribute("spellcheck") || "", f = this.getAttribute("maxlength") || "", m = this.getAttribute("minlength") || "", v = this.hasAttribute("readonly"), x = this.getAttribute("label") || "", y = this.getAttribute("description") || "", _ = this.getAttribute("data-error") || "", C = this.getAttribute("validation") || "", k = this.hasAttribute("floating-label"), w = g ? '<span class="required" aria-hidden="true">*</span>' : "";
+    const t = this.getAttribute("value") || "", e = this.getAttribute("placeholder") || "", i = A(this, "disabled"), n = A(this, "clearable"), s = this.getAttribute("type") || "text", o = this.getAttribute("name") || "", g = this.hasAttribute("required"), p = this.getAttribute("pattern") || "", u = this.getAttribute("inputmode") || "", l = this.getAttribute("autocomplete") || "", c = this.getAttribute("min") || "", d = this.getAttribute("max") || "", h = this.getAttribute("step") || "", b = this.getAttribute("spellcheck") || "", f = this.getAttribute("maxlength") || "", v = this.getAttribute("minlength") || "", m = this.hasAttribute("readonly"), x = this.getAttribute("label") || "", y = this.getAttribute("description") || "", _ = this.getAttribute("data-error") || "", C = this.getAttribute("validation") || "", k = this.hasAttribute("floating-label"), z = g ? '<span class="required" aria-hidden="true">*</span>' : "";
     this._syncHostTokens(), this.setContent(`
       <style>${N}</style>
       <div class="root" part="root">
         <div class="meta" part="meta">
           <label class="label" id="${this._uid}-label" part="label">
             <slot name="label">${r(x)}</slot>
-            ${w}
+            ${z}
           </label>
           <p class="description" id="${this._uid}-description" part="description">
             <slot name="description">${r(y)}</slot>
@@ -733,8 +740,8 @@ class L extends S {
           <div class="control" part="control">
             <input
               part="input"
-              type="${r(o)}"
-              name="${r(s)}"
+              type="${r(s)}"
+              name="${r(o)}"
               value="${r(t)}"
               placeholder="${r(e)}"
               ${g ? "required" : ""}
@@ -746,14 +753,14 @@ class L extends S {
               ${h ? `step="${r(h)}"` : ""}
               ${b ? `spellcheck="${r(b)}"` : ""}
               ${f ? `maxlength="${r(f)}"` : ""}
-              ${m ? `minlength="${r(m)}"` : ""}
+              ${v ? `minlength="${r(v)}"` : ""}
               ${i ? "disabled" : ""}
-              ${v ? "readonly" : ""}
+              ${m ? "readonly" : ""}
             />
-            ${k ? `<span class="floating-label" part="floating-label">${r(x || e || s || "Input")}</span>` : ""}
+            ${k ? `<span class="floating-label" part="floating-label">${r(x || e || o || "Input")}</span>` : ""}
           </div>
 
-          <button class="clear-btn" part="clear" aria-label="Clear" ${n && t && !i && !v ? "" : "hidden"}>${q}</button>
+          <button class="clear-btn" part="clear" aria-label="Clear" ${n && t && !i && !m ? "" : "hidden"}>${q}</button>
 
           <span class="suffix" part="suffix"><slot name="suffix"></slot></span>
         </div>

package/dist/layout.cjs.js

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("./ElementBase-DxbvhLJs.js"),x=`
   :host {
     --ui-layout-bg: var(--ui-color-background, #f8fafc);
-    --ui-layout-surface: var(--ui-color-surface, #ffffff);
+    --ui-layout-surface: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-layout-color: var(--ui-color-text, #0f172a);
-    --ui-layout-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 80%, transparent);
+    --ui-layout-border: 1px solid var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
     --ui-layout-shadow: none;
-    --ui-layout-radius: 18px;
+    --ui-layout-radius: calc(var(--ui-radius, 6px) + 4px);
     --ui-layout-gap: 14px;
     --ui-layout-padding: 14px;
     --ui-layout-header-padding: 12px 14px;

package/dist/layout.esm.js

@@ -2,11 +2,11 @@ import { E as m } from "./ElementBase-BeZT54Hj.mjs";
 const f = `
   :host {
     --ui-layout-bg: var(--ui-color-background, #f8fafc);
-    --ui-layout-surface: var(--ui-color-surface, #ffffff);
+    --ui-layout-surface: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-layout-color: var(--ui-color-text, #0f172a);
-    --ui-layout-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 80%, transparent);
+    --ui-layout-border: 1px solid var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
     --ui-layout-shadow: none;
-    --ui-layout-radius: 18px;
+    --ui-layout-radius: calc(var(--ui-radius, 6px) + 4px);
     --ui-layout-gap: 14px;
     --ui-layout-padding: 14px;
     --ui-layout-header-padding: 12px 14px;

package/dist/marquee.cjs.js

@@ -8,28 +8,25 @@
     --ui-marquee-padding-block: 12px;
     --ui-marquee-content-align: center;
     --ui-marquee-min-block-size: 56px;
-    --ui-marquee-radius: var(--base-marquee-radius, 18px);
+    --ui-marquee-radius: calc(var(--ui-radius, 6px) + 4px);
     --ui-marquee-bg: var(--base-marquee-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-marquee-color: var(--ui-color-text, var(--ui-text, #202020));
-    --ui-marquee-border-color:
-      color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 82%, transparent);
+    --ui-marquee-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
     --ui-marquee-border: 1px solid var(--ui-marquee-border-color);
-    --ui-marquee-shadow:
-      0 1px 2px rgba(15, 23, 42, 0.05),
-      0 16px 30px rgba(15, 23, 42, 0.08);
+    --ui-marquee-shadow: none;
     --ui-marquee-backdrop: none;
     --ui-marquee-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
     --ui-marquee-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
 
-    --ui-marquee-item-radius: 999px;
+    --ui-marquee-item-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-marquee-item-padding-inline: 14px;
     --ui-marquee-item-padding-block: 8px;
     --ui-marquee-item-gap: 8px;
     --ui-marquee-item-min-block-size: 36px;
     --ui-marquee-item-font-size: 13px;
     --ui-marquee-item-line-height: 1.25;
-    --ui-marquee-item-bg: color-mix(in srgb, var(--ui-marquee-accent) 8%, transparent);
-    --ui-marquee-item-border: 1px solid color-mix(in srgb, var(--ui-marquee-accent) 18%, transparent);
+    --ui-marquee-item-bg: var(--ui-color-fill, color-mix(in srgb, var(--ui-marquee-accent) 8%, transparent));
+    --ui-marquee-item-border: 1px solid transparent;
     --ui-marquee-item-shadow: none;
     --ui-marquee-item-backdrop: none;
     --ui-marquee-item-color: inherit;
@@ -391,7 +388,7 @@
   :host([pause-on-focus]:focus-within) .viewport {
     border-color: color-mix(in srgb, var(--ui-marquee-accent) 24%, var(--ui-marquee-border-color));
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-marquee-focus-ring) 22%, transparent),
+      0 0 0 2px var(--ui-ring-color, var(--ui-marquee-focus-ring)),
       var(--ui-marquee-shadow);
   }
 

package/dist/marquee.esm.js

@@ -9,28 +9,25 @@ const l = "24px", p = "48px", f = 60, b = /* @__PURE__ */ new Set(["none", "sm",
     --ui-marquee-padding-block: 12px;
     --ui-marquee-content-align: center;
     --ui-marquee-min-block-size: 56px;
-    --ui-marquee-radius: var(--base-marquee-radius, 18px);
+    --ui-marquee-radius: calc(var(--ui-radius, 6px) + 4px);
     --ui-marquee-bg: var(--base-marquee-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-marquee-color: var(--ui-color-text, var(--ui-text, #202020));
-    --ui-marquee-border-color:
-      color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 82%, transparent);
+    --ui-marquee-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
     --ui-marquee-border: 1px solid var(--ui-marquee-border-color);
-    --ui-marquee-shadow:
-      0 1px 2px rgba(15, 23, 42, 0.05),
-      0 16px 30px rgba(15, 23, 42, 0.08);
+    --ui-marquee-shadow: none;
     --ui-marquee-backdrop: none;
     --ui-marquee-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
     --ui-marquee-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
 
-    --ui-marquee-item-radius: 999px;
+    --ui-marquee-item-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-marquee-item-padding-inline: 14px;
     --ui-marquee-item-padding-block: 8px;
     --ui-marquee-item-gap: 8px;
     --ui-marquee-item-min-block-size: 36px;
     --ui-marquee-item-font-size: 13px;
     --ui-marquee-item-line-height: 1.25;
-    --ui-marquee-item-bg: color-mix(in srgb, var(--ui-marquee-accent) 8%, transparent);
-    --ui-marquee-item-border: 1px solid color-mix(in srgb, var(--ui-marquee-accent) 18%, transparent);
+    --ui-marquee-item-bg: var(--ui-color-fill, color-mix(in srgb, var(--ui-marquee-accent) 8%, transparent));
+    --ui-marquee-item-border: 1px solid transparent;
     --ui-marquee-item-shadow: none;
     --ui-marquee-item-backdrop: none;
     --ui-marquee-item-color: inherit;
@@ -392,7 +389,7 @@ const l = "24px", p = "48px", f = 60, b = /* @__PURE__ */ new Set(["none", "sm",
   :host([pause-on-focus]:focus-within) .viewport {
     border-color: color-mix(in srgb, var(--ui-marquee-accent) 24%, var(--ui-marquee-border-color));
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-marquee-focus-ring) 22%, transparent),
+      0 0 0 2px var(--ui-ring-color, var(--ui-marquee-focus-ring)),
       var(--ui-marquee-shadow);
   }
 

package/dist/menu.cjs.js

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("./ElementBase-DxbvhLJs.js"),y=require("./trigger-DkPsKxsP.js"),x=require("./portal-DgpQ3Jo1.js"),A=require("./dismissable-layer-DNfrKA20.js"),E=require("./positioner-D_fqyx_j.js"),k=require("./menu-item-styles-B4onAr4C.js");function g(r){return r==="top"||r==="left"||r==="right"?r:"bottom"}function S(r){return r==="sm"||r==="1"||r==="compact"?"sm":r==="lg"||r==="3"||r==="comfortable"?"lg":"md"}function w(r){return!r||r==="default"?null:r==="none"?"0px":r==="sm"?"8px":r==="md"?"12px":r==="lg"?"16px":r==="full"?"999px":r==="square"?"6px":r==="soft"?"14px":/^\d+(\.\d+)?$/.test(r)?`${r}px`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(r)?r:null}function l(r,e){return r.getAttribute(e)||""}function h(r,e){if(r==null)return e;const t=String(r).toLowerCase();return t!=="false"&&t!=="0"}function u(){return['[role="menuitem"]','[role="menuitemcheckbox"]','[role="menuitemradio"]',".item","[data-menu-item]"].join(", ")}function m(r){return r.hasAttribute("disabled")||r.getAttribute("aria-disabled")==="true"||!!r.disabled}function p(r){const e=typeof r.composedPath=="function"?r.composedPath():[];for(const i of e)if(i instanceof HTMLElement&&i.matches(u()))return i;const t=r.target;return t instanceof HTMLElement?t.closest(u()):null}const I=new Set(["variant","density","shape","elevation","tone","size","radius"]),C=["--ui-menu-bg","--ui-menu-color","--ui-menu-border-color","--ui-menu-border","--ui-menu-shadow","--ui-menu-radius","--ui-menu-padding","--ui-menu-min-width","--ui-menu-ring","--ui-menu-backdrop","--ui-menu-z","--ui-menu-item-radius","--ui-menu-item-gap","--ui-menu-item-min-height","--ui-menu-item-pad-y","--ui-menu-item-pad-x","--ui-menu-item-font-size","--ui-menu-item-line-height","--ui-menu-separator-margin","--ui-menu-item-hover-bg","--ui-menu-item-active-color"],T=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-DxbvhLJs.js"),x=require("./trigger-DkPsKxsP.js"),A=require("./portal-XbYR3m_q.js"),E=require("./dismissable-layer-DNfrKA20.js"),S=require("./positioner-DZ1FW6A9.js"),c=require("./overlay-motion-B56x1GoY.js"),k=require("./menu-item-styles-B4onAr4C.js");function _(r){return r==="top"||r==="left"||r==="right"?r:"bottom"}function w(r){return r==="sm"||r==="1"||r==="compact"?"sm":r==="lg"||r==="3"||r==="comfortable"?"lg":"md"}function I(r){return!r||r==="default"?null:r==="none"?"0px":r==="sm"?"8px":r==="md"?"12px":r==="lg"?"16px":r==="full"?"999px":r==="square"?"6px":r==="soft"?"14px":/^\d+(\.\d+)?$/.test(r)?`${r}px`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(r)?r:null}function l(r,e){return r.getAttribute(e)||""}function p(r,e){if(r==null)return e;const t=String(r).toLowerCase();return t!=="false"&&t!=="0"}function u(){return['[role="menuitem"]','[role="menuitemcheckbox"]','[role="menuitemradio"]',".item","[data-menu-item]"].join(", ")}function m(r){return r.hasAttribute("disabled")||r.getAttribute("aria-disabled")==="true"||!!r.disabled}function f(r){const e=typeof r.composedPath=="function"?r.composedPath():[];for(const i of e)if(i instanceof HTMLElement&&i.matches(u()))return i;const t=r.target;return t instanceof HTMLElement?t.closest(u()):null}const C=new Set(["variant","density","shape","elevation","tone","size","radius"]),T=["--ui-menu-bg","--ui-menu-color","--ui-menu-border-color","--ui-menu-border","--ui-menu-shadow","--ui-menu-radius","--ui-menu-padding","--ui-menu-min-width","--ui-menu-ring","--ui-menu-backdrop","--ui-menu-z","--ui-menu-item-radius","--ui-menu-item-gap","--ui-menu-item-min-height","--ui-menu-item-pad-y","--ui-menu-item-pad-x","--ui-menu-item-font-size","--ui-menu-item-line-height","--ui-menu-separator-margin","--ui-menu-item-hover-bg","--ui-menu-item-active-color"],L=`
   :host {
     --ui-menu-bg: var(--base-menu-bg, var(--color-panel-solid, var(--ui-color-surface, var(--ui-surface, #ffffff))));
     --ui-menu-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-menu-border-color: color-mix(in srgb, var(--ui-color-border, var(--ui-border, rgba(15, 23, 42, 0.14))) 86%, transparent);
     --ui-menu-border: var(--base-menu-border, 1px solid var(--ui-menu-border-color));
     --ui-menu-shadow: var(--base-menu-shadow, var(--shadow-5, none));
-    --ui-menu-radius: var(--base-menu-radius, var(--ui-radius, 4px));
+    --ui-menu-radius: var(--base-menu-radius, var(--ui-radius, 6px));
     --ui-menu-padding: var(--base-menu-content-padding, 8px);
     --ui-menu-min-width: var(--base-menu-min-width, 232px);
     --ui-menu-ring: var(--ui-color-primary, var(--ui-primary, #2563eb));
@@ -40,7 +40,9 @@
     pointer-events: none;
     opacity: 0.62;
   }
-`,L=`
+`,P=`
+  ${c.OVERLAY_MOTION_CSS}
+
   .menu {
     position: absolute;
     display: flex;
@@ -58,12 +60,7 @@
     background: var(--ui-menu-bg, #fff);
     color: var(--ui-menu-color, #0f172a);
     box-shadow: var(--ui-menu-shadow);
-    opacity: 0;
-    transform: translateY(4px) scale(0.985);
-    transform-origin: top center;
-    animation: ui-menu-enter 150ms cubic-bezier(0.2, 0.9, 0.24, 1) forwards;
     outline: none;
-    will-change: transform, opacity;
     z-index: var(--ui-menu-z, 1560);
   }
 
@@ -206,19 +203,6 @@
     opacity: 0.72;
   }
 
-  @keyframes ui-menu-enter {
-    from { opacity: 0; transform: translateY(4px) scale(0.985); }
-    to { opacity: 1; transform: translateY(0) scale(1); }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .menu {
-      animation: none;
-      opacity: 1;
-      transform: none;
-    }
-  }
-
   @media (prefers-contrast: more) {
     .menu {
       border-width: 2px;
@@ -262,8 +246,8 @@
       box-shadow: none;
     }
   }
-`;class _ extends v.ElementBase{constructor(){super(),this._isOpen=!1,this._portalEl=null,this._positioner=null,this._dismissableLayer=null,this._restoreFocusEl=null,this._typeaheadBuffer="",this._typeaheadTimer=null,this._globalListenersBound=!1,this._menuClickHandler=null,this._menuId=`ui-menu-${Math.random().toString(36).slice(2,10)}`,this._onHostClick=this._onHostClick.bind(this),this._onDocumentKeyDown=this._onDocumentKeyDown.bind(this),this._onDocumentScroll=this._onDocumentScroll.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["open","disabled","placement","variant","size","density","radius","shape","elevation","tone","close-on-select","close-on-scroll","typeahead"]}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._onHostClick),this.root.addEventListener("slotchange",this._onSlotChange),this._syncOpenState(),this._syncTriggerA11y()}disconnectedCallback(){this.removeEventListener("click",this._onHostClick),this.root.removeEventListener("slotchange",this._onSlotChange),this._unbindGlobalListeners(),this._teardownPortal(),super.disconnectedCallback()}attributeChangedCallback(e,t,i){if(t!==i){if(e==="open"){this._syncOpenState();return}if(!(e==="close-on-select"||e==="close-on-scroll"||e==="typeahead")){if(e==="disabled"){this.hasAttribute("disabled")&&this.close(),this._syncTriggerA11y();return}if(e==="placement"&&this._isOpen){this._rebuildPositioner();return}I.has(e)&&this._isOpen&&this._syncPortalVisualState()}}}open(){this.hasAttribute("disabled")||this.setAttribute("open","")}close(){this.removeAttribute("open")}toggle(){this.hasAttribute("open")?this.close():this.open()}get closeOnSelect(){return h(this.getAttribute("close-on-select"),!0)}set closeOnSelect(e){this.setAttribute("close-on-select",e?"true":"false")}get closeOnScroll(){return h(this.getAttribute("close-on-scroll"),!0)}set closeOnScroll(e){this.setAttribute("close-on-scroll",e?"true":"false")}get typeahead(){return h(this.getAttribute("typeahead"),!0)}set typeahead(e){this.setAttribute("typeahead",e?"true":"false")}_getTrigger(){return this.querySelector('[slot="trigger"]')}_getContentSource(){return this.querySelector('[slot="content"]')}_getItemSources(){return Array.from(this.querySelectorAll('[slot="item"]'))}_onSlotChange(){this._isOpen&&this._rebuildPortalContent()}_syncTriggerA11y(){const e=this._getTrigger();if(!e)return;const t=y.resolveTriggerControl(e);if(t.setAttribute("aria-haspopup","menu"),t.setAttribute("aria-expanded",this._isOpen?"true":"false"),t.setAttribute("aria-controls",this._menuId),this.hasAttribute("disabled")){t.setAttribute("aria-disabled","true"),t.setAttribute("tabindex","-1");return}t.getAttribute("aria-disabled")==="true"&&t.removeAttribute("aria-disabled"),t.getAttribute("tabindex")==="-1"&&t.removeAttribute("tabindex")}_syncOpenState(){const e=this.hasAttribute("open")&&!this.hasAttribute("disabled");if(e===this._isOpen){this._syncTriggerA11y(),e&&!this._portalEl?this._mountPortal():e&&this._positioner?.update();return}if(this._isOpen=e,this._syncTriggerA11y(),e){this._bindGlobalListeners(),this._restoreFocusEl=document.activeElement,this._mountPortal(),this.dispatchEvent(new CustomEvent("open",{bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{open:!0}})),requestAnimationFrame(()=>this._focusFirstItem());return}this._unbindGlobalListeners(),this._teardownPortal(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{open:!1}}));const t=this._getTrigger();if(t)try{t.focus({preventScroll:!0})}catch{t.focus()}this._restoreFocusEl=null}_bindGlobalListeners(){this._globalListenersBound||(document.addEventListener("keydown",this._onDocumentKeyDown),document.addEventListener("scroll",this._onDocumentScroll,{passive:!0,capture:!0}),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(document.removeEventListener("keydown",this._onDocumentKeyDown),document.removeEventListener("scroll",this._onDocumentScroll,!0),this._globalListenersBound=!1)}_clearActiveState(){this._portalEl&&this._portalEl.querySelectorAll(u()).forEach(e=>e.removeAttribute("data-active"))}_queryItems(){return this._portalEl?Array.from(this._portalEl.querySelectorAll(u())).filter(e=>!m(e)):[]}_focusItem(e){if(e){this._clearActiveState(),e.setAttribute("data-active","true");try{e.focus({preventScroll:!0})}catch{e.focus()}typeof e.scrollIntoView=="function"&&e.scrollIntoView({block:"nearest"})}}_focusFirstItem(){this._focusItem(this._queryItems()[0]||null)}_focusLastItem(){const e=this._queryItems();this._focusItem(e[e.length-1]||null)}_moveFocus(e){const t=this._queryItems();if(!t.length)return;const i=document.activeElement,n=i?t.findIndex(o=>o===i||o.contains(i)):-1,a=n===-1?0:Math.max(0,Math.min(t.length-1,n+e));this._focusItem(t[a]||null)}_resetTypeahead(){this._typeaheadBuffer="",this._typeaheadTimer!=null&&(window.clearTimeout(this._typeaheadTimer),this._typeaheadTimer=null)}_isTypeaheadKey(e){return e.ctrlKey||e.metaKey||e.altKey?!1:e.key.length===1&&/\S/.test(e.key)}_handleTypeahead(e){if(!this.typeahead||!this._isTypeaheadKey(e))return!1;this._typeaheadBuffer=`${this._typeaheadBuffer}${e.key.toLowerCase()}`.slice(0,24),this._typeaheadTimer!=null&&window.clearTimeout(this._typeaheadTimer),this._typeaheadTimer=window.setTimeout(()=>this._resetTypeahead(),420);const t=document.activeElement,i=this._queryItems();if(!i.length)return!1;const n=t?i.findIndex(s=>s===t||s.contains(t)):-1,o=(n>=0?[...i.slice(n+1),...i.slice(0,n+1)]:i).find(s=>(s.textContent||"").trim().toLowerCase().startsWith(this._typeaheadBuffer));return o?(e.preventDefault(),this._focusItem(o),!0):!1}_applySelectionBehavior(e){const t=e.getAttribute("role");if(t==="menuitemcheckbox"){const n=e.getAttribute("aria-checked")==="true";e.setAttribute("aria-checked",n?"false":"true"),e.setAttribute("data-state",n?"unchecked":"checked");return}if(t!=="menuitemradio"||!this._portalEl)return;const i=e.getAttribute("data-group")||e.getAttribute("name")||"";this._portalEl.querySelectorAll('[role="menuitemradio"]').forEach(n=>{const a=n.getAttribute("data-group")||n.getAttribute("name")||"";i&&a!==i||(n.setAttribute("aria-checked",n===e?"true":"false"),n.setAttribute("data-state",n===e?"checked":"unchecked"))})}_handleItemSelect(e){this._applySelectionBehavior(e);const t=e.getAttribute("data-index"),i=t!=null&&!Number.isNaN(Number(t))?Number(t):void 0;this.dispatchEvent(new CustomEvent("select",{bubbles:!0,detail:{index:i,value:e.getAttribute("data-value")||e.getAttribute("value")||void 0,label:e.getAttribute("aria-label")||e.textContent?.trim()||void 0,checked:e.getAttribute("aria-checked")==="true",item:e}})),this.closeOnSelect?this.close():this._focusItem(e)}_buildLegacyItems(e){const t=this._getItemSources();return t.forEach((i,n)=>{const a=i.cloneNode(!0);a.removeAttribute("slot"),a.getAttribute("role")||a.setAttribute("role","menuitem"),a.classList.contains("item")||a.classList.add("item"),a.hasAttribute("tabindex")||a.setAttribute("tabindex","-1"),a.hasAttribute("data-index")||a.setAttribute("data-index",String(n)),e.appendChild(a)}),t.length}_hydrateMenuItems(e){const t=Array.from(e.querySelectorAll(u()));return t.forEach((i,n)=>{i.getAttribute("role")||i.setAttribute("role","menuitem"),i.hasAttribute("tabindex")||i.setAttribute("tabindex","-1"),i.classList.contains("item")||i.classList.add("item"),i.hasAttribute("data-index")||i.setAttribute("data-index",String(n))}),t.length}_applyPortalTokens(e){const t=window.getComputedStyle(this);C.forEach(i=>{const n=t.getPropertyValue(i).trim();n?e.style.setProperty(i,n):e.style.removeProperty(i)})}_applyPortalVariantData(e){const t=l(this,"variant"),i=S(this.getAttribute("size")||this.getAttribute("density")),n=l(this,"density"),a=this.getAttribute("radius"),o=l(this,"shape"),s=l(this,"elevation"),c=l(this,"tone"),f=t==="default"||t===""?"":t==="line"?"outline":t==="glass"?"soft":t;f?e.setAttribute("data-variant",f):e.removeAttribute("data-variant"),i!=="md"?e.setAttribute("data-size",i):e.removeAttribute("data-size"),n&&n!=="default"?e.setAttribute("data-density",n):e.removeAttribute("data-density"),s&&s!=="default"?e.setAttribute("data-elevation",s):e.removeAttribute("data-elevation");const b=c==="default"||c==="brand"||c===""?"":c;b?e.setAttribute("data-tone",b):e.removeAttribute("data-tone");const d=w(a||o||null);d?(e.style.setProperty("--ui-menu-radius",d),e.style.setProperty("--ui-menu-item-radius",d==="999px"?"999px":`calc(${d} - 2px)`)):(e.style.removeProperty("--ui-menu-radius"),e.style.removeProperty("--ui-menu-item-radius"))}_syncPortalVisualState(){this._portalEl&&(this._applyPortalTokens(this._portalEl),this._applyPortalVariantData(this._portalEl),this._portalEl.setAttribute("aria-hidden","false"),this._portalEl.setAttribute("aria-busy","false"),this._portalEl.style.display="block",this._portalEl.style.visibility="visible",this._portalEl.style.opacity="1",this._portalEl.style.transform="translateY(0px) scale(1)",this._portalEl.style.pointerEvents="auto")}_attachMenuEvents(e){this._menuClickHandler=t=>{const i=p(t);!i||m(i)||this._handleItemSelect(i)},e.addEventListener("click",this._menuClickHandler),e.addEventListener("mouseover",t=>{const i=p(t);!i||m(i)||this._focusItem(i)}),e.addEventListener("focusin",t=>{const i=p(t);!i||m(i)||this._focusItem(i)}),e.addEventListener("mouseleave",()=>this._clearActiveState())}_buildPortalElement(){const e=document.createElement("div");e.className="surface menu",e.id=this._menuId,e.setAttribute("part","menu"),e.setAttribute("role","menu"),e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden","false"),e.setAttribute("aria-busy","false"),e.setAttribute("data-placement",g(this.getAttribute("placement")));const t=document.createElement("style");t.textContent=L,e.appendChild(t);const i=this._getContentSource();let n=0;if(i){const a=i.cloneNode(!0);a.removeAttribute("slot"),e.appendChild(a)}else n=this._buildLegacyItems(e);if(n=this._hydrateMenuItems(e)||n,n===0){const a=document.createElement("div");a.className="empty-state",a.textContent="No items",e.appendChild(a)}return this._applyPortalTokens(e),this._applyPortalVariantData(e),e.style.display="block",e.style.visibility="visible",e.style.opacity="1",e.style.transform="translateY(0px) scale(1)",e.style.pointerEvents="auto",this._attachMenuEvents(e),e}_rebuildPortalContent(){if(!this._portalEl)return;const e=this._portalEl.parentElement;if(!e)return;const t=this._portalEl,i=this._buildPortalElement();e.replaceChild(i,t),this._portalEl=i,this._rebuildPositioner()}_rebuildPositioner(){const e=this._getTrigger();!this._portalEl||!e||(this._positioner?.destroy(),this._positioner=E.createPositioner({anchor:e,floating:this._portalEl,placement:g(this.getAttribute("placement")),offset:6,flip:!0,shift:!0,fitViewport:!0,observeScroll:!1}))}_mountPortal(){const e=this._getTrigger();if(e){if(this._portalEl)this._syncPortalVisualState();else{this._portalEl=this._buildPortalElement();const t=x.createPortalContainer();if(!t){this._portalEl=null;return}t.appendChild(this._portalEl)}this._rebuildPositioner(),this._dismissableLayer?.destroy(),this._dismissableLayer=A.createDismissableLayer({node:this._portalEl,trigger:e,closeOnEscape:!0,closeOnPointerOutside:!0,onDismiss:()=>this.close()})}}_teardownPortal(){if(this._dismissableLayer?.destroy(),this._dismissableLayer=null,this._positioner?.destroy(),this._positioner=null,this._portalEl?.parentElement)try{this._portalEl.parentElement.removeChild(this._portalEl)}catch{}this._portalEl=null,this._menuClickHandler=null,this._resetTypeahead()}_isEventInsideTrigger(e){const t=this._getTrigger();return!!t&&e.composedPath().includes(t)}_isEventInsideMenu(e){return!!this._portalEl&&e.composedPath().includes(this._portalEl)}_isInternalScrollEvent(e){const t=typeof e.composedPath=="function"?e.composedPath():[];if(this._portalEl&&t.includes(this._portalEl))return!0;const i=this._getTrigger();if(i&&t.includes(i))return!0;const n=e.target;return!!(n instanceof Node&&(this._portalEl?.contains(n)||i?.contains(n)))}_onHostClick(e){this.hasAttribute("disabled")||this._isEventInsideTrigger(e)&&(e.preventDefault(),this.toggle())}_onDocumentScroll(e){!this._isOpen||!this.closeOnScroll||this._isInternalScrollEvent(e)||this.close()}_onDocumentKeyDown(e){if(!this._isOpen){if(e.key!=="ArrowDown"&&e.key!=="ArrowUp"||!this._isEventInsideTrigger(e))return;e.preventDefault(),this.open(),requestAnimationFrame(()=>{e.key==="ArrowUp"?this._focusLastItem():this._focusFirstItem()});return}if(!(!this._isEventInsideTrigger(e)&&!this._isEventInsideMenu(e))&&!this._handleTypeahead(e)){if(e.key==="Escape"){e.preventDefault(),e.stopPropagation(),this.close();return}if(e.key==="ArrowDown"){e.preventDefault(),this._moveFocus(1);return}if(e.key==="ArrowUp"){e.preventDefault(),this._moveFocus(-1);return}if(e.key==="Home"){e.preventDefault(),this._focusFirstItem();return}if(e.key==="End"){e.preventDefault(),this._focusLastItem();return}if(e.key==="Tab"){this.close();return}if(e.key==="Enter"||e.key===" "){const t=document.activeElement;if(!t||!this._portalEl?.contains(t))return;const i=t.closest(u());if(!i||m(i))return;e.preventDefault(),this._handleItemSelect(i)}}}render(){this.setContent(`
-      <style>${T}</style>
+`;class v extends y.ElementBase{constructor(){super(),this._isOpen=!1,this._portalEl=null,this._positioner=null,this._dismissableLayer=null,this._restoreFocusEl=null,this._typeaheadBuffer="",this._typeaheadTimer=null,this._globalListenersBound=!1,this._menuClickHandler=null,this._menuId=`ui-menu-${Math.random().toString(36).slice(2,10)}`,this._onHostClick=this._onHostClick.bind(this),this._onDocumentKeyDown=this._onDocumentKeyDown.bind(this),this._onDocumentScroll=this._onDocumentScroll.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["open","disabled","placement","variant","size","density","radius","shape","elevation","tone","close-on-select","close-on-scroll","typeahead"]}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._onHostClick),this.root.addEventListener("slotchange",this._onSlotChange),this._syncOpenState(),this._syncTriggerA11y()}disconnectedCallback(){this.removeEventListener("click",this._onHostClick),this.root.removeEventListener("slotchange",this._onSlotChange),this._unbindGlobalListeners(),this._teardownPortal(),super.disconnectedCallback()}attributeChangedCallback(e,t,i){if(t!==i){if(e==="open"){this._syncOpenState();return}if(!(e==="close-on-select"||e==="close-on-scroll"||e==="typeahead")){if(e==="disabled"){this.hasAttribute("disabled")&&this.close(),this._syncTriggerA11y();return}if(e==="placement"&&this._isOpen){this._rebuildPositioner();return}C.has(e)&&this._isOpen&&this._syncPortalVisualState()}}}open(){this.hasAttribute("disabled")||this.setAttribute("open","")}close(){this.removeAttribute("open")}toggle(){this.hasAttribute("open")?this.close():this.open()}get closeOnSelect(){return p(this.getAttribute("close-on-select"),!0)}set closeOnSelect(e){this.setAttribute("close-on-select",e?"true":"false")}get closeOnScroll(){return p(this.getAttribute("close-on-scroll"),!0)}set closeOnScroll(e){this.setAttribute("close-on-scroll",e?"true":"false")}get typeahead(){return p(this.getAttribute("typeahead"),!0)}set typeahead(e){this.setAttribute("typeahead",e?"true":"false")}_getTrigger(){return this.querySelector('[slot="trigger"]')}_getContentSource(){return this.querySelector('[slot="content"]')}_getItemSources(){return Array.from(this.querySelectorAll('[slot="item"]'))}_onSlotChange(){this._isOpen&&this._rebuildPortalContent()}_syncTriggerA11y(){const e=this._getTrigger();if(!e)return;const t=x.resolveTriggerControl(e);if(t.setAttribute("aria-haspopup","menu"),t.setAttribute("aria-expanded",this._isOpen?"true":"false"),t.setAttribute("aria-controls",this._menuId),this.hasAttribute("disabled")){t.setAttribute("aria-disabled","true"),t.setAttribute("tabindex","-1");return}t.getAttribute("aria-disabled")==="true"&&t.removeAttribute("aria-disabled"),t.getAttribute("tabindex")==="-1"&&t.removeAttribute("tabindex")}_syncOpenState(){const e=this.hasAttribute("open")&&!this.hasAttribute("disabled");if(e===this._isOpen){this._syncTriggerA11y(),e&&!this._portalEl?this._mountPortal():e&&this._positioner?.update();return}if(this._isOpen=e,this._syncTriggerA11y(),e){this._bindGlobalListeners(),this._restoreFocusEl=document.activeElement,this._mountPortal(),this.dispatchEvent(new CustomEvent("open",{bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{open:!0}})),requestAnimationFrame(()=>this._focusFirstItem());return}this._unbindGlobalListeners(),this._teardownPortal(!0),this.dispatchEvent(new CustomEvent("close",{bubbles:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{open:!1}}));const t=this._getTrigger();if(t)try{t.focus({preventScroll:!0})}catch{t.focus()}this._restoreFocusEl=null}_bindGlobalListeners(){this._globalListenersBound||(document.addEventListener("keydown",this._onDocumentKeyDown),document.addEventListener("scroll",this._onDocumentScroll,{passive:!0,capture:!0}),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(document.removeEventListener("keydown",this._onDocumentKeyDown),document.removeEventListener("scroll",this._onDocumentScroll,!0),this._globalListenersBound=!1)}_clearActiveState(){this._portalEl&&this._portalEl.querySelectorAll(u()).forEach(e=>e.removeAttribute("data-active"))}_queryItems(){return this._portalEl?Array.from(this._portalEl.querySelectorAll(u())).filter(e=>!m(e)):[]}_focusItem(e){if(e){this._clearActiveState(),e.setAttribute("data-active","true");try{e.focus({preventScroll:!0})}catch{e.focus()}typeof e.scrollIntoView=="function"&&e.scrollIntoView({block:"nearest"})}}_focusFirstItem(){this._focusItem(this._queryItems()[0]||null)}_focusLastItem(){const e=this._queryItems();this._focusItem(e[e.length-1]||null)}_moveFocus(e){const t=this._queryItems();if(!t.length)return;const i=document.activeElement,n=i?t.findIndex(o=>o===i||o.contains(i)):-1,s=n===-1?0:Math.max(0,Math.min(t.length-1,n+e));this._focusItem(t[s]||null)}_resetTypeahead(){this._typeaheadBuffer="",this._typeaheadTimer!=null&&(window.clearTimeout(this._typeaheadTimer),this._typeaheadTimer=null)}_isTypeaheadKey(e){return e.ctrlKey||e.metaKey||e.altKey?!1:e.key.length===1&&/\S/.test(e.key)}_handleTypeahead(e){if(!this.typeahead||!this._isTypeaheadKey(e))return!1;this._typeaheadBuffer=`${this._typeaheadBuffer}${e.key.toLowerCase()}`.slice(0,24),this._typeaheadTimer!=null&&window.clearTimeout(this._typeaheadTimer),this._typeaheadTimer=window.setTimeout(()=>this._resetTypeahead(),420);const t=document.activeElement,i=this._queryItems();if(!i.length)return!1;const n=t?i.findIndex(a=>a===t||a.contains(t)):-1,o=(n>=0?[...i.slice(n+1),...i.slice(0,n+1)]:i).find(a=>(a.textContent||"").trim().toLowerCase().startsWith(this._typeaheadBuffer));return o?(e.preventDefault(),this._focusItem(o),!0):!1}_applySelectionBehavior(e){const t=e.getAttribute("role");if(t==="menuitemcheckbox"){const n=e.getAttribute("aria-checked")==="true";e.setAttribute("aria-checked",n?"false":"true"),e.setAttribute("data-state",n?"unchecked":"checked");return}if(t!=="menuitemradio"||!this._portalEl)return;const i=e.getAttribute("data-group")||e.getAttribute("name")||"";this._portalEl.querySelectorAll('[role="menuitemradio"]').forEach(n=>{const s=n.getAttribute("data-group")||n.getAttribute("name")||"";i&&s!==i||(n.setAttribute("aria-checked",n===e?"true":"false"),n.setAttribute("data-state",n===e?"checked":"unchecked"))})}_handleItemSelect(e){this._applySelectionBehavior(e);const t=e.getAttribute("data-index"),i=t!=null&&!Number.isNaN(Number(t))?Number(t):void 0;this.dispatchEvent(new CustomEvent("select",{bubbles:!0,detail:{index:i,value:e.getAttribute("data-value")||e.getAttribute("value")||void 0,label:e.getAttribute("aria-label")||e.textContent?.trim()||void 0,checked:e.getAttribute("aria-checked")==="true",item:e}})),this.closeOnSelect?this.close():this._focusItem(e)}_buildLegacyItems(e){const t=this._getItemSources();return t.forEach((i,n)=>{const s=i.cloneNode(!0);s.removeAttribute("slot"),s.getAttribute("role")||s.setAttribute("role","menuitem"),s.classList.contains("item")||s.classList.add("item"),s.hasAttribute("tabindex")||s.setAttribute("tabindex","-1"),s.hasAttribute("data-index")||s.setAttribute("data-index",String(n)),e.appendChild(s)}),t.length}_hydrateMenuItems(e){const t=Array.from(e.querySelectorAll(u()));return t.forEach((i,n)=>{i.getAttribute("role")||i.setAttribute("role","menuitem"),i.hasAttribute("tabindex")||i.setAttribute("tabindex","-1"),i.classList.contains("item")||i.classList.add("item"),i.hasAttribute("data-index")||i.setAttribute("data-index",String(n))}),t.length}_applyPortalTokens(e){const t=window.getComputedStyle(this);T.forEach(i=>{const n=t.getPropertyValue(i).trim();n?e.style.setProperty(i,n):e.style.removeProperty(i)})}_applyPortalVariantData(e){const t=l(this,"variant"),i=w(this.getAttribute("size")||this.getAttribute("density")),n=l(this,"density"),s=this.getAttribute("radius"),o=l(this,"shape"),a=l(this,"elevation"),d=l(this,"tone"),b=t==="default"||t===""?"":t==="line"?"outline":t==="glass"?"soft":t;b?e.setAttribute("data-variant",b):e.removeAttribute("data-variant"),i!=="md"?e.setAttribute("data-size",i):e.removeAttribute("data-size"),n&&n!=="default"?e.setAttribute("data-density",n):e.removeAttribute("data-density"),a&&a!=="default"?e.setAttribute("data-elevation",a):e.removeAttribute("data-elevation");const g=d==="default"||d==="brand"||d===""?"":d;g?e.setAttribute("data-tone",g):e.removeAttribute("data-tone");const h=I(s||o||null);h?(e.style.setProperty("--ui-menu-radius",h),e.style.setProperty("--ui-menu-item-radius",h==="999px"?"999px":`calc(${h} - 2px)`)):(e.style.removeProperty("--ui-menu-radius"),e.style.removeProperty("--ui-menu-item-radius"))}_syncPortalVisualState(){this._portalEl&&(this._applyPortalTokens(this._portalEl),this._applyPortalVariantData(this._portalEl),this._portalEl.setAttribute("aria-hidden","false"),this._portalEl.setAttribute("aria-busy","false"),this._portalEl.style.display="block",this._portalEl.style.visibility="visible",this._portalEl.style.opacity="1",this._portalEl.style.transform="translateY(0px) scale(1)",this._portalEl.style.pointerEvents="auto")}_attachMenuEvents(e){this._menuClickHandler=t=>{const i=f(t);!i||m(i)||this._handleItemSelect(i)},e.addEventListener("click",this._menuClickHandler),e.addEventListener("mouseover",t=>{const i=f(t);!i||m(i)||this._focusItem(i)}),e.addEventListener("focusin",t=>{const i=f(t);!i||m(i)||this._focusItem(i)}),e.addEventListener("mouseleave",()=>this._clearActiveState())}_buildPortalElement(){const e=document.createElement("div");e.className="surface menu",e.id=this._menuId,e.setAttribute("part","menu"),e.setAttribute("role","menu"),e.setAttribute("tabindex","-1"),e.setAttribute("aria-hidden","false"),e.setAttribute("aria-busy","false"),e.setAttribute("data-placement",_(this.getAttribute("placement")));const t=document.createElement("style");t.textContent=P,e.appendChild(t);const i=this._getContentSource();let n=0;if(i){const s=i.cloneNode(!0);s.removeAttribute("slot"),e.appendChild(s)}else n=this._buildLegacyItems(e);if(n=this._hydrateMenuItems(e)||n,n===0){const s=document.createElement("div");s.className="empty-state",s.textContent="No items",e.appendChild(s)}return this._applyPortalTokens(e),this._applyPortalVariantData(e),e.style.display="block",e.style.visibility="visible",e.style.opacity="1",e.style.transform="translateY(0px) scale(1)",e.style.pointerEvents="auto",this._attachMenuEvents(e),e}_rebuildPortalContent(){if(!this._portalEl)return;const e=this._portalEl.parentElement;if(!e)return;const t=this._portalEl,i=this._buildPortalElement();e.replaceChild(i,t),this._portalEl=i,this._rebuildPositioner(),c.openOverlay(i,{animate:!1})}_rebuildPositioner(){const e=this._getTrigger();!this._portalEl||!e||(this._positioner?.destroy(),this._positioner=S.createPositioner({anchor:e,floating:this._portalEl,placement:_(this.getAttribute("placement")),offset:6,flip:!0,shift:!0,fitViewport:!0,observeScroll:!1}))}_mountPortal(){const e=this._getTrigger();if(!e)return;let t=!1;if(this._portalEl)this._syncPortalVisualState();else{this._portalEl=this._buildPortalElement();const i=A.createPortalContainer();if(!i){this._portalEl=null;return}i.appendChild(this._portalEl),t=!0}this._rebuildPositioner(),t&&this._portalEl&&c.openOverlay(this._portalEl),this._dismissableLayer?.destroy(),this._dismissableLayer=E.createDismissableLayer({node:this._portalEl,trigger:e,closeOnEscape:!0,closeOnPointerOutside:!0,onDismiss:()=>this.close()})}_teardownPortal(e=!1){this._dismissableLayer?.destroy(),this._dismissableLayer=null,this._positioner?.destroy(),this._positioner=null,e?c.retireOverlay(this._portalEl):c.removeOverlay(this._portalEl),this._portalEl=null,this._menuClickHandler=null,this._resetTypeahead()}_isEventInsideTrigger(e){const t=this._getTrigger();return!!t&&e.composedPath().includes(t)}_isEventInsideMenu(e){return!!this._portalEl&&e.composedPath().includes(this._portalEl)}_isInternalScrollEvent(e){const t=typeof e.composedPath=="function"?e.composedPath():[];if(this._portalEl&&t.includes(this._portalEl))return!0;const i=this._getTrigger();if(i&&t.includes(i))return!0;const n=e.target;return!!(n instanceof Node&&(this._portalEl?.contains(n)||i?.contains(n)))}_onHostClick(e){this.hasAttribute("disabled")||this._isEventInsideTrigger(e)&&(e.preventDefault(),this.toggle())}_onDocumentScroll(e){!this._isOpen||!this.closeOnScroll||this._isInternalScrollEvent(e)||this.close()}_onDocumentKeyDown(e){if(!this._isOpen){if(e.key!=="ArrowDown"&&e.key!=="ArrowUp"||!this._isEventInsideTrigger(e))return;e.preventDefault(),this.open(),requestAnimationFrame(()=>{e.key==="ArrowUp"?this._focusLastItem():this._focusFirstItem()});return}if(!(!this._isEventInsideTrigger(e)&&!this._isEventInsideMenu(e))&&!this._handleTypeahead(e)){if(e.key==="Escape"){e.preventDefault(),e.stopPropagation(),this.close();return}if(e.key==="ArrowDown"){e.preventDefault(),this._moveFocus(1);return}if(e.key==="ArrowUp"){e.preventDefault(),this._moveFocus(-1);return}if(e.key==="Home"){e.preventDefault(),this._focusFirstItem();return}if(e.key==="End"){e.preventDefault(),this._focusLastItem();return}if(e.key==="Tab"){this.close();return}if(e.key==="Enter"||e.key===" "){const t=document.activeElement;if(!t||!this._portalEl?.contains(t))return;const i=t.closest(u());if(!i||m(i))return;e.preventDefault(),this._handleItemSelect(i)}}}render(){this.setContent(`
+      <style>${L}</style>
       <div class="trigger" part="trigger">
         <slot name="trigger"></slot>
       </div>
@@ -272,4 +256,4 @@
         <slot name="content"></slot>
       </div>
       <slot></slot>
-    `),this._syncTriggerA11y(),this._isOpen&&!this._portalEl?this._mountPortal():this._isOpen&&this._positioner?.update()}shouldRenderOnAttributeChange(){return!1}}typeof customElements<"u"&&!customElements.get("ui-menu")&&customElements.define("ui-menu",_);exports.UIMenu=_;
+    `),this._syncTriggerA11y(),this._isOpen&&!this._portalEl?this._mountPortal():this._isOpen&&this._positioner?.update()}shouldRenderOnAttributeChange(){return!1}}typeof customElements<"u"&&!customElements.get("ui-menu")&&customElements.define("ui-menu",v);exports.UIMenu=v;