@editora/ui-core 0.1.24 → 0.2.0

package/dist/progress.esm.js

@@ -3,22 +3,17 @@ const b = `
   :host {
     display: block;
     width: 100%;
-    --ui-progress-bg: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 45%, transparent);
+    --ui-progress-bg: var(--ui-color-fill-active, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 45%, transparent));
     --ui-progress-fill: var(--ui-color-primary, #2563eb);
-    --ui-progress-fill-soft:
-      linear-gradient(
-        90deg,
-        color-mix(in srgb, var(--ui-progress-fill, #2563eb) 82%, white 18%),
-        var(--ui-progress-fill, #2563eb)
-      );
+    --ui-progress-fill-soft: var(--ui-progress-fill, #2563eb);
     --ui-progress-buffer: color-mix(in srgb, var(--ui-progress-fill, #2563eb) 24%, transparent);
-    --ui-progress-height: 10px;
+    --ui-progress-height: 6px;
     --ui-progress-radius: 999px;
     --ui-progress-shadow: none;
-    --ui-progress-label: #334155;
+    --ui-progress-label: var(--ui-color-text-secondary, #334155);
     --ui-progress-duration: 220ms;
     --ui-progress-easing: cubic-bezier(0.2, 0.9, 0.24, 1);
-    --ui-progress-track-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
+    --ui-progress-track-border: 0;
     --ui-progress-circle-size: 72px;
     --ui-progress-circle-thickness: 8px;
     --ui-progress-circle-track: color-mix(in srgb, var(--ui-progress-bg) 82%, transparent);
@@ -36,7 +31,7 @@ const b = `
     align-items: baseline;
     justify-content: space-between;
     gap: 8px;
-    font: 600 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
+    font: 500 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
     color: var(--ui-progress-label);
     letter-spacing: 0.01em;
     min-height: 16px;
