@editora/ui-core 0.1.25 → 0.2.1

package/dist/animated-list.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-DxbvhLJs.js"),o="520ms",l="90ms",d="0ms",x=1400,h=.24,y=new Set(["none","sm","md","lg","full"]),v=new Set(["load","visible","manual"]),A=new Set(["calm","smooth","snappy","bouncy"]),S=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("./ElementBase-DxbvhLJs.js"),o="520ms",l="90ms",d="0ms",y=1400,h=.24,x=new Set(["none","sm","md","lg","full"]),v=new Set(["load","visible","manual"]),A=new Set(["calm","smooth","snappy","bouncy"]),S=`
   :host {
     --ui-animated-list-duration: ${o};
     --ui-animated-list-stagger: ${l};
@@ -12,39 +12,23 @@
     --ui-animated-list-motion-rotate-scale: 1;
     --ui-animated-list-motion-overshoot-y: -2px;
     --ui-animated-list-motion-overshoot-scale: 1.02;
-    --ui-animated-list-radius: var(--base-animated-list-radius, 20px);
-    --ui-animated-list-bg:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent) 0%,
-        color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 24%, var(--ui-color-surface, #ffffff)) 100%
-      );
+    --ui-animated-list-radius: calc(var(--ui-radius, 6px) + 4px);
+    --ui-animated-list-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-animated-list-color: var(--ui-color-text, #0f172a);
-    --ui-animated-list-border-color:
-      color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 80%, transparent);
+    --ui-animated-list-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
     --ui-animated-list-border: 1px solid var(--ui-animated-list-border-color);
-    --ui-animated-list-shadow:
-      0 1px 2px rgba(15, 23, 42, 0.05),
-      0 16px 30px rgba(15, 23, 42, 0.08);
+    --ui-animated-list-shadow: none;
     --ui-animated-list-backdrop: none;
     --ui-animated-list-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
     --ui-animated-list-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
 
-    --ui-animated-list-item-radius: 16px;
+    --ui-animated-list-item-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-animated-list-item-padding: 14px 16px;
     --ui-animated-list-item-min-block-size: 56px;
     --ui-animated-list-item-gap: 6px;
-    --ui-animated-list-item-bg:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, transparent),
-        color-mix(in srgb, var(--ui-animated-list-accent) 4%, var(--ui-color-surface, #ffffff))
-      );
-    --ui-animated-list-item-border:
-      1px solid color-mix(in srgb, var(--ui-animated-list-accent) 10%, var(--ui-animated-list-border-color));
-    --ui-animated-list-item-shadow:
-      0 1px 2px rgba(15, 23, 42, 0.04),
-      0 10px 18px rgba(15, 23, 42, 0.06);
+    --ui-animated-list-item-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-animated-list-item-border: 1px solid var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
+    --ui-animated-list-item-shadow: none;
     --ui-animated-list-item-color: inherit;
     --ui-animated-list-item-muted: var(--ui-color-muted, #526175);
     --ui-animated-list-item-backdrop: none;
@@ -615,7 +599,7 @@
     outline: none;
     border-color: color-mix(in srgb, var(--ui-animated-list-focus-ring) 24%, transparent);
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-animated-list-focus-ring) 18%, transparent),
+      0 0 0 2px var(--ui-ring-color, var(--ui-animated-list-focus-ring)),
       var(--ui-animated-list-shadow);
   }
 
@@ -669,4 +653,4 @@
           </div>
         </div>
       </div>
