@gospore/theme 1.0.174 → 1.0.176

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -162,3 +162,32 @@ happens without a fade. Components may use short, property-scoped color
162
162
  transitions for interaction feedback, so those properties can briefly
163
163
  interpolate during a theme change. Accessibility and contrast contracts apply
164
164
  to the settled light and dark modes.
165
+
166
+ ### Focus ring
167
+
168
+ `theme.css` draws a 2px `--color-border-focused-light` / `--color-border-focused-dark`
169
+ ring around every focused element and removes it after pointer interaction
170
+ (`[data-whatintent="mouse"]`). The light rule (`:focus`) and the dark rule
171
+ (`:where([dark-mode="true"]) :focus`) both have the specificity of a bare
172
+ `:focus`, (0,1,0). Scoped component styles beat them in both modes, so Textfield,
173
+ Textarea, Panel, and the PanelLayout splitter look the same in light and dark mode,
174
+ whether `theme.css` is imported before or after their CSS.
175
+
176
+ To replace the ring on your own element, use a selector more specific than
177
+ (0,1,0), for example `.my-field:focus { box-shadow: none; }`. A single class
178
+ selector ties with `:focus`, so the result would depend on import order.
179
+
180
+ ## ThemeSwitcher localization
181
+
182
+ All string overrides are optional and retain the existing defaults.
183
+
184
+ | Prop | Type | Default | Purpose |
185
+ | ------------------ | --------------------------- | ---------------------------------------- | ------------------------------------------------------------------------ |
186
+ | `themeLabel` | `string` | `"Theme"` | Visible trigger label and theme option group title. |
187
+ | `triggerAriaLabel` | `string` | `"Select theme mode"` | Accessible trigger label; must contain themeLabel. |
188
+ | `systemLabel` | `string` | `"System"` | Visible label of the system theme mode. |
189
+ | `lightLabel` | `string` | `"Light"` | Visible label of the light theme mode. |
190
+ | `darkLabel` | `string` | `"Dark"` | Visible label of the dark theme mode. |
191
+ | `modeLabel` | `(label: string) => string` | `` (label: string) => `${label} mode` `` | Accessible mode label; receives and must contain the visible mode label. |
192
+
193
+ When translating visible labels, also translate the corresponding accessible labels so they contain the visible text.
@@ -7,6 +7,36 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
7
7
  default: string;
8
8
  validator: (value: string) => boolean;
9
9
  };
10
+ /** Visible trigger label and theme option group title. */
11
+ themeLabel: {
12
+ type: StringConstructor;
13
+ default: string;
14
+ };
15
+ /** Accessible trigger label; must contain themeLabel. */
16
+ triggerAriaLabel: {
17
+ type: StringConstructor;
18
+ default: string;
19
+ };
20
+ /** Visible label of the system theme mode. */
21
+ systemLabel: {
22
+ type: StringConstructor;
23
+ default: string;
24
+ };
25
+ /** Visible label of the light theme mode. */
26
+ lightLabel: {
27
+ type: StringConstructor;
28
+ default: string;
29
+ };
30
+ /** Visible label of the dark theme mode. */
31
+ darkLabel: {
32
+ type: StringConstructor;
33
+ default: string;
34
+ };
35
+ /** Accessible mode label; receives and must contain the visible mode label. */
36
+ modeLabel: {
37
+ type: PropType<(label: string) => string>;
38
+ default: (label: string) => string;
39
+ };
10
40
  }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
11
41
  "update:mode": (value: "auto" | "light" | "dark") => any;
12
42
  }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -16,10 +46,46 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
16
46
  default: string;
17
47
  validator: (value: string) => boolean;
18
48
  };
