@editora/ui-core 0.1.25 → 0.2.0

package/dist/dropdown.esm.js

@@ -1,13 +1,16 @@
 import { E as _ } from "./ElementBase-BeZT54Hj.mjs";
-import { r as x } from "./trigger-BjnxLCeQ.mjs";
-import { c as y } from "./menu-item-styles-IGSFLAHu.mjs";
+import { O as x, s as y } from "./overlay-motion-BX3dPLay.mjs";
+import { r as k } from "./trigger-BjnxLCeQ.mjs";
+import { c as A } from "./menu-item-styles-IGSFLAHu.mjs";
 const l = [
   '[role="menuitem"]',
   '[role="menuitemcheckbox"]',
   '[role="menuitemradio"]',
   ".item",
   "[data-menu-item]"
-].join(", "), k = `
+].join(", "), S = `
+  ${x}
+
   :host {
     --ui-dropdown-bg: var(
       --ui-dropdown-menu-bg,
@@ -21,7 +24,7 @@ const l = [
     );
     --ui-dropdown-border: var(--ui-dropdown-menu-border, var(--base-dropdown-border, 1px solid var(--ui-dropdown-border-color)));
     --ui-dropdown-shadow: var(--ui-dropdown-menu-shadow, var(--base-dropdown-shadow, 0 10px 24px rgba(15, 23, 42, 0.14)));
-    --ui-dropdown-radius: var(--ui-dropdown-menu-radius, var(--base-dropdown-radius, var(--ui-radius, 4px)));
+    --ui-dropdown-radius: var(--ui-dropdown-menu-radius, var(--base-dropdown-radius, var(--ui-radius, 6px)));
     --ui-dropdown-padding: var(--ui-dropdown-menu-padding, var(--base-dropdown-content-padding, 0px));
     --ui-dropdown-min-width: var(--ui-dropdown-menu-min-width, var(--base-dropdown-min-width, 224px));
     --ui-dropdown-gap: 8px;
@@ -276,7 +279,7 @@ const l = [
     --ui-dropdown-item-checked-bg: color-mix(in srgb, var(--ui-color-warning, #b45309) 17%, transparent);
   }
 
-  ${y({
+  ${A({
   scopes: [".menu"],
   prefix: "--ui-dropdown",
   shortcutSelectors: [".shortcut", ".meta"],
@@ -509,14 +512,14 @@ const l = [
     }
   }
 `;
-function A(i) {
+function C(i) {
   return i === "top" || i === "left" || i === "right" ? i : "bottom";
 }
-function S(i) {
+function E(i) {
   const e = (i || "").trim().toLowerCase();
   return e === "sm" || e === "1" || e === "compact" ? "sm" : e === "lg" || e === "3" || e === "comfortable" ? "lg" : "md";
 }
-function C(i) {
+function I(i) {
   const e = (i || "").trim().toLowerCase();
   return !e || e === "default" ? null : e === "none" ? "0px" : e === "sm" ? "8px" : e === "md" ? "12px" : e === "lg" || e === "large" ? "16px" : e === "full" || e === "pill" ? "999px" : e === "square" ? "6px" : e === "soft" || e === "rounded" ? "14px" : /^\d+(\.\d+)?$/.test(e) ? `${e}px` : /^\d+(\.\d+)?(px|rem|em|%)$/.test(e) ? e : i;
 }
@@ -534,7 +537,7 @@ function h() {
 function b(i) {
   return i.hasAttribute("disabled") || i.getAttribute("aria-disabled") === "true" || i.disabled === !0;
 }
-function E(i) {
+function T(i) {
   return (i.getAttribute("aria-label") || i.textContent || "").trim();
 }
 function g(i) {
@@ -545,7 +548,7 @@ function g(i) {
       i.focus();
     }
 }
-function I(i, e) {
+function M(i, e) {
   const t = i.offsetTop, r = t + i.offsetHeight, o = e.scrollTop, a = o + e.clientHeight;
   if (t < o) {
     e.scrollTop = t;
@@ -553,7 +556,7 @@ function I(i, e) {
   }
   r > a && (e.scrollTop = Math.max(0, r - e.clientHeight));
 }
-function T(i) {
+function O(i) {
   return w(i);
 }
 function w(i) {
@@ -568,23 +571,23 @@ function w(i) {
     t.appendChild(w(r));
   }), t;
 }
-function M(i, e, t) {
+function P(i, e, t) {
   for (let r = e + t; r >= 0 && r < i.length; r += t)
     if (!b(i[r])) return r;
   return -1;
 }
-function O(i, e, t) {
+function F(i, e, t) {
   if (!e) return null;
   const r = i.filter((a) => !b(a));
   if (!r.length) return null;
   const o = t ? r.indexOf(t) : -1;
   for (let a = 1; a <= r.length; a += 1) {
     const n = r[(o + a + r.length) % r.length];
-    if (E(n).toLowerCase().startsWith(e)) return n;
+    if (T(n).toLowerCase().startsWith(e)) return n;
   }
   return null;
 }
-const P = /* @__PURE__ */ new Set(["variant", "density", "shape", "elevation", "tone", "size", "radius"]), F = /* @__PURE__ */ new Set(["aria-label", "aria-labelledby", "aria-describedby"]), D = [
+const D = /* @__PURE__ */ new Set(["variant", "density", "shape", "elevation", "tone", "size", "radius"]), L = /* @__PURE__ */ new Set(["aria-label", "aria-labelledby", "aria-describedby"]), z = [
   "--ui-dropdown-bg",
   "--ui-dropdown-color",
   "--ui-dropdown-muted",
@@ -606,7 +609,7 @@ const P = /* @__PURE__ */ new Set(["variant", "density", "shape", "elevation", "
   "--ui-dropdown-duration",
   "--ui-dropdown-easing"
 ];
-class L extends _ {
+class H extends _ {
   constructor() {
     super(), this._isOpen = !1, this._panelEl = null, this._portalEl = null, this._restoreFocusEl = null, this._typeaheadBuffer = "", this._typeaheadTimer = null, this._placement = "bottom", this._openListenersBound = !1, this._openFrame = 0, this._checkboxState = /* @__PURE__ */ new Map(), this._radioState = /* @__PURE__ */ new Map(), this._menuId = `ui-dropdown-menu-${Math.random().toString(36).slice(2, 10)}`, this._triggerId = `ui-dropdown-trigger-${Math.random().toString(36).slice(2, 10)}`, this._onHostClick = this._onHostClick.bind(this), this._onHostKeyDown = this._onHostKeyDown.bind(this), this._onDocumentPointerDown = this._onDocumentPointerDown.bind(this), this._onSlotChange = this._onSlotChange.bind(this);
   }
@@ -647,11 +650,11 @@ class L extends _ {
           this.hasAttribute("disabled") && this._isOpen && this.close("disabled"), this._syncTriggerA11y();
           return;
         }
-        if (this._isOpen && (e === "placement" || P.has(e))) {
+        if (this._isOpen && (e === "placement" || D.has(e))) {
           this._syncMenuPresentation(), this._schedulePanelSync();
           return;
         }
-        this._isOpen && F.has(e) && this._syncMenuA11y();
+        this._isOpen && L.has(e) && this._syncMenuA11y();
       }
     }
   }
@@ -783,7 +786,7 @@ class L extends _ {
   _syncTriggerA11y() {
     const e = this._getTrigger();
     if (!e) return;
-    const t = x(e);
+    const t = k(e);
     if (t.id || (t.id = this._triggerId), t.setAttribute("aria-haspopup", "menu"), t.setAttribute("aria-expanded", this._isOpen ? "true" : "false"), this._isOpen ? t.setAttribute("aria-controls", this._menuId) : t.removeAttribute("aria-controls"), this.hasAttribute("disabled")) {
       t.setAttribute("aria-disabled", "true"), t.setAttribute("tabindex", "-1");
       return;
@@ -795,7 +798,7 @@ class L extends _ {
     if (!e) return;
     e.replaceChildren();
     const t = this._getContentSource();
-    if (t && e.appendChild(T(t)), !e.querySelector(l)) {
+    if (t && e.appendChild(O(t)), !e.querySelector(l)) {
       const r = document.createElement("div");
       r.className = "empty-state", r.textContent = "No items", e.appendChild(r);
     }
@@ -830,11 +833,11 @@ class L extends _ {
     const e = this._getMenu();
     if (!e) return;
     const t = h() ? window.getComputedStyle(this) : null;
-    t && D.forEach((c) => {
+    t && z.forEach((c) => {
       const m = t.getPropertyValue(c).trim();
       m ? e.style.setProperty(c, m) : e.style.removeProperty(c);
     });
-    const r = p(this, "variant"), o = S(this.getAttribute("size") || this.getAttribute("density")), a = p(this, "density"), n = p(this, "shape"), u = p(this, "elevation"), s = p(this, "tone"), d = C(this.getAttribute("radius") || n || null);
+    const r = p(this, "variant"), o = E(this.getAttribute("size") || this.getAttribute("density")), a = p(this, "density"), n = p(this, "shape"), u = p(this, "elevation"), s = p(this, "tone"), d = I(this.getAttribute("radius") || n || null);
     if (r && r !== "default" ? e.setAttribute("data-variant", r) : e.removeAttribute("data-variant"), o !== "md" ? e.setAttribute("data-size", o) : e.removeAttribute("data-size"), a && a !== "default" ? e.setAttribute("data-density", a) : e.removeAttribute("data-density"), n && n !== "default" ? e.setAttribute("data-shape", n) : e.removeAttribute("data-shape"), u && u !== "default" ? e.setAttribute("data-elevation", u) : e.removeAttribute("data-elevation"), s && s !== "default" && s !== "brand" ? e.setAttribute("data-tone", s) : e.removeAttribute("data-tone"), d) {
       e.style.setProperty("--ui-dropdown-radius", d), e.style.setProperty("--ui-dropdown-item-radius", d === "999px" ? "999px" : `max(0px, calc(${d} - 2px))`);
       return;
@@ -849,7 +852,7 @@ class L extends _ {
   }
   _syncControlState() {
     const e = this._panelEl, t = this._getMenu();
-    !e || !t || (e.hidden = !this._isOpen, e.setAttribute("data-placement", this._placement));
+    !e || !t || (e.setAttribute("data-placement", this._placement), y(e, this._isOpen, String(this._placement).split("-")[0]));
   }
   _schedulePanelSync(e) {
     this._openFrame && cancelAnimationFrame(this._openFrame), this._openFrame = requestAnimationFrame(() => {
@@ -873,7 +876,7 @@ class L extends _ {
     return e === "top" ? r.top - 12 : o - r.bottom - 12;
   }
   _resolvePlacement() {
-    const e = A(this.getAttribute("placement")), t = this._getTrigger(), r = this._getMenu();
+    const e = C(this.getAttribute("placement")), t = this._getTrigger(), r = this._getMenu();
     if (!t || !r || !h()) return e;
     const o = t.getBoundingClientRect(), a = window.innerWidth || document.documentElement.clientWidth || 0, n = window.innerHeight || document.documentElement.clientHeight || 0, u = Math.max(0, n - o.bottom - 12), s = Math.max(0, o.top - 12), d = Math.max(0, a - o.right - 12), c = Math.max(0, o.left - 12), m = Math.min(Math.max(r.scrollHeight, r.offsetHeight) + 4, 320), v = Math.min(Math.max(r.scrollWidth, r.offsetWidth) + 4, 360);
     return e === "top" ? s >= m || s > u ? "top" : "bottom" : e === "left" ? c >= v || c > d ? "left" : "right" : e === "right" ? d >= v || d >= c ? "right" : "left" : u >= m || u >= s ? "bottom" : "top";
@@ -884,7 +887,7 @@ class L extends _ {
   _setActiveItem(e, t = {}) {
     if (this._clearActiveItem(), !!e && (e.setAttribute("data-active", "true"), t.focus && g(e), t.scroll)) {
       const r = this._getMenu();
-      r && I(e, r);
+      r && M(e, r);
     }
   }
   _focusFirstItem() {
@@ -898,7 +901,7 @@ class L extends _ {
   _moveFocus(e) {
     const t = this._queryItems(!0);
     if (!t.length) return;
-    const r = this._currentFocusedItem() || this._queryItems(!0).find((n) => n.getAttribute("data-active") === "true") || null, o = r ? t.indexOf(r) : e > 0 ? -1 : t.length, a = M(t, o, e);
+    const r = this._currentFocusedItem() || this._queryItems(!0).find((n) => n.getAttribute("data-active") === "true") || null, o = r ? t.indexOf(r) : e > 0 ? -1 : t.length, a = P(t, o, e);
     if (a >= 0) {
       this._setActiveItem(t[a], { focus: !0, scroll: !0 });
       return;
@@ -915,7 +918,7 @@ class L extends _ {
     if (!this.typeahead || !this._isTypeaheadKey(e)) return !1;
     const t = e.key.toLowerCase();
     this._typeaheadBuffer = `${this._typeaheadBuffer}${t}`.slice(0, 24), this._typeaheadTimer != null && window.clearTimeout(this._typeaheadTimer), this._typeaheadTimer = window.setTimeout(() => this._resetTypeahead(), 460);
-    const r = O(this._queryItems(!0), this._typeaheadBuffer, this._currentFocusedItem());
+    const r = F(this._queryItems(!0), this._typeaheadBuffer, this._currentFocusedItem());
     return r ? (this._setActiveItem(r, { focus: !0, scroll: !0 }), e.preventDefault(), !0) : !1;
   }
   _querySourceItems() {
@@ -1024,7 +1027,7 @@ class L extends _ {
   }
   render() {
     this.setContent(`
-      <style>${k}</style>
+      <style>${S}</style>
       <div class="root" part="root">
         <div class="trigger" part="trigger">
           <slot name="trigger"></slot>
@@ -1049,7 +1052,7 @@ class L extends _ {
     return !1;
   }
 }
-typeof customElements < "u" && !customElements.get("ui-dropdown") && customElements.define("ui-dropdown", L);
+typeof customElements < "u" && !customElements.get("ui-dropdown") && customElements.define("ui-dropdown", H);
 export {
-  L as UIDropdown
+  H as UIDropdown
 };

package/dist/empty-state.cjs.js

@@ -2,18 +2,19 @@
   :host {
     display: block;
     --ui-empty-bg: linear-gradient(180deg, var(--ui-color-surface, #ffffff), var(--ui-color-surface-alt, #f8fafc));
-    --ui-empty-border: 1px dashed color-mix(in srgb, var(--ui-color-border, rgba(51, 65, 85, 0.28)) 88%, transparent);
-    --ui-empty-radius: 16px;
+    --ui-empty-border: 1px dashed var(--ui-color-line, color-mix(in srgb, var(--ui-color-border, rgba(51, 65, 85, 0.28)) 88%, transparent));
+    --ui-empty-radius: calc(var(--ui-radius, 6px) + 4px);
     --ui-empty-padding: 28px;
     --ui-empty-title: var(--ui-color-text, #0f172a);
-    --ui-empty-description: var(--ui-color-muted, #526175);
+    --ui-empty-description: var(--ui-color-text-secondary, var(--ui-color-muted, #526175));
     --ui-empty-icon-bg: color-mix(in srgb, var(--ui-color-muted, #526175) 18%, transparent);
     --ui-empty-icon-color: color-mix(in srgb, var(--ui-color-text, #334155) 82%, transparent);
     --ui-empty-shadow: none;
-    --ui-empty-action-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 14%, transparent);
-    --ui-empty-action-border: color-mix(in srgb, var(--ui-color-primary, #2563eb) 36%, transparent);
-    --ui-empty-action-color: var(--ui-color-primary, #1d4ed8);
-    --ui-empty-action-bg-hover: color-mix(in srgb, var(--ui-color-primary, #2563eb) 22%, transparent);
+    /* The default action is a primary button: a solid fill with the theme's text colour on it. */
+    --ui-empty-action-bg: var(--ui-color-primary, #2563eb);
+    --ui-empty-action-border: transparent;
+    --ui-empty-action-color: var(--ui-color-foreground-on-primary, #ffffff);
+    --ui-empty-action-bg-hover: color-mix(in srgb, var(--ui-color-primary, #2563eb) 88%, var(--ui-color-text-strong, #0f172a));
     color-scheme: light dark;
   }
 
@@ -71,10 +72,11 @@
     border: 1px solid var(--ui-empty-action-border);
     background: var(--ui-empty-action-bg);
     color: var(--ui-empty-action-color);
-    border-radius: 10px;
-    padding: 8px 12px;
-    font-size: 13px;
-    font-weight: 600;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    min-height: var(--ui-control-height-2, 32px);
+    padding: 0 12px;
+    font-size: var(--ui-control-font-size-2, 14px);
+    font-weight: 500;
     cursor: pointer;
   }
 
@@ -149,21 +151,21 @@
       border-color: Highlight;
     }
   }
-`;function e(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class n extends a.ElementBase{constructor(){super(),this._actionBtn=null,this._onActionClick=this._onActionClick.bind(this)}static get observedAttributes(){return["title","description","action-label","tone","compact","headless"]}disconnectedCallback(){this._actionBtn&&(this._actionBtn.removeEventListener("click",this._onActionClick),this._actionBtn=null),super.disconnectedCallback()}_onActionClick(){this.dispatchEvent(new CustomEvent("action",{bubbles:!0}))}render(){this._actionBtn&&(this._actionBtn.removeEventListener("click",this._onActionClick),this._actionBtn=null);const o=this.getAttribute("title")||"No results found",r=this.getAttribute("description")||"Try adjusting your filters or creating a new record.",t=this.getAttribute("action-label")||"";this.setContent(`
+`;function i(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class n extends a.ElementBase{constructor(){super(),this._actionBtn=null,this._onActionClick=this._onActionClick.bind(this)}static get observedAttributes(){return["title","description","action-label","tone","compact","headless"]}disconnectedCallback(){this._actionBtn&&(this._actionBtn.removeEventListener("click",this._onActionClick),this._actionBtn=null),super.disconnectedCallback()}_onActionClick(){this.dispatchEvent(new CustomEvent("action",{bubbles:!0}))}render(){this._actionBtn&&(this._actionBtn.removeEventListener("click",this._onActionClick),this._actionBtn=null);const o=this.getAttribute("title")||"No results found",r=this.getAttribute("description")||"Try adjusting your filters or creating a new record.",t=this.getAttribute("action-label")||"";this.setContent(`
       <style>${c}</style>
       <section class="card" role="status" aria-live="polite">
         <div class="icon" part="icon" aria-hidden="true">
           <slot name="icon">i</slot>
         </div>
         <h3 class="title" part="title">
-          <slot name="title">${e(o)}</slot>
+          <slot name="title">${i(o)}</slot>
         </h3>
         <p class="description" part="description">
-          <slot name="description">${e(r)}</slot>
+          <slot name="description">${i(r)}</slot>
         </p>
         <div class="actions" part="actions">
           <slot name="actions"></slot>
-          ${t?`<button type="button" class="default-action">${e(t)}</button>`:""}
+          ${t?`<button type="button" class="default-action">${i(t)}</button>`:""}
         </div>
       </section>
     `),this._actionBtn=this.root.querySelector(".default-action"),this._actionBtn&&this._actionBtn.addEventListener("click",this._onActionClick)}shouldRenderOnAttributeChange(o,r,t){return!0}}typeof customElements<"u"&&!customElements.get("ui-empty-state")&&customElements.define("ui-empty-state",n);exports.UIEmptyState=n;

package/dist/empty-state.esm.js

@@ -3,18 +3,19 @@ const a = `
   :host {
     display: block;
     --ui-empty-bg: linear-gradient(180deg, var(--ui-color-surface, #ffffff), var(--ui-color-surface-alt, #f8fafc));
-    --ui-empty-border: 1px dashed color-mix(in srgb, var(--ui-color-border, rgba(51, 65, 85, 0.28)) 88%, transparent);
-    --ui-empty-radius: 16px;
+    --ui-empty-border: 1px dashed var(--ui-color-line, color-mix(in srgb, var(--ui-color-border, rgba(51, 65, 85, 0.28)) 88%, transparent));
+    --ui-empty-radius: calc(var(--ui-radius, 6px) + 4px);
     --ui-empty-padding: 28px;
     --ui-empty-title: var(--ui-color-text, #0f172a);
-    --ui-empty-description: var(--ui-color-muted, #526175);
+    --ui-empty-description: var(--ui-color-text-secondary, var(--ui-color-muted, #526175));
     --ui-empty-icon-bg: color-mix(in srgb, var(--ui-color-muted, #526175) 18%, transparent);
     --ui-empty-icon-color: color-mix(in srgb, var(--ui-color-text, #334155) 82%, transparent);
     --ui-empty-shadow: none;
-    --ui-empty-action-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 14%, transparent);
-    --ui-empty-action-border: color-mix(in srgb, var(--ui-color-primary, #2563eb) 36%, transparent);
-    --ui-empty-action-color: var(--ui-color-primary, #1d4ed8);
-    --ui-empty-action-bg-hover: color-mix(in srgb, var(--ui-color-primary, #2563eb) 22%, transparent);
+    /* The default action is a primary button: a solid fill with the theme's text colour on it. */
+    --ui-empty-action-bg: var(--ui-color-primary, #2563eb);
+    --ui-empty-action-border: transparent;
+    --ui-empty-action-color: var(--ui-color-foreground-on-primary, #ffffff);
+    --ui-empty-action-bg-hover: color-mix(in srgb, var(--ui-color-primary, #2563eb) 88%, var(--ui-color-text-strong, #0f172a));
     color-scheme: light dark;
   }
 
@@ -72,10 +73,11 @@ const a = `
     border: 1px solid var(--ui-empty-action-border);
     background: var(--ui-empty-action-bg);
     color: var(--ui-empty-action-color);
-    border-radius: 10px;
-    padding: 8px 12px;
-    font-size: 13px;
-    font-weight: 600;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    min-height: var(--ui-control-height-2, 32px);
+    padding: 0 12px;
+    font-size: var(--ui-control-font-size-2, 14px);
+    font-weight: 500;
     cursor: pointer;
   }
 

package/dist/field.cjs.js

@@ -2,14 +2,16 @@
   :host {
     --ui-field-gap: 8px;
     --ui-field-label-width: 192px;
-    --ui-field-radius: 12px;
-    --ui-field-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-field-radius: calc(var(--ui-radius, 6px) + 4px);
+    --ui-field-bg: transparent;
+    --ui-field-frame-padding: 0px;
+    --ui-field-density: 1;
     --ui-field-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-field-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-field-description-color: var(--ui-color-muted, var(--ui-muted, #526175));
     --ui-field-error-color: var(--ui-color-danger, var(--ui-error, #c81e1e));
     --ui-field-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
-    --ui-field-border: 1px solid var(--ui-field-border-color);
+    --ui-field-border: 0;
     --ui-field-shadow:
       none;
     --ui-field-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
@@ -38,7 +40,7 @@
     border: var(--ui-field-border);
     border-radius: var(--ui-field-radius);
     box-shadow: var(--ui-field-shadow);
-    padding: 12px;
+    padding: calc(var(--ui-field-frame-padding) * var(--ui-field-density));
     box-sizing: border-box;
     transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
   }
@@ -156,6 +158,16 @@
     --ui-field-shell-border-color: color-mix(in srgb, var(--ui-field-error-color) 56%, transparent);
   }
 
+  /* A plain field is flat: label, control and message with no box around them. These variants draw the box. */
+  :host([variant="surface"]),
+  :host([variant="outline"]),
+  :host([variant="soft"]),
+  :host([variant="contrast"]),
+  :host([variant="elevated"]) {
+    --ui-field-border: 1px solid var(--ui-field-border-color);
+    --ui-field-frame-padding: 12px;
+  }
+
   :host([variant="surface"]) {
     --ui-field-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
     --ui-field-shadow:
@@ -193,10 +205,7 @@
     --ui-field-bg: transparent;
     --ui-field-border: 0;
     --ui-field-shadow: none;
-  }
-
-  :host([variant="minimal"]) .frame {
-    padding: 0;
+    --ui-field-frame-padding: 0px;
   }
 
   :host([variant="elevated"]) {
@@ -223,8 +232,8 @@
     --ui-field-gap: 6px;
   }
 
-  :host([density="compact"]) .frame {
-    padding: 9px;
+  :host([density="compact"]) {
+    --ui-field-density: 0.75;
   }
 
   :host([density="compact"]) .label {
@@ -240,8 +249,8 @@
     --ui-field-gap: 10px;
   }
 
-  :host([density="comfortable"]) .frame {
-    padding: 15px;
+  :host([density="comfortable"]) {
+    --ui-field-density: 1.25;
   }
 
   :host([density="comfortable"]) .label {
@@ -370,7 +379,7 @@
       box-shadow: none;
     }
   }
-`;function C(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function A(r){if(!r)return!1;const t=r.assignedNodes({flatten:!0});return t.length?t.some(i=>i.nodeType===Node.TEXT_NODE?!!i.textContent?.trim():i.nodeType===Node.ELEMENT_NODE):!1}function x(r){if(r.hasAttribute("disabled")||r.getAttribute("aria-disabled")==="true"||r.getAttribute("tabindex")==="-1")return!1;const t=window.getComputedStyle(r);return!(t.display==="none"||t.visibility==="hidden")}function D(r){return!!r.closest('button, a, input, select, textarea, summary, [contenteditable=""], [contenteditable="true"], [role="button"]')}function k(r){return Array.from(new Set(r.filter(Boolean)))}const _="data-ui-field-label",S="data-ui-field-description",I='ui-input, ui-textarea, ui-select, ui-combobox, input, textarea, select, button, [tabindex]:not([tabindex="-1"])';class L extends M.ElementBase{constructor(){super(),this._uid=Math.random().toString(36).slice(2,9),this._controlCache=null,this._stateSyncQueued=!1,this._onRootClick=this._onRootClick.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["label","description","error","for","required","invalid","orientation","headless","variant","tone","density","shape","shell","label-width"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this.root.addEventListener("slotchange",this._onSlotChange),this._scheduleDerivedStateSync()}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this.root.removeEventListener("slotchange",this._onSlotChange),super.disconnectedCallback()}attributeChangedCallback(t,i,l){if(i!==l){if(t==="for"&&this._invalidateControlCache(),t==="label-width"){const o=this.getAttribute("label-width");o?this.style.setProperty("--ui-field-label-width",o):this.style.removeProperty("--ui-field-label-width")}if(t==="label"||t==="description"||t==="error"||t==="required"||t==="for"){this.isConnected&&this.requestRender();return}t==="invalid"&&this._scheduleDerivedStateSync()}}_onSlotChange(){this._invalidateControlCache(),this._scheduleDerivedStateSync()}_onRootClick(t){const i=t.target;i&&i.closest(".label")&&(D(i)||this._focusControl())}_invalidateControlCache(){this._controlCache=null}_scheduleDerivedStateSync(){this._stateSyncQueued||(this._stateSyncQueued=!0,queueMicrotask(()=>{this._stateSyncQueued=!1,this.isConnected&&this._syncDerivedState()}))}_focusControl(){const t=this._resolveControlElement();if(t)try{t.focus({preventScroll:!0})}catch{t.focus()}}_resolveControlElement(){if(this._controlCache&&this._controlCache.isConnected&&x(this._controlCache))return this._controlCache;const t=this.getAttribute("for");if(t){const e=document.getElementById(t);if(e instanceof HTMLElement&&x(e))return this._controlCache=e,e}const l=this.root.querySelector("slot:not([name])")?.assignedElements({flatten:!0})||[];for(const e of l){if(!(e instanceof HTMLElement))continue;if(x(e))return this._controlCache=e,e;const a=e.querySelector(I);if(a&&x(a))return this._controlCache=a,a}const o=this.querySelector(I);return o&&x(o)?(this._controlCache=o,o):null}_syncDerivedState(){const t=this.root.querySelector('slot[name="label"]'),i=this.root.querySelector('slot[name="actions"]'),l=this.root.querySelector('slot[name="description"]'),o=this.root.querySelector('slot[name="error"]'),e=(this.getAttribute("label")||"").trim(),a=(this.getAttribute("description")||"").trim(),y=(this.getAttribute("error")||"").trim(),n=!!e||A(t),d=A(i),h=!!a||A(l),b=!!y||A(o),w=n||d||h,E=n||d,c=this.root.querySelector(".meta"),p=this.root.querySelector(".label-row"),g=this.root.querySelector(".label"),m=this.root.querySelector(".actions"),u=this.root.querySelector(".description"),v=this.root.querySelector(".error");c&&(w?c.removeAttribute("hidden"):c.setAttribute("hidden","")),p&&(E?p.removeAttribute("hidden"):p.setAttribute("hidden","")),g&&(n?g.removeAttribute("hidden"):g.setAttribute("hidden","")),m&&(d?m.removeAttribute("hidden"):m.setAttribute("hidden","")),u&&(h?u.removeAttribute("hidden"):u.setAttribute("hidden","")),v&&(b?v.removeAttribute("hidden"):v.setAttribute("hidden",""));const q=t?t.assignedNodes({flatten:!0}).map(f=>f.textContent||"").join(" "):"",s=f=>f.replace(/\s+/g," ").trim(),T=f=>f?f.assignedNodes({flatten:!0}).map($=>$.textContent||"").join(" "):"",B=h?s(a||T(l)):"",R=b?s(y||T(o)):"";this._syncControlA11y(n,s(e||q),[B,R].filter(Boolean).join(" "),b)}_syncControlA11y(t,i,l,o){const e=this._resolveControlElement();if(!e)return;const a=`${this._uid}-label`,y=`${this._uid}-description`,n=`${this._uid}-error`,d=(e.getAttribute("aria-labelledby")||"").split(/\s+/).filter(s=>s&&s!==a),h=e.getRootNode(),b=d.some(s=>!!h.getElementById?.(s)),w=k(d);w.length?e.setAttribute("aria-labelledby",w.join(" ")):e.removeAttribute("aria-labelledby");const E=e.hasAttribute("aria-label")&&!e.hasAttribute(_),c=e.labels,p=(e.getAttribute("label")||"").trim().length>0,g=(e.textContent||"").trim().length>0,m=b||E||p||g||!!(c&&c.length>0);t&&i&&!m?(e.setAttribute("aria-label",i),e.setAttribute(_,"")):e.hasAttribute(_)&&(e.removeAttribute("aria-label"),e.removeAttribute(_));const u=k((e.getAttribute("aria-describedby")||"").split(/\s+/).filter(s=>s&&s!==y&&s!==n));u.length?e.setAttribute("aria-describedby",u.join(" ")):e.removeAttribute("aria-describedby");const v=e.hasAttribute("aria-description")&&!e.hasAttribute(S);l&&!v?(e.setAttribute("aria-description",l),e.setAttribute(S,"")):e.hasAttribute(S)&&(e.removeAttribute("aria-description"),e.removeAttribute(S)),this.hasAttribute("invalid")||o?e.setAttribute("aria-invalid","true"):e.removeAttribute("aria-invalid"),this.hasAttribute("required")?e.setAttribute("aria-required","true"):e.removeAttribute("aria-required")}render(){const t=this.getAttribute("label")||"",i=this.getAttribute("description")||"",l=this.getAttribute("error")||"",o=this.hasAttribute("required"),e=this.getAttribute("for")||"";this.setContent(`
+`;function C(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function A(r){if(!r)return!1;const t=r.assignedNodes({flatten:!0});return t.length?t.some(i=>i.nodeType===Node.TEXT_NODE?!!i.textContent?.trim():i.nodeType===Node.ELEMENT_NODE):!1}function x(r){if(r.hasAttribute("disabled")||r.getAttribute("aria-disabled")==="true"||r.getAttribute("tabindex")==="-1")return!1;const t=window.getComputedStyle(r);return!(t.display==="none"||t.visibility==="hidden")}function D(r){return!!r.closest('button, a, input, select, textarea, summary, [contenteditable=""], [contenteditable="true"], [role="button"]')}function k(r){return Array.from(new Set(r.filter(Boolean)))}const _="data-ui-field-label",S="data-ui-field-description",I='ui-input, ui-textarea, ui-select, ui-combobox, input, textarea, select, button, [tabindex]:not([tabindex="-1"])';class L extends M.ElementBase{constructor(){super(),this._uid=Math.random().toString(36).slice(2,9),this._controlCache=null,this._stateSyncQueued=!1,this._onRootClick=this._onRootClick.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["label","description","error","for","required","invalid","orientation","headless","variant","tone","density","shape","shell","label-width"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this.root.addEventListener("slotchange",this._onSlotChange),this._scheduleDerivedStateSync()}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this.root.removeEventListener("slotchange",this._onSlotChange),super.disconnectedCallback()}attributeChangedCallback(t,i,l){if(i!==l){if(t==="for"&&this._invalidateControlCache(),t==="label-width"){const o=this.getAttribute("label-width");o?this.style.setProperty("--ui-field-label-width",o):this.style.removeProperty("--ui-field-label-width")}if(t==="label"||t==="description"||t==="error"||t==="required"||t==="for"){this.isConnected&&this.requestRender();return}t==="invalid"&&this._scheduleDerivedStateSync()}}_onSlotChange(){this._invalidateControlCache(),this._scheduleDerivedStateSync()}_onRootClick(t){const i=t.target;i&&i.closest(".label")&&(D(i)||this._focusControl())}_invalidateControlCache(){this._controlCache=null}_scheduleDerivedStateSync(){this._stateSyncQueued||(this._stateSyncQueued=!0,queueMicrotask(()=>{this._stateSyncQueued=!1,this.isConnected&&this._syncDerivedState()}))}_focusControl(){const t=this._resolveControlElement();if(t)try{t.focus({preventScroll:!0})}catch{t.focus()}}_resolveControlElement(){if(this._controlCache&&this._controlCache.isConnected&&x(this._controlCache))return this._controlCache;const t=this.getAttribute("for");if(t){const e=document.getElementById(t);if(e instanceof HTMLElement&&x(e))return this._controlCache=e,e}const l=this.root.querySelector("slot:not([name])")?.assignedElements({flatten:!0})||[];for(const e of l){if(!(e instanceof HTMLElement))continue;if(x(e))return this._controlCache=e,e;const a=e.querySelector(I);if(a&&x(a))return this._controlCache=a,a}const o=this.querySelector(I);return o&&x(o)?(this._controlCache=o,o):null}_syncDerivedState(){const t=this.root.querySelector('slot[name="label"]'),i=this.root.querySelector('slot[name="actions"]'),l=this.root.querySelector('slot[name="description"]'),o=this.root.querySelector('slot[name="error"]'),e=(this.getAttribute("label")||"").trim(),a=(this.getAttribute("description")||"").trim(),y=(this.getAttribute("error")||"").trim(),n=!!e||A(t),d=A(i),h=!!a||A(l),b=!!y||A(o),w=n||d||h,E=n||d,c=this.root.querySelector(".meta"),p=this.root.querySelector(".label-row"),g=this.root.querySelector(".label"),v=this.root.querySelector(".actions"),u=this.root.querySelector(".description"),m=this.root.querySelector(".error");c&&(w?c.removeAttribute("hidden"):c.setAttribute("hidden","")),p&&(E?p.removeAttribute("hidden"):p.setAttribute("hidden","")),g&&(n?g.removeAttribute("hidden"):g.setAttribute("hidden","")),v&&(d?v.removeAttribute("hidden"):v.setAttribute("hidden","")),u&&(h?u.removeAttribute("hidden"):u.setAttribute("hidden","")),m&&(b?m.removeAttribute("hidden"):m.setAttribute("hidden",""));const T=t?t.assignedNodes({flatten:!0}).map(f=>f.textContent||"").join(" "):"",s=f=>f.replace(/\s+/g," ").trim(),q=f=>f?f.assignedNodes({flatten:!0}).map($=>$.textContent||"").join(" "):"",B=h?s(a||q(l)):"",R=b?s(y||q(o)):"";this._syncControlA11y(n,s(e||T),[B,R].filter(Boolean).join(" "),b)}_syncControlA11y(t,i,l,o){const e=this._resolveControlElement();if(!e)return;const a=`${this._uid}-label`,y=`${this._uid}-description`,n=`${this._uid}-error`,d=(e.getAttribute("aria-labelledby")||"").split(/\s+/).filter(s=>s&&s!==a),h=e.getRootNode(),b=d.some(s=>!!h.getElementById?.(s)),w=k(d);w.length?e.setAttribute("aria-labelledby",w.join(" ")):e.removeAttribute("aria-labelledby");const E=e.hasAttribute("aria-label")&&!e.hasAttribute(_),c=e.labels,p=(e.getAttribute("label")||"").trim().length>0,g=(e.textContent||"").trim().length>0,v=b||E||p||g||!!(c&&c.length>0);t&&i&&!v?(e.setAttribute("aria-label",i),e.setAttribute(_,"")):e.hasAttribute(_)&&(e.removeAttribute("aria-label"),e.removeAttribute(_));const u=k((e.getAttribute("aria-describedby")||"").split(/\s+/).filter(s=>s&&s!==y&&s!==n));u.length?e.setAttribute("aria-describedby",u.join(" ")):e.removeAttribute("aria-describedby");const m=e.hasAttribute("aria-description")&&!e.hasAttribute(S);l&&!m?(e.setAttribute("aria-description",l),e.setAttribute(S,"")):e.hasAttribute(S)&&(e.removeAttribute("aria-description"),e.removeAttribute(S)),this.hasAttribute("invalid")||o?e.setAttribute("aria-invalid","true"):e.removeAttribute("aria-invalid"),this.hasAttribute("required")?e.setAttribute("aria-required","true"):e.removeAttribute("aria-required")}render(){const t=this.getAttribute("label")||"",i=this.getAttribute("description")||"",l=this.getAttribute("error")||"",o=this.hasAttribute("required"),e=this.getAttribute("for")||"";this.setContent(`
       <style>${N}</style>
       <div class="frame" part="field">
         <div class="meta" part="meta">