@@ -218,9 +213,9 @@ const b = `
   :host([shape="round"]) { --ui-progress-radius: 10px; }
   :host([shape="pill"]) { --ui-progress-radius: 999px; }
 
-  :host([size="xs"]) { --ui-progress-height: 4px; }
-  :host([size="sm"]) { --ui-progress-height: 8px; }
-  :host([size="lg"]) { --ui-progress-height: 14px; }
+  :host([size="xs"]) { --ui-progress-height: 3px; }
+  :host([size="sm"]) { --ui-progress-height: 4px; }
+  :host([size="lg"]) { --ui-progress-height: 8px; }
 
   :host([striped]) .value {
     background-image:
@@ -313,18 +308,18 @@ const b = `
     }
   }
 `;
-function u(e, r, t) {
-  return Number.isNaN(e) || e < r ? r : e > t ? t : e;
+function u(e, t, r) {
+  return Number.isNaN(e) || e < t ? t : e > r ? r : e;
 }
-function m(e, r) {
-  if (e == null) return r;
-  const t = String(e).toLowerCase();
-  return t !== "false" && t !== "0";
+function m(e, t) {
+  if (e == null) return t;
+  const r = String(e).toLowerCase();
+  return r !== "false" && r !== "0";
 }
-function c(e, r) {
-  if (e == null || e === "") return r;
-  const t = Number(e);
-  return Number.isFinite(t) ? t : r;
+function c(e, t) {
+  if (e == null || e === "") return t;
+  const r = Number(e);
+  return Number.isFinite(r) ? r : t;
 }
 function v(e) {
   return e === "xs" || e === "sm" || e === "lg" ? e : "md";
@@ -370,38 +365,38 @@ class A extends g {
   connectedCallback() {
     this._syncFromAttributes(), super.connectedCallback(), this._emitState();
   }
-  attributeChangedCallback(r, t, i) {
-    t !== i && (this._syncFromAttributes(), this.isConnected && this.render(), (r === "value" || r === "buffer" || r === "max" || r === "min" || r === "indeterminate") && this._emitState());
+  attributeChangedCallback(t, r, i) {
+    r !== i && (this._syncFromAttributes(), this.isConnected && this.render(), (t === "value" || t === "buffer" || t === "max" || t === "min" || t === "indeterminate") && this._emitState());
   }
-  setValue(r) {
-    this.setAttribute("value", String(r));
+  setValue(t) {
+    this.setAttribute("value", String(t));
   }
-  setBuffer(r) {
-    this.setAttribute("buffer", String(r));
+  setBuffer(t) {
+    this.setAttribute("buffer", String(t));
   }
-  increment(r = 1) {
-    this.setValue(this._value + r);
+  increment(t = 1) {
+    this.setValue(this._value + t);
   }
   reset() {
     this.setValue(this._min);
   }
   _syncFromAttributes() {
-    const r = c(this.getAttribute("min"), 0), t = c(this.getAttribute("max"), 100), i = t > r ? t : r + 1, s = c(this.getAttribute("value"), r), o = c(this.getAttribute("buffer"), s), d = this.hasAttribute("indeterminate"), l = u(s, r, i), a = u(o, r, i), n = Math.max(1e-6, i - r);
-    this._min = r, this._max = i, this._value = l, this._buffer = a, this._indeterminate = d, this._percent = u((l - r) / n * 100, 0, 100), this._bufferPercent = u((a - r) / n * 100, 0, 100);
+    const t = c(this.getAttribute("min"), 0), r = c(this.getAttribute("max"), 100), i = r > t ? r : t + 1, s = c(this.getAttribute("value"), t), o = c(this.getAttribute("buffer"), s), d = this.hasAttribute("indeterminate"), l = u(s, t, i), a = u(o, t, i), n = Math.max(1e-6, i - t);
+    this._min = t, this._max = i, this._value = l, this._buffer = a, this._indeterminate = d, this._percent = u((l - t) / n * 100, 0, 100), this._bufferPercent = u((a - t) / n * 100, 0, 100);
   }
-  _formatLabel(r) {
-    const t = (this.getAttribute("format") || "percent").toLowerCase(), i = u(Math.round(c(this.getAttribute("precision"), 0)), 0, 3);
-    if (t === "value") return `${this._value.toFixed(i)} / ${this._max.toFixed(i)}`;
-    if (t === "fraction") {
+  _formatLabel(t) {
+    const r = (this.getAttribute("format") || "percent").toLowerCase(), i = u(Math.round(c(this.getAttribute("precision"), 0)), 0, 3);
+    if (r === "value") return `${this._value.toFixed(i)} / ${this._max.toFixed(i)}`;
+    if (r === "fraction") {
       const s = Math.max(1, this._max - this._min);
       return `${Math.max(0, this._value - this._min).toFixed(i)}/${s.toFixed(i)}`;
     }
-    return `${r.toFixed(i)}%`;
+    return `${t.toFixed(i)}%`;
   }
   _emitState() {
     if (this._indeterminate) return;
-    const r = `${this._value}|${this._buffer}|${this._max}|${this._min}`;
-    r !== this._lastEmitted && (this._lastEmitted = r, this.dispatchEvent(
+    const t = `${this._value}|${this._buffer}|${this._max}|${this._min}`;
+    t !== this._lastEmitted && (this._lastEmitted = t, this.dispatchEvent(
       new CustomEvent("change", {
         detail: {
           value: this._value,
@@ -440,7 +435,7 @@ class A extends g {
   }
   render() {
     this._ensureDom();
-    const r = m(this.getAttribute("show-label"), !1), t = this.getAttribute("label"), i = t != null && t !== "" ? t : this._indeterminate ? "Loading..." : this._formatLabel(this._percent), s = v(this.getAttribute("size")), o = _(this.getAttribute("variant")), d = x(this.getAttribute("tone")), l = E(this.getAttribute("shape")), a = k(this.getAttribute("mode")), n = r && a === "circle", h = r && a !== "circle", p = (this.getAttribute("aria-label") || "").trim() || (t || "").trim() || "Progress";
+    const t = m(this.getAttribute("show-label"), !1), r = this.getAttribute("label"), i = r != null && r !== "" ? r : this._indeterminate ? "Loading..." : this._formatLabel(this._percent), s = v(this.getAttribute("size")), o = _(this.getAttribute("variant")), d = x(this.getAttribute("tone")), l = E(this.getAttribute("shape")), a = k(this.getAttribute("mode")), n = t && a === "circle", h = t && a !== "circle", p = (this.getAttribute("aria-label") || "").trim() || (r || "").trim() || "Progress";
     for (const f of [this._trackEl, this._radialWrapEl]) f?.setAttribute("aria-label", p);
     this._metaEl && (this._metaEl.textContent = h ? i : "", this._metaEl.setAttribute("aria-hidden", h ? "false" : "true")), this._trackEl && (this._trackEl.dataset.size = s, this._trackEl.dataset.variant = o, this._trackEl.dataset.tone = d, this._trackEl.dataset.shape = l, a === "line" ? (this._trackEl.setAttribute("aria-valuemin", String(this._min)), this._trackEl.setAttribute("aria-valuemax", String(this._max)), this._trackEl.setAttribute("aria-busy", this._indeterminate ? "true" : "false"), this._trackEl.setAttribute("role", "progressbar"), this._indeterminate ? (this._trackEl.removeAttribute("aria-valuenow"), this._trackEl.setAttribute("aria-valuetext", "Loading")) : (this._trackEl.removeAttribute("aria-valuetext"), this._trackEl.setAttribute("aria-valuenow", String(this._value)))) : (this._trackEl.removeAttribute("role"), this._trackEl.removeAttribute("aria-valuemin"), this._trackEl.removeAttribute("aria-valuemax"), this._trackEl.removeAttribute("aria-valuenow"), this._trackEl.removeAttribute("aria-valuetext"), this._trackEl.removeAttribute("aria-busy"))), this._bufferEl && (this._bufferEl.style.width = `${this._indeterminate ? 0 : this._bufferPercent}%`), this._valueEl && (this._valueEl.style.width = `${this._indeterminate ? 38 : this._percent}%`), this._radialWrapEl && (this._radialWrapEl.dataset.size = s, this._radialWrapEl.dataset.variant = o, this._radialWrapEl.dataset.tone = d, this._radialWrapEl.dataset.shape = l, a === "circle" ? (this._radialWrapEl.setAttribute("aria-valuemin", String(this._min)), this._radialWrapEl.setAttribute("aria-valuemax", String(this._max)), this._radialWrapEl.setAttribute("aria-busy", this._indeterminate ? "true" : "false"), this._radialWrapEl.setAttribute("role", "progressbar"), this._indeterminate ? (this._radialWrapEl.removeAttribute("aria-valuenow"), this._radialWrapEl.setAttribute("aria-valuetext", "Loading")) : (this._radialWrapEl.removeAttribute("aria-valuetext"), this._radialWrapEl.setAttribute("aria-valuenow", String(this._value)))) : (this._radialWrapEl.removeAttribute("role"), this._radialWrapEl.removeAttribute("aria-valuemin"), this._radialWrapEl.removeAttribute("aria-valuemax"), this._radialWrapEl.removeAttribute("aria-valuenow"), this._radialWrapEl.removeAttribute("aria-valuetext"), this._radialWrapEl.removeAttribute("aria-busy"))), this._radialBufferEl && this._radialBufferEl.style.setProperty("--ui-radial-buffer", String(this._indeterminate ? 0 : this._bufferPercent)), this._radialValueEl && this._radialValueEl.style.setProperty("--ui-radial-value", String(this._indeterminate ? 24 : this._percent)), this._radialCenterEl && (this._radialCenterEl.textContent = n ? i : "", this._radialCenterEl.setAttribute("aria-hidden", n ? "false" : "true"));
   }

package/dist/quick-actions.cjs.js

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("./ElementBase-DxbvhLJs.js"),h=`
   :host {
-    --ui-quick-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
-    --ui-quick-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-quick-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-quick-border: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
     --ui-quick-text: var(--ui-color-text, #0f172a);
     --ui-quick-muted: var(--ui-color-muted, #526175);
     --ui-quick-accent: var(--ui-color-primary, #2563eb);
@@ -18,10 +18,10 @@
     align-items: center;
     gap: 8px;
     border: 1px solid var(--ui-quick-border);
-    border-radius: 999px;
+    border-radius: calc(var(--ui-radius, 6px) + 4px);
     background: var(--ui-quick-bg);
-    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
-    padding: 8px;
+    box-shadow: var(--shadow-5, 0 8px 24px rgba(15, 23, 42, 0.12));
+    padding: 4px;
     color: var(--ui-quick-text);
   }
 
@@ -80,13 +80,13 @@
   }
 
   ::slotted([slot="action"]) {
-    border: 1px solid color-mix(in srgb, var(--ui-quick-border) 84%, transparent);
-    border-radius: 10px;
-    background: color-mix(in srgb, var(--ui-quick-bg) 98%, transparent);
+    border: 1px solid transparent;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    background: transparent;
     color: inherit;
-    font: 600 12px/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    letter-spacing: 0.01em;
-    padding: 8px 10px;
+    font: 500 var(--ui-control-font-size-2, 14px)/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    min-height: var(--ui-control-height-2, 32px);
+    padding: 0 10px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -197,9 +197,9 @@
       border-color: Highlight;
     }
   }
-`;let p=0;function l(u){return u.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class d extends b.ElementBase{constructor(){super(),this._instanceId=++p,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["open","mode","orientation","variant","floating","placement","collapsible","label","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.getAttribute("mode")!=="fab"&&!this.hasAttribute("collapsible")&&!this.hasAttribute("open")&&this.setAttribute("open","")}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),super.disconnectedCallback()}attributeChangedCallback(e,o,t){if(o!==t){if(e==="open"){this._syncOpenUi();return}this.isConnected&&this.requestRender()}}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}show(){this.toggle(!0)}hide(){this.toggle(!1)}toggle(e){const o=typeof e=="boolean"?e:!this.open;this.open=o;const t={open:o};this.dispatchEvent(new CustomEvent(o?"open":"close",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("toggle",{detail:t,bubbles:!0,composed:!0}))}_actions(){const e=this.root.querySelector('slot[name="action"]');return e?e.assignedElements({flatten:!0}).filter(o=>o instanceof HTMLElement):[]}_actionsId(){return`ui-quick-actions-${this._instanceId}-actions`}_syncActionAccessibility(e){this._actions().forEach((t,r)=>{if(t.id||(t.id=`ui-quick-actions-${this._instanceId}-action-${r+1}`),t.hasAttribute("role")||t.setAttribute("role","button"),!t.hasAttribute("aria-label")){const i=t.textContent?.trim();i&&t.setAttribute("aria-label",i)}if(e){const i=t.getAttribute("data-ui-quick-tabindex");i!=null?(i==="__none__"?t.removeAttribute("tabindex"):t.setAttribute("tabindex",i),t.removeAttribute("data-ui-quick-tabindex")):t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.setAttribute("aria-hidden","false");return}t.hasAttribute("data-ui-quick-tabindex")||t.setAttribute("data-ui-quick-tabindex",t.getAttribute("tabindex")??"__none__"),t.setAttribute("tabindex","-1"),t.setAttribute("aria-hidden","true")})}_onClick(e){const o=e.target;if(!o)return;if(o.closest(".toggle")){this.toggle();return}const r=e.composedPath(),i=this._actions(),n=i.find(s=>r.includes(s));if(!n)return;const a=i.indexOf(n),c={index:a,id:n.id||n.getAttribute("data-id")||String(a+1),label:n.getAttribute("aria-label")||n.textContent?.trim()||`Action ${a+1}`};this.dispatchEvent(new CustomEvent("select",{detail:c,bubbles:!0,composed:!0})),this.getAttribute("mode")==="fab"&&this.hide()}_moveFocus(e,o){const t=this._actions();if(!t.length)return;const r=t.indexOf(e);if(r<0)return;const i=(r+o+t.length)%t.length;t[i].focus()}_onKeyDown(e){if(e.key==="Escape"&&this.open&&this.getAttribute("mode")==="fab"){e.preventDefault(),this.hide();return}const o=e.target;if(!o)return;const r=this._actions().find(s=>s===o||s.contains(o));if(!r)return;const i=this.getAttribute("orientation")==="vertical"||this.getAttribute("mode")==="fab",n=!i&&getComputedStyle(this).direction==="rtl",a=i?"ArrowDown":n?"ArrowLeft":"ArrowRight",c=i?"ArrowUp":n?"ArrowRight":"ArrowLeft";if(e.key===a){e.preventDefault(),this._moveFocus(r,1);return}if(e.key===c){e.preventDefault(),this._moveFocus(r,-1);return}if(e.key==="Home"||e.key==="End"){e.preventDefault();const s=this._actions();if(!s.length)return;(e.key==="Home"?s[0]:s[s.length-1]).focus()}}_syncOpenUi(){if(!this.isConnected)return;if(!this.root.querySelector(".root")){this.requestRender();return}const e=this.getAttribute("mode")==="fab"?"fab":"bar",o=this.hasAttribute("collapsible")||e==="fab",t=this.open||!o&&e==="bar",r=this.getAttribute("label")||"Quick actions",i=this.root.querySelector(".toggle");i&&(i.textContent=t?"−":"+",i.setAttribute("aria-label",r),i.setAttribute("aria-expanded",t?"true":"false"));const n=this.root.querySelector(".actions");n&&(t?n.removeAttribute("hidden"):n.setAttribute("hidden","")),this._syncActionAccessibility(t)}render(){const e=this.getAttribute("mode")==="fab"?"fab":"bar",o=this.hasAttribute("collapsible")||e==="fab",t=this.open||!o&&e==="bar",r=this.getAttribute("label")||"Quick actions",i=this._actionsId(),n=this.getAttribute("orientation")==="vertical"||e==="fab"?"vertical":"horizontal";this.setContent(`
+`;let p=0;function l(u){return u.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}class d extends b.ElementBase{constructor(){super(),this._instanceId=++p,this._onClick=this._onClick.bind(this),this._onKeyDown=this._onKeyDown.bind(this)}static get observedAttributes(){return["open","mode","orientation","variant","floating","placement","collapsible","label","headless"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClick),this.root.addEventListener("keydown",this._onKeyDown),this.getAttribute("mode")!=="fab"&&!this.hasAttribute("collapsible")&&!this.hasAttribute("open")&&this.setAttribute("open","")}disconnectedCallback(){this.root.removeEventListener("click",this._onClick),this.root.removeEventListener("keydown",this._onKeyDown),super.disconnectedCallback()}attributeChangedCallback(e,o,t){if(o!==t){if(e==="open"){this._syncOpenUi();return}this.isConnected&&this.requestRender()}}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}show(){this.toggle(!0)}hide(){this.toggle(!1)}toggle(e){const o=typeof e=="boolean"?e:!this.open;this.open=o;const t={open:o};this.dispatchEvent(new CustomEvent(o?"open":"close",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("toggle",{detail:t,bubbles:!0,composed:!0}))}_actions(){const e=this.root.querySelector('slot[name="action"]');return e?e.assignedElements({flatten:!0}).filter(o=>o instanceof HTMLElement):[]}_actionsId(){return`ui-quick-actions-${this._instanceId}-actions`}_syncActionAccessibility(e){this._actions().forEach((t,r)=>{if(t.id||(t.id=`ui-quick-actions-${this._instanceId}-action-${r+1}`),t.hasAttribute("role")||t.setAttribute("role","button"),!t.hasAttribute("aria-label")){const i=t.textContent?.trim();i&&t.setAttribute("aria-label",i)}if(e){const i=t.getAttribute("data-ui-quick-tabindex");i!=null?(i==="__none__"?t.removeAttribute("tabindex"):t.setAttribute("tabindex",i),t.removeAttribute("data-ui-quick-tabindex")):t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.setAttribute("aria-hidden","false");return}t.hasAttribute("data-ui-quick-tabindex")||t.setAttribute("data-ui-quick-tabindex",t.getAttribute("tabindex")??"__none__"),t.setAttribute("tabindex","-1"),t.setAttribute("aria-hidden","true")})}_onClick(e){const o=e.target;if(!o)return;if(o.closest(".toggle")){this.toggle();return}const r=e.composedPath(),i=this._actions(),s=i.find(n=>r.includes(n));if(!s)return;const a=i.indexOf(s),c={index:a,id:s.id||s.getAttribute("data-id")||String(a+1),label:s.getAttribute("aria-label")||s.textContent?.trim()||`Action ${a+1}`};this.dispatchEvent(new CustomEvent("select",{detail:c,bubbles:!0,composed:!0})),this.getAttribute("mode")==="fab"&&this.hide()}_moveFocus(e,o){const t=this._actions();if(!t.length)return;const r=t.indexOf(e);if(r<0)return;const i=(r+o+t.length)%t.length;t[i].focus()}_onKeyDown(e){if(e.key==="Escape"&&this.open&&this.getAttribute("mode")==="fab"){e.preventDefault(),this.hide();return}const o=e.target;if(!o)return;const r=this._actions().find(n=>n===o||n.contains(o));if(!r)return;const i=this.getAttribute("orientation")==="vertical"||this.getAttribute("mode")==="fab",s=!i&&getComputedStyle(this).direction==="rtl",a=i?"ArrowDown":s?"ArrowLeft":"ArrowRight",c=i?"ArrowUp":s?"ArrowRight":"ArrowLeft";if(e.key===a){e.preventDefault(),this._moveFocus(r,1);return}if(e.key===c){e.preventDefault(),this._moveFocus(r,-1);return}if(e.key==="Home"||e.key==="End"){e.preventDefault();const n=this._actions();if(!n.length)return;(e.key==="Home"?n[0]:n[n.length-1]).focus()}}_syncOpenUi(){if(!this.isConnected)return;if(!this.root.querySelector(".root")){this.requestRender();return}const e=this.getAttribute("mode")==="fab"?"fab":"bar",o=this.hasAttribute("collapsible")||e==="fab",t=this.open||!o&&e==="bar",r=this.getAttribute("label")||"Quick actions",i=this.root.querySelector(".toggle");i&&(i.textContent=t?"−":"+",i.setAttribute("aria-label",r),i.setAttribute("aria-expanded",t?"true":"false"));const s=this.root.querySelector(".actions");s&&(t?s.removeAttribute("hidden"):s.setAttribute("hidden","")),this._syncActionAccessibility(t)}render(){const e=this.getAttribute("mode")==="fab"?"fab":"bar",o=this.hasAttribute("collapsible")||e==="fab",t=this.open||!o&&e==="bar",r=this.getAttribute("label")||"Quick actions",i=this._actionsId(),s=this.getAttribute("orientation")==="vertical"||e==="fab"?"vertical":"horizontal";this.setContent(`
       <style>${h}</style>
-      <div class="root" part="root" role="toolbar" aria-label="${l(r)}" aria-orientation="${n}">
+      <div class="root" part="root" role="toolbar" aria-label="${l(r)}" aria-orientation="${s}">
         ${o?`<button type="button" class="toggle" part="toggle" aria-label="${l(r)}" aria-controls="${i}" aria-haspopup="true" aria-expanded="${t?"true":"false"}">${t?"−":"+"}</button>`:""}
         <div id="${i}" class="actions" part="actions" role="group" aria-label="${l(r)} list" ${t?"":"hidden"}>
           <slot name="action"></slot>

package/dist/quick-actions.esm.js

@@ -1,8 +1,8 @@
 import { E as d } from "./ElementBase-BeZT54Hj.mjs";
 const b = `
   :host {
-    --ui-quick-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 95%, transparent);
-    --ui-quick-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-quick-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-quick-border: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
     --ui-quick-text: var(--ui-color-text, #0f172a);
     --ui-quick-muted: var(--ui-color-muted, #526175);
     --ui-quick-accent: var(--ui-color-primary, #2563eb);
@@ -19,10 +19,10 @@ const b = `
     align-items: center;
     gap: 8px;
     border: 1px solid var(--ui-quick-border);
-    border-radius: 999px;
+    border-radius: calc(var(--ui-radius, 6px) + 4px);
     background: var(--ui-quick-bg);
-    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
-    padding: 8px;
+    box-shadow: var(--shadow-5, 0 8px 24px rgba(15, 23, 42, 0.12));
+    padding: 4px;
     color: var(--ui-quick-text);
   }
 