49
+ /** Visible trigger label and theme option group title. */
50
+ themeLabel: {
51
+ type: StringConstructor;
52
+ default: string;
53
+ };
54
+ /** Accessible trigger label; must contain themeLabel. */
55
+ triggerAriaLabel: {
56
+ type: StringConstructor;
57
+ default: string;
58
+ };
59
+ /** Visible label of the system theme mode. */
60
+ systemLabel: {
61
+ type: StringConstructor;
62
+ default: string;
63
+ };
64
+ /** Visible label of the light theme mode. */
65
+ lightLabel: {
66
+ type: StringConstructor;
67
+ default: string;
68
+ };
69
+ /** Visible label of the dark theme mode. */
70
+ darkLabel: {
71
+ type: StringConstructor;
72
+ default: string;
73
+ };
74
+ /** Accessible mode label; receives and must contain the visible mode label. */
75
+ modeLabel: {
76
+ type: PropType<(label: string) => string>;
77
+ default: (label: string) => string;
78
+ };
19
79
  }>> & Readonly<{
20
80
  "onUpdate:mode"?: (value: "auto" | "light" | "dark") => any;
21
81
  }>, {
22
82
  mode: "auto" | "light" | "dark";
83
+ themeLabel: string;
84
+ triggerAriaLabel: string;
85
+ systemLabel: string;
86
+ lightLabel: string;
87
+ darkLabel: string;
88
+ modeLabel: (label: string) => string;
23
89
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
24
90
  declare const _default: typeof __VLS_export;
25
91
  export default _default;
package/dist/theme.cjs CHANGED
@@ -1,4 +1,4 @@
1
- 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)}},emits:[`update:mode`],setup(r,{emit:i}){let a=[{value:`auto`,label:`System`},{value:`light`,label:`Light`},{value:`dark`,label:`Dark`}].reduce((e,t)=>(e[t.value]=t.label,e),{}),c=n,u=r,d=i,f=(0,e.inject)(`theme`,null)!==null;f||l();let p=(0,e.ref)(!1),m=o()??u.mode,h=(0,e.ref)(c.includes(m)?m:`auto`);return(0,e.watch)(()=>u.mode,e=>{c.includes(e)&&e!==h.value&&(h.value=e)}),(0,e.watch)(h,e=>{if(!c.includes(e)){h.value=`auto`;return}p.value=!1,d(`update:mode`,e),s(e),f||l(e)},{immediate:!0}),(n,r)=>((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(t.DropdownMenu),{open:p.value,"onUpdate:open":r[3]||=e=>p.value=e,text:`Theme`,"aria-label":`Select theme mode`},{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(t.DropdownItemGroup),{title:`Theme`,"item-role":`menuitemradio`},{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(t.DropdownItemRadio),{checked:h.value,"onUpdate:checked":r[0]||=e=>h.value=e,value:`auto`,label:(0,e.unref)(a).auto,"aria-label":`${(0,e.unref)(a).auto} mode`},null,8,[`checked`,`label`,`aria-label`]),r[4]||=(0,e.createElementVNode)(`hr`,{class:`theme-switcher-divider`},null,-1),(0,e.createVNode)((0,e.unref)(t.DropdownItemRadio),{checked:h.value,"onUpdate:checked":r[1]||=e=>h.value=e,value:`light`,label:(0,e.unref)(a).light,"aria-label":`${(0,e.unref)(a).light} mode`},null,8,[`checked`,`label`,`aria-label`]),(0,e.createVNode)((0,e.unref)(t.DropdownItemRadio),{checked:h.value,"onUpdate:checked":r[2]||=e=>h.value=e,value:`dark`,label:(0,e.unref)(a).dark,"aria-label":`${(0,e.unref)(a).dark} mode`},null,8,[`checked`,`label`,`aria-label`])]),_:1})]),_:1},8,[`open`]))}}),[[`__scopeId`,`data-v-80f281b2`]]),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`(() => {
1
+ 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`(() => {
2
2
  const storageKey = ${JSON.stringify(r)};
3
3
  const validModes = ${JSON.stringify(n)};
4
4
  const encodedKey = encodeURIComponent(storageKey) + "=";