-    `),this._slotEl=this.root.querySelector("slot"),this._slotEl?.addEventListener("slotchange",this._boundSlotChange),this._syncRuntimeStyles(),this._syncItems(),this._syncTrigger(),this._autoStartIfNeeded()}shouldRenderOnAttributeChange(){return!1}_handleSlotChange(){this._syncItems(),this._phase==="complete"&&this._setPhase("complete"),this._autoStartIfNeeded()}_handleReducedMotionChange(){if(this._prefersReducedMotion()){this._clearTimers(),this._setPhase("complete");return}this._autoStartIfNeeded()}_bindReducedMotionWatcher(){typeof window>"u"||typeof window.matchMedia!="function"||this._mediaQuery||(this._mediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),this._mediaQuery.addEventListener?.("change",this._boundReducedMotionChange),this._mediaQuery.addListener?.(this._boundReducedMotionChange))}_prefersReducedMotion(){return!!this._mediaQuery?.matches}_itemsFromSlot(){return this._slotEl?this._slotEl.assignedElements({flatten:!0}).filter(t=>t instanceof HTMLElement):[]}_syncItems(){const t=this._itemsFromSlot(),e=new Set(t);for(const i of this._items)e.has(i)||(i.style.removeProperty("--ui-animated-list-index"),i.removeAttribute("data-ui-animated-list-managed"),i.hasAttribute("data-ui-animated-list-owned")&&(i.removeAttribute("data-ui-animated-list-item"),i.removeAttribute("data-ui-animated-list-owned")));t.forEach((i,n)=>{i.setAttribute("data-ui-animated-list-managed",""),i.hasAttribute("data-ui-animated-list-item")||(i.setAttribute("data-ui-animated-list-item",""),i.setAttribute("data-ui-animated-list-owned","")),i.style.setProperty("--ui-animated-list-index",String(n))}),this._items=t,this._items.length||this._setPhase("complete")}_syncRuntimeStyles(){this.style.setProperty("--ui-animated-list-duration",m(this.getAttribute("duration"),o)),this.style.setProperty("--ui-animated-list-stagger",m(this.getAttribute("stagger"),l)),this.style.setProperty("--ui-animated-list-delay",m(this.getAttribute("delay"),d));const t=u(this.getAttribute("padding"));t?this.style.setProperty("--ui-animated-list-padding",t):this.style.removeProperty("--ui-animated-list-padding");const e=u(this.getAttribute("gap"));e?this.style.setProperty("--ui-animated-list-gap",e):this.style.removeProperty("--ui-animated-list-gap");const i=this.getAttribute("radius");if(!i||y.has(i.trim())){this.style.removeProperty("--ui-animated-list-radius"),this.style.removeProperty("--ui-animated-list-item-radius");return}const n=u(i);n?(this.style.setProperty("--ui-animated-list-radius",n),this.style.setProperty("--ui-animated-list-item-radius",n)):(this.style.removeProperty("--ui-animated-list-radius"),this.style.removeProperty("--ui-animated-list-item-radius"))}_trigger(){const t=this.getAttribute("trigger");return t&&v.has(t)?t:"load"}_hasLoop(){return this.hasAttribute("loop")}_animationPreset(){const t=this.getAttribute("animation");return t&&A.has(t)?t:"smooth"}_motionProfile(){switch(this._animationPreset()){case"calm":return{durationScale:1.12,distanceScale:.78,blurScale:.75,rotateScale:.82,overshootY:-1,overshootScale:1.01,easing:"cubic-bezier(0.22, 1, 0.36, 1)"};case"snappy":return{durationScale:.88,distanceScale:1.12,blurScale:.92,rotateScale:1.08,overshootY:-2.5,overshootScale:1.028,easing:"cubic-bezier(0.16, 1, 0.3, 1)"};case"bouncy":return{durationScale:1.08,distanceScale:1.18,blurScale:1,rotateScale:1.18,overshootY:-4,overshootScale:1.05,easing:"cubic-bezier(0.2, 1.18, 0.28, 1)"};default:return{durationScale:1,distanceScale:1,blurScale:1,rotateScale:1,overshootY:-2,overshootScale:1.02,easing:"cubic-bezier(0.2, 0.9, 0.24, 1)"}}}_loopDelayMs(){return s(this.getAttribute("loop-delay"),x)}_totalAnimationMs(){const t=Math.max(this._items.length,1),e=s(this.getAttribute("duration"),s(o,520))*this._motionProfile().durationScale,i=s(this.getAttribute("stagger"),s(l,90)),n=s(this.getAttribute("delay"),s(d,0));return Math.max(0,n+e+i*Math.max(0,t-1))}_scheduleCompletion(t){if(this._clearCompletionTimer(),this.hasAttribute("paused")){this._completionRemaining=t;return}if(this._completionRemaining=t,t<=0){queueMicrotask(()=>this._completeRun());return}this._completionStartedAt=Date.now();const e=this._playToken;this._completionTimer=setTimeout(()=>{e===this._playToken&&(this._completionTimer=null,this._completionRemaining=0,this._completeRun())},t)}_scheduleLoop(t){if(this._clearLoopTimer(),!this._hasLoop()||this.hasAttribute("paused")){this._loopRemaining=t;return}if(this._loopRemaining=t,t<=0){queueMicrotask(()=>this.replay());return}this._loopStartedAt=Date.now();const e=this._playToken;this._loopTimer=setTimeout(()=>{e===this._playToken&&(this._loopTimer=null,this._loopRemaining=0,this.replay())},t)}_completeRun(){this._setPhase("complete"),this._hasLoop()&&!this._prefersReducedMotion()&&this._scheduleLoop(this._loopDelayMs())}_pauseTimers(){if(this._completionTimer){const t=Date.now()-this._completionStartedAt;this._completionRemaining=Math.max(0,this._completionRemaining-t),this._clearCompletionTimer()}if(this._loopTimer){const t=Date.now()-this._loopStartedAt;this._loopRemaining=Math.max(0,this._loopRemaining-t),this._clearLoopTimer()}}_resumeTimers(){if(this._phase==="running"){this._completionRemaining>0?this._scheduleCompletion(this._completionRemaining):this._scheduleCompletion(this._totalAnimationMs());return}this._phase==="complete"&&this._hasLoop()&&(this._loopRemaining>0?this._scheduleLoop(this._loopRemaining):this._scheduleLoop(this._loopDelayMs()))}_clearTimers(){this._playToken+=1,this._clearAnimations(),this._clearCompletionTimer(),this._clearLoopTimer(),this._rafA&&cancelAnimationFrame(this._rafA),this._rafB&&cancelAnimationFrame(this._rafB),this._rafA=0,this._rafB=0,this._completionRemaining=0,this._loopRemaining=0}_clearCompletionTimer(){this._completionTimer&&(clearTimeout(this._completionTimer),this._completionTimer=null)}_clearLoopTimer(){this._loopTimer&&(clearTimeout(this._loopTimer),this._loopTimer=null)}_setPhase(t){this._phase=t,this.setAttribute("data-phase",t),this._syncStateAttributes()}_syncStateAttributes(){const t=this.hasAttribute("paused")&&(this._phase==="running"||this._loopRemaining>0);this.setAttribute("data-state",t?"paused":this._phase)}_syncTrigger(){if(this._trigger()!=="visible"){this._disconnectIntersectionObserver(),this._inView=!0;return}if(typeof IntersectionObserver>"u"){this._inView=!0;return}this._disconnectIntersectionObserver(),this._intersectionObserver=new IntersectionObserver(t=>{const e=t[0];e&&(this._inView=e.isIntersecting&&e.intersectionRatio>=p(this.getAttribute("threshold")),this._inView&&this._autoStartIfNeeded())},{threshold:[0,p(this.getAttribute("threshold")),1]}),this._intersectionObserver.observe(this)}_disconnectIntersectionObserver(){this._intersectionObserver?.disconnect(),this._intersectionObserver=null}_autoStartIfNeeded(){if(!(!this.isConnected||this.hasAttribute("paused"))){if(this._prefersReducedMotion()){this._setPhase("complete");return}if(this._trigger()==="manual"){this._phase==="idle"&&this._setPhase("ready");return}if(this._trigger()==="visible"&&!this._inView){this._phase==="idle"&&this._setPhase("ready");return}this._hasTriggeredOnce||this.play()}}_pauseAnimations(){for(const t of this._animations)try{t.pause()}catch{}}_resumeAnimations(){for(const t of this._animations)try{t.play()}catch{}}_clearAnimations(){for(const t of this._animations)try{t.cancel()}catch{}this._animations=[]}_effectKeyframes(){const t=this.getAttribute("effect"),e=this._motionProfile(),i=e.distanceScale,n=12*e.blurScale,r=e.rotateScale;switch(t){case"fade-down":return[{opacity:0,transform:`translate3d(0, ${-18*i}px, 0)`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0)",filter:"none"}];case"slide-left":return[{opacity:0,transform:`translate3d(${28*i}px, 0, 0)`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0)",filter:"none"}];case"slide-right":return[{opacity:0,transform:`translate3d(${-28*i}px, 0, 0)`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0)",filter:"none"}];case"scale-in":return[{opacity:0,transform:`translate3d(0, ${10*i}px, 0) scale(${1-.06*i})`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0) scale(1)",filter:"none"}];case"blur-in":return[{opacity:0,transform:`translate3d(0, ${14*i}px, 0) scale(${1-.02*i})`,filter:`blur(${n}px)`},{opacity:1,transform:"translate3d(0, 0, 0) scale(1)",filter:"blur(0)"}];case"pop":return[{opacity:0,transform:`translate3d(0, ${8*i}px, 0) scale(${1-.12*i})`,filter:"none",offset:0},{opacity:1,transform:`translate3d(0, ${e.overshootY}px, 0) scale(${e.overshootScale})`,filter:"none",offset:.6},{opacity:1,transform:"translate3d(0, 0, 0) scale(1)",filter:"none",offset:1}];case"flip-in":return[{opacity:0,transform:`perspective(900px) rotateX(${-18*r}deg) translate3d(0, ${14*i}px, 0)`,filter:"none"},{opacity:1,transform:"perspective(900px) rotateX(0deg) translate3d(0, 0, 0)",filter:"none"}];case"rotate-in":return[{opacity:0,transform:`translate3d(0, ${12*i}px, 0) rotate(${-10*r}deg) scale(${1-.03*i})`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0) rotate(0deg) scale(1)",filter:"none"}];case"tilt-in":return[{opacity:0,transform:`perspective(900px) rotateY(${-14*r}deg) translate3d(0, ${12*i}px, 0)`,filter:"none"},{opacity:1,transform:"perspective(900px) rotateY(0deg) translate3d(0, 0, 0)",filter:"none"}];case"float-up":return[{opacity:0,transform:`translate3d(0, ${26*i}px, 0) scale(${1-.015*i})`,filter:"none",offset:0},{opacity:1,transform:`translate3d(0, ${Math.min(e.overshootY,-1)}px, 0) scale(${Math.max(1.01,e.overshootScale-.005)})`,filter:"none",offset:.62},{opacity:1,transform:"translate3d(0, 0, 0) scale(1)",filter:"none",offset:1}];case"swing-in":return[{opacity:0,transform:`translate3d(${-16*i}px, 0, 0) rotate(${-7*r}deg)`,filter:"none",offset:0},{opacity:1,transform:"translate3d(1px, 0, 0) rotate(1deg)",filter:"none",offset:.7},{opacity:1,transform:"translate3d(0, 0, 0) rotate(0deg)",filter:"none",offset:1}];default:return[{opacity:0,transform:`translate3d(0, ${18*i}px, 0)`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0)",filter:"none"}]}}_startAnimations(){if(this._clearAnimations(),typeof this._items[0]?.animate!="function")return;const t=this._motionProfile(),e=s(this.getAttribute("duration"),s(o,520))*t.durationScale,i=s(this.getAttribute("stagger"),s(l,90)),n=s(this.getAttribute("delay"),s(d,0)),r=this._effectKeyframes();this._animations=this._items.map((c,b)=>{c.style.animation="none";const f=c.animate(r,{duration:e,delay:n+b*i,fill:"both",easing:t.easing});if(this.hasAttribute("paused"))try{f.pause()}catch{}return f})}}typeof customElements<"u"&&!customElements.get("ui-animated-list")&&customElements.define("ui-animated-list",g);exports.UIAnimatedList=g;
+    `),this._slotEl=this.root.querySelector("slot"),this._slotEl?.addEventListener("slotchange",this._boundSlotChange),this._syncRuntimeStyles(),this._syncItems(),this._syncTrigger(),this._autoStartIfNeeded()}shouldRenderOnAttributeChange(){return!1}_handleSlotChange(){this._syncItems(),this._phase==="complete"&&this._setPhase("complete"),this._autoStartIfNeeded()}_handleReducedMotionChange(){if(this._prefersReducedMotion()){this._clearTimers(),this._setPhase("complete");return}this._autoStartIfNeeded()}_bindReducedMotionWatcher(){typeof window>"u"||typeof window.matchMedia!="function"||this._mediaQuery||(this._mediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),this._mediaQuery.addEventListener?.("change",this._boundReducedMotionChange),this._mediaQuery.addListener?.(this._boundReducedMotionChange))}_prefersReducedMotion(){return!!this._mediaQuery?.matches}_itemsFromSlot(){return this._slotEl?this._slotEl.assignedElements({flatten:!0}).filter(t=>t instanceof HTMLElement):[]}_syncItems(){const t=this._itemsFromSlot(),e=new Set(t);for(const i of this._items)e.has(i)||(i.style.removeProperty("--ui-animated-list-index"),i.removeAttribute("data-ui-animated-list-managed"),i.hasAttribute("data-ui-animated-list-owned")&&(i.removeAttribute("data-ui-animated-list-item"),i.removeAttribute("data-ui-animated-list-owned")));t.forEach((i,n)=>{i.setAttribute("data-ui-animated-list-managed",""),i.hasAttribute("data-ui-animated-list-item")||(i.setAttribute("data-ui-animated-list-item",""),i.setAttribute("data-ui-animated-list-owned","")),i.style.setProperty("--ui-animated-list-index",String(n))}),this._items=t,this._items.length||this._setPhase("complete")}_syncRuntimeStyles(){this.style.setProperty("--ui-animated-list-duration",m(this.getAttribute("duration"),o)),this.style.setProperty("--ui-animated-list-stagger",m(this.getAttribute("stagger"),l)),this.style.setProperty("--ui-animated-list-delay",m(this.getAttribute("delay"),d));const t=u(this.getAttribute("padding"));t?this.style.setProperty("--ui-animated-list-padding",t):this.style.removeProperty("--ui-animated-list-padding");const e=u(this.getAttribute("gap"));e?this.style.setProperty("--ui-animated-list-gap",e):this.style.removeProperty("--ui-animated-list-gap");const i=this.getAttribute("radius");if(!i||x.has(i.trim())){this.style.removeProperty("--ui-animated-list-radius"),this.style.removeProperty("--ui-animated-list-item-radius");return}const n=u(i);n?(this.style.setProperty("--ui-animated-list-radius",n),this.style.setProperty("--ui-animated-list-item-radius",n)):(this.style.removeProperty("--ui-animated-list-radius"),this.style.removeProperty("--ui-animated-list-item-radius"))}_trigger(){const t=this.getAttribute("trigger");return t&&v.has(t)?t:"load"}_hasLoop(){return this.hasAttribute("loop")}_animationPreset(){const t=this.getAttribute("animation");return t&&A.has(t)?t:"smooth"}_motionProfile(){switch(this._animationPreset()){case"calm":return{durationScale:1.12,distanceScale:.78,blurScale:.75,rotateScale:.82,overshootY:-1,overshootScale:1.01,easing:"cubic-bezier(0.22, 1, 0.36, 1)"};case"snappy":return{durationScale:.88,distanceScale:1.12,blurScale:.92,rotateScale:1.08,overshootY:-2.5,overshootScale:1.028,easing:"cubic-bezier(0.16, 1, 0.3, 1)"};case"bouncy":return{durationScale:1.08,distanceScale:1.18,blurScale:1,rotateScale:1.18,overshootY:-4,overshootScale:1.05,easing:"cubic-bezier(0.2, 1.18, 0.28, 1)"};default:return{durationScale:1,distanceScale:1,blurScale:1,rotateScale:1,overshootY:-2,overshootScale:1.02,easing:"cubic-bezier(0.2, 0.9, 0.24, 1)"}}}_loopDelayMs(){return s(this.getAttribute("loop-delay"),y)}_totalAnimationMs(){const t=Math.max(this._items.length,1),e=s(this.getAttribute("duration"),s(o,520))*this._motionProfile().durationScale,i=s(this.getAttribute("stagger"),s(l,90)),n=s(this.getAttribute("delay"),s(d,0));return Math.max(0,n+e+i*Math.max(0,t-1))}_scheduleCompletion(t){if(this._clearCompletionTimer(),this.hasAttribute("paused")){this._completionRemaining=t;return}if(this._completionRemaining=t,t<=0){queueMicrotask(()=>this._completeRun());return}this._completionStartedAt=Date.now();const e=this._playToken;this._completionTimer=setTimeout(()=>{e===this._playToken&&(this._completionTimer=null,this._completionRemaining=0,this._completeRun())},t)}_scheduleLoop(t){if(this._clearLoopTimer(),!this._hasLoop()||this.hasAttribute("paused")){this._loopRemaining=t;return}if(this._loopRemaining=t,t<=0){queueMicrotask(()=>this.replay());return}this._loopStartedAt=Date.now();const e=this._playToken;this._loopTimer=setTimeout(()=>{e===this._playToken&&(this._loopTimer=null,this._loopRemaining=0,this.replay())},t)}_completeRun(){this._setPhase("complete"),this._hasLoop()&&!this._prefersReducedMotion()&&this._scheduleLoop(this._loopDelayMs())}_pauseTimers(){if(this._completionTimer){const t=Date.now()-this._completionStartedAt;this._completionRemaining=Math.max(0,this._completionRemaining-t),this._clearCompletionTimer()}if(this._loopTimer){const t=Date.now()-this._loopStartedAt;this._loopRemaining=Math.max(0,this._loopRemaining-t),this._clearLoopTimer()}}_resumeTimers(){if(this._phase==="running"){this._completionRemaining>0?this._scheduleCompletion(this._completionRemaining):this._scheduleCompletion(this._totalAnimationMs());return}this._phase==="complete"&&this._hasLoop()&&(this._loopRemaining>0?this._scheduleLoop(this._loopRemaining):this._scheduleLoop(this._loopDelayMs()))}_clearTimers(){this._playToken+=1,this._clearAnimations(),this._clearCompletionTimer(),this._clearLoopTimer(),this._rafA&&cancelAnimationFrame(this._rafA),this._rafB&&cancelAnimationFrame(this._rafB),this._rafA=0,this._rafB=0,this._completionRemaining=0,this._loopRemaining=0}_clearCompletionTimer(){this._completionTimer&&(clearTimeout(this._completionTimer),this._completionTimer=null)}_clearLoopTimer(){this._loopTimer&&(clearTimeout(this._loopTimer),this._loopTimer=null)}_setPhase(t){this._phase=t,this.setAttribute("data-phase",t),this._syncStateAttributes()}_syncStateAttributes(){const t=this.hasAttribute("paused")&&(this._phase==="running"||this._loopRemaining>0);this.setAttribute("data-state",t?"paused":this._phase)}_syncTrigger(){if(this._trigger()!=="visible"){this._disconnectIntersectionObserver(),this._inView=!0;return}if(typeof IntersectionObserver>"u"){this._inView=!0;return}this._disconnectIntersectionObserver(),this._intersectionObserver=new IntersectionObserver(t=>{const e=t[0];e&&(this._inView=e.isIntersecting&&e.intersectionRatio>=p(this.getAttribute("threshold")),this._inView&&this._autoStartIfNeeded())},{threshold:[0,p(this.getAttribute("threshold")),1]}),this._intersectionObserver.observe(this)}_disconnectIntersectionObserver(){this._intersectionObserver?.disconnect(),this._intersectionObserver=null}_autoStartIfNeeded(){if(!(!this.isConnected||this.hasAttribute("paused"))){if(this._prefersReducedMotion()){this._setPhase("complete");return}if(this._trigger()==="manual"){this._phase==="idle"&&this._setPhase("ready");return}if(this._trigger()==="visible"&&!this._inView){this._phase==="idle"&&this._setPhase("ready");return}this._hasTriggeredOnce||this.play()}}_pauseAnimations(){for(const t of this._animations)try{t.pause()}catch{}}_resumeAnimations(){for(const t of this._animations)try{t.play()}catch{}}_clearAnimations(){for(const t of this._animations)try{t.cancel()}catch{}this._animations=[]}_effectKeyframes(){const t=this.getAttribute("effect"),e=this._motionProfile(),i=e.distanceScale,n=12*e.blurScale,r=e.rotateScale;switch(t){case"fade-down":return[{opacity:0,transform:`translate3d(0, ${-18*i}px, 0)`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0)",filter:"none"}];case"slide-left":return[{opacity:0,transform:`translate3d(${28*i}px, 0, 0)`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0)",filter:"none"}];case"slide-right":return[{opacity:0,transform:`translate3d(${-28*i}px, 0, 0)`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0)",filter:"none"}];case"scale-in":return[{opacity:0,transform:`translate3d(0, ${10*i}px, 0) scale(${1-.06*i})`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0) scale(1)",filter:"none"}];case"blur-in":return[{opacity:0,transform:`translate3d(0, ${14*i}px, 0) scale(${1-.02*i})`,filter:`blur(${n}px)`},{opacity:1,transform:"translate3d(0, 0, 0) scale(1)",filter:"blur(0)"}];case"pop":return[{opacity:0,transform:`translate3d(0, ${8*i}px, 0) scale(${1-.12*i})`,filter:"none",offset:0},{opacity:1,transform:`translate3d(0, ${e.overshootY}px, 0) scale(${e.overshootScale})`,filter:"none",offset:.6},{opacity:1,transform:"translate3d(0, 0, 0) scale(1)",filter:"none",offset:1}];case"flip-in":return[{opacity:0,transform:`perspective(900px) rotateX(${-18*r}deg) translate3d(0, ${14*i}px, 0)`,filter:"none"},{opacity:1,transform:"perspective(900px) rotateX(0deg) translate3d(0, 0, 0)",filter:"none"}];case"rotate-in":return[{opacity:0,transform:`translate3d(0, ${12*i}px, 0) rotate(${-10*r}deg) scale(${1-.03*i})`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0) rotate(0deg) scale(1)",filter:"none"}];case"tilt-in":return[{opacity:0,transform:`perspective(900px) rotateY(${-14*r}deg) translate3d(0, ${12*i}px, 0)`,filter:"none"},{opacity:1,transform:"perspective(900px) rotateY(0deg) translate3d(0, 0, 0)",filter:"none"}];case"float-up":return[{opacity:0,transform:`translate3d(0, ${26*i}px, 0) scale(${1-.015*i})`,filter:"none",offset:0},{opacity:1,transform:`translate3d(0, ${Math.min(e.overshootY,-1)}px, 0) scale(${Math.max(1.01,e.overshootScale-.005)})`,filter:"none",offset:.62},{opacity:1,transform:"translate3d(0, 0, 0) scale(1)",filter:"none",offset:1}];case"swing-in":return[{opacity:0,transform:`translate3d(${-16*i}px, 0, 0) rotate(${-7*r}deg)`,filter:"none",offset:0},{opacity:1,transform:"translate3d(1px, 0, 0) rotate(1deg)",filter:"none",offset:.7},{opacity:1,transform:"translate3d(0, 0, 0) rotate(0deg)",filter:"none",offset:1}];default:return[{opacity:0,transform:`translate3d(0, ${18*i}px, 0)`,filter:"none"},{opacity:1,transform:"translate3d(0, 0, 0)",filter:"none"}]}}_startAnimations(){if(this._clearAnimations(),typeof this._items[0]?.animate!="function")return;const t=this._motionProfile(),e=s(this.getAttribute("duration"),s(o,520))*t.durationScale,i=s(this.getAttribute("stagger"),s(l,90)),n=s(this.getAttribute("delay"),s(d,0)),r=this._effectKeyframes();this._animations=this._items.map((c,b)=>{c.style.animation="none";const f=c.animate(r,{duration:e,delay:n+b*i,fill:"both",easing:t.easing});if(this.hasAttribute("paused"))try{f.pause()}catch{}return f})}}typeof customElements<"u"&&!customElements.get("ui-animated-list")&&customElements.define("ui-animated-list",g);exports.UIAnimatedList=g;

package/dist/animated-list.esm.js

@@ -1,5 +1,5 @@
 import { E as b } from "./ElementBase-BeZT54Hj.mjs";
-const o = "520ms", l = "90ms", d = "0ms", _ = 1400, h = 0.24, x = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "full"]), y = /* @__PURE__ */ new Set(["load", "visible", "manual"]), v = /* @__PURE__ */ new Set(["calm", "smooth", "snappy", "bouncy"]), A = `
+const o = "520ms", l = "90ms", d = "0ms", _ = 1400, h = 0.24, y = /* @__PURE__ */ new Set(["none", "sm", "md", "lg", "full"]), x = /* @__PURE__ */ new Set(["load", "visible", "manual"]), v = /* @__PURE__ */ new Set(["calm", "smooth", "snappy", "bouncy"]), A = `
   :host {
     --ui-animated-list-duration: ${o};
     --ui-animated-list-stagger: ${l};
@@ -13,39 +13,23 @@ const o = "520ms", l = "90ms", d = "0ms", _ = 1400, h = 0.24, x = /* @__PURE__ *
     --ui-animated-list-motion-rotate-scale: 1;
     --ui-animated-list-motion-overshoot-y: -2px;
     --ui-animated-list-motion-overshoot-scale: 1.02;
-    --ui-animated-list-radius: var(--base-animated-list-radius, 20px);
-    --ui-animated-list-bg:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent) 0%,
-        color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 24%, var(--ui-color-surface, #ffffff)) 100%
-      );
+    --ui-animated-list-radius: calc(var(--ui-radius, 6px) + 4px);
+    --ui-animated-list-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-animated-list-color: var(--ui-color-text, #0f172a);
-    --ui-animated-list-border-color:
-      color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.16)) 80%, transparent);
+    --ui-animated-list-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
     --ui-animated-list-border: 1px solid var(--ui-animated-list-border-color);
-    --ui-animated-list-shadow:
-      0 1px 2px rgba(15, 23, 42, 0.05),
-      0 16px 30px rgba(15, 23, 42, 0.08);
+    --ui-animated-list-shadow: none;
     --ui-animated-list-backdrop: none;
     --ui-animated-list-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
     --ui-animated-list-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
 
-    --ui-animated-list-item-radius: 16px;
+    --ui-animated-list-item-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-animated-list-item-padding: 14px 16px;
     --ui-animated-list-item-min-block-size: 56px;
     --ui-animated-list-item-gap: 6px;
-    --ui-animated-list-item-bg:
-      linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, transparent),
-        color-mix(in srgb, var(--ui-animated-list-accent) 4%, var(--ui-color-surface, #ffffff))
-      );
-    --ui-animated-list-item-border:
-      1px solid color-mix(in srgb, var(--ui-animated-list-accent) 10%, var(--ui-animated-list-border-color));
-    --ui-animated-list-item-shadow:
-      0 1px 2px rgba(15, 23, 42, 0.04),
-      0 10px 18px rgba(15, 23, 42, 0.06);
+    --ui-animated-list-item-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
+    --ui-animated-list-item-border: 1px solid var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent));
+    --ui-animated-list-item-shadow: none;
     --ui-animated-list-item-color: inherit;
     --ui-animated-list-item-muted: var(--ui-color-muted, #526175);
     --ui-animated-list-item-backdrop: none;
@@ -616,7 +600,7 @@ const o = "520ms", l = "90ms", d = "0ms", _ = 1400, h = 0.24, x = /* @__PURE__ *
     outline: none;
     border-color: color-mix(in srgb, var(--ui-animated-list-focus-ring) 24%, transparent);
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-animated-list-focus-ring) 18%, transparent),
+      0 0 0 2px var(--ui-ring-color, var(--ui-animated-list-focus-ring)),
       var(--ui-animated-list-shadow);
   }
 
@@ -809,7 +793,7 @@ class S extends b {
     const e = u(this.getAttribute("gap"));
     e ? this.style.setProperty("--ui-animated-list-gap", e) : this.style.removeProperty("--ui-animated-list-gap");
     const i = this.getAttribute("radius");
-    if (!i || x.has(i.trim())) {
+    if (!i || y.has(i.trim())) {
       this.style.removeProperty("--ui-animated-list-radius"), this.style.removeProperty("--ui-animated-list-item-radius");
       return;
     }
@@ -818,7 +802,7 @@ class S extends b {
   }
   _trigger() {
     const t = this.getAttribute("trigger");
-    return t && y.has(t) ? t : "load";
+    return t && x.has(t) ? t : "load";
   }
   _hasLoop() {
     return this.hasAttribute("loop");

package/dist/animated-text.cjs.js

@@ -7,7 +7,7 @@
     --ui-animated-text-gap-block: 0.18em;
     --ui-animated-text-padding-inline: 0px;
     --ui-animated-text-padding-block: 0px;
-    --ui-animated-text-radius: var(--base-animated-text-radius, 22px);
+    --ui-animated-text-radius: calc(var(--ui-radius, 6px) + 4px);
     --ui-animated-text-bg: transparent;
     --ui-animated-text-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-animated-text-border: 1px solid transparent;
@@ -18,7 +18,7 @@
     --ui-animated-text-font-size: 1.375rem;
     --ui-animated-text-line-height: 1.08;
     --ui-animated-text-letter-spacing: -0.03em;
-    --ui-animated-text-font-weight: 700;
+    --ui-animated-text-font-weight: 600;
     --ui-animated-text-align: start;
     --ui-animated-text-max-inline-size: 100%;
     --ui-animated-text-ease: cubic-bezier(0.2, 0.9, 0.24, 1);
@@ -49,7 +49,7 @@
     --ui-animated-text-font-size: 1.375rem;
     --ui-animated-text-line-height: 1.08;
     --ui-animated-text-letter-spacing: -0.03em;
-    --ui-animated-text-font-weight: 700;
+    --ui-animated-text-font-weight: 600;
     --ui-animated-text-safe-inline-end: 0.08em;
     --ui-animated-text-safe-block-end: 0.12em;
   }
@@ -96,7 +96,7 @@
 
   :host([variant="soft"]) {
     --ui-animated-text-color:
-      color-mix(in srgb, var(--ui-animated-text-accent) 72%, var(--ui-color-text, var(--ui-text, #0f172a)));
+      color-mix(in srgb, var(--ui-animated-text-accent) 62%, var(--ui-color-text, var(--ui-text, #0f172a)));
     --ui-animated-text-bg:
       color-mix(in srgb, var(--ui-animated-text-accent) 8%, var(--ui-color-surface, #ffffff));
     --ui-animated-text-border:
@@ -106,7 +106,7 @@
   }
 
   :host([variant="solid"]) {
-    --ui-animated-text-color: color-mix(in srgb, var(--ui-animated-text-accent) 88%, #061221);
+    --ui-animated-text-color: color-mix(in srgb, var(--ui-animated-text-accent) 45%, var(--ui-color-text-strong, #0f172a));
     --ui-animated-text-bg:
       linear-gradient(
         180deg,
@@ -149,7 +149,7 @@
 
   :host([variant="minimal"]) {
     --ui-animated-text-color:
-      color-mix(in srgb, var(--ui-animated-text-accent) 84%, var(--ui-color-text, var(--ui-text, #0f172a)));
+      color-mix(in srgb, var(--ui-animated-text-accent) 45%, var(--ui-color-text-strong, var(--ui-color-text, var(--ui-text, #0f172a))));
     --ui-animated-text-bg: transparent;
     --ui-animated-text-border: none;
     --ui-animated-text-shadow: none;
@@ -396,8 +396,8 @@
     background:
       linear-gradient(
         135deg,
-        color-mix(in srgb, var(--ui-animated-text-accent) 96%, #ffffff 4%),
-        color-mix(in srgb, var(--ui-animated-text-accent) 58%, #0f172a 42%)
+        color-mix(in srgb, var(--ui-animated-text-accent) 62%, var(--ui-color-text-strong, #0f172a)),
+        color-mix(in srgb, var(--ui-animated-text-accent) 40%, var(--ui-color-text-strong, #0f172a))
       );
     -webkit-background-clip: text;
     background-clip: text;
@@ -427,7 +427,7 @@
     outline: none;
     border-color: color-mix(in srgb, var(--ui-animated-text-focus-ring) 24%, transparent);
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-animated-text-focus-ring) 18%, transparent),
+      0 0 0 2px var(--ui-ring-color, var(--ui-animated-text-focus-ring)),
       var(--ui-animated-text-shadow);
   }
 

package/dist/animated-text.esm.js

@@ -23,7 +23,7 @@ const k = "720ms", T = "55ms", A = "0ms", x = 1400, M = /* @__PURE__ */ new Set(
     --ui-animated-text-gap-block: 0.18em;
     --ui-animated-text-padding-inline: 0px;
     --ui-animated-text-padding-block: 0px;
-    --ui-animated-text-radius: var(--base-animated-text-radius, 22px);
+    --ui-animated-text-radius: calc(var(--ui-radius, 6px) + 4px);
     --ui-animated-text-bg: transparent;
     --ui-animated-text-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-animated-text-border: 1px solid transparent;
@@ -34,7 +34,7 @@ const k = "720ms", T = "55ms", A = "0ms", x = 1400, M = /* @__PURE__ */ new Set(
     --ui-animated-text-font-size: 1.375rem;
     --ui-animated-text-line-height: 1.08;
     --ui-animated-text-letter-spacing: -0.03em;
-    --ui-animated-text-font-weight: 700;
+    --ui-animated-text-font-weight: 600;
     --ui-animated-text-align: start;
     --ui-animated-text-max-inline-size: 100%;
     --ui-animated-text-ease: cubic-bezier(0.2, 0.9, 0.24, 1);
@@ -65,7 +65,7 @@ const k = "720ms", T = "55ms", A = "0ms", x = 1400, M = /* @__PURE__ */ new Set(
     --ui-animated-text-font-size: 1.375rem;
     --ui-animated-text-line-height: 1.08;
     --ui-animated-text-letter-spacing: -0.03em;
-    --ui-animated-text-font-weight: 700;
+    --ui-animated-text-font-weight: 600;
     --ui-animated-text-safe-inline-end: 0.08em;
     --ui-animated-text-safe-block-end: 0.12em;
   }
@@ -112,7 +112,7 @@ const k = "720ms", T = "55ms", A = "0ms", x = 1400, M = /* @__PURE__ */ new Set(
 
   :host([variant="soft"]) {
     --ui-animated-text-color:
-      color-mix(in srgb, var(--ui-animated-text-accent) 72%, var(--ui-color-text, var(--ui-text, #0f172a)));
+      color-mix(in srgb, var(--ui-animated-text-accent) 62%, var(--ui-color-text, var(--ui-text, #0f172a)));
     --ui-animated-text-bg:
       color-mix(in srgb, var(--ui-animated-text-accent) 8%, var(--ui-color-surface, #ffffff));
     --ui-animated-text-border:
@@ -122,7 +122,7 @@ const k = "720ms", T = "55ms", A = "0ms", x = 1400, M = /* @__PURE__ */ new Set(
   }
 
   :host([variant="solid"]) {
-    --ui-animated-text-color: color-mix(in srgb, var(--ui-animated-text-accent) 88%, #061221);
+    --ui-animated-text-color: color-mix(in srgb, var(--ui-animated-text-accent) 45%, var(--ui-color-text-strong, #0f172a));
     --ui-animated-text-bg:
       linear-gradient(
         180deg,
@@ -165,7 +165,7 @@ const k = "720ms", T = "55ms", A = "0ms", x = 1400, M = /* @__PURE__ */ new Set(
 
   :host([variant="minimal"]) {
     --ui-animated-text-color:
-      color-mix(in srgb, var(--ui-animated-text-accent) 84%, var(--ui-color-text, var(--ui-text, #0f172a)));
+      color-mix(in srgb, var(--ui-animated-text-accent) 45%, var(--ui-color-text-strong, var(--ui-color-text, var(--ui-text, #0f172a))));
     --ui-animated-text-bg: transparent;
     --ui-animated-text-border: none;
     --ui-animated-text-shadow: none;
@@ -412,8 +412,8 @@ const k = "720ms", T = "55ms", A = "0ms", x = 1400, M = /* @__PURE__ */ new Set(
     background:
       linear-gradient(
         135deg,
-        color-mix(in srgb, var(--ui-animated-text-accent) 96%, #ffffff 4%),
-        color-mix(in srgb, var(--ui-animated-text-accent) 58%, #0f172a 42%)
+        color-mix(in srgb, var(--ui-animated-text-accent) 62%, var(--ui-color-text-strong, #0f172a)),
+        color-mix(in srgb, var(--ui-animated-text-accent) 40%, var(--ui-color-text-strong, #0f172a))
       );
     -webkit-background-clip: text;
     background-clip: text;
@@ -443,7 +443,7 @@ const k = "720ms", T = "55ms", A = "0ms", x = 1400, M = /* @__PURE__ */ new Set(
     outline: none;
     border-color: color-mix(in srgb, var(--ui-animated-text-focus-ring) 24%, transparent);
     box-shadow:
-      0 0 0 3px color-mix(in srgb, var(--ui-animated-text-focus-ring) 18%, transparent),
+      0 0 0 2px var(--ui-ring-color, var(--ui-animated-text-focus-ring)),
       var(--ui-animated-text-shadow);
   }
 

package/dist/app-header.cjs.js

@@ -4,7 +4,7 @@
     --ui-app-header-height: var(--base-app-header-height, 64px);
     --ui-app-header-height-dense: var(--base-app-header-height-dense, 52px);
     --ui-app-header-height-large: 76px;
-    --ui-app-header-bg-base: var(--base-app-header-bg, var(--color-panel, var(--ui-color-surface, #ffffff)));
+    --ui-app-header-bg-base: var(--base-app-header-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-app-header-bg: var(--ui-app-header-bg-base);
     --ui-app-header-sticky-bg-base: var(--base-app-header-sticky-bg, var(--ui-color-surface, #ffffff));
     --ui-app-header-surface-bg: var(--ui-app-header-bg);
@@ -12,7 +12,8 @@
     --ui-app-header-color: var(--ui-color-text, var(--ui-text, #202020));
     --ui-app-header-muted: color-mix(in srgb, var(--ui-app-header-color) 56%, var(--ui-color-muted, var(--ui-muted, #646464)) 44%);
     --ui-app-header-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
-    --ui-app-header-border-color: color-mix(in srgb, var(--ui-color-border, var(--ui-border, rgba(15, 23, 42, 0.14))) 84%, transparent);
+    --ui-app-header-on-accent: var(--ui-color-foreground-on-primary, #ffffff);
+    --ui-app-header-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, var(--ui-border, rgba(15, 23, 42, 0.14))) 84%, transparent));
     --ui-app-header-border: var(--base-app-header-border, 1px solid var(--ui-app-header-border-color));
     --ui-app-header-control-bg: color-mix(in srgb, var(--ui-app-header-bg-base) 90%, transparent);
     --ui-app-header-control-bg-hover: color-mix(in srgb, var(--ui-app-header-accent) 8%, var(--ui-app-header-bg-base));
@@ -20,7 +21,7 @@
     --ui-app-header-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
     --ui-app-header-gap: var(--base-app-header-gap, var(--ui-default-gap, 8px));
     --ui-app-header-padding-x: var(--base-app-header-padding, 16px);
-    --ui-app-header-radius: var(--base-app-header-radius, var(--ui-radius, 4px));
+    --ui-app-header-radius: var(--base-app-header-radius, var(--ui-radius, 6px));
     --ui-app-header-z: 60;
     --ui-app-header-shadow: var(--base-app-header-shadow, none);
     --ui-app-header-title-size: var(--ui-default-font-size, 14px);
@@ -29,7 +30,7 @@
     --ui-app-header-subtitle-size: 12px;
     --ui-app-header-subtitle-line-height: 16px;
     --ui-app-header-subtitle-weight: 500;
-    --ui-app-header-control-radius: var(--base-app-header-control-radius, var(--ui-radius, 4px));
+    --ui-app-header-control-radius: var(--base-app-header-control-radius, var(--ui-radius, 6px));
     --ui-app-header-duration: var(--ui-motion-base, 170ms);
     --ui-app-header-easing: var(--ui-motion-easing, cubic-bezier(0.2, 0.8, 0.2, 1));
     color-scheme: light dark;
@@ -76,12 +77,12 @@
 
   :host([variant='solid']) {
     --ui-app-header-bg: var(--ui-app-header-accent);
-    --ui-app-header-color: #ffffff;
-    --ui-app-header-muted: color-mix(in srgb, #ffffff 94%, transparent);
+    --ui-app-header-color: var(--ui-app-header-on-accent, #ffffff);
+    --ui-app-header-muted: color-mix(in srgb, var(--ui-app-header-on-accent, #ffffff) 98%, transparent);
     --ui-app-header-border: 1px solid color-mix(in srgb, #000000 16%, transparent);
-    --ui-app-header-control-bg: color-mix(in srgb, #ffffff 14%, transparent);
-    --ui-app-header-control-bg-hover: color-mix(in srgb, #ffffff 24%, transparent);
-    --ui-app-header-control-color: #ffffff;
+    --ui-app-header-control-bg: color-mix(in srgb, var(--ui-app-header-on-accent, #ffffff) 14%, transparent);
+    --ui-app-header-control-bg-hover: color-mix(in srgb, var(--ui-app-header-on-accent, #ffffff) 24%, transparent);
+    --ui-app-header-control-color: var(--ui-app-header-on-accent, #ffffff);
     --ui-app-header-focus-ring: color-mix(in srgb, #ffffff 72%, var(--ui-app-header-accent) 28%);
   }
 
@@ -99,18 +100,22 @@
 
   :host([tone='info']) {
     --ui-app-header-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-app-header-on-accent: var(--ui-color-foreground-on-primary, #ffffff);
   }
 
   :host([tone='success']) {
-    --ui-app-header-accent: var(--ui-color-success, #15803d);
+    --ui-app-header-accent: var(--ui-color-success-solid, var(--ui-color-success, #15803d));
+    --ui-app-header-on-accent: var(--ui-color-foreground-on-success, #ffffff);
   }
 
   :host([tone='warning']) {
     --ui-app-header-accent: var(--ui-color-warning, #b45309);
+    --ui-app-header-on-accent: var(--ui-color-foreground-on-warning, #ffffff);
   }
 
   :host([tone='danger']) {
-    --ui-app-header-accent: var(--ui-color-danger, #dc2626);
+    --ui-app-header-accent: var(--ui-color-danger-solid, var(--ui-color-danger, #dc2626));
+    --ui-app-header-on-accent: var(--ui-color-foreground-on-danger, #ffffff);
   }
 
   :host([sticky]) {
@@ -332,7 +337,7 @@
       --ui-app-header-muted: CanvasText;
     }
   }
-`;class i extends t.ElementBase{static get observedAttributes(){return["sticky","bordered","dense","headless","show-menu-button","variant","tone","size","radius","elevation"]}constructor(){super(),this._onRootClick=this._onRootClick.bind(this)}_normalizeRadius(e){if(e==null)return"var(--base-app-header-radius, var(--ui-radius, 4px))";const a=e.trim().toLowerCase();return a?a==="full"||a==="pill"?"999px":/^-?\d+(\.\d+)?$/.test(a)?`${a}px`:e:"var(--base-app-header-radius, var(--ui-radius, 4px))"}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this.style.setProperty("--ui-app-header-radius",this._normalizeRadius(this.getAttribute("radius")))}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),super.disconnectedCallback()}_onRootClick(e){e.target?.closest(".menu-btn")&&this.dispatchEvent(new CustomEvent("menu-trigger",{bubbles:!0}))}attributeChangedCallback(e,a,r){a!==r&&(e==="radius"&&this.style.setProperty("--ui-app-header-radius",this._normalizeRadius(r)),super.attributeChangedCallback(e,a,r))}render(){this.setContent(`
+`;class i extends t.ElementBase{static get observedAttributes(){return["sticky","bordered","dense","headless","show-menu-button","variant","tone","size","radius","elevation"]}constructor(){super(),this._onRootClick=this._onRootClick.bind(this)}_normalizeRadius(e){if(e==null)return"var(--base-app-header-radius, var(--ui-radius, 6px))";const a=e.trim().toLowerCase();return a?a==="full"||a==="pill"?"999px":/^-?\d+(\.\d+)?$/.test(a)?`${a}px`:e:"var(--base-app-header-radius, var(--ui-radius, 6px))"}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this.style.setProperty("--ui-app-header-radius",this._normalizeRadius(this.getAttribute("radius")))}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),super.disconnectedCallback()}_onRootClick(e){e.target?.closest(".menu-btn")&&this.dispatchEvent(new CustomEvent("menu-trigger",{bubbles:!0}))}attributeChangedCallback(e,a,r){a!==r&&(e==="radius"&&this.style.setProperty("--ui-app-header-radius",this._normalizeRadius(r)),super.attributeChangedCallback(e,a,r))}render(){this.setContent(`
       <style>${p}</style>
       <header role="banner">
         <div class="start">

package/dist/app-header.esm.js

@@ -5,7 +5,7 @@ const t = `
     --ui-app-header-height: var(--base-app-header-height, 64px);
     --ui-app-header-height-dense: var(--base-app-header-height-dense, 52px);
     --ui-app-header-height-large: 76px;
-    --ui-app-header-bg-base: var(--base-app-header-bg, var(--color-panel, var(--ui-color-surface, #ffffff)));
+    --ui-app-header-bg-base: var(--base-app-header-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-app-header-bg: var(--ui-app-header-bg-base);
     --ui-app-header-sticky-bg-base: var(--base-app-header-sticky-bg, var(--ui-color-surface, #ffffff));
     --ui-app-header-surface-bg: var(--ui-app-header-bg);
@@ -13,7 +13,8 @@ const t = `
     --ui-app-header-color: var(--ui-color-text, var(--ui-text, #202020));
     --ui-app-header-muted: color-mix(in srgb, var(--ui-app-header-color) 56%, var(--ui-color-muted, var(--ui-muted, #646464)) 44%);
     --ui-app-header-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
-    --ui-app-header-border-color: color-mix(in srgb, var(--ui-color-border, var(--ui-border, rgba(15, 23, 42, 0.14))) 84%, transparent);
+    --ui-app-header-on-accent: var(--ui-color-foreground-on-primary, #ffffff);
+    --ui-app-header-border-color: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, var(--ui-border, rgba(15, 23, 42, 0.14))) 84%, transparent));
     --ui-app-header-border: var(--base-app-header-border, 1px solid var(--ui-app-header-border-color));
     --ui-app-header-control-bg: color-mix(in srgb, var(--ui-app-header-bg-base) 90%, transparent);
     --ui-app-header-control-bg-hover: color-mix(in srgb, var(--ui-app-header-accent) 8%, var(--ui-app-header-bg-base));
@@ -21,7 +22,7 @@ const t = `
     --ui-app-header-focus-ring: var(--ui-color-focus-ring, var(--ui-focus-ring, #2563eb));
     --ui-app-header-gap: var(--base-app-header-gap, var(--ui-default-gap, 8px));
     --ui-app-header-padding-x: var(--base-app-header-padding, 16px);
-    --ui-app-header-radius: var(--base-app-header-radius, var(--ui-radius, 4px));
+    --ui-app-header-radius: var(--base-app-header-radius, var(--ui-radius, 6px));
     --ui-app-header-z: 60;
     --ui-app-header-shadow: var(--base-app-header-shadow, none);
     --ui-app-header-title-size: var(--ui-default-font-size, 14px);
@@ -30,7 +31,7 @@ const t = `
     --ui-app-header-subtitle-size: 12px;
     --ui-app-header-subtitle-line-height: 16px;
     --ui-app-header-subtitle-weight: 500;
-    --ui-app-header-control-radius: var(--base-app-header-control-radius, var(--ui-radius, 4px));
+    --ui-app-header-control-radius: var(--base-app-header-control-radius, var(--ui-radius, 6px));
     --ui-app-header-duration: var(--ui-motion-base, 170ms);
     --ui-app-header-easing: var(--ui-motion-easing, cubic-bezier(0.2, 0.8, 0.2, 1));
     color-scheme: light dark;
@@ -77,12 +78,12 @@ const t = `
 
   :host([variant='solid']) {
     --ui-app-header-bg: var(--ui-app-header-accent);
-    --ui-app-header-color: #ffffff;
-    --ui-app-header-muted: color-mix(in srgb, #ffffff 94%, transparent);
+    --ui-app-header-color: var(--ui-app-header-on-accent, #ffffff);
+    --ui-app-header-muted: color-mix(in srgb, var(--ui-app-header-on-accent, #ffffff) 98%, transparent);
     --ui-app-header-border: 1px solid color-mix(in srgb, #000000 16%, transparent);
-    --ui-app-header-control-bg: color-mix(in srgb, #ffffff 14%, transparent);
-    --ui-app-header-control-bg-hover: color-mix(in srgb, #ffffff 24%, transparent);
-    --ui-app-header-control-color: #ffffff;
+    --ui-app-header-control-bg: color-mix(in srgb, var(--ui-app-header-on-accent, #ffffff) 14%, transparent);
+    --ui-app-header-control-bg-hover: color-mix(in srgb, var(--ui-app-header-on-accent, #ffffff) 24%, transparent);
+    --ui-app-header-control-color: var(--ui-app-header-on-accent, #ffffff);
     --ui-app-header-focus-ring: color-mix(in srgb, #ffffff 72%, var(--ui-app-header-accent) 28%);
   }
 
@@ -100,18 +101,22 @@ const t = `
 
   :host([tone='info']) {
     --ui-app-header-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-app-header-on-accent: var(--ui-color-foreground-on-primary, #ffffff);
   }
 
   :host([tone='success']) {
-    --ui-app-header-accent: var(--ui-color-success, #15803d);
+    --ui-app-header-accent: var(--ui-color-success-solid, var(--ui-color-success, #15803d));
+    --ui-app-header-on-accent: var(--ui-color-foreground-on-success, #ffffff);
   }
 
   :host([tone='warning']) {
     --ui-app-header-accent: var(--ui-color-warning, #b45309);
+    --ui-app-header-on-accent: var(--ui-color-foreground-on-warning, #ffffff);
   }
 
   :host([tone='danger']) {
-    --ui-app-header-accent: var(--ui-color-danger, #dc2626);
+    --ui-app-header-accent: var(--ui-color-danger-solid, var(--ui-color-danger, #dc2626));
+    --ui-app-header-on-accent: var(--ui-color-foreground-on-danger, #ffffff);
   }
 
   :host([sticky]) {
@@ -353,9 +358,9 @@ class p extends i {
     super(), this._onRootClick = this._onRootClick.bind(this);
   }
   _normalizeRadius(e) {
-    if (e == null) return "var(--base-app-header-radius, var(--ui-radius, 4px))";
+    if (e == null) return "var(--base-app-header-radius, var(--ui-radius, 6px))";
     const a = e.trim().toLowerCase();
-    return a ? a === "full" || a === "pill" ? "999px" : /^-?\d+(\.\d+)?$/.test(a) ? `${a}px` : e : "var(--base-app-header-radius, var(--ui-radius, 4px))";
+    return a ? a === "full" || a === "pill" ? "999px" : /^-?\d+(\.\d+)?$/.test(a) ? `${a}px` : e : "var(--base-app-header-radius, var(--ui-radius, 6px))";
   }
   connectedCallback() {
     super.connectedCallback(), this.root.addEventListener("click", this._onRootClick), this.style.setProperty("--ui-app-header-radius", this._normalizeRadius(this.getAttribute("radius")));

package/dist/aspect-ratio.cjs.js

@@ -2,7 +2,7 @@
   :host {
     display: block;
     width: 100%;
-    --ui-aspect-radius: var(--base-aspect-ratio-radius, var(--ui-radius, 4px));
+    --ui-aspect-radius: var(--base-aspect-ratio-radius, var(--ui-radius, 6px));
     --ui-aspect-border: var(--base-aspect-ratio-border, 1px solid color-mix(in srgb, var(--ui-color-border, rgba(15, 23, 42, 0.14)) 84%, transparent));
     --ui-aspect-bg-base: var(--base-aspect-ratio-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
     --ui-aspect-bg: var(--ui-aspect-bg-base);
@@ -23,7 +23,7 @@
 
   :host([size='1']),
   :host([size='sm']) {
-    --ui-aspect-radius: max(0px, calc(var(--base-aspect-ratio-radius, var(--ui-radius, 4px)) - 1px));
+    --ui-aspect-radius: max(0px, calc(var(--base-aspect-ratio-radius, var(--ui-radius, 6px)) - 1px));
     --ui-aspect-title-size: 13px;
     --ui-aspect-title-line-height: 18px;
     --ui-aspect-empty-icon-size: 28px;
@@ -36,7 +36,7 @@
 
   :host([size='3']),
   :host([size='lg']) {
-    --ui-aspect-radius: max(0px, calc(var(--base-aspect-ratio-radius, var(--ui-radius, 4px)) + 4px));
+    --ui-aspect-radius: max(0px, calc(var(--base-aspect-ratio-radius, var(--ui-radius, 6px)) + 4px));
     --ui-aspect-title-size: 15px;
     --ui-aspect-title-line-height: 22px;
     --ui-aspect-empty-icon-size: 36px;
@@ -113,10 +113,9 @@
     position: absolute;
     inset: 0;
     pointer-events: none;
-    background:
-      radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--ui-aspect-highlight) 70%, transparent), transparent 58%),
-      linear-gradient(180deg, color-mix(in srgb, #ffffff 36%, transparent), transparent 28%);
-    opacity: 0.9;
+    /* No sheen: the surface is flat. */
+    background: none;
+    opacity: 0;
   }
 
   .surface::after {
@@ -199,11 +198,11 @@
     border-radius: var(--ui-aspect-badge-radius);
     padding: 3px 8px;
     font-size: 10px;
-    font-weight: 700;
+    font-weight: 600;
     letter-spacing: 0.02em;
     text-transform: uppercase;
     line-height: 1.2;
-    color: color-mix(in srgb, var(--ui-aspect-accent) 82%, var(--ui-aspect-color) 18%);
+    color: color-mix(in srgb, var(--ui-aspect-accent) 45%, var(--ui-color-text-strong, var(--ui-aspect-color)));
     background: color-mix(in srgb, var(--ui-aspect-accent) 14%, var(--ui-color-surface, #ffffff));
     box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-aspect-accent) 24%, transparent);
     pointer-events: none;
@@ -229,8 +228,7 @@
   }
 
   :host([interactive]):hover .frame {
-    transform: translateY(-2px);
-    box-shadow: 0 3px 6px rgba(15, 23, 42, 0.08), 0 22px 42px rgba(15, 23, 42, 0.14);
+    box-shadow: var(--shadow-3, 0 4px 12px rgba(15, 23, 42, 0.12));
     border-color: color-mix(in srgb, var(--ui-aspect-accent) 34%, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
   }
 
@@ -269,7 +267,7 @@
       border: 1px solid CanvasText;
     }
   }
-`;function u(n){const e={width:16,height:9,ratio:1.7777777777777777,padding:56.25,text:"16/9"};if(!n)return e;const t=n.trim();if(!t)return e;const i=t.includes("/")?t.split("/"):t.includes(":")?t.split(":"):[];if(i.length===2){const r=Number(i[0]),a=Number(i[1]);return Number.isFinite(r)&&Number.isFinite(a)&&r>0&&a>0?{width:r,height:a,ratio:r/a,padding:a/r*100,text:`${r}/${a}`}:e}const s=Number(t);return!Number.isFinite(s)||s<=0?e:{width:s,height:1,ratio:s,padding:1/s*100,text:`${s}/1`}}function d(n){const e=(n||"").trim().toLowerCase();return e==="contain"?"contain":e==="fill"?"fill":e==="none"?"none":e==="scale-down"?"scale-down":"cover"}class o extends c.ElementBase{constructor(){super(),this._resizeObserver=null,this._contentObserver=null,this._lastSignature="",this._onResize=this._onResize.bind(this)}static get observedAttributes(){return["ratio","fit","tone","interactive","show-ratio-badge","headless","variant","size","radius","elevation"]}_normalizeRadius(e){if(e==null)return"var(--base-aspect-ratio-radius, var(--ui-radius, 4px))";const t=e.trim().toLowerCase();return t?t==="full"||t==="pill"?"999px":/^-?\d+(\.\d+)?$/.test(t)?`${t}px`:e:"var(--base-aspect-ratio-radius, var(--ui-radius, 4px))"}connectedCallback(){super.connectedCallback(),this.style.setProperty("--ui-aspect-radius",this._normalizeRadius(this.getAttribute("radius"))),this._observeResize(),this._observeContent()}disconnectedCallback(){this._unobserveResize(),this._unobserveContent(),super.disconnectedCallback()}_observeResize(){typeof window>"u"||this._resizeObserver||!window.ResizeObserver||(this._resizeObserver=new ResizeObserver(this._onResize),this._resizeObserver.observe(this))}_unobserveResize(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)}_onResize(){const e=this.getBoundingClientRect();this.dispatchEvent(new CustomEvent("resize",{detail:{width:e.width,height:e.height},bubbles:!0}))}_observeContent(){this._contentObserver||typeof MutationObserver>"u"||(this._contentObserver=new MutationObserver(()=>this.requestRender()),this._contentObserver.observe(this,{childList:!0,subtree:!1}))}_unobserveContent(){this._contentObserver&&(this._contentObserver.disconnect(),this._contentObserver=null)}attributeChangedCallback(e,t,i){t!==i&&(e==="radius"&&this.style.setProperty("--ui-aspect-radius",this._normalizeRadius(i)),super.attributeChangedCallback(e,t,i))}get headless(){return this.hasAttribute("headless")}set headless(e){e!==this.headless&&(e?this.setAttribute("headless",""):this.removeAttribute("headless"))}render(){const e=u(this.getAttribute("ratio")),t=d(this.getAttribute("fit")),i=this.hasAttribute("show-ratio-badge"),s=this.children.length>0;this.setContent(`
+`;function u(n){const e={width:16,height:9,ratio:1.7777777777777777,padding:56.25,text:"16/9"};if(!n)return e;const t=n.trim();if(!t)return e;const i=t.includes("/")?t.split("/"):t.includes(":")?t.split(":"):[];if(i.length===2){const r=Number(i[0]),a=Number(i[1]);return Number.isFinite(r)&&Number.isFinite(a)&&r>0&&a>0?{width:r,height:a,ratio:r/a,padding:a/r*100,text:`${r}/${a}`}:e}const s=Number(t);return!Number.isFinite(s)||s<=0?e:{width:s,height:1,ratio:s,padding:1/s*100,text:`${s}/1`}}function d(n){const e=(n||"").trim().toLowerCase();return e==="contain"?"contain":e==="fill"?"fill":e==="none"?"none":e==="scale-down"?"scale-down":"cover"}class o extends c.ElementBase{constructor(){super(),this._resizeObserver=null,this._contentObserver=null,this._lastSignature="",this._onResize=this._onResize.bind(this)}static get observedAttributes(){return["ratio","fit","tone","interactive","show-ratio-badge","headless","variant","size","radius","elevation"]}_normalizeRadius(e){if(e==null)return"var(--base-aspect-ratio-radius, var(--ui-radius, 6px))";const t=e.trim().toLowerCase();return t?t==="full"||t==="pill"?"999px":/^-?\d+(\.\d+)?$/.test(t)?`${t}px`:e:"var(--base-aspect-ratio-radius, var(--ui-radius, 6px))"}connectedCallback(){super.connectedCallback(),this.style.setProperty("--ui-aspect-radius",this._normalizeRadius(this.getAttribute("radius"))),this._observeResize(),this._observeContent()}disconnectedCallback(){this._unobserveResize(),this._unobserveContent(),super.disconnectedCallback()}_observeResize(){typeof window>"u"||this._resizeObserver||!window.ResizeObserver||(this._resizeObserver=new ResizeObserver(this._onResize),this._resizeObserver.observe(this))}_unobserveResize(){this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)}_onResize(){const e=this.getBoundingClientRect();this.dispatchEvent(new CustomEvent("resize",{detail:{width:e.width,height:e.height},bubbles:!0}))}_observeContent(){this._contentObserver||typeof MutationObserver>"u"||(this._contentObserver=new MutationObserver(()=>this.requestRender()),this._contentObserver.observe(this,{childList:!0,subtree:!1}))}_unobserveContent(){this._contentObserver&&(this._contentObserver.disconnect(),this._contentObserver=null)}attributeChangedCallback(e,t,i){t!==i&&(e==="radius"&&this.style.setProperty("--ui-aspect-radius",this._normalizeRadius(i)),super.attributeChangedCallback(e,t,i))}get headless(){return this.hasAttribute("headless")}set headless(e){e!==this.headless&&(e?this.setAttribute("headless",""):this.removeAttribute("headless"))}render(){const e=u(this.getAttribute("ratio")),t=d(this.getAttribute("fit")),i=this.hasAttribute("show-ratio-badge"),s=this.children.length>0;this.setContent(`
       <style>${p}</style>
       <div class="frame" part="frame" style="--ui-aspect-padding:${e.padding}%;--ui-aspect-fit:${t};">
         <div class="surface" part="surface">