@@ -81,13 +81,13 @@ const b = `
   }
 
   ::slotted([slot="action"]) {
-    border: 1px solid color-mix(in srgb, var(--ui-quick-border) 84%, transparent);
-    border-radius: 10px;
-    background: color-mix(in srgb, var(--ui-quick-bg) 98%, transparent);
+    border: 1px solid transparent;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    background: transparent;
     color: inherit;
-    font: 600 12px/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    letter-spacing: 0.01em;
-    padding: 8px 10px;
+    font: 500 var(--ui-control-font-size-2, 14px)/1 "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    min-height: var(--ui-control-height-2, 32px);
+    padding: 0 10px;
     display: inline-flex;
     align-items: center;
     justify-content: center;

package/dist/radio-group.cjs.js

@@ -5,21 +5,22 @@
     color-scheme: light dark;
 
     --ui-radio-gap: 8px;
-    --ui-radio-pad-y: 10px;
-    --ui-radio-pad-x: 12px;
-    --ui-radio-radius: 12px;
+    --ui-radio-pad-y: 6px;
+    --ui-radio-pad-x: 8px;
+    --ui-radio-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-radio-dot-size: 10px;
     --ui-radio-control-size: 18px;
 
-    --ui-radio-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 94%, transparent);
-    --ui-radio-bg-hover: color-mix(in srgb, var(--ui-color-surface, #ffffff) 80%, #f8fafc 20%);
-    --ui-radio-bg-selected: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, var(--ui-color-surface, #ffffff));
-    --ui-radio-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-radio-bg: transparent;
+    --ui-radio-bg-hover: var(--ui-color-fill-hover, color-mix(in srgb, currentColor 6%, transparent));
+    --ui-radio-bg-selected: transparent;
+    --ui-radio-border: transparent;
+    --ui-radio-line: var(--ui-color-line, #cbd5e1);
     --ui-radio-border-selected: var(--ui-color-primary, #2563eb);
     --ui-radio-text: var(--ui-color-text, #0f172a);
-    --ui-radio-muted: #526175;
+    --ui-radio-muted: var(--ui-color-text-secondary, #526175);
     --ui-radio-shadow: none;
-    --ui-radio-ring: color-mix(in srgb, var(--ui-color-primary, #2563eb) 34%, transparent);
+    --ui-radio-ring: var(--ui-ring-color, var(--ui-color-primary, #2563eb));
   }
 
   .root {
@@ -59,15 +60,19 @@
   }
 
   .option:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--ui-radio-ring), var(--ui-radio-shadow);
+    outline: var(--ui-ring-width, 2px) solid var(--ui-radio-ring);
+    outline-offset: var(--ui-ring-offset, 1px);
   }
 
   .option[data-checked="true"] {
-    border-color: var(--ui-radio-border-selected);
     background: var(--ui-radio-bg-selected);
   }
 
+  :host([variant="card"]) .option[data-checked="true"],
+  :host([variant="segmented"]) .option[data-checked="true"] {
+    border-color: var(--ui-radio-border-selected);
+  }
+
   .option[data-disabled="true"] {
     opacity: 0.56;
     cursor: not-allowed;
@@ -79,8 +84,8 @@
     inline-size: var(--ui-radio-control-size);
     block-size: var(--ui-radio-control-size);
     border-radius: 999px;
-    border: 1.5px solid color-mix(in srgb, var(--ui-radio-border-selected) 44%, var(--ui-radio-border));
-    background: color-mix(in srgb, var(--ui-radio-bg) 88%, white 12%);
+    border: 1px solid var(--ui-color-line-strong, var(--ui-radio-line));
+    background: var(--ui-color-surface, #ffffff);
     display: grid;
     place-items: center;
     transition: border-color 140ms ease, background-color 140ms ease;
@@ -101,6 +106,14 @@
     transform: scale(1);
   }
 
+  .option[data-checked="true"] .control {
+    border-color: var(--ui-radio-border-selected);
+  }
+
+  .option:hover .control {
+    border-color: var(--ui-radio-border-selected);
+  }
+
   .text {
     display: grid;
     gap: 2px;
@@ -108,7 +121,7 @@
   }
 
   .label {
-    font: 600 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
+    font: 500 14px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
     letter-spacing: 0.01em;
     white-space: nowrap;
     overflow: hidden;
@@ -116,7 +129,7 @@
   }
 
   .description {
-    font: 500 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
+    font: 400 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
     color: var(--ui-radio-muted);
     white-space: nowrap;
     overflow: hidden;
@@ -124,13 +137,26 @@
   }
 
   :host([variant="card"]) .option {
-    border-radius: 14px;
-    box-shadow:
-      0 1px 3px rgba(2, 6, 23, 0.06),
-      0 10px 24px rgba(2, 6, 23, 0.08);
+    --ui-radio-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-radio-border: var(--ui-color-line-subtle, var(--ui-radio-line));
+    --ui-radio-bg-selected: color-mix(in srgb, var(--ui-color-primary, #2563eb) 8%, var(--ui-color-surface, #ffffff));
+    --ui-radio-pad-y: 10px;
+    --ui-radio-pad-x: 12px;
+    border-radius: calc(var(--ui-radio-radius) + 2px);
+  }
+
+  :host([variant="segmented"]) .option:focus-visible {
+    outline-offset: -2px;
+  }
+
+  :host([variant="segmented"]) .option {
+    --ui-radio-bg-selected: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, var(--ui-color-surface, #ffffff));
+    --ui-radio-pad-y: 8px;
+    --ui-radio-pad-x: 12px;
   }
 
   :host([variant="segmented"]) .root {
+    --ui-radio-border: var(--ui-color-line-subtle, var(--ui-radio-line));
     gap: 0;
     border: 1px solid var(--ui-radio-border);
     border-radius: calc(var(--ui-radio-radius) + 2px);
@@ -159,21 +185,19 @@
   }
 
   :host([size="sm"]) {
-    --ui-radio-pad-y: 8px;
-    --ui-radio-pad-x: 10px;
+    --ui-radio-pad-y: 4px;
+    --ui-radio-pad-x: 6px;
     --ui-radio-control-size: 16px;
     --ui-radio-dot-size: 8px;
     --ui-radio-gap: 6px;
-    --ui-radio-radius: 10px;
   }
 
   :host([size="lg"]) {
-    --ui-radio-pad-y: 12px;
-    --ui-radio-pad-x: 14px;
+    --ui-radio-pad-y: 8px;
+    --ui-radio-pad-x: 10px;
     --ui-radio-control-size: 20px;
     --ui-radio-dot-size: 11px;
     --ui-radio-gap: 10px;
-    --ui-radio-radius: 14px;
   }
 
   :host([tone="neutral"]) { --ui-radio-border-selected: #64748b; }

package/dist/radio-group.esm.js

@@ -1,5 +1,5 @@
 import { E as v } from "./ElementBase-BeZT54Hj.mjs";
-import { m as x, r as h, f as g, s as m, g as p } from "./roving-focus-group-Dbm1Jko_.mjs";
+import { m as g, r as h, f as x, s as m, g as p } from "./roving-focus-group-Dbm1Jko_.mjs";
 const _ = `
   :host {
     display: block;
@@ -7,21 +7,22 @@ const _ = `
     color-scheme: light dark;
 
     --ui-radio-gap: 8px;
-    --ui-radio-pad-y: 10px;
-    --ui-radio-pad-x: 12px;
-    --ui-radio-radius: 12px;
+    --ui-radio-pad-y: 6px;
+    --ui-radio-pad-x: 8px;
+    --ui-radio-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-radio-dot-size: 10px;
     --ui-radio-control-size: 18px;
 
-    --ui-radio-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 94%, transparent);
-    --ui-radio-bg-hover: color-mix(in srgb, var(--ui-color-surface, #ffffff) 80%, #f8fafc 20%);
-    --ui-radio-bg-selected: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, var(--ui-color-surface, #ffffff));
-    --ui-radio-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-radio-bg: transparent;
+    --ui-radio-bg-hover: var(--ui-color-fill-hover, color-mix(in srgb, currentColor 6%, transparent));
+    --ui-radio-bg-selected: transparent;
+    --ui-radio-border: transparent;
+    --ui-radio-line: var(--ui-color-line, #cbd5e1);
     --ui-radio-border-selected: var(--ui-color-primary, #2563eb);
     --ui-radio-text: var(--ui-color-text, #0f172a);
-    --ui-radio-muted: #526175;
+    --ui-radio-muted: var(--ui-color-text-secondary, #526175);
     --ui-radio-shadow: none;
-    --ui-radio-ring: color-mix(in srgb, var(--ui-color-primary, #2563eb) 34%, transparent);
+    --ui-radio-ring: var(--ui-ring-color, var(--ui-color-primary, #2563eb));
   }
 
   .root {
@@ -61,15 +62,19 @@ const _ = `
   }
 
   .option:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--ui-radio-ring), var(--ui-radio-shadow);
