@editora/ui-core 0.1.25 → 0.2.1

package/dist/input.esm.js

@@ -6,20 +6,23 @@ 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));
     --ui-label-color: var(--ui-color-muted, var(--ui-muted, #526175));
     --ui-description-color: var(--ui-color-muted, var(--ui-muted, #526175));
     --ui-input-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
-    --ui-input-error: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-input-error: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #dc2626)));
     --ui-input-success: var(--ui-color-success, var(--ui-success, #15803d));
     --ui-input-warning: var(--ui-color-warning, var(--ui-warning, #b45309));
     --ui-input-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
@@ -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/label.cjs.js

@@ -2,7 +2,7 @@
   :host {
     --ui-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-label-muted: var(--ui-color-muted, var(--ui-muted, #526175));
-    --ui-label-error: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-label-error: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #dc2626)));
     --ui-label-bg: transparent;
     --ui-label-border: 1px solid transparent;
     --ui-label-radius: 10px;
@@ -122,10 +122,10 @@
       0 10px 20px rgba(2, 6, 23, 0.1);
   }
 
-  :host([tone="brand"]) { --ui-label-color: var(--ui-color-primary, var(--ui-primary, #2563eb)); }
-  :host([tone="success"]) { --ui-label-color: var(--ui-color-success, var(--ui-success, #15803d)); }
-  :host([tone="warning"]) { --ui-label-color: var(--ui-color-warning, var(--ui-warning, #b45309)); }
-  :host([tone="danger"]) { --ui-label-color: var(--ui-color-danger, var(--ui-error, #dc2626)); }
+  :host([tone="brand"]) { --ui-label-color: var(--ui-color-accent-text, var(--ui-color-primary, var(--ui-primary, #2563eb))); }
+  :host([tone="success"]) { --ui-label-color: var(--ui-color-success-text, var(--ui-color-success, var(--ui-success, #15803d))); }
+  :host([tone="warning"]) { --ui-label-color: var(--ui-color-warning-text, var(--ui-color-warning, var(--ui-warning, #b45309))); }
+  :host([tone="danger"]) { --ui-label-color: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #dc2626))); }
 
   :host([shape="square"]) { --ui-label-radius: 4px; }
   :host([shape="soft"]) { --ui-label-radius: 16px; }
@@ -140,7 +140,7 @@
 
   :host([disabled]) .label {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: 0.72;
   }
 
   :host(:not([disabled])) .label:hover {

package/dist/label.esm.js

@@ -3,7 +3,7 @@ const n = `
   :host {
     --ui-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-label-muted: var(--ui-color-muted, var(--ui-muted, #526175));
-    --ui-label-error: var(--ui-color-danger, var(--ui-error, #dc2626));
+    --ui-label-error: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #dc2626)));
     --ui-label-bg: transparent;
     --ui-label-border: 1px solid transparent;
     --ui-label-radius: 10px;
@@ -123,10 +123,10 @@ const n = `
       0 10px 20px rgba(2, 6, 23, 0.1);
   }
 
-  :host([tone="brand"]) { --ui-label-color: var(--ui-color-primary, var(--ui-primary, #2563eb)); }
-  :host([tone="success"]) { --ui-label-color: var(--ui-color-success, var(--ui-success, #15803d)); }
-  :host([tone="warning"]) { --ui-label-color: var(--ui-color-warning, var(--ui-warning, #b45309)); }
-  :host([tone="danger"]) { --ui-label-color: var(--ui-color-danger, var(--ui-error, #dc2626)); }
+  :host([tone="brand"]) { --ui-label-color: var(--ui-color-accent-text, var(--ui-color-primary, var(--ui-primary, #2563eb))); }
+  :host([tone="success"]) { --ui-label-color: var(--ui-color-success-text, var(--ui-color-success, var(--ui-success, #15803d))); }
+  :host([tone="warning"]) { --ui-label-color: var(--ui-color-warning-text, var(--ui-color-warning, var(--ui-warning, #b45309))); }
+  :host([tone="danger"]) { --ui-label-color: var(--ui-color-danger-text, var(--ui-color-danger, var(--ui-error, #dc2626))); }
 
   :host([shape="square"]) { --ui-label-radius: 4px; }
   :host([shape="soft"]) { --ui-label-radius: 16px; }
@@ -141,7 +141,7 @@ const n = `
 
   :host([disabled]) .label {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: 0.72;
   }
 
   :host(:not([disabled])) .label:hover {

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/masonry-grid.cjs.js

@@ -6,7 +6,7 @@
     --ui-masonry-column-gap: 0px;
     --ui-masonry-item-gap: var(--ui-masonry-column-gap);
     --ui-masonry-fill: balance;
-    --ui-masonry-color: var(--ui-color-text, inherit);
+    --ui-masonry-color: inherit;
     color-scheme: light dark;
     display: var(--ui-masonry-display);
     color: var(--ui-masonry-color);
@@ -60,6 +60,6 @@
       --ui-masonry-color: CanvasText;
     }
   }
-`;function d(t){if(!t)return null;const s=t.trim();if(!s.startsWith("{"))return null;try{const e=JSON.parse(s);return!e||typeof e!="object"?null:e}catch{return null}}function c(t){return v[t]||t}function y(t,s){switch(t){case"display":return{"--ui-masonry-display":s};case"columns":return{"--ui-masonry-columns":s};case"columnwidth":return{"--ui-masonry-column-width":s};case"gap":return{"--ui-masonry-column-gap":c(s),"--ui-masonry-item-gap":c(s)};case"columngap":return{"--ui-masonry-column-gap":c(s)};case"itemgap":return{"--ui-masonry-item-gap":c(s)};case"fill":return{"--ui-masonry-fill":s};default:return{}}}class h extends f.ElementBase{constructor(){super(...arguments),this._lastClassname="",this._appliedInlineProps=new Set}static get observedAttributes(){return["classname","headless",...p]}_syncLegacyClassname(){const s=this.getAttribute("classname")||"";s!==this._lastClassname&&(this._lastClassname&&this._lastClassname.split(/\s+/).forEach(e=>{e&&this.classList.remove(e)}),s&&s.split(/\s+/).forEach(e=>{e&&this.classList.add(e)}),this._lastClassname=s)}_applyInlineStyles(){this._appliedInlineProps.forEach(s=>this.style.removeProperty(s)),this._appliedInlineProps.clear(),p.forEach(s=>{const e=this.getAttribute(s);if(!e||d(e))return;const l=y(s,e);Object.entries(l).forEach(([o,u])=>{this.style.setProperty(o,u),this._appliedInlineProps.add(o)})})}_buildResponsiveCss(){const s={},e={sm:{},md:{},lg:{},xl:{}};p.forEach(n=>{const a=this.getAttribute(n),i=d(a);if(!i)return;const r=(m,g)=>{Object.assign(m,y(n,g))};typeof i.initial=="string"&&r(s,i.initial),typeof i.sm=="string"&&r(e.sm,i.sm),typeof i.md=="string"&&r(e.md,i.md),typeof i.lg=="string"&&r(e.lg,i.lg),typeof i.xl=="string"&&r(e.xl,i.xl)});const l=(n,a)=>{const i=Object.entries(a);return i.length?`${n} { ${i.map(([r,m])=>`${r}: ${m};`).join(" ")} }`:""},o=[],u=l(":host",s);return u&&o.push(u),Object.keys(e).forEach(n=>{const a=l(":host",e[n]);a&&o.push(`@media (min-width: ${b[n]}) { ${a} }`)}),o.join(`
+`;function d(t){if(!t)return null;const s=t.trim();if(!s.startsWith("{"))return null;try{const e=JSON.parse(s);return!e||typeof e!="object"?null:e}catch{return null}}function c(t){return v[t]||t}function y(t,s){switch(t){case"display":return{"--ui-masonry-display":s};case"columns":return{"--ui-masonry-columns":s};case"columnwidth":return{"--ui-masonry-column-width":s};case"gap":return{"--ui-masonry-column-gap":c(s),"--ui-masonry-item-gap":c(s)};case"columngap":return{"--ui-masonry-column-gap":c(s)};case"itemgap":return{"--ui-masonry-item-gap":c(s)};case"fill":return{"--ui-masonry-fill":s};default:return{}}}class h extends f.ElementBase{constructor(){super(...arguments),this._lastClassname="",this._appliedInlineProps=new Set}static get observedAttributes(){return["classname","headless",...p]}_syncLegacyClassname(){const s=this.getAttribute("classname")||"";s!==this._lastClassname&&(this._lastClassname&&this._lastClassname.split(/\s+/).forEach(e=>{e&&this.classList.remove(e)}),s&&s.split(/\s+/).forEach(e=>{e&&this.classList.add(e)}),this._lastClassname=s)}_applyInlineStyles(){this._appliedInlineProps.forEach(s=>this.style.removeProperty(s)),this._appliedInlineProps.clear(),p.forEach(s=>{const e=this.getAttribute(s);if(!e||d(e))return;const l=y(s,e);Object.entries(l).forEach(([a,u])=>{this.style.setProperty(a,u),this._appliedInlineProps.add(a)})})}_buildResponsiveCss(){const s={},e={sm:{},md:{},lg:{},xl:{}};p.forEach(n=>{const o=this.getAttribute(n),i=d(o);if(!i)return;const r=(m,g)=>{Object.assign(m,y(n,g))};typeof i.initial=="string"&&r(s,i.initial),typeof i.sm=="string"&&r(e.sm,i.sm),typeof i.md=="string"&&r(e.md,i.md),typeof i.lg=="string"&&r(e.lg,i.lg),typeof i.xl=="string"&&r(e.xl,i.xl)});const l=(n,o)=>{const i=Object.entries(o);return i.length?`${n} { ${i.map(([r,m])=>`${r}: ${m};`).join(" ")} }`:""},a=[],u=l(":host",s);return u&&a.push(u),Object.keys(e).forEach(n=>{const o=l(":host",e[n]);o&&a.push(`@media (min-width: ${b[n]}) { ${o} }`)}),a.join(`
 `)}render(){this._syncLegacyClassname(),this._applyInlineStyles();const s=this._buildResponsiveCss();this.setContent(`<style>${x}${s?`
 ${s}`:""}</style><slot></slot>`),this.dispatchEvent(new CustomEvent("layoutchange",{bubbles:!0,composed:!0}))}shouldRenderOnAttributeChange(s,e,l){return!0}}typeof customElements<"u"&&!customElements.get("ui-masonry-grid")&&customElements.define("ui-masonry-grid",h);exports.UIMasonryGrid=h;

package/dist/masonry-grid.esm.js

@@ -18,7 +18,7 @@ const g = {
     --ui-masonry-column-gap: 0px;
     --ui-masonry-item-gap: var(--ui-masonry-column-gap);
     --ui-masonry-fill: balance;
-    --ui-masonry-color: var(--ui-color-text, inherit);
+    --ui-masonry-color: inherit;
     color-scheme: light dark;
     display: var(--ui-masonry-display);
     color: var(--ui-masonry-color);
@@ -130,8 +130,8 @@ class x extends f {
       const e = this.getAttribute(s);
       if (!e || d(e)) return;
       const l = y(s, e);
-      Object.entries(l).forEach(([o, c]) => {
-        this.style.setProperty(o, c), this._appliedInlineProps.add(o);
+      Object.entries(l).forEach(([a, c]) => {
+        this.style.setProperty(a, c), this._appliedInlineProps.add(a);
       });
     });
   }
@@ -143,21 +143,21 @@ class x extends f {
       xl: {}
     };
     p.forEach((n) => {
-      const a = this.getAttribute(n), i = d(a);
+      const o = this.getAttribute(n), i = d(o);
       if (!i) return;
       const r = (m, h) => {
         Object.assign(m, y(n, h));
       };
       typeof i.initial == "string" && r(s, i.initial), typeof i.sm == "string" && r(e.sm, i.sm), typeof i.md == "string" && r(e.md, i.md), typeof i.lg == "string" && r(e.lg, i.lg), typeof i.xl == "string" && r(e.xl, i.xl);
     });
-    const l = (n, a) => {
-      const i = Object.entries(a);
+    const l = (n, o) => {
+      const i = Object.entries(o);
       return i.length ? `${n} { ${i.map(([r, m]) => `${r}: ${m};`).join(" ")} }` : "";
-    }, o = [], c = l(":host", s);
-    return c && o.push(c), Object.keys(e).forEach((n) => {
-      const a = l(":host", e[n]);
-      a && o.push(`@media (min-width: ${g[n]}) { ${a} }`);
-    }), o.join(`
+    }, a = [], c = l(":host", s);
+    return c && a.push(c), Object.keys(e).forEach((n) => {
+      const o = l(":host", e[n]);
+      o && a.push(`@media (min-width: ${g[n]}) { ${o} }`);
+    }), a.join(`
 `);
   }
   render() {

package/dist/{menu-item-styles-IGSFLAHu.mjs → menu-item-styles-CdqxPUuw.mjs}

@@ -6,25 +6,25 @@ const y = [
   "[data-menu-item]"
 ], T = [".shortcut"];
 function r(e, o) {
-  return e.flatMap((i) => o.map((n) => `${i} ${n}`)).join(`,
+  return e.flatMap((i) => o.map((c) => `${i} ${c}`)).join(`,
   `);
 }
-function c(e, o) {
+function n(e, o) {
   return e.map((i) => `${i}${o}`);
 }
 function s(e, o) {
   return e.map((i) => `${i}${o}`);
 }
 function E(e) {
-  const o = e.itemSelectors ?? y, i = e.shortcutSelectors ?? T, n = e.activeStateSelectors ?? [], t = e.prefix, a = r(e.scopes, o), l = r(e.scopes, [
-    ...c(o, ":hover"),
-    ...c(o, ":focus-visible"),
-    ...n
-  ]), p = r(e.scopes, c(o, ":focus-visible")), m = r(e.scopes, s(o, '[aria-disabled="true"]')), d = r(e.scopes, s(o, '[data-tone="danger"]')), x = r(e.scopes, s(o, '[data-tone="success"]')), u = r(e.scopes, s(o, '[data-tone="warning"]')), b = r(e.scopes, [".separator", '[role="separator"]']), g = r(e.scopes, [".label"]), h = r(e.scopes, [".label .text"]), $ = r(e.scopes, [".label .caption"]), f = r(e.scopes, [".section-label"]), v = r(e.scopes, [".icon"]), S = r(e.scopes, [".selection-icon"]), k = r(e.scopes, ['[role="menuitemcheckbox"][aria-checked="true"] .selection-icon::before']), w = r(e.scopes, ['[role="menuitemradio"][aria-checked="true"] .selection-icon::before']), z = r(e.scopes, i), C = r(e.scopes, [".submenu-arrow"]);
+  const o = e.itemSelectors ?? y, i = e.shortcutSelectors ?? T, c = e.activeStateSelectors ?? [], t = e.prefix, a = r(e.scopes, o), l = r(e.scopes, [
+    ...n(o, ":hover"),
+    ...n(o, ":focus-visible"),
+    ...c
+  ]), p = r(e.scopes, n(o, ":focus-visible")), m = r(e.scopes, s(o, '[aria-disabled="true"]')), d = r(e.scopes, s(o, '[data-tone="danger"]')), u = r(e.scopes, s(o, '[data-tone="success"]')), x = r(e.scopes, s(o, '[data-tone="warning"]')), b = r(e.scopes, [".separator", '[role="separator"]']), g = r(e.scopes, [".label"]), h = r(e.scopes, [".label .text"]), $ = r(e.scopes, [".label .caption"]), f = r(e.scopes, [".section-label"]), v = r(e.scopes, [".icon"]), S = r(e.scopes, [".selection-icon"]), k = r(e.scopes, ['[role="menuitemcheckbox"][aria-checked="true"] .selection-icon::before']), w = r(e.scopes, ['[role="menuitemradio"][aria-checked="true"] .selection-icon::before']), z = r(e.scopes, i), C = r(e.scopes, [".submenu-arrow"]);
   return `
   ${f} {
     padding: 6px 10px 4px;
-    color: color-mix(in srgb, var(${t}-color, #0f172a) 54%, transparent);
+    color: color-mix(in srgb, var(${t}-color, #0f172a) 72%, transparent);
     font: 600 11px/1.4 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     letter-spacing: 0.04em;
     text-transform: uppercase;
@@ -76,15 +76,15 @@ function E(e) {
   }
 
   ${d} {
-    color: #dc2626;
+    color: var(--ui-color-danger-text, #dc2626);
   }
 
-  ${x} {
-    color: #15803d;
+  ${u} {
+    color: var(--ui-color-success-text, #15803d);
   }
 
-  ${u} {
-    color: #b45309;
+  ${x} {
+    color: var(--ui-color-warning-text, #b45309);
   }
 
   ${v} {
@@ -150,7 +150,7 @@ function E(e) {
   }
 
   ${$} {
-    color: color-mix(in srgb, currentColor 70%, transparent);
+    color: color-mix(in srgb, currentColor 88%, transparent);
     font-size: calc(var(${t}-item-font-size, 14px) - 1px);
     line-height: 1.35;
     letter-spacing: inherit;
@@ -161,7 +161,7 @@ function E(e) {
     padding-left: 14px;
     flex: 0 0 auto;
     min-width: max-content;
-    color: color-mix(in srgb, currentColor 70%, transparent);
+    color: color-mix(in srgb, currentColor 88%, transparent);
     font-size: calc(var(${t}-item-font-size, 14px) - 1px);
     line-height: 1;
     letter-spacing: inherit;