@editora/ui-core 0.1.24 → 0.2.0

package/dist/field.esm.js

@@ -3,14 +3,16 @@ const N = `
   :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));
@@ -39,7 +41,7 @@ const N = `
     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;
   }
@@ -157,6 +159,16 @@ const N = `
     --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:
@@ -194,10 +206,7 @@ const N = `
     --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"]) {
@@ -224,8 +233,8 @@ const N = `
     --ui-field-gap: 6px;
   }
 
-  :host([density="compact"]) .frame {
-    padding: 9px;
+  :host([density="compact"]) {
+    --ui-field-density: 0.75;
   }
 
   :host([density="compact"]) .label {
@@ -241,8 +250,8 @@ const N = `
     --ui-field-gap: 10px;
   }
 
-  :host([density="comfortable"]) .frame {
-    padding: 15px;
+  :host([density="comfortable"]) {
+    --ui-field-density: 1.25;
   }
 
   :host([density="comfortable"]) .label {
@@ -377,13 +386,13 @@ function C(r) {
 }
 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;
+  const i = r.assignedNodes({ flatten: !0 });
+  return i.length ? i.some((t) => t.nodeType === Node.TEXT_NODE ? !!t.textContent?.trim() : t.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");
+  const i = window.getComputedStyle(r);
+  return !(i.display === "none" || i.visibility === "hidden");
 }
 function D(r) {
   return !!r.closest(
@@ -422,25 +431,25 @@ class M extends $ {
   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") {
+  attributeChangedCallback(i, t, l) {
+    if (t !== l) {
+      if (i === "for" && this._invalidateControlCache(), i === "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") {
+      if (i === "label" || i === "description" || i === "error" || i === "required" || i === "for") {
         this.isConnected && this.requestRender();
         return;
       }
-      t === "invalid" && this._scheduleDerivedStateSync();
+      i === "invalid" && this._scheduleDerivedStateSync();
     }
   }
   _onSlotChange() {
     this._invalidateControlCache(), this._scheduleDerivedStateSync();
   }
-  _onRootClick(t) {
-    const i = t.target;
-    i && i.closest(".label") && (D(i) || this._focusControl());
+  _onRootClick(i) {
+    const t = i.target;
+    t && t.closest(".label") && (D(t) || this._focusControl());
   }
   _invalidateControlCache() {
     this._controlCache = null;
@@ -451,20 +460,20 @@ class M extends $ {
     }));
   }
   _focusControl() {
-    const t = this._resolveControlElement();
-    if (t)
+    const i = this._resolveControlElement();
+    if (i)
       try {
-        t.focus({ preventScroll: !0 });
+        i.focus({ preventScroll: !0 });
       } catch {
-        t.focus();
+        i.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);
+    const i = this.getAttribute("for");
+    if (i) {
+      const e = document.getElementById(i);
       if (e instanceof HTMLElement && x(e))
         return this._controlCache = e, e;
     }
@@ -481,45 +490,45 @@ class M extends $ {
     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((B) => B.textContent || "").join(" ") : "", I = h ? s(a || T(l)) : "", R = b ? s(y || T(o)) : "";
+    const i = this.root.querySelector('slot[name="label"]'), t = 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(i), d = A(t), 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 = i ? i.assignedNodes({ flatten: !0 }).map((f) => f.textContent || "").join(" ") : "", s = (f) => f.replace(/\s+/g, " ").trim(), q = (f) => f ? f.assignedNodes({ flatten: !0 }).map((B) => B.textContent || "").join(" ") : "", I = h ? s(a || q(l)) : "", R = b ? s(y || q(o)) : "";
     this._syncControlA11y(
       n,
-      s(e || q),
+      s(e || T),
       [I, R].filter(Boolean).join(" "),
       b
     );
   }
-  _syncControlA11y(t, i, l, o) {
+  _syncControlA11y(i, t, 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 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);
+    i && t && !v ? (e.setAttribute("aria-label", t), 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");
+    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") || "";
+    const i = this.getAttribute("label") || "", t = 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">
           <div class="label-row" part="top">
             <label class="label" id="${this._uid}-label" ${e ? `for="${C(e)}"` : ""}>
-              <slot name="label">${C(t)}</slot>
+              <slot name="label">${C(i)}</slot>
               ${o ? '<span class="required" aria-hidden="true">*</span>' : ""}
             </label>
             <div class="actions" part="actions"><slot name="actions"></slot></div>
           </div>
           <p class="description" id="${this._uid}-description" part="description">
-            <slot name="description">${C(i)}</slot>
+            <slot name="description">${C(t)}</slot>
           </p>
         </div>
 
@@ -534,8 +543,8 @@ class M extends $ {
       </div>
     `), this._invalidateControlCache(), this._scheduleDerivedStateSync();
   }
-  shouldRenderOnAttributeChange(t, i, l) {
-    return t === "label" || t === "description" || t === "error" || t === "required" || t === "for";
+  shouldRenderOnAttributeChange(i, t, l) {
+    return i === "label" || i === "description" || i === "error" || i === "required" || i === "for";
   }
 }
 typeof customElements < "u" && !customElements.get("ui-field") && customElements.define("ui-field", M);

package/dist/fieldset.cjs.js

@@ -1,15 +1,15 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("./ElementBase-DxbvhLJs.js"),A=`
   :host {
     --ui-fieldset-gap: 10px;
-    --ui-fieldset-radius: 16px;
-    --ui-fieldset-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-fieldset-radius: calc(var(--ui-radius, 6px) + 4px);
+    --ui-fieldset-bg: transparent;
     --ui-fieldset-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-fieldset-muted: var(--ui-color-muted, var(--ui-muted, #526175));
     --ui-fieldset-error: var(--ui-color-danger, var(--ui-error, #c81e1e));
-    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 68%, transparent);
-    --ui-fieldset-border: 1px solid var(--ui-fieldset-border-color);
+    --ui-fieldset-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 68%, transparent));
+    --ui-fieldset-border: 0;
     --ui-fieldset-shadow: none;
-    --ui-fieldset-padding: 14px;
+    --ui-fieldset-padding: 0px;
     color-scheme: light dark;
     display: block;
     min-width: 0;
@@ -108,10 +108,17 @@
     align-items: start;
   }
 
+  /* A plain fieldset is flat; these variants draw the box. */
+  :host([variant="surface"]),
+  :host([variant="outline"]),
+  :host([variant="soft"]),
+  :host([variant="contrast"]) {
+    --ui-fieldset-border: 1px solid var(--ui-fieldset-border-color);
+    --ui-fieldset-padding: 14px;
+  }
+
   :host([variant="surface"]) {
-    --ui-fieldset-shadow:
-      0 1px 3px rgba(2, 6, 23, 0.05),
-      0 12px 26px rgba(2, 6, 23, 0.08);
+    --ui-fieldset-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([variant="outline"]) {
@@ -186,7 +193,7 @@
       box-shadow: none;
     }
   }
-`;function a(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function s(r){if(!r)return!1;const e=r.assignedNodes({flatten:!0});return e.length?e.some(t=>t.nodeType===Node.TEXT_NODE?!!t.textContent?.trim():t.nodeType===Node.ELEMENT_NODE):!1}function d(r,e){return r.id||(r.id=`ui-fieldset-${e}-${Math.random().toString(36).slice(2,9)}`),r.id}function q(r){return Array.from(new Set(r.filter(Boolean)))}class m extends S.ElementBase{constructor(){super(...arguments),this._stateSyncQueued=!1,this._onSlotChange=()=>{this._updateVisibility(),this._scheduleStateSync()}}static get observedAttributes(){return["legend","description","error","required","invalid","orientation","variant","tone","density","shape","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("slotchange",this._onSlotChange),this._scheduleStateSync()}disconnectedCallback(){this.root.removeEventListener("slotchange",this._onSlotChange),super.disconnectedCallback()}attributeChangedCallback(e,t,i){if(t!==i){if(e==="legend"||e==="description"||e==="error"||e==="required"){this.isConnected&&this.requestRender();return}e==="invalid"&&this._scheduleStateSync()}}render(){const e=this.getAttribute("legend")||"",t=this.getAttribute("description")||"",i=this.getAttribute("error")||"",o=this.hasAttribute("required");this.setContent(`
+`;function a(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function s(i){if(!i)return!1;const e=i.assignedNodes({flatten:!0});return e.length?e.some(t=>t.nodeType===Node.TEXT_NODE?!!t.textContent?.trim():t.nodeType===Node.ELEMENT_NODE):!1}function d(i,e){return i.id||(i.id=`ui-fieldset-${e}-${Math.random().toString(36).slice(2,9)}`),i.id}function q(i){return Array.from(new Set(i.filter(Boolean)))}class m extends S.ElementBase{constructor(){super(...arguments),this._stateSyncQueued=!1,this._onSlotChange=()=>{this._updateVisibility(),this._scheduleStateSync()}}static get observedAttributes(){return["legend","description","error","required","invalid","orientation","variant","tone","density","shape","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("slotchange",this._onSlotChange),this._scheduleStateSync()}disconnectedCallback(){this.root.removeEventListener("slotchange",this._onSlotChange),super.disconnectedCallback()}attributeChangedCallback(e,t,r){if(t!==r){if(e==="legend"||e==="description"||e==="error"||e==="required"){this.isConnected&&this.requestRender();return}e==="invalid"&&this._scheduleStateSync()}}render(){const e=this.getAttribute("legend")||"",t=this.getAttribute("description")||"",r=this.getAttribute("error")||"",o=this.hasAttribute("required");this.setContent(`
       <style>${A}</style>
       <fieldset class="frame" part="frame">
         <div class="legend-row">
@@ -205,10 +212,10 @@
           <slot></slot>
         </div>
         <p class="error" part="error">
-          <slot name="error">${i?a(i):""}</slot>
+          <slot name="error">${r?a(r):""}</slot>
         </p>
         <div class="footer" part="footer">
           <slot name="footer"></slot>
         </div>
       </fieldset>
-    `),this._updateVisibility(),this._syncAria()}_scheduleStateSync(){this._stateSyncQueued||(this._stateSyncQueued=!0,queueMicrotask(()=>{this._stateSyncQueued=!1,this.isConnected&&this._syncAria()}))}_updateVisibility(){const e=this.root.querySelector('slot[name="legend"]'),t=this.root.querySelector('slot[name="description"]'),i=this.root.querySelector('slot[name="actions"]'),o=this.root.querySelector('slot[name="error"]'),n=this.root.querySelector('slot[name="footer"]'),l=!!this.getAttribute("legend")||s(e),v=!!this.getAttribute("description")||s(t),c=s(i),y=!!this.getAttribute("error")||s(o),x=s(n),u=this.root.querySelector(".legend-row"),f=this.root.querySelector(".legend"),h=this.root.querySelector(".actions"),g=this.root.querySelector(".description"),p=this.root.querySelector(".error"),b=this.root.querySelector(".footer");u&&u.toggleAttribute("hidden",!l&&!c),f&&f.toggleAttribute("hidden",!l),h&&h.toggleAttribute("hidden",!c),g&&g.toggleAttribute("hidden",!v),p&&p.toggleAttribute("hidden",!y),b&&b.toggleAttribute("hidden",!x)}_syncAria(){const e=this.root.querySelector(".frame"),t=this.root.querySelector(".legend"),i=this.root.querySelector(".description"),o=this.root.querySelector(".error");if(!e)return;t&&!t.hasAttribute("hidden")?e.setAttribute("aria-labelledby",d(t,"legend")):e.removeAttribute("aria-labelledby");const n=q([i&&!i.hasAttribute("hidden")?d(i,"description"):"",o&&!o.hasAttribute("hidden")?d(o,"error"):""]);n.length?e.setAttribute("aria-describedby",n.join(" ")):e.removeAttribute("aria-describedby"),this.hasAttribute("invalid")||o&&!o.hasAttribute("hidden")?e.setAttribute("aria-invalid","true"):e.removeAttribute("aria-invalid")}}typeof customElements<"u"&&!customElements.get("ui-fieldset")&&customElements.define("ui-fieldset",m);exports.UIFieldset=m;
+    `),this._updateVisibility(),this._syncAria()}_scheduleStateSync(){this._stateSyncQueued||(this._stateSyncQueued=!0,queueMicrotask(()=>{this._stateSyncQueued=!1,this.isConnected&&this._syncAria()}))}_updateVisibility(){const e=this.root.querySelector('slot[name="legend"]'),t=this.root.querySelector('slot[name="description"]'),r=this.root.querySelector('slot[name="actions"]'),o=this.root.querySelector('slot[name="error"]'),n=this.root.querySelector('slot[name="footer"]'),l=!!this.getAttribute("legend")||s(e),v=!!this.getAttribute("description")||s(t),c=s(r),y=!!this.getAttribute("error")||s(o),x=s(n),u=this.root.querySelector(".legend-row"),f=this.root.querySelector(".legend"),h=this.root.querySelector(".actions"),g=this.root.querySelector(".description"),p=this.root.querySelector(".error"),b=this.root.querySelector(".footer");u&&u.toggleAttribute("hidden",!l&&!c),f&&f.toggleAttribute("hidden",!l),h&&h.toggleAttribute("hidden",!c),g&&g.toggleAttribute("hidden",!v),p&&p.toggleAttribute("hidden",!y),b&&b.toggleAttribute("hidden",!x)}_syncAria(){const e=this.root.querySelector(".frame"),t=this.root.querySelector(".legend"),r=this.root.querySelector(".description"),o=this.root.querySelector(".error");if(!e)return;t&&!t.hasAttribute("hidden")?e.setAttribute("aria-labelledby",d(t,"legend")):e.removeAttribute("aria-labelledby");const n=q([r&&!r.hasAttribute("hidden")?d(r,"description"):"",o&&!o.hasAttribute("hidden")?d(o,"error"):""]);n.length?e.setAttribute("aria-describedby",n.join(" ")):e.removeAttribute("aria-describedby"),this.hasAttribute("invalid")||o&&!o.hasAttribute("hidden")?e.setAttribute("aria-invalid","true"):e.removeAttribute("aria-invalid")}}typeof customElements<"u"&&!customElements.get("ui-fieldset")&&customElements.define("ui-fieldset",m);exports.UIFieldset=m;

package/dist/fieldset.esm.js

@@ -2,15 +2,15 @@ import { E as x } from "./ElementBase-BeZT54Hj.mjs";
 const S = `
   :host {
     --ui-fieldset-gap: 10px;
-    --ui-fieldset-radius: 16px;
-    --ui-fieldset-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-fieldset-radius: calc(var(--ui-radius, 6px) + 4px);
+    --ui-fieldset-bg: transparent;
     --ui-fieldset-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-fieldset-muted: var(--ui-color-muted, var(--ui-muted, #526175));
     --ui-fieldset-error: var(--ui-color-danger, var(--ui-error, #c81e1e));
-    --ui-fieldset-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 68%, transparent);
-    --ui-fieldset-border: 1px solid var(--ui-fieldset-border-color);
+    --ui-fieldset-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 68%, transparent));
+    --ui-fieldset-border: 0;
     --ui-fieldset-shadow: none;
-    --ui-fieldset-padding: 14px;
+    --ui-fieldset-padding: 0px;
     color-scheme: light dark;
     display: block;
     min-width: 0;
@@ -109,10 +109,17 @@ const S = `
     align-items: start;
   }
 
+  /* A plain fieldset is flat; these variants draw the box. */
+  :host([variant="surface"]),
+  :host([variant="outline"]),
+  :host([variant="soft"]),
+  :host([variant="contrast"]) {
+    --ui-fieldset-border: 1px solid var(--ui-fieldset-border-color);
+    --ui-fieldset-padding: 14px;
+  }
+
   :host([variant="surface"]) {
-    --ui-fieldset-shadow:
-      0 1px 3px rgba(2, 6, 23, 0.05),
-      0 12px 26px rgba(2, 6, 23, 0.08);
+    --ui-fieldset-shadow: var(--shadow-3, 0 4px 12px rgba(2, 6, 23, 0.1));
   }
 
   :host([variant="outline"]) {
@@ -202,7 +209,7 @@ function d(r, e) {
 function A(r) {
   return Array.from(new Set(r.filter(Boolean)));
 }
-class q extends x {
+class w extends x {
   constructor() {
     super(...arguments), this._stateSyncQueued = !1, this._onSlotChange = () => {
       this._updateVisibility(), this._scheduleStateSync();
@@ -273,8 +280,8 @@ class q extends x {
     }));
   }
   _updateVisibility() {
-    const e = this.root.querySelector('slot[name="legend"]'), t = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="actions"]'), o = this.root.querySelector('slot[name="error"]'), n = this.root.querySelector('slot[name="footer"]'), l = !!this.getAttribute("legend") || s(e), m = !!this.getAttribute("description") || s(t), c = s(i), v = !!this.getAttribute("error") || s(o), y = s(n), u = this.root.querySelector(".legend-row"), f = this.root.querySelector(".legend"), h = this.root.querySelector(".actions"), g = this.root.querySelector(".description"), p = this.root.querySelector(".error"), b = this.root.querySelector(".footer");
-    u && u.toggleAttribute("hidden", !l && !c), f && f.toggleAttribute("hidden", !l), h && h.toggleAttribute("hidden", !c), g && g.toggleAttribute("hidden", !m), p && p.toggleAttribute("hidden", !v), b && b.toggleAttribute("hidden", !y);
+    const e = this.root.querySelector('slot[name="legend"]'), t = this.root.querySelector('slot[name="description"]'), i = this.root.querySelector('slot[name="actions"]'), o = this.root.querySelector('slot[name="error"]'), n = this.root.querySelector('slot[name="footer"]'), l = !!this.getAttribute("legend") || s(e), m = !!this.getAttribute("description") || s(t), c = s(i), v = !!this.getAttribute("error") || s(o), y = s(n), u = this.root.querySelector(".legend-row"), f = this.root.querySelector(".legend"), h = this.root.querySelector(".actions"), p = this.root.querySelector(".description"), g = this.root.querySelector(".error"), b = this.root.querySelector(".footer");
+    u && u.toggleAttribute("hidden", !l && !c), f && f.toggleAttribute("hidden", !l), h && h.toggleAttribute("hidden", !c), p && p.toggleAttribute("hidden", !m), g && g.toggleAttribute("hidden", !v), b && b.toggleAttribute("hidden", !y);
   }
   _syncAria() {
     const e = this.root.querySelector(".frame"), t = this.root.querySelector(".legend"), i = this.root.querySelector(".description"), o = this.root.querySelector(".error");
@@ -287,7 +294,7 @@ class q extends x {
     n.length ? e.setAttribute("aria-describedby", n.join(" ")) : e.removeAttribute("aria-describedby"), this.hasAttribute("invalid") || o && !o.hasAttribute("hidden") ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid");
   }
 }
-typeof customElements < "u" && !customElements.get("ui-fieldset") && customElements.define("ui-fieldset", q);
+typeof customElements < "u" && !customElements.get("ui-fieldset") && customElements.define("ui-fieldset", w);
 export {
-  q as UIFieldset
+  w as UIFieldset
 };