+    outline: var(--ui-ring-width, 2px) solid var(--ui-radio-ring);
+    outline-offset: var(--ui-ring-offset, 1px);
   }
 
   .option[data-checked="true"] {
-    border-color: var(--ui-radio-border-selected);
     background: var(--ui-radio-bg-selected);
   }
 
+  :host([variant="card"]) .option[data-checked="true"],
+  :host([variant="segmented"]) .option[data-checked="true"] {
+    border-color: var(--ui-radio-border-selected);
+  }
+
   .option[data-disabled="true"] {
     opacity: 0.56;
     cursor: not-allowed;
@@ -81,8 +86,8 @@ const _ = `
     inline-size: var(--ui-radio-control-size);
     block-size: var(--ui-radio-control-size);
     border-radius: 999px;
-    border: 1.5px solid color-mix(in srgb, var(--ui-radio-border-selected) 44%, var(--ui-radio-border));
-    background: color-mix(in srgb, var(--ui-radio-bg) 88%, white 12%);
+    border: 1px solid var(--ui-color-line-strong, var(--ui-radio-line));
+    background: var(--ui-color-surface, #ffffff);
     display: grid;
     place-items: center;
     transition: border-color 140ms ease, background-color 140ms ease;
@@ -103,6 +108,14 @@ const _ = `
     transform: scale(1);
   }
 
