@gospore/theme 1.0.176 → 1.0.178

package/README.md

@@ -177,6 +177,91 @@ To replace the ring on your own element, use a selector more specific than
 (0,1,0), for example `.my-field:focus { box-shadow: none; }`. A single class
 selector ties with `:focus`, so the result would depend on import order.
 
+## Background color transitions
+
+Components never transition `background-color`, `background`, or `all`. Each
+component registers a `<color>` custom property, sets it from its state rules,
+paints its background from it, and transitions that property instead. The fade
+looks the same, but Chrome animates it on the main thread:
+
+```css
+/* theme.css, at the top level (outside .theme) */
+@property --button-animated-background {
+    syntax: "<color>";
+    inherits: false;
+    initial-value: transparent;
+}
+
+/* Component styles */
+button {
+    background: var(--button-animated-background);
+    transition:
+        --button-animated-background var(--transition-100ms-ease-out),
+        color var(--transition-100ms-ease-out);
+}
+.button-appearance-primary:hover {
+    --button-animated-background: var(--button-background-primary-hover-light);
+}
+```
+
+### Why
+
+Chrome runs plain `background-color` transitions on the compositor thread (the
+`CompositeBGColorAnimation` feature, on by default). When such a transition
+ends, Chrome sometimes draws one more frame with the transition's start color:
+a dropdown trigger that just turned selected blinks back to its pressed color,
+or a day the Calendar just deselected blinks blue. `color` and `border-color`
+run on the main thread and already show their end values in that frame, so the
+glitch looks like a flicker of the background alone. A registered custom
+property is interpolated on the main thread and the background only reads its
+current value, so there is no compositor animation left to glitch.
+
+Measured in Chrome 156 (October 2026) by recording every frame Chrome drew over
+120 toggles:
+
+|                           | Plain `background-color` | `--disable-features=CompositeBGColorAnimation` | Registered `@property` color |
+| ------------------------- | ------------------------ | ---------------------------------------------- | ---------------------------- |
+| Button (dropdown trigger) | 9 flashes                | 0                                              | 0                            |
+| Calendar (day selection)  | 17 flashes               | 0                                              | 0                            |
+
+Hover fades are affected too: hovering dropdown items flashed the unhovered
+color twice in 100 hovers.
+
+The same bug was reported independently in
+[qtoggle/qui#52](https://github.com/qtoggle/qui/pull/52); we didn't find a
+Chromium issue for it. Their workaround, `filter: blur(0)` on `body`, also
+stops Chrome from compositing these animations, but it changes the containing
+block of every `position: fixed` element, so we don't use it.
+
+### Rules
+
+- Name the property `--<component>-animated-background` and register it with
+  `initial-value: transparent`. Values that aren't colors, such as `none`
+  tokens, fall back to `transparent`, which matches `background: none`.
+- Every rule that changes the background of a transitioned element sets the
+  property, not `background` or `background-color`. A rule that sets
+  `background-color` directly still wins, but changes the color without a fade.
+- The base `a` rule fades only `color`. Give links that change their background
+  their own animated property. Table rows fade `--table-row-animated-background`.
+- Browsers without `@property` (Firefox before 128, Safari before 16.4) switch
+  colors without fading.
+- `tests/contracts/background-transitions.spec.ts` fails when a `transition`,
+  `transition-property`, or `--*-transition` token lists `background`,
+  `background-color`, or `all`.
+
+### Checking whether Chrome still needs this
+
+`getComputedStyle`, `requestAnimationFrame` sampling, and long-animation-frame
+traces never show the glitch, because the main thread holds the right values
+throughout. Only the frames Chrome draws do. To recheck after a Chrome update,
+transition plain `background-color` on a test element and record headed Google
+Chrome while toggling it about a hundred times, with a screen recording or CDP
+`Page.startScreencast`. Headless Chrome and Playwright's bundled Chromium don't
+reproduce it. Look for single frames where the color jumps back to the start
+value, and compare with a run using
+`--disable-features=CompositeBGColorAnimation`. If the default run no longer
+flashes, the pattern and the contract test can go.
+
 ## ThemeSwitcher localization
 
 All string overrides are optional and retain the existing defaults.

package/dist/theme.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue");require("what-input");let t=require("@gospore/dropdown-menu");var n=[`auto`,`light`,`dark`],r=`gospore-theme-mode`,i=31536e3,a=`(prefers-color-scheme: dark)`;function o(){if(typeof document>`u`)return null;let e=u(r);return f(e)?e:null}function s(e){if(typeof document>`u`||!n.includes(e))return;let t=typeof window<`u`?window.location.hostname:``,a=(typeof window<`u`?window.location.protocol:``)===`https:`,o=[`path=/`,`max-age=${i}`,`SameSite=Lax`];a&&o.push(`Secure`);let s=c(t);s&&(document.cookie=[`${encodeURIComponent(r)}=`,`path=/`,`max-age=0`,`SameSite=Lax`,`domain=${s}`,...a?[`Secure`]:[]].join(`; `)),document.cookie=[`${encodeURIComponent(r)}=${encodeURIComponent(e)}`,...o].join(`; `)}function c(e){if(!e||e===`localhost`)return null;if(/^\d+(?:\.\d+){3}$/.test(e))return e;let t=e.split(`.`);return t.length<=1?null:t.slice(-2).join(`.`)}function l(e){if(typeof document>`u`)return;let t=d(f(e)?e:o()??`auto`);document.documentElement.setAttribute(`dark-mode`,String(t))}function u(e){if(typeof document>`u`||!document.cookie)return null;let t=`${encodeURIComponent(e)}=`,n=document.cookie.split(`; `);for(let e of n)if(e.startsWith(t))try{return decodeURIComponent(e.slice(t.length))}catch{return null}return null}function d(e){if(e===`dark`)return!0;if(e===`light`||typeof window>`u`)return!1;try{let e=typeof window.matchMedia==`function`?window.matchMedia(a):null;return e?e.matches:!1}catch{return!1}}function f(e){return typeof e==`string`&&n.includes(e)}var p=Symbol.for(`gospore.theme.portalHost`);function m(){let t=(0,e.inject)(p,null);return(0,e.computed)(()=>t?.value??`body`)}var h=[],g=new Set,_=new Map,v=[],y,b=`(prefers-color-scheme: dark)`,x=`(prefers-reduced-motion: reduce)`,ee=200,S=4.5,C=1.8,w=1.15,T=1.08,E=4.5,te=3,D=`#ffffff`,O=`#1f2228`,k=(0,e.defineComponent)({name:`Theme`,__name:`Theme`,props:{mode:{type:String,default:void 0,validator:e=>[`auto`,`light`,`dark`].includes(e)},accentColor:{type:String,required:!1,default:void 0},exposeGlobalAccent:{type:Boolean,default:!1}},setup(t){let n=t;function r(){if(typeof document>`u`)return;let e=document.documentElement;if(!e)return;g.forEach(t=>{let n=_.get(t);n?.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t)}),g.clear();let t=[...h].reverse().find(e=>e.enabled&&e.vars&&Object.keys(e.vars).length>0);if(!t){_.clear();return}Object.entries(t.vars).forEach(([t,n])=>{_.has(t)||_.set(t,{priority:e.style.getPropertyPriority(t),value:e.style.getPropertyValue(t)}),e.style.setProperty(t,n),g.add(t)})}let i=B(b),a=B(x),s=(0,e.inject)(`theme`,null),c=z(),l=(0,e.ref)(c),u=null,d=(0,e.ref)({darkMode:M(c)}),f={darkMode:d.value.darkMode},m=!1;j();let k=(0,e.ref)(null);i.addEventListener(`change`,N),(0,e.watch)(()=>n.mode,()=>{A()},{immediate:!0}),(0,e.watch)(()=>s?.value.darkMode,()=>{n.mode===void 0&&A()}),(0,e.watch)(()=>d.value.darkMode,(e,t)=>{if(f.darkMode=e,m&&I(f)){if(t===void 0){P(e);return}R(()=>{I(f)&&P(e)})}},{immediate:!0}),(0,e.onBeforeUnmount)(()=>{i.removeEventListener(`change`,N),u!==null&&typeof window<`u`&&(window.cancelAnimationFrame(u),u=null),m&&L(f);let e=h.indexOf($);e!==-1&&h.splice(e,1),r()});function A(){let e=z(),t=M(e);l.value=e,f.darkMode=t,j(),d.value.darkMode=t}function j(){let e=s===null||n.mode!==void 0;e&&!m?m=F(f):!e&&m&&(L(f),m=!1)}function M(e){return e===`dark`||e!==`light`&&i.matches}function N(e){e&&l.value===`auto`&&(d.value.darkMode=e.matches)}function P(e){typeof document<`u`&&document.documentElement.setAttribute(`dark-mode`,String(e))}function F(e){return typeof document>`u`?!1:(v.length===0&&(y=document.documentElement.getAttribute(`dark-mode`)),v.push(e),P(e.darkMode),!0)}function I(e){return v.at(-1)===e}function L(e){let t=v.indexOf(e);if(t===-1)return;let n=t===v.length-1;if(v.splice(t,1),!n||typeof document>`u`)return;let r=v.at(-1);if(r){P(r.darkMode);return}y===null?document.documentElement.removeAttribute(`dark-mode`):y!==void 0&&document.documentElement.setAttribute(`dark-mode`,y),y=void 0}function R(e){if(a.matches||typeof document>`u`||typeof window>`u`){e();return}let t=document.startViewTransition?.bind(document);if(t){t(()=>{e()});return}e();let n=document.documentElement;typeof n.animate==`function`&&(u!==null&&window.cancelAnimationFrame(u),u=window.requestAnimationFrame(()=>{u=null,n.animate([{opacity:.85},{opacity:1}],{duration:ee,easing:`ease-in-out`})}))}function z(){return n.mode===void 0&&s?s.value.darkMode?`dark`:`light`:n.mode??o()??`auto`}function B(e){if(typeof window<`u`&&typeof window.matchMedia==`function`)try{return window.matchMedia(e)}catch{}return{addEventListener(){},addListener(){},dispatchEvent:()=>!1,matches:!1,media:e,onchange:null,removeEventListener(){},removeListener(){}}}(0,e.provide)(`theme`,d),(0,e.provide)(p,k);function V(e){if(!e)return null;let t=e.trim().toLowerCase();if(!/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.exec(t))return null;if(t.length===4){let e=t[1],n=t[2],r=t[3];return`#${e}${e}${n}${n}${r}${r}`}return t}function H(e){let t=V(e);return t?{r:parseInt(t.slice(1,3),16),g:parseInt(t.slice(3,5),16),b:parseInt(t.slice(5,7),16)}:null}function U({r:e,g:t,b:n}){let r=e=>e.toString(16).padStart(2,`0`);return`#${r(e)}${r(t)}${r(n)}`}function W(e){return Math.max(0,Math.min(1,e))}function G(e){return e<=.04045?e/12.92:((e+.055)/1.055)**2.4}function K(e){let t=W(e);return t<=.0031308?12.92*t:1.055*t**(1/2.4)-.055}function ne({r:e,g:t,b:n}){let r=e/255,i=t/255,a=n/255,o=G(r),s=G(i),c=G(a),l=.4122214708*o+.5363325363*s+.0514459929*c,u=.2119034982*o+.6806995451*s+.1073969566*c,d=.0883024619*o+.2817188376*s+.6299787005*c,f=Math.cbrt(l),p=Math.cbrt(u),m=Math.cbrt(d),h=.2104542553*f+.793617785*p-.0040720468*m,g=1.9779984951*f-2.428592205*p+.4505937099*m,_=.0259040371*f+.7827717662*p-.808675766*m,v=Math.sqrt(g*g+_*_),y=180/Math.PI*Math.atan2(_,g);return y<0&&(y+=360),{l:h,c:v,h:y}}function q(e,t,n,r=!1){let i=n*Math.PI/180,a=t*Math.cos(i),o=t*Math.sin(i),s=e+.3963377774*a+.2158037573*o,c=e-.1055613458*a-.0638541728*o,l=e-.0894841775*a-1.291485548*o,u=r?W(s):s,d=r?W(c):c,f=r?W(l):l;if(!r&&(u<-1e-4||u>1.0001||d<-1e-4||d>1.0001||f<-1e-4||f>1.0001))return null;let p=u*u*u,m=d*d*d,h=f*f*f,g=4.0767416621*p-3.3077115913*m+.2309699292*h,_=-1.2684380046*p+2.6097574011*m-.3413193965*h,v=-.0041960863*p-.7034186147*m+1.707614701*h;if(r)g=W(g),_=W(_),v=W(v);else if(g<-1e-4||g>1.0001||_<-1e-4||_>1.0001||v<-1e-4||v>1.0001)return null;let y=W(K(g)),b=W(K(_)),x=W(K(v));return{r:Math.round(y*255),g:Math.round(b*255),b:Math.round(x*255)}}function J(e,t,n){let r=t;for(let t=0;t<8;t+=1){let t=q(e,r,n);if(t)return t;r*=.9}return q(e,W(r),n,!0)||{r:0,g:0,b:0}}function Y(e){let t=H(e);if(!t)return 0;let n=G(t.r/255),r=G(t.g/255),i=G(t.b/255);return .2126*n+.7152*r+.0722*i}function X(e,t){let n=Y(e),r=Y(t),i=Math.max(n,r),a=Math.min(n,r);return(i+.05)/(a+.05)}function re(e,t,n={}){let r=n.minContrast??S,i=n.preferDark!==!1,a=Math.max(.01,Math.min(.06,(e.c||.12)*(n.chromaScale??.25))),o=n.initialLightness??(i?.24:.94),s=i?-1:1,c=n.step??.03,l=W(o),u=U(J(l,a,e.h)),d=X(t,u);for(let n=0;n<48;n+=1){let n=U(J(l,a,e.h)),i=X(t,n);if(i>d&&(d=i,u=n),i>=r)return n;if(l=W(l+s*c),l===0||l===1)break}let f=`#000000`,p=`#ffffff`,m=X(t,f),h=X(t,p);return m>=r||h>=r?m>=h?f:p:u}function Z(e,t,n={}){let r=n.minContrast??S,i=n.darkCandidate??`#101214`,a=n.lightCandidate??`#ffffff`,o=n.preferredCandidate,s=n.preferredMinContrast??r,c=n.preferredSwitchDelta??0,l=X(t,i),u=X(t,a),d=l>=r,f=u>=r,p=u>=s,m=l>=s;if(d||f)return o===`light`&&p?a:o===`dark`&&m?i:o===`light`&&f?!d||l-u<=c?a:i:o===`dark`&&d?!f||u-l<=c?i:a:d&&f?l>=u?i:a:d?i:a;let h=l>=u;return re(e,t,{minContrast:r,preferDark:h,initialLightness:h?.2:.96,chromaScale:.1})}let ie=[100,200,300,400,500,600,700,800,900,1e3],ae=[.9,.84,.78,.72,.67,.62,.56,.5,.44,.38],oe=[.28,.4,.54,.7,.86,1,1.08,1.14,1.2,1.24];function Q(e,t,n,r){let i=t[t.length-1];for(let i of t){let t=e[i];if(t&&X(t,n)>=r)return i}return i}function se(e,t,n,r,i){for(let e of n){let n=t[e];if(n&&X(n,r)>=E)return n}return re(e,r,{chromaScale:1,initialLightness:i?.45:.72,minContrast:E,preferDark:i})}function ce(e){let t=e.l-ae[5],n=e.c>.02?.02:0;return ie.reduce((r,i,a)=>(r[i]=U(J(W(ae[a]+t),Math.min(.4,Math.max(n,e.c*oe[a])),e.h)),r),{})}function le(e,t){let n=[100,200,300,400,500,600,700],r=Q(t,n,D,T),i=n.indexOf(r),a=n[Math.min(i+1,n.length-1)],o=n[Math.min(i+2,n.length-1)],s=[1e3,900,800,700,600,500],c=Q(t,s,O,T),l=s.indexOf(c),u=s[Math.min(l+1,s.length-1)],d=s[Math.min(l+2,s.length-1)],f=Q(t,[200,300,400,500,600,700,800],D,w),p=Q(t,[900,800,700,600,500,400],O,w),m=[600,700,800,900,1e3],h=Q(t,m,D,C),g=m.indexOf(h),_=m[Math.min(g+1,m.length-1)],v=m[Math.min(g+2,m.length-1)],y=[400,300,200,100],b=Q(t,y,O,C),x=y.indexOf(b),ee=y[Math.min(x+1,y.length-1)],k=y[Math.min(x+2,y.length-1)],A={"--color-brand-surface-soft-light":t[r],"--color-brand-surface-soft-hovered-light":t[a],"--color-brand-surface-soft-pressed-light":t[o],"--color-brand-surface-soft-dark":t[c],"--color-brand-surface-soft-hovered-dark":t[u],"--color-brand-surface-soft-pressed-dark":t[d],"--color-brand-surface-subtle-light":t[f],"--color-brand-surface-subtle-dark":t[p],"--color-brand-surface-strong-light":t[h],"--color-brand-surface-strong-hovered-light":t[_],"--color-brand-surface-strong-pressed-light":t[v],"--color-brand-surface-strong-dark":t[b],"--color-brand-surface-strong-hovered-dark":t[ee],"--color-brand-surface-strong-pressed-dark":t[k]},j=t[600];return A[`--color-brand-on-soft-light`]=X(A[`--color-brand-surface-soft-light`],j)>=S?j:Z(e,A[`--color-brand-surface-soft-light`],{minContrast:S}),A[`--color-brand-on-soft-dark`]=Z(e,A[`--color-brand-surface-soft-dark`],{minContrast:S}),A[`--color-brand-on-subtle-light`]=Z(e,A[`--color-brand-surface-subtle-light`],{minContrast:E,preferredCandidate:`light`,preferredMinContrast:E,preferredSwitchDelta:te}),A[`--color-brand-on-subtle-dark`]=Z(e,A[`--color-brand-surface-subtle-dark`],{minContrast:S}),A[`--color-brand-on-strong-light`]=Z(e,A[`--color-brand-surface-strong-light`],{minContrast:E,preferredCandidate:`light`,preferredMinContrast:E,preferredSwitchDelta:te}),A[`--color-brand-on-strong-dark`]=Z(e,A[`--color-brand-surface-strong-dark`],{minContrast:S}),A[`--color-brand-text-light`]=se(e,t,[600,700,800,900,1e3],D,!0),A[`--color-brand-text-dark`]=se(e,t,[400,300,200,100],O,!1),A[`--color-brand-icon-light`]=A[`--color-brand-text-light`],A[`--color-brand-icon-dark`]=A[`--color-brand-text-dark`],A[`--color-brand-border-light`]=A[`--color-brand-text-light`],A[`--color-brand-border-dark`]=A[`--color-brand-text-dark`],A}function ue(e){let t=V(e);if(!t)return null;let n=H(t);if(!n)return null;let r=ne(n),i=ce(r);return i[600]=t,{"--color-brand-seed":t,"--color-brand-100":i[100],"--color-brand-200":i[200],"--color-brand-300":i[300],"--color-brand-400":i[400],"--color-brand-500":i[500],"--color-brand-600":i[600],"--color-brand-700":i[700],"--color-brand-800":i[800],"--color-brand-900":i[900],"--color-brand-1000":i[1e3],...le(r,i)}}let de=(0,e.computed)(()=>ue(n.accentColor)??{}),$={vars:{},enabled:!!n.exposeGlobalAccent};return typeof document<`u`&&h.push($),(0,e.watch)(()=>n.exposeGlobalAccent,e=>{$.enabled=!!e,r()},{immediate:!0}),(0,e.watch)(de,e=>{e&&Object.keys(e).length>0?$.vars={...e}:$.vars={},r()},{immediate:!0}),(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:`theme`,style:(0,e.normalizeStyle)(de.value)},[(0,e.renderSlot)(t.$slots,`default`),(0,e.createElementVNode)(`div`,{ref_key:`portalHost`,ref:k,class:`theme__portal-host`},null,512)],4))}}),A=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,e.defineComponent)({__name:`ThemeSwitcher`,props:{mode:{type:String,default:`auto`,validator:e=>[`auto`,`light`,`dark`].includes(e)},themeLabel:{type:String,default:`Theme`},triggerAriaLabel:{type:String,default:`Select theme mode`},systemLabel:{type:String,default:`System`},lightLabel:{type:String,default:`Light`},darkLabel:{type:String,default:`Dark`},modeLabel:{type:Function,default:e=>`${e} mode`}},emits:[`update:mode`],setup(r,{emit:i}){let a=n,c=r,u=i,d=(0,e.inject)(`theme`,null)!==null;d||l();let f=(0,e.ref)(!1),p=o()??c.mode,m=(0,e.ref)(a.includes(p)?p:`auto`);return(0,e.watch)(()=>c.mode,e=>{a.includes(e)&&e!==m.value&&(m.value=e)}),(0,e.watch)(m,e=>{if(!a.includes(e)){m.value=`auto`;return}f.value=!1,u(`update:mode`,e),s(e),d||l(e)},{immediate:!0}),(n,i)=>((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(t.DropdownMenu),{open:f.value,"onUpdate:open":i[3]||=e=>f.value=e,text:r.themeLabel,"aria-label":r.triggerAriaLabel},{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(t.DropdownItemGroup),{title:r.themeLabel,"item-role":`menuitemradio`},{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(t.DropdownItemRadio),{checked:m.value,"onUpdate:checked":i[0]||=e=>m.value=e,value:`auto`,label:r.systemLabel,"aria-label":r.modeLabel(r.systemLabel)},null,8,[`checked`,`label`,`aria-label`]),i[4]||=(0,e.createElementVNode)(`hr`,{class:`theme-switcher-divider`},null,-1),(0,e.createVNode)((0,e.unref)(t.DropdownItemRadio),{checked:m.value,"onUpdate:checked":i[1]||=e=>m.value=e,value:`light`,label:r.lightLabel,"aria-label":r.modeLabel(r.lightLabel)},null,8,[`checked`,`label`,`aria-label`]),(0,e.createVNode)((0,e.unref)(t.DropdownItemRadio),{checked:m.value,"onUpdate:checked":i[2]||=e=>m.value=e,value:`dark`,label:r.darkLabel,"aria-label":r.modeLabel(r.darkLabel)},null,8,[`checked`,`label`,`aria-label`])]),_:1},8,[`title`])]),_:1},8,[`open`,`text`,`aria-label`]))}}),[[`__scopeId`,`data-v-965bb2ac`]]),j=`(prefers-color-scheme: dark)`,M=`#ffffff`,N=`oklch(100% 0 250)`,P=`#1f2228`,F=`oklch(15% 0.0045 250)`;function I(){return{name:`gospore-theme-bootstrap`,enforce:`pre`,transformIndexHtml:{order:`pre`,handler:()=>[{tag:`style`,children:R(),injectTo:`head`},{tag:`script`,children:L(),injectTo:`head`}]}}}function L(){return`(() => {
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue");require("what-input");let t=require("@gospore/dropdown-menu");var n=[`auto`,`light`,`dark`],r=`gospore-theme-mode`,i=31536e3,a=`(prefers-color-scheme: dark)`;function o(){if(typeof document>`u`)return null;let e=u(r);return f(e)?e:null}function s(e){if(typeof document>`u`||!n.includes(e))return;let t=typeof window<`u`?window.location.hostname:``,a=(typeof window<`u`?window.location.protocol:``)===`https:`,o=[`path=/`,`max-age=${i}`,`SameSite=Lax`];a&&o.push(`Secure`);let s=c(t);s&&(document.cookie=[`${encodeURIComponent(r)}=`,`path=/`,`max-age=0`,`SameSite=Lax`,`domain=${s}`,...a?[`Secure`]:[]].join(`; `)),document.cookie=[`${encodeURIComponent(r)}=${encodeURIComponent(e)}`,...o].join(`; `)}function c(e){if(!e||e===`localhost`)return null;if(/^\d+(?:\.\d+){3}$/.test(e))return e;let t=e.split(`.`);return t.length<=1?null:t.slice(-2).join(`.`)}function l(e){if(typeof document>`u`)return;let t=d(f(e)?e:o()??`auto`);document.documentElement.setAttribute(`dark-mode`,String(t))}function u(e){if(typeof document>`u`||!document.cookie)return null;let t=`${encodeURIComponent(e)}=`,n=document.cookie.split(`; `);for(let e of n)if(e.startsWith(t))try{return decodeURIComponent(e.slice(t.length))}catch{return null}return null}function d(e){if(e===`dark`)return!0;if(e===`light`||typeof window>`u`)return!1;try{let e=typeof window.matchMedia==`function`?window.matchMedia(a):null;return e?e.matches:!1}catch{return!1}}function f(e){return typeof e==`string`&&n.includes(e)}var p=Symbol.for(`gospore.theme.portalHost`);function m(){let t=(0,e.inject)(p,null);return(0,e.computed)(()=>t?.value??`body`)}var h=[],g=new Set,_=new Map,v=[],y,b=`(prefers-color-scheme: dark)`,x=`(prefers-reduced-motion: reduce)`,ee=200,S=4.5,C=1.8,w=1.15,T=1.08,E=4.5,te=3,D=`#ffffff`,O=`#1f2228`,k=(0,e.defineComponent)({name:`Theme`,__name:`Theme`,props:{mode:{type:String,default:void 0,validator:e=>[`auto`,`light`,`dark`].includes(e)},accentColor:{type:String,required:!1,default:void 0},exposeGlobalAccent:{type:Boolean,default:!1}},setup(t){let n=t;function r(){if(typeof document>`u`)return;let e=document.documentElement;if(!e)return;g.forEach(t=>{let n=_.get(t);n?.value?e.style.setProperty(t,n.value,n.priority):e.style.removeProperty(t)}),g.clear();let t=[...h].reverse().find(e=>e.enabled&&e.vars&&Object.keys(e.vars).length>0);t?Object.entries(t.vars).forEach(([t,n])=>{_.has(t)||_.set(t,{priority:e.style.getPropertyPriority(t),value:e.style.getPropertyValue(t)}),e.style.setProperty(t,n),g.add(t)}):_.clear()}let i=B(b),a=B(x),s=(0,e.inject)(`theme`,null),c=z(),l=(0,e.ref)(c),u=null,d=(0,e.ref)({darkMode:M(c)}),f={darkMode:d.value.darkMode},m=!1;j();let k=(0,e.ref)(null);i.addEventListener(`change`,N),(0,e.watch)(()=>n.mode,()=>{A()},{immediate:!0}),(0,e.watch)(()=>s?.value.darkMode,()=>{n.mode===void 0&&A()}),(0,e.watch)(()=>d.value.darkMode,(e,t)=>{f.darkMode=e,m&&I(f)&&(t===void 0?P(e):R(()=>{I(f)&&P(e)}))},{immediate:!0}),(0,e.onBeforeUnmount)(()=>{i.removeEventListener(`change`,N),u!==null&&typeof window<`u`&&(window.cancelAnimationFrame(u),u=null),m&&L(f);let e=h.indexOf($);e!==-1&&h.splice(e,1),r()});function A(){let e=z(),t=M(e);l.value=e,f.darkMode=t,j(),d.value.darkMode=t}function j(){let e=s===null||n.mode!==void 0;e&&!m?m=F(f):!e&&m&&(L(f),m=!1)}function M(e){return e===`dark`||e!==`light`&&i.matches}function N(e){e&&l.value===`auto`&&(d.value.darkMode=e.matches)}function P(e){typeof document<`u`&&document.documentElement.setAttribute(`dark-mode`,String(e))}function F(e){return typeof document>`u`?!1:(v.length===0&&(y=document.documentElement.getAttribute(`dark-mode`)),v.push(e),P(e.darkMode),!0)}function I(e){return v.at(-1)===e}function L(e){let t=v.indexOf(e);if(t===-1)return;let n=t===v.length-1;if(v.splice(t,1),!n||typeof document>`u`)return;let r=v.at(-1);r?P(r.darkMode):(y===null?document.documentElement.removeAttribute(`dark-mode`):y!==void 0&&document.documentElement.setAttribute(`dark-mode`,y),y=void 0)}function R(e){if(a.matches||typeof document>`u`||typeof window>`u`){e();return}let t=document.startViewTransition?.bind(document);if(t){t(()=>{e()});return}e();let n=document.documentElement;typeof n.animate==`function`&&(u!==null&&window.cancelAnimationFrame(u),u=window.requestAnimationFrame(()=>{u=null,n.animate([{opacity:.85},{opacity:1}],{duration:ee,easing:`ease-in-out`})}))}function z(){return n.mode===void 0&&s?s.value.darkMode?`dark`:`light`:n.mode??o()??`auto`}function B(e){if(typeof window<`u`&&typeof window.matchMedia==`function`)try{return window.matchMedia(e)}catch{}return{addEventListener(){},addListener(){},dispatchEvent:()=>!1,matches:!1,media:e,onchange:null,removeEventListener(){},removeListener(){}}}(0,e.provide)(`theme`,d),(0,e.provide)(p,k);function V(e){if(!e)return null;let t=e.trim().toLowerCase();if(!/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.exec(t))return null;if(t.length===4){let e=t[1],n=t[2],r=t[3];return`#${e}${e}${n}${n}${r}${r}`}return t}function H(e){let t=V(e);return t?{r:parseInt(t.slice(1,3),16),g:parseInt(t.slice(3,5),16),b:parseInt(t.slice(5,7),16)}:null}function U({r:e,g:t,b:n}){let r=e=>e.toString(16).padStart(2,`0`);return`#${r(e)}${r(t)}${r(n)}`}function W(e){return Math.max(0,Math.min(1,e))}function G(e){return e<=.04045?e/12.92:((e+.055)/1.055)**2.4}function K(e){let t=W(e);return t<=.0031308?12.92*t:1.055*t**(1/2.4)-.055}function ne({r:e,g:t,b:n}){let r=e/255,i=t/255,a=n/255,o=G(r),s=G(i),c=G(a),l=.4122214708*o+.5363325363*s+.0514459929*c,u=.2119034982*o+.6806995451*s+.1073969566*c,d=.0883024619*o+.2817188376*s+.6299787005*c,f=Math.cbrt(l),p=Math.cbrt(u),m=Math.cbrt(d),h=.2104542553*f+.793617785*p-.0040720468*m,g=1.9779984951*f-2.428592205*p+.4505937099*m,_=.0259040371*f+.7827717662*p-.808675766*m,v=Math.sqrt(g*g+_*_),y=180/Math.PI*Math.atan2(_,g);return y<0&&(y+=360),{l:h,c:v,h:y}}function q(e,t,n,r=!1){let i=n*Math.PI/180,a=t*Math.cos(i),o=t*Math.sin(i),s=e+.3963377774*a+.2158037573*o,c=e-.1055613458*a-.0638541728*o,l=e-.0894841775*a-1.291485548*o,u=r?W(s):s,d=r?W(c):c,f=r?W(l):l;if(!r&&(u<-1e-4||u>1.0001||d<-1e-4||d>1.0001||f<-1e-4||f>1.0001))return null;let p=u*u*u,m=d*d*d,h=f*f*f,g=4.0767416621*p-3.3077115913*m+.2309699292*h,_=-1.2684380046*p+2.6097574011*m-.3413193965*h,v=-.0041960863*p-.7034186147*m+1.707614701*h;if(r)g=W(g),_=W(_),v=W(v);else if(g<-1e-4||g>1.0001||_<-1e-4||_>1.0001||v<-1e-4||v>1.0001)return null;let y=W(K(g)),b=W(K(_)),x=W(K(v));return{r:Math.round(y*255),g:Math.round(b*255),b:Math.round(x*255)}}function J(e,t,n){let r=t;for(let t=0;t<8;t+=1){let t=q(e,r,n);if(t)return t;r*=.9}return q(e,W(r),n,!0)||{r:0,g:0,b:0}}function Y(e){let t=H(e);if(!t)return 0;let n=G(t.r/255),r=G(t.g/255),i=G(t.b/255);return .2126*n+.7152*r+.0722*i}function X(e,t){let n=Y(e),r=Y(t),i=Math.max(n,r),a=Math.min(n,r);return(i+.05)/(a+.05)}function re(e,t,n={}){let r=n.minContrast??S,i=n.preferDark!==!1,a=Math.max(.01,Math.min(.06,(e.c||.12)*(n.chromaScale??.25))),o=n.initialLightness??(i?.24:.94),s=i?-1:1,c=n.step??.03,l=W(o),u=U(J(l,a,e.h)),d=X(t,u);for(let n=0;n<48;n+=1){let n=U(J(l,a,e.h)),i=X(t,n);if(i>d&&(d=i,u=n),i>=r)return n;if(l=W(l+s*c),l===0||l===1)break}let f=`#000000`,p=`#ffffff`,m=X(t,f),h=X(t,p);return m>=r||h>=r?m>=h?f:p:u}function Z(e,t,n={}){let r=n.minContrast??S,i=n.darkCandidate??`#101214`,a=n.lightCandidate??`#ffffff`,o=n.preferredCandidate,s=n.preferredMinContrast??r,c=n.preferredSwitchDelta??0,l=X(t,i),u=X(t,a),d=l>=r,f=u>=r,p=u>=s,m=l>=s;if(d||f)return o===`light`&&p?a:o===`dark`&&m?i:o===`light`&&f?!d||l-u<=c?a:i:o===`dark`&&d?!f||u-l<=c?i:a:d&&f?l>=u?i:a:d?i:a;let h=l>=u;return re(e,t,{minContrast:r,preferDark:h,initialLightness:h?.2:.96,chromaScale:.1})}let ie=[100,200,300,400,500,600,700,800,900,1e3],ae=[.9,.84,.78,.72,.67,.62,.56,.5,.44,.38],oe=[.28,.4,.54,.7,.86,1,1.08,1.14,1.2,1.24];function Q(e,t,n,r){let i=t[t.length-1];for(let i of t){let t=e[i];if(t&&X(t,n)>=r)return i}return i}function se(e,t,n,r,i){for(let e of n){let n=t[e];if(n&&X(n,r)>=E)return n}return re(e,r,{chromaScale:1,initialLightness:i?.45:.72,minContrast:E,preferDark:i})}function ce(e){let t=e.l-ae[5],n=e.c>.02?.02:0;return ie.reduce((r,i,a)=>(r[i]=U(J(W(ae[a]+t),Math.min(.4,Math.max(n,e.c*oe[a])),e.h)),r),{})}function le(e,t){let n=[100,200,300,400,500,600,700],r=Q(t,n,D,T),i=n.indexOf(r),a=n[Math.min(i+1,n.length-1)],o=n[Math.min(i+2,n.length-1)],s=[1e3,900,800,700,600,500],c=Q(t,s,O,T),l=s.indexOf(c),u=s[Math.min(l+1,s.length-1)],d=s[Math.min(l+2,s.length-1)],f=Q(t,[200,300,400,500,600,700,800],D,w),p=Q(t,[900,800,700,600,500,400],O,w),m=[600,700,800,900,1e3],h=Q(t,m,D,C),g=m.indexOf(h),_=m[Math.min(g+1,m.length-1)],v=m[Math.min(g+2,m.length-1)],y=[400,300,200,100],b=Q(t,y,O,C),x=y.indexOf(b),ee=y[Math.min(x+1,y.length-1)],k=y[Math.min(x+2,y.length-1)],A={"--color-brand-surface-soft-light":t[r],"--color-brand-surface-soft-hovered-light":t[a],"--color-brand-surface-soft-pressed-light":t[o],"--color-brand-surface-soft-dark":t[c],"--color-brand-surface-soft-hovered-dark":t[u],"--color-brand-surface-soft-pressed-dark":t[d],"--color-brand-surface-subtle-light":t[f],"--color-brand-surface-subtle-dark":t[p],"--color-brand-surface-strong-light":t[h],"--color-brand-surface-strong-hovered-light":t[_],"--color-brand-surface-strong-pressed-light":t[v],"--color-brand-surface-strong-dark":t[b],"--color-brand-surface-strong-hovered-dark":t[ee],"--color-brand-surface-strong-pressed-dark":t[k]},j=t[600];return A[`--color-brand-on-soft-light`]=X(A[`--color-brand-surface-soft-light`],j)>=S?j:Z(e,A[`--color-brand-surface-soft-light`],{minContrast:S}),A[`--color-brand-on-soft-dark`]=Z(e,A[`--color-brand-surface-soft-dark`],{minContrast:S}),A[`--color-brand-on-subtle-light`]=Z(e,A[`--color-brand-surface-subtle-light`],{minContrast:E,preferredCandidate:`light`,preferredMinContrast:E,preferredSwitchDelta:te}),A[`--color-brand-on-subtle-dark`]=Z(e,A[`--color-brand-surface-subtle-dark`],{minContrast:S}),A[`--color-brand-on-strong-light`]=Z(e,A[`--color-brand-surface-strong-light`],{minContrast:E,preferredCandidate:`light`,preferredMinContrast:E,preferredSwitchDelta:te}),A[`--color-brand-on-strong-dark`]=Z(e,A[`--color-brand-surface-strong-dark`],{minContrast:S}),A[`--color-brand-text-light`]=se(e,t,[600,700,800,900,1e3],D,!0),A[`--color-brand-text-dark`]=se(e,t,[400,300,200,100],O,!1),A[`--color-brand-icon-light`]=A[`--color-brand-text-light`],A[`--color-brand-icon-dark`]=A[`--color-brand-text-dark`],A[`--color-brand-border-light`]=A[`--color-brand-text-light`],A[`--color-brand-border-dark`]=A[`--color-brand-text-dark`],A}function ue(e){let t=V(e);if(!t)return null;let n=H(t);if(!n)return null;let r=ne(n),i=ce(r);return i[600]=t,{"--color-brand-seed":t,"--color-brand-100":i[100],"--color-brand-200":i[200],"--color-brand-300":i[300],"--color-brand-400":i[400],"--color-brand-500":i[500],"--color-brand-600":i[600],"--color-brand-700":i[700],"--color-brand-800":i[800],"--color-brand-900":i[900],"--color-brand-1000":i[1e3],...le(r,i)}}let de=(0,e.computed)(()=>ue(n.accentColor)??{}),$={vars:{},enabled:!!n.exposeGlobalAccent};return typeof document<`u`&&h.push($),(0,e.watch)(()=>n.exposeGlobalAccent,e=>{$.enabled=!!e,r()},{immediate:!0}),(0,e.watch)(de,e=>{e&&Object.keys(e).length>0?$.vars={...e}:$.vars={},r()},{immediate:!0}),(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:`theme`,style:(0,e.normalizeStyle)(de.value)},[(0,e.renderSlot)(t.$slots,`default`),(0,e.createElementVNode)(`div`,{ref_key:`portalHost`,ref:k,class:`theme__portal-host`},null,512)],4))}}),A=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,e.defineComponent)({__name:`ThemeSwitcher`,props:{mode:{type:String,default:`auto`,validator:e=>[`auto`,`light`,`dark`].includes(e)},themeLabel:{type:String,default:`Theme`},triggerAriaLabel:{type:String,default:`Select theme mode`},systemLabel:{type:String,default:`System`},lightLabel:{type:String,default:`Light`},darkLabel:{type:String,default:`Dark`},modeLabel:{type:Function,default:e=>`${e} mode`}},emits:[`update:mode`],setup(r,{emit:i}){let a=n,c=r,u=i,d=(0,e.inject)(`theme`,null)!==null;d||l();let f=(0,e.ref)(!1),p=o()??c.mode,m=(0,e.ref)(a.includes(p)?p:`auto`);return(0,e.watch)(()=>c.mode,e=>{a.includes(e)&&e!==m.value&&(m.value=e)}),(0,e.watch)(m,e=>{a.includes(e)?(f.value=!1,u(`update:mode`,e),s(e),d||l(e)):m.value=`auto`},{immediate:!0}),(n,i)=>((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(t.DropdownMenu),{open:f.value,"onUpdate:open":i[3]||=e=>f.value=e,text:r.themeLabel,"aria-label":r.triggerAriaLabel},{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(t.DropdownItemGroup),{title:r.themeLabel,"item-role":`menuitemradio`},{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(t.DropdownItemRadio),{checked:m.value,"onUpdate:checked":i[0]||=e=>m.value=e,value:`auto`,label:r.systemLabel,"aria-label":r.modeLabel(r.systemLabel)},null,8,[`checked`,`label`,`aria-label`]),i[4]||=(0,e.createElementVNode)(`hr`,{class:`theme-switcher-divider`},null,-1),(0,e.createVNode)((0,e.unref)(t.DropdownItemRadio),{checked:m.value,"onUpdate:checked":i[1]||=e=>m.value=e,value:`light`,label:r.lightLabel,"aria-label":r.modeLabel(r.lightLabel)},null,8,[`checked`,`label`,`aria-label`]),(0,e.createVNode)((0,e.unref)(t.DropdownItemRadio),{checked:m.value,"onUpdate:checked":i[2]||=e=>m.value=e,value:`dark`,label:r.darkLabel,"aria-label":r.modeLabel(r.darkLabel)},null,8,[`checked`,`label`,`aria-label`])]),_:1},8,[`title`])]),_:1},8,[`open`,`text`,`aria-label`]))}}),[[`__scopeId`,`data-v-965bb2ac`]]),j=`(prefers-color-scheme: dark)`,M=`#ffffff`,N=`oklch(100% 0 250)`,P=`#1f2228`,F=`oklch(15% 0.0045 250)`;function I(){return{name:`gospore-theme-bootstrap`,enforce:`pre`,transformIndexHtml:{order:`pre`,handler:()=>[{tag:`style`,children:R(),injectTo:`head`},{tag:`script`,children:L(),injectTo:`head`}]}}}function L(){return`(() => {
     const storageKey = ${JSON.stringify(r)};
     const validModes = ${JSON.stringify(n)};
     const encodedKey = encodeURIComponent(storageKey) + "=";