+  .option[data-checked="true"] .control {
+    border-color: var(--ui-radio-border-selected);
+  }
+
+  .option:hover .control {
+    border-color: var(--ui-radio-border-selected);
+  }
+
   .text {
     display: grid;
     gap: 2px;
@@ -110,7 +123,7 @@ const _ = `
   }
 
   .label {
-    font: 600 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
+    font: 500 14px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
     letter-spacing: 0.01em;
     white-space: nowrap;
     overflow: hidden;
@@ -118,7 +131,7 @@ const _ = `
   }
 
   .description {
-    font: 500 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
+    font: 400 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
     color: var(--ui-radio-muted);
     white-space: nowrap;
     overflow: hidden;
@@ -126,13 +139,26 @@ const _ = `
   }
 
   :host([variant="card"]) .option {
-    border-radius: 14px;
-    box-shadow:
-      0 1px 3px rgba(2, 6, 23, 0.06),
-      0 10px 24px rgba(2, 6, 23, 0.08);
+    --ui-radio-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-radio-border: var(--ui-color-line-subtle, var(--ui-radio-line));
+    --ui-radio-bg-selected: color-mix(in srgb, var(--ui-color-primary, #2563eb) 8%, var(--ui-color-surface, #ffffff));
+    --ui-radio-pad-y: 10px;
+    --ui-radio-pad-x: 12px;
+    border-radius: calc(var(--ui-radio-radius) + 2px);
+  }
+
+  :host([variant="segmented"]) .option:focus-visible {
+    outline-offset: -2px;
+  }
+
+  :host([variant="segmented"]) .option {
+    --ui-radio-bg-selected: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, var(--ui-color-surface, #ffffff));
+    --ui-radio-pad-y: 8px;
+    --ui-radio-pad-x: 12px;
   }
 
   :host([variant="segmented"]) .root {
+    --ui-radio-border: var(--ui-color-line-subtle, var(--ui-radio-line));
     gap: 0;
     border: 1px solid var(--ui-radio-border);
     border-radius: calc(var(--ui-radio-radius) + 2px);
@@ -161,21 +187,19 @@ const _ = `
   }
 
   :host([size="sm"]) {
-    --ui-radio-pad-y: 8px;
-    --ui-radio-pad-x: 10px;
+    --ui-radio-pad-y: 4px;
+    --ui-radio-pad-x: 6px;
     --ui-radio-control-size: 16px;
     --ui-radio-dot-size: 8px;
     --ui-radio-gap: 6px;
-    --ui-radio-radius: 10px;
   }
 
   :host([size="lg"]) {
-    --ui-radio-pad-y: 12px;
-    --ui-radio-pad-x: 14px;
+    --ui-radio-pad-y: 8px;
+    --ui-radio-pad-x: 10px;
     --ui-radio-control-size: 20px;
     --ui-radio-dot-size: 11px;
     --ui-radio-gap: 10px;
-    --ui-radio-radius: 14px;
   }
 
   :host([tone="neutral"]) { --ui-radio-border-selected: #64748b; }
@@ -348,7 +372,7 @@ class k extends v {
     this._focusOption(e);
   }
   _moveSelection(e) {
-    const i = x(this._options, this._focusIndex, e > 0 ? 1 : -1, {
+    const i = g(this._options, this._focusIndex, e > 0 ? 1 : -1, {
       wrap: !0,
       fallbackIndex: h(this._options, {
         activeIndex: this._focusIndex,
@@ -361,7 +385,7 @@ class k extends v {
   }
   _focusOption(e) {
     const i = this.root.querySelector(`.option[data-index="${e}"]`);
-    g(i);
+    x(i);
   }
   _syncInteractiveState() {
     if (!this.root.querySelector(".root")) return;