staffa 0.19.0 → 0.20.0
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 +2 -2
- package/dist/components/button.d.ts +24 -13
- package/dist/components/button.js +34 -20
- package/dist/staffa.esm.js +1 -1
- package/package.json +1 -1
- package/skill/ButtonOptions.md +6 -4
- package/skill/IconButtonOptions.md +10 -7
- package/skill/SKILL.md +2 -2
- package/skill/iconButton.md +3 -1
- package/src/components/button.ts +61 -31
package/README.md
CHANGED
|
@@ -244,10 +244,10 @@ Buttons, icon buttons and menu items carry a `tooltip` option of their own, so m
|
|
|
244
244
|
|
|
245
245
|
```ts
|
|
246
246
|
S.button({ content: "Publish", tooltip: "Not until the draft validates", disabled: true });
|
|
247
|
-
S.iconButton({ icon: trash2,
|
|
247
|
+
S.iconButton({ icon: trash2, tooltip: "Delete" }); // says "Delete" on hover, and to screen readers
|
|
248
248
|
```
|
|
249
249
|
|
|
250
|
-
|
|
250
|
+
A tooltip appears only where one is asked for; on an icon button, a string `tooltip` doubles as the `ariaLabel` when that is left out, so naming a glyph takes one option rather than two. A `key` is appended to whatever the tip says (`tooltip: false` keeps even that quiet), and — unlike a tooltip on a plain disabled `<button>`, which the browser gives no hover events — these show while disabled, which is where a tooltip earns its keep.
|
|
251
251
|
|
|
252
252
|
`src/index.ts` is the authoritative list of exports.
|
|
253
253
|
|
|
@@ -3,8 +3,12 @@ import { type Slot, type Attributes } from "../core.js";
|
|
|
3
3
|
export interface IconButtonOptions {
|
|
4
4
|
/** The glyph, usually one of the `staffa/icons` draw functions. */
|
|
5
5
|
icon: Slot;
|
|
6
|
-
/**
|
|
7
|
-
|
|
6
|
+
/**
|
|
7
|
+
* What it does, for screen readers: there is no visible text to read. Required,
|
|
8
|
+
* unless the `tooltip` is a string — that names the button just as well, and is
|
|
9
|
+
* taken as the label when this is left out.
|
|
10
|
+
*/
|
|
11
|
+
ariaLabel?: string;
|
|
8
12
|
/**
|
|
9
13
|
* Click handler. Return a promise and the glyph becomes a spinner until it
|
|
10
14
|
* settles, with further clicks bouncing off — see {@link ButtonOptions.click}.
|
|
@@ -12,16 +16,17 @@ export interface IconButtonOptions {
|
|
|
12
16
|
click?: (event: Event) => unknown;
|
|
13
17
|
/**
|
|
14
18
|
* A keyboard shortcut that presses this button — see {@link ButtonOptions.key}.
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* lists it under that label too.
|
|
19
|
+
* It is shown after the button's `tooltip`, or alone in a tooltip of its own
|
|
20
|
+
* when there is none, and the `?` overview lists it under the button's label.
|
|
18
21
|
*/
|
|
19
22
|
key?: string;
|
|
20
23
|
/**
|
|
21
24
|
* A tooltip, shown on hover and keyboard focus; a string renders as rich
|
|
22
|
-
* text.
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
+
* text. There is none unless you ask for one — but do consider it here, as
|
|
26
|
+
* a glyph says nothing to whoever cannot guess it. A string doubles as the
|
|
27
|
+
* `ariaLabel` when that is left out, so an icon button usually needs one
|
|
28
|
+
* option, not two. A `key` is appended to the tip, behind a `·`; pass
|
|
29
|
+
* `false` to suppress even that.
|
|
25
30
|
*
|
|
26
31
|
* Works on a disabled button too, which is where a tooltip earns its keep:
|
|
27
32
|
* it is the only room there is to say why.
|
|
@@ -62,7 +67,10 @@ export interface ButtonOptions {
|
|
|
62
67
|
type?: "button" | "submit" | "reset";
|
|
63
68
|
/** Render as a link (`<a role=button>`) pointing here instead of a `<button>`. */
|
|
64
69
|
href?: string;
|
|
65
|
-
/**
|
|
70
|
+
/**
|
|
71
|
+
* Accessible label, when the button has only an icon. A string `tooltip` is
|
|
72
|
+
* taken as the label of such a button when this is left out.
|
|
73
|
+
*/
|
|
66
74
|
ariaLabel?: string;
|
|
67
75
|
/**
|
|
68
76
|
* A keyboard shortcut that presses this button: `"mod+s"`, `"f2"` — see
|
|
@@ -76,9 +84,10 @@ export interface ButtonOptions {
|
|
|
76
84
|
key?: string;
|
|
77
85
|
/**
|
|
78
86
|
* A tooltip, shown on hover and keyboard focus. A string renders as rich
|
|
79
|
-
* text, a function draws its own markup.
|
|
80
|
-
*
|
|
81
|
-
*
|
|
87
|
+
* text, a function draws its own markup. There is none unless you ask for
|
|
88
|
+
* one. A `key` is appended to it, behind a `·`; pass `false` to suppress
|
|
89
|
+
* even that. On an icon-only button, a string tooltip doubles as the
|
|
90
|
+
* `ariaLabel` when that is left out.
|
|
82
91
|
*
|
|
83
92
|
* Works on a disabled button too, which is where a tooltip earns its keep:
|
|
84
93
|
* it is the only room there is to say why.
|
|
@@ -110,7 +119,9 @@ export interface ButtonOptions {
|
|
|
110
119
|
* import { trash2, share2 } from "staffa/icons";
|
|
111
120
|
*
|
|
112
121
|
* $panel.actions = () => {
|
|
113
|
-
*
|
|
122
|
+
* // A string `tooltip` names the button for screen readers too, so one option does.
|
|
123
|
+
* S.iconButton({ icon: share2, tooltip: "Share", click: share });
|
|
124
|
+
* // Named, but silent on hover: `ariaLabel` alone raises no tooltip.
|
|
114
125
|
* S.iconButton({ icon: trash2, ariaLabel: "Delete", click: del, attrs: "fg:$s-danger" });
|
|
115
126
|
* };
|
|
116
127
|
* ```
|
|
@@ -77,22 +77,25 @@ A.insertGlobalCss({
|
|
|
77
77
|
* import { trash2, share2 } from "staffa/icons";
|
|
78
78
|
*
|
|
79
79
|
* $panel.actions = () => {
|
|
80
|
-
*
|
|
80
|
+
* // A string `tooltip` names the button for screen readers too, so one option does.
|
|
81
|
+
* S.iconButton({ icon: share2, tooltip: "Share", click: share });
|
|
82
|
+
* // Named, but silent on hover: `ariaLabel` alone raises no tooltip.
|
|
81
83
|
* S.iconButton({ icon: trash2, ariaLabel: "Delete", click: del, attrs: "fg:$s-danger" });
|
|
82
84
|
* };
|
|
83
85
|
* ```
|
|
84
86
|
*/
|
|
85
87
|
export function iconButton(opts) {
|
|
86
88
|
const tag = opts.href != null ? "a" : "button";
|
|
87
|
-
|
|
88
|
-
//
|
|
89
|
-
|
|
89
|
+
const tip = opts.tooltip === false ? undefined : opts.tooltip;
|
|
90
|
+
// A glyph says nothing on its own, so the button needs a name — and a tooltip
|
|
91
|
+
// written as a string already is one. Said once, it serves both.
|
|
92
|
+
const label = opts.ariaLabel ?? (typeof tip === "string" ? plainText(tip) : undefined);
|
|
90
93
|
A(`${tag}.s-icon-btn`, opts.attrs, () => {
|
|
91
94
|
applyActionBehavior(opts, tip != null);
|
|
92
|
-
A("aria-label=",
|
|
95
|
+
A("aria-label=", label);
|
|
93
96
|
// Before the glyph, so a tooltip the caller adds in there is the later of
|
|
94
97
|
// the two and wins the hover.
|
|
95
|
-
applyTooltipAndKey(
|
|
98
|
+
applyTooltipAndKey(opts.tooltip, opts.key, label, opts.disabled);
|
|
96
99
|
drawSlot(opts.icon);
|
|
97
100
|
});
|
|
98
101
|
}
|
|
@@ -159,25 +162,35 @@ function applyClick(click) {
|
|
|
159
162
|
Promise.resolve(result).then(done, (err) => { done(); throw err; });
|
|
160
163
|
});
|
|
161
164
|
}
|
|
165
|
+
/**
|
|
166
|
+
* A rich-text string as a screen reader should hear it. Same pattern Aberdeen's
|
|
167
|
+
* `rich=` draws with, so a tooltip standing in as the accessible name says the
|
|
168
|
+
* words it shows, and not its own asterisks and brackets.
|
|
169
|
+
*/
|
|
170
|
+
function plainText(rich) {
|
|
171
|
+
return rich.replace(/\*\*(.+?)\*\*|\*(.+?)\*|`(.+?)`|\[(.+?)\]\((.+?)\)/g, (_m, bold, italic, code, link) => bold ?? italic ?? code ?? link);
|
|
172
|
+
}
|
|
162
173
|
/**
|
|
163
174
|
* The tooltip and shortcut plumbing {@link button} and {@link iconButton} share:
|
|
164
175
|
* show the tip, with the key appended — the only place a button can say what its
|
|
165
176
|
* key is without shouting it beside the label — then bind that key and announce
|
|
166
|
-
* it as `aria-keyshortcuts`.
|
|
177
|
+
* it as `aria-keyshortcuts`. A key with no tooltip to join gets a tip of its
|
|
178
|
+
* own, saying the combination and no more.
|
|
167
179
|
*
|
|
168
|
-
* Pressing
|
|
180
|
+
* Pressing the key clicks the element rather than calling `click` directly, so a
|
|
169
181
|
* `type=submit` still submits its form and an `href` still navigates. Call this
|
|
170
182
|
* inside the button's own element scope, whose element it takes and whose life
|
|
171
|
-
* the binding follows.
|
|
183
|
+
* the binding follows. `keyLabel` is how the `?` overview names the shortcut.
|
|
172
184
|
*/
|
|
173
|
-
function applyTooltipAndKey(
|
|
174
|
-
|
|
185
|
+
function applyTooltipAndKey(tooltip, key, keyLabel, disabled) {
|
|
186
|
+
// `false` is a vow of silence: not even a key raises a tip on this one.
|
|
187
|
+
if (tooltip !== false && (tooltip != null || key)) {
|
|
175
188
|
addTooltip({
|
|
176
189
|
tip: () => {
|
|
177
|
-
drawSlot(
|
|
190
|
+
drawSlot(tooltip);
|
|
178
191
|
// A draw function, not a string: a key like `*` is markup to rich text.
|
|
179
192
|
if (key)
|
|
180
|
-
A("#",
|
|
193
|
+
A("#", tooltip == null ? formatKey(key) : ` · ${formatKey(key)}`);
|
|
181
194
|
},
|
|
182
195
|
});
|
|
183
196
|
}
|
|
@@ -187,7 +200,7 @@ function applyTooltipAndKey(tip, key, label, disabled) {
|
|
|
187
200
|
if (key && !disabled) {
|
|
188
201
|
const el = A();
|
|
189
202
|
A("aria-keyshortcuts=", formatKey(key, true));
|
|
190
|
-
bindKey(key,
|
|
203
|
+
bindKey(key, keyLabel, () => el.click());
|
|
191
204
|
}
|
|
192
205
|
}
|
|
193
206
|
/**
|
|
@@ -219,18 +232,19 @@ function applyTooltipAndKey(tip, key, label, disabled) {
|
|
|
219
232
|
export function button(opts = {}) {
|
|
220
233
|
const o = typeof opts === "string" || typeof opts === "function" ? { content: opts } : opts;
|
|
221
234
|
const tag = o.href != null ? "a" : "button";
|
|
222
|
-
|
|
223
|
-
//
|
|
224
|
-
|
|
235
|
+
const tip = o.tooltip === false ? undefined : o.tooltip;
|
|
236
|
+
// Only a button without visible text needs naming, and a string tooltip is a
|
|
237
|
+
// name: on one that has text, an aria-label would *hide* that text from AT.
|
|
238
|
+
const label = o.ariaLabel ?? (o.content == null && typeof tip === "string" ? plainText(tip) : undefined);
|
|
225
239
|
// A bare `.s-s` is a filled `.primary` surface (see theme.ts), so no role
|
|
226
240
|
// detection here: `attrs` just names another role or variant.
|
|
227
241
|
A(`${tag}.s-btn.s-s.shadow`, o.attrs, () => {
|
|
228
242
|
applyActionBehavior(o, tip != null);
|
|
229
|
-
if (
|
|
230
|
-
A("aria-label=",
|
|
243
|
+
if (label)
|
|
244
|
+
A("aria-label=", label);
|
|
231
245
|
// Before the content, so a tooltip the caller adds in there is the later of
|
|
232
246
|
// the two and wins the hover.
|
|
233
|
-
applyTooltipAndKey(
|
|
247
|
+
applyTooltipAndKey(o.tooltip, o.key, typeof o.content === "string" ? o.content : label, o.disabled);
|
|
234
248
|
drawSlot(o.icon);
|
|
235
249
|
drawSlot(o.content);
|
|
236
250
|
});
|
package/dist/staffa.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import B from"aberdeen";var e2=t=>`background: $s-bg linear-gradient(${t}, color-mix(in oklab, $s-bg, white 9%), color-mix(in oklab, $s-bg, black 9%));`,E1=e2("170deg"),T1=e2("180deg"),O1="staffa:darkMode",h2=B.proxy({value:F2()});function F2(){try{let t=localStorage.getItem(O1);if(t==="dark")return!0;if(t==="light")return!1}catch{}}function I2(t){h2.value=t;try{t===void 0?localStorage.removeItem(O1):localStorage.setItem(O1,t?"dark":"light")}catch{}}function p2(t=!1){let a=h2.value;return a===void 0&&!t?B.darkMode():a}B(()=>{p2()?B.insertGlobalCss({":root, .s-s.neutral":"--s-bg:#0e0f12 --s-text:#e9eaec",".s-s.neutral":"--s-bg:#191b1f --s-text:#e9eaec",".s-s.neutral .s-s.neutral":"--s-bg:#23262b"}):B.insertGlobalCss({":root, .s-s.neutral":"--s-bg:#eef0f3 --s-text:#1d1f24",".s-s.neutral, .s-s.neutral":"--s-bg:#ffffff --s-text:#1d1f24",".s-s.neutral .s-s.neutral":"--s-bg:#f6f7f9"})});B.setSpacingCssVars(1.1);B.insertGlobalCss({"*, *::before, *::after":"box-sizing:border-box",html:"text-size-adjust:100%",body:"m:0 p:$3 min-height:100dvh line-height:1.5 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing:antialiased text:$s-text "+E1,a:"color: $s-link-fg; text-decoration:underline text-underline-offset:2px; transition: color 0.12s, filter 0.12s;","a:hover":"filter: brightness(1.15)","input, button, textarea, select, optgroup":"font:inherit color:inherit","input:where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=image],[type=submit],[type=button],[type=reset],[type=hidden])), textarea, select":"background:$s-bg border: 1px solid $s-faint; r:$s-radius-sm padding: 0.45em 0.65em; max-width:100%","input:where([type=checkbox],[type=radio])":"width:1.15em height:1.15em cursor:pointer","input[type=range]":"appearance:none background:transparent cursor:pointer vertical-align:middle","input[type=range]::-webkit-slider-runnable-track":"height:4px r:99px background:$s-faint","input[type=range]::-moz-range-track":"height:4px r:99px background:$s-faint","input[type=range]::-moz-range-progress":"height:4px r:99px background:$s-accent","input[type=range]::-webkit-slider-thumb":"appearance:none width:16px height:16px margin-top:-6px r:50% background:$s-accent","input[type=range]::-moz-range-thumb":"width:16px height:16px border:0 r:50% background:$s-accent","input[type=file]":"cursor:pointer",progress:"appearance:none border:0 height:6px r:99px background:$s-faint overflow:hidden vertical-align:middle","progress::-webkit-progress-bar":"background:$s-faint r:99px","progress::-webkit-progress-value":"background:$s-accent r:99px","progress::-moz-progress-bar":"background:$s-accent r:99px",meter:"vertical-align:middle",fieldset:"border: 1px solid $s-faint; r:$s-radius-sm padding:$2 min-width:0",legend:"padding: 0 $1; font-weight:600","code, kbd, samp, pre":"font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;",code:"background: color-mix(in oklab, $s-text, $s-bg 86%); padding: 0.12em 0.34em; r:4px font-size:0.9em",pre:"background: color-mix(in oklab, $s-text, $s-bg 92%); p:$3 r: $s-radius; overflow:auto","pre code":"background:transparent p:0","img, svg, video, canvas":"max-width:100% h:auto",hr:"border:0 border-top: 1px solid $s-faint;","::placeholder":"color: $s-muted; opacity:1",":focus-visible":"outline: 2px solid $s-focus; outline-offset:2px",small:"color:$s-muted font-size:0.9em","@media (prefers-reduced-motion: reduce)":{"*, *::before, *::after":"transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important;"},":root":"--s-primary:#00a884 --s-danger:#dc5b41 --s-success:#00a884 --s-warning:#ef6b00 --s-link:#3f8cd8 --s-radius-sm:6px --s-radius:12px --s-radius-lg:18px --s-focus: color-mix(in srgb, $s-primary 38%, transparent); --s-gradient: linear-gradient(135deg, color-mix(in oklab, $s-primary, white 16%), color-mix(in oklab, $s-primary, black 14%));",":root, .s-s.neutral":"--s-accent:$s-primary --s-link-fg:$s-link",".s-s:not(.neutral)":"--s-bg:$s-primary border:0 --s-text:#eee --s-accent:#fff --s-link-fg:#eef --s-muted: color-mix(in srgb, #fff 70%, transparent); --s-faint: color-mix(in srgb, #fff 30%, transparent);",".s-s.danger":"--s-bg:$s-danger",".s-s.success":"--s-bg:$s-success",".s-s.warning":"--s-bg:$s-warning",".s-s.link":"--s-bg:$s-link",".s-s.primary":"--s-bg:$s-primary",":root, .s-s":"--s-muted: color-mix(in oklab, $s-text, $s-bg 42%); --s-faint: color-mix(in oklab, $s-text, $s-bg 80%); color:$s-text accent-color:$s-accent scrollbar-width:thin scrollbar-color: $s-faint transparent;",".s-s":E1+" r:$s-radius",":where(.s-s.neutral)":"border: 1px solid $s-faint;",".s-s::-webkit-scrollbar, .s-s ::-webkit-scrollbar":"width:10px height:10px",".s-s::-webkit-scrollbar-track, .s-s ::-webkit-scrollbar-track":"background:transparent",".s-s::-webkit-scrollbar-thumb, .s-s ::-webkit-scrollbar-thumb":"background:$s-faint border-radius:99px border: 2px solid transparent; background-clip:padding-box",".s-s.shadow.neutral:not(.s-btn)":"box-shadow: 0 4px 14px rgba(0,0,0,0.13);",".s-s.extra-shadow.neutral:not(.s-btn)":"box-shadow: 0 18px 50px rgba(0,0,0,0.28);",".s-s.shadow:not(.neutral):not(.tonal):not(.outlined)":"box-shadow: 0 4px 14px color-mix(in srgb, $s-bg 30%, transparent);",".s-s.extra-shadow:not(.neutral):not(.tonal):not(.outlined)":"box-shadow: 0 14px 40px color-mix(in srgb, $s-bg 40%, transparent);",".s-s.no-shadow":"box-shadow: none !important;",".s-s:not(.neutral).tonal, .s-s:not(.neutral).outlined":{"&":"--s-text:$s-bg --s-accent:$s-bg --s-link-fg:$s-bg --s-faint: color-mix(in srgb, $s-bg 30%, transparent); --s-muted: color-mix(in srgb, $s-bg 70%, transparent);",code:"background:transparent padding:0",pre:"background:transparent border: 1px solid $s-faint;"},".s-s:not(.neutral).tonal":"background: color-mix(in srgb, $s-bg 15%, transparent); border: 1px solid $s-faint;",".s-s:not(.neutral).outlined":"background: transparent; border: 1px solid color-mix(in srgb, $s-bg 45%, transparent);",".s-s:not(.neutral) .s-s.tonal, .s-s:not(.neutral) .s-s.outlined":"--s-text:#fff --s-accent:#fff --s-link-fg:#fff "+E1+" border-color: transparent;"});B.insertGlobalCss({".s-preload, .s-preload *, .s-preload *::before, .s-preload *::after":"transition: none !important; animation: none !important;"});if(typeof document<"u"&&typeof requestAnimationFrame=="function"){let t=document.documentElement;t.classList.add("s-preload"),requestAnimationFrame(()=>requestAnimationFrame(()=>t.classList.remove("s-preload")))}B.insertGlobalCss({":disabled, [aria-disabled=true]":"opacity:0.45 filter:saturate(0.6) user-select:none",":disabled, [aria-disabled=true], :disabled *, [aria-disabled=true] *":"pointer-events:none cursor:not-allowed"});var K2="p, ul, ol, dl, blockquote, pre, table, figure, hr, h1, h2, h3, h4, h5, h6";B.insertGlobalCss({[`${K2}`]:{"&":"margin:0","&:not(:first-child)":"margin-top:$3"},"h1, h2, h3, h4, h5, h6":{"&":"line-height:1.15 font-weight:700 text-wrap:balance","&:not(:first-child)":"margin-top:1.4em"},h1:"font-size:2em font-weight:800 letter-spacing:-0.022em",h2:"font-size:1.55em letter-spacing:-0.018em",h3:"font-size:1.3em letter-spacing:-0.011em",h4:"font-size:1.1em",h5:"font-size:0.95em letter-spacing:0.005em",h6:"font-size:0.8em fg:$s-muted text-transform:uppercase letter-spacing:0.07em","ul, ol":{"&":"padding-left:1.5em","> li:not(:first-child), li > &:not(:first-child)":"margin-top:$1"},blockquote:"border-left: 3px solid $s-faint; padding-left: $3; fg: $s-muted",table:"border-collapse:collapse","th, td":"text-align:left padding: $1 $2; border-bottom: 1px solid $s-faint; vertical-align:top",th:"font-weight:600","thead th":"border-bottom: 2px solid $s-faint;",dt:"font-weight:600",dd:"margin-left: 1.5em",figcaption:"fg:$s-muted font-size:0.9em margin-top:$1 text-align:center"});import q1 from"aberdeen";var y1=typeof navigator<"u"&&/mac|iphone|ipad|ipod/i.test(navigator.platform||navigator.userAgent),U2={esc:"escape",space:" "},N2={" ":"Space",escape:"Esc",arrowup:"\u2191",arrowdown:"\u2193",arrowleft:"\u2190",arrowright:"\u2192"},f1=new WeakMap,q=[];function o2(){let t=q1();if(!t)throw new Error("Staffa: claimKeyboard needs a current element");return q.push(t),()=>{let a=q.indexOf(t);a>=0&&q.splice(a,1)}}function d2(t){let[,a,e,h]=/^(mod\+)?(shift\+)?(.*)$/i.exec(t),p=h.toLowerCase();if(p=U2[p]??p,!p||p.length>1&&/[-+]/.test(p))throw new Error(`Staffa: can't parse key "${t}" \u2014 write "k", "f2", "mod+k" or "mod+shift+f2"`);if(e&&p.toUpperCase()===p)throw new Error(`Staffa: "${t}" \u2014 write the shifted character itself ("?", not "shift+/")`);return(a?"mod+":"")+(e?"shift+":"")+p}function W2(t){if(t.altKey||(y1?t.ctrlKey:t.metaKey))return null;let a=t.key.toLowerCase(),e=t.shiftKey&&(a.length>1||t.key.toUpperCase()!==a);return((y1?t.metaKey:t.ctrlKey)?"mod+":"")+(e?"shift+":"")+a}function n2(t,a){if(!(a instanceof HTMLElement))return!1;let e=t.startsWith("mod+"),h=t.replace(/^(mod\+)?(shift\+)?/,"");if(h==="enter"&&a.closest("a[href]")!=null||!e&&(h==="enter"||h===" ")&&a.closest("button, summary, [role=button]")!=null)return!0;let p=a.tagName;return!e&&h!=="escape"&&(p==="INPUT"||p==="TEXTAREA"||p==="SELECT"||a.isContentEditable)}function c2(t,a){let e=q[q.length-1];return a.global===!0||!e||e.contains(t)}function G2(t){for(let a=q.length-1;a>=0;a--)if(q[a].contains(t))return q[a]}function i2(){return q[q.length-1]??document.body}function s2(t){let a=q[q.length-1];return a&&!(t&&a.contains(t))?a:t??document.body}var r2=!1;function X2(t){if(t.defaultPrevented||t.repeat||t.isComposing)return;let a=W2(t),e=t.target instanceof Element?t.target:null;if(!(a==null||n2(a,e)))for(let h=s2(e);h;h=h.parentElement){let p=f1.get(h)?.get(a);if(p&&c2(h,p)){p.press&&(t.preventDefault(),p.press(t));return}}}function l2(t){let a=new Map;for(let e=s2(t);e;e=e.parentElement){let h=f1.get(e);if(h)for(let[p,r]of h)!a.has(p)&&c2(e,r)&&!n2(p,t)&&a.set(p,r)}return[...a]}function E(t,a,e,h="normal"){let p=q1(),r=h==="global"?document.body:h==="local"?p:h==="normal"?(p&&G2(p))??document.body:h;if(!r)throw new Error("Staffa: a local key binding needs a current element");let o=d2(t),d=f1.get(r);d||f1.set(r,d=new Map);let n={description:a,press:e,global:h==="global",prev:d.get(o)};d.set(o,n),r2||(r2=!0,document.addEventListener("keydown",X2)),q1.clean(()=>{let c=d.get(o);if(c===n)n.prev?d.set(o,n.prev):d.delete(o);else for(;c;c=c.prev)if(c.prev===n){c.prev=n.prev;break}})}function D(t,a=!1){let e=d2(t),h=e.startsWith("mod+"),p=h?e.slice(4):e,r=p.startsWith("shift+"),o=r?p.slice(6):p,d=o.length===1?o.toUpperCase():o[0].toUpperCase()+o.slice(1);if(a){let c=o===" "?"Space":r||o.length>1?d:o;return(h?y1?"Meta+":"Control+":"")+(r?"Shift+":"")+c}let n=N2[o]??d;return y1?(r?"\u21E7":"")+(h?"\u2318":"")+n:(h?"Ctrl+":"")+(r?"Shift+":"")+n}import Q from"aberdeen";import D1 from"aberdeen";var g1=640,j2=0;function j(t="s"){return`${t}-${++j2}`}function l(t,...a){t!=null&&(typeof t=="function"?t(...a):D1("rich=",t))}var _2="a[href], button, input, select, textarea, [tabindex]",x2=t=>t instanceof HTMLElement&&!t.hasAttribute("disabled")&&t.getAttribute("aria-disabled")!=="true"&&t.tabIndex>=0&&t.getClientRects().length>0;function R1(t){return[...t.querySelectorAll(_2)].filter(x2)}function p1(t,a){let e=(a?[...t.querySelectorAll(a)].find(x2):void 0)??R1(t)[0];return e?.focus(),e!=null}function F(t){queueMicrotask(()=>D1(t))}var M2=["scroll","resize","transitionstart","animationstart"];function r1(t,a){let e="",h=0,p=0,r=()=>{let d=t instanceof Element?t.getBoundingClientRect():t,n=`${d.left} ${d.top} ${d.bottom} ${d.width}`;n!==e&&(e=n,a(d),p=0),h=++p>30?0:requestAnimationFrame(r)},o=()=>{p=0,h||r()};for(let d of M2)window.addEventListener(d,o,!0);return D1.clean(()=>{cancelAnimationFrame(h);for(let d of M2)window.removeEventListener(d,o,!0)}),r(),()=>{e="",o()}}import f from"aberdeen";import C from"aberdeen";import R from"aberdeen";R.insertGlobalCss({".s-tt-tip":{"&":"position:fixed z-index:500 max-width:20rem w:max-content padding: 0.3em 0.65em; font-size:0.85em line-height:1.4 pointer-events:none"}});var o1=R.proxy(void 0),I=null;function Q2(t,a,e,h){let r=window.innerWidth,o=window.innerHeight,d=0,n=0;return h==="bottom"?(d=t.left+(t.width-a)/2,n=t.bottom+7,n+e>o-8&&(n=t.top-e-7)):h==="left"?(d=t.left-a-7,n=t.top+(t.height-e)/2,d<8&&(d=t.right+7)):h==="right"?(d=t.right+7,n=t.top+(t.height-e)/2,d+a>r-8&&(d=t.left-a-7)):(d=t.left+(t.width-a)/2,n=t.top-e-7,n<8&&(n=t.bottom+7)),{x:Math.max(8,Math.min(d,r-a-8)),y:Math.max(8,Math.min(n,o-e-8))}}function Z1(){I&&clearTimeout(I),I=setTimeout(()=>{o1.value=void 0,I=null},100)}F(()=>{let t=o1.value;if(!t)return;let{opts:a,anchor:e}=t,h=a.placement??"top",p=R("div.s-tt-tip.s-s.neutral.shadow role=tooltip",a.attrs,()=>{R("mouseenter=",()=>{I&&(clearTimeout(I),I=null)}),R("mouseleave=",Z1),l(a.tip)});r1(e,r=>{if(r.bottom<0||r.top>window.innerHeight||r.right<0||r.left>window.innerWidth||e.closest("[inert]")){o1.value=void 0;return}let{x:o,y:d}=Q2(r,p.offsetWidth,p.offsetHeight,h);p.style.left=o+"px",p.style.top=d+"px"})});function i1(t){let a=e=>{I&&(clearTimeout(I),I=null),o1.value={opts:t,anchor:e.currentTarget}};R("mouseenter=",a),R("mouseleave=",Z1),R("focusin=",e=>{e.target.matches?.(":focus-visible")&&a(e)}),R("focusout=",Z1),R.clean(()=>{R.unproxy(o1).value?.opts===t&&(o1.value=void 0)})}C.insertGlobalCss({".s-btn":{"&":"display:inline-flex align-items:center justify-content:center gap:$2 font-weight:450 line-height:1.1 white-space:nowrap cursor:pointer text-decoration:none padding: $m2 $m3; transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s, box-shadow 0.15s, transform 0.08s;","&:focus-visible":"outline: 3px solid $s-focus; outline-offset: 1px;","&:hover:not([aria-disabled=true])":"filter: brightness(1.06)","&.tonal:hover:not([aria-disabled=true]), &.outlined:hover:not([aria-disabled=true])":"background: color-mix(in srgb, $s-bg 24%, transparent);","&.neutral:hover:not([aria-disabled=true])":"filter:none background: color-mix(in srgb, $s-text 8%, $s-bg);","> svg":"width:1.25em height:1.25em","&:active:not(:disabled):not([aria-disabled=true])":"transform: translateY(1px)","&[aria-disabled=true]":"pointer-events:auto cursor:not-allowed","&.small, .small > &":"padding: $m1 $m2; font-size:0.85em border-radius:$s-radius-sm","&.large, .large > &":"font-size:1.4em border-radius:$s-radius-lg"},".s-icon-btn":{"&":"display:inline-flex align-items:center justify-content:center flex-shrink:0 width:2rem height:2rem p:0 border:0 background:transparent cursor:pointer fg:$s-muted r:$s-radius-sm line-height:1 font-size:1rem text-decoration:none transition: color 0.12s, background 0.12s;","> svg":"width:1.25em height:1.25em","&:hover:not(:disabled):not([aria-disabled=true])":"fg:$s-text background: color-mix(in srgb, $s-text 10%, transparent);","&:focus-visible":"outline: 3px solid $s-focus; outline-offset:1px","&[aria-disabled=true]":"pointer-events:auto cursor:not-allowed","&.small, .small > &":"width:1.6rem height:1.6rem font-size:0.8rem","&.large, .large > &":"width:2.4rem height:2.4rem font-size:1.2rem"},".s-btn.s-busy, .s-icon-btn.s-busy, .s-busy .s-btn[type=submit]":"pointer-events:none cursor:progress",".s-btn.s-busy::after, .s-icon-btn.s-busy::after, .s-busy .s-btn[type=submit]::after":"content:'' flex-shrink:0 width:1em height:1em r:50% border: 2px solid currentColor; border-top-color: transparent; animation: s-spin 0.7s linear infinite;",".s-icon-btn.s-busy > svg":"display:none","@keyframes s-spin":{to:"transform: rotate(360deg)"}});function s1(t){let a=t.href!=null?"a":"button",e=t.tooltip===!1?void 0:t.tooltip??t.ariaLabel;C(`${a}.s-icon-btn`,t.attrs,()=>{v2(t,e!=null),C("aria-label=",t.ariaLabel),m2(e,t.key,t.ariaLabel,t.disabled),l(t.icon)})}function v2(t,a=!1){t.href!=null?(C("role=button"),t.disabled?C("aria-disabled=true"):C("href=",t.href)):t.disabled&&a?(C("type=",t.type??"button"),C("aria-disabled=true tabindex=-1"),C("click=",e=>{e.preventDefault(),e.stopPropagation()})):(C("type=",t.type??"button"),t.disabled&&C("disabled=true")),t.click&&!t.disabled&&J2(t.click)}function J2(t){let a=C.proxy({value:!1});C(()=>{a.value&&C(".s-busy aria-busy=true")}),C("click=",e=>{if(a.value)return;let h=t(e);if(!h||typeof h.then!="function")return;a.value=!0;let p=()=>{a.value=!1};Promise.resolve(h).then(p,r=>{throw p(),r})})}function m2(t,a,e,h){if((t!=null||a)&&i1({tip:()=>{l(t),a&&C("#",t==null?D(a):` \xB7 ${D(a)}`)}}),a&&!h){let p=C();C("aria-keyshortcuts=",D(a,!0)),E(a,e,()=>p.click())}}function Z(t={}){let a=typeof t=="string"||typeof t=="function"?{content:t}:t,e=a.href!=null?"a":"button",h=a.tooltip===!1?void 0:a.tooltip??a.ariaLabel;C(`${e}.s-btn.s-s.shadow`,a.attrs,()=>{v2(a,h!=null),a.ariaLabel&&C("aria-label=",a.ariaLabel),m2(h,a.key,typeof a.content=="string"?a.content:a.ariaLabel,a.disabled),l(a.icon),l(a.content)})}import u2 from"aberdeen";u2.insertGlobalCss({".s-bgroup":{"&":"display:inline-flex align-items:stretch","&.s-spaced":"gap:$2 flex-wrap:wrap","&.s-vertical":"flex-direction:column","&.s-attached":"gap:0","&.s-attached:not(.s-vertical) > .s-btn:not(:first-child)":"margin-left:-1px","&.s-attached:not(.s-vertical) > .s-btn:not(:first-child):not(:last-child)":"r:0","&.s-attached:not(.s-vertical) > .s-btn:first-child:not(:last-child)":"border-top-right-radius:0 border-bottom-right-radius:0","&.s-attached:not(.s-vertical) > .s-btn:last-child:not(:first-child)":"border-top-left-radius:0 border-bottom-left-radius:0","&.s-attached.s-vertical > .s-btn:not(:first-child)":"margin-top:-1px","&.s-attached.s-vertical > .s-btn:not(:first-child):not(:last-child)":"r:0","&.s-attached.s-vertical > .s-btn:first-child:not(:last-child)":"border-bottom-left-radius:0 border-bottom-right-radius:0","&.s-attached.s-vertical > .s-btn:last-child:not(:first-child)":"border-top-left-radius:0 border-top-right-radius:0","&.s-attached > .s-btn:hover, &.s-attached > .s-btn:focus-visible":"z-index:1"}});function Y(t={}){let e=`.s-${t.layout??"attached"}${t.vertical?".s-vertical":""}`;u2(`div.s-bgroup${e} role=group`,t.attrs,()=>{if(t.buttons)for(let h of t.buttons)Z(h);l(t.content)})}import t1 from"aberdeen";import P from"aberdeen";P.insertGlobalCss({".s-field":{"&":"display:flex flex-direction:column gap:$1","> label":"font-weight:600 font-size:0.9em fg:$s-text user-select:none"},".s-req":"fg:$s-danger margin-left:2px",".s-help":"font-size:0.82em fg:$s-muted",".s-error":"font-size:0.82em fg:$s-danger",".s-input":{"&":"w:100% background: color-mix(in oklab, $s-bg, $s-text 4%); color:$s-text border: 1px solid $s-faint; r:$s-radius padding: 0.55em 0.7em; transition: border-color 0.15s, box-shadow 0.15s;","&:hover:not(:disabled)":"border-color: color-mix(in oklab, $s-text, $s-bg 55%);","&:focus-visible":"border-color:$s-accent box-shadow: 0 0 0 3px $s-focus; outline:none","&[aria-invalid=true]":"border-color:$s-danger"}});function _(t,a){let e=t.id??j("field"),h=()=>!!t.error;P("div.s-field",t.attrs,()=>{P(()=>{t.label!=null&&P("label for=",e,()=>{l(t.label),t.required&&P("span.s-req aria-hidden=true #*")})}),a(e,h),P(()=>{t.help!=null&&!t.error&&P("div.s-help",()=>l(t.help))}),P(()=>{t.error&&P("div.s-error role=alert #",t.error)})})}function d1(t,a,e,h){P("id=",a),t.name&&P("name=",t.name),P(()=>{t.disabled&&P("disabled=true")}),P(()=>{t.required&&P("aria-required=true")}),P(()=>P("aria-invalid=",e()?"true":"false")),h&&P("bind=",h)}function B1(t={}){_(t,(a,e)=>{t1("input.s-input",t.inputAttrs,()=>{t1("type=",t.type??"text"),t.placeholder!=null&&t1("placeholder=",t.placeholder),t.autocomplete!=null&&t1("autocomplete=",t.autocomplete),t.value!=null&&!t.bind&&t1("value=",t.value),t.input&&t1("input=",t.input),t.change&&t1("change=",t.change),d1(t,a,e,t.bind)})})}f.insertGlobalCss({".s-backdrop":{"&":"position:fixed inset:0 z-index:200 display:block background: rgba(0,0,0,0.55); transition: opacity 0.4s ease-in-out;","&.hidden":"opacity:0 pointer-events:none"},".s-dialog":{"&":"position:fixed z-index:200 top:50% left:50% display:flex flex-direction:column transform:translate(-50%,-50%) min-width:min(20rem,90vw) max-width:min(90vw,44rem) max-height:min(88vh,800px) r: $s-radius-lg; overflow:hidden transition: opacity 0.2s ease-out, transform 0.2s ease-out;","> header":"display:flex align-items:center gap:$2 padding: $2 $3; border:0 border-bottom: 1px solid $s-faint; r:0 font-weight:600 flex-shrink:0","> footer":"display:flex align-items:center justify-content:flex-end gap:$2 padding: $2 $3; border:0 border-top: 1px solid $s-faint; r:0 flex-shrink:0","> div":"p:$3 gap:$3 display:flex flex-direction:column overflow-y:auto flex:1 min-height:0","&.hidden":"opacity:0 pointer-events:none transform: translate(-50%, calc(-50% + 20px)); pointer-events:none"}});var l1=f.proxy({}),Y2=0,y2=f.derive(()=>{let t=Object.keys(l1);if(t.length)return t[t.length-1]});function F1(){return y2.value!=null}F(()=>{f.onEach(l1,({resolve:t,opts:a},e)=>{let h=()=>{delete l1[e]};f.clean(()=>{a.onClose?.(),t()});let p=document.activeElement;f.clean(()=>{p instanceof HTMLElement&&document.contains(p)&&p.focus()});let r=f.derive(()=>y2.value!=e);f("div.s-backdrop create=hidden destroy=hidden .hidden=",r,"click=",()=>{a.allowCancel!==!1&&h()});let o=`s-dialog-title-${e}`,d=f("div.s-dialog.neutral.s-s.extra-shadow role=dialog create=hidden destroy=hidden",a.attrs,()=>{if(!a.keyboardTransparent){let c=f();f.clean(o2()),f("aria-modal=true"),f("keydown=",m=>t0(c,m))}let n=i2();f(()=>{let c=a.allowCancel!==!1;E("esc",c?"Close this dialog":void 0,c?h:()=>{},n)}),f(()=>{a.header!=null&&(f("aria-labelledby=",o),f("header.s-s.neutral id=",o,a.headerAttrs,()=>l(a.header)))}),f("div",a.contentAttrs,()=>{l(a.content,h)}),f(()=>{a.footer!=null&&f("footer.s-s.neutral",a.footerAttrs,()=>l(a.footer))})});requestAnimationFrame(()=>{document.body.contains(d)&&p1(d)})})});function t0(t,a){if(a.key!=="Tab"||a.altKey||a.ctrlKey||a.metaKey)return;let e=R1(t),h=a.shiftKey?e[0]:e[e.length-1];!h||document.activeElement!==h||(a.preventDefault(),(a.shiftKey?e[e.length-1]:e[0]).focus())}function n1(t){let a=++Y2;return t.cancelWithScope!==!1&&f.clean(()=>{delete l1[a]}),new Promise(e=>{l1[a]={resolve:e,opts:t}})}function a0(t,a={}){return n1({header:"Alert",allowCancel:!0,content:e=>{f("p",()=>{f("#",t)}),Y({layout:"spaced",attrs:"align-self:flex-end",content:()=>{Z({content:"OK",click:e})}})},...a})}function e0(t,a={}){return new Promise(e=>{let h=!1;n1({header:"Confirm",allowCancel:!0,content:p=>{f("p",()=>{f("#",t)}),Y({layout:"spaced",attrs:"align-self:flex-end",content:()=>{Z({content:"Cancel",attrs:".neutral",click:p}),Z({content:"OK",click:()=>{h=!0,p()}})}})},...a,onClose:()=>{e(h),a.onClose?.()}})})}function h0(t,a="",e={}){return new Promise(h=>{let p=null;n1({header:"Input",allowCancel:!0,content:r=>{f("p",()=>{f("#",t)});let o=f.proxy({value:a});f("form display:contents",()=>{f("submit=",d=>{d.preventDefault(),p=o.value,r()}),B1({bind:f.ref(o,"value")}),Y({layout:"spaced",attrs:"align-self:flex-end",content:()=>{Z({content:"Cancel",attrs:".neutral",type:"button",click:r}),Z({content:"OK",type:"submit"})}})})},...e,onClose:()=>{h(p),e.onClose?.()}})})}Q.insertGlobalCss({".s-keyhelp":{"&":"display:flex flex-direction:column gap:$1 min-width:14rem","> div":"display:flex align-items:baseline justify-content:space-between gap:$4",kbd:"font-family:inherit font-size:0.85em fg:$s-muted white-space:nowrap border: 1px solid $s-faint; r:$s-radius-sm padding: 0 0.4em;"}});var b1=null;function I1(){if(b1){b1();return}let t=l2(document.activeElement);n1({header:"Keyboard shortcuts",cancelWithScope:!1,keyboardTransparent:!0,onClose:()=>{b1=null},content:a=>{b1=a;let e=h=>{h.repeat||["Control","Shift","Alt","Meta","Escape","?"].includes(h.key)||a()};document.addEventListener("keydown",e,!0),Q.clean(()=>document.removeEventListener("keydown",e,!0)),Q("div.s-keyhelp",()=>{for(let[h,p]of t)p.description!==void 0&&Q("div",()=>{Q("span",()=>l(p.description)),Q("kbd text=",D(h))})})}})}var f2=Q.proxy(!0);function p0(t){f2.value=t}Q(()=>{f2.value&&(E("?",void 0,I1,"global"),E("mod+?","This overview",I1,"global"))});import s from"aberdeen";s.insertGlobalCss({".s-ac":{"> .s-control":"display:flex flex-wrap:wrap align-items:center gap:$1 background: color-mix(in oklab, $s-bg, $s-text 4%); color:$s-text border: 1px solid $s-faint; r:$s-radius padding: 0.3em 0.4em; cursor:text; transition: border-color 0.15s, box-shadow 0.15s;","> .s-control:hover":"border-color: color-mix(in oklab, $s-text, $s-bg 55%);","> .s-control:focus-within":"border-color:$s-accent box-shadow: 0 0 0 3px $s-focus;","&[aria-invalid=true] > .s-control":"border-color:$s-danger",".s-chip":"display:inline-flex align-items:center gap:$1 font-size:0.85em background: color-mix(in oklab, $s-bg, $s-text 10%); border: 1px solid $s-faint; r:$s-radius padding: 0.1em 0.2em 0.1em 0.5em;",".s-chip > button":"cursor:pointer border:0 background:transparent fg:$s-muted font-size:1.1em line-height:1 padding: 0 0.2em; r:4px",".s-chip > button:hover":"fg:$s-text background:$s-faint",input:"flex:1 min-width:6ch border:0 background:transparent color:inherit outline:none padding:0.25em"},".s-ac-menu.s-s":{"&":"position:fixed max-height:15rem overflow-y:auto list-style:none p:$1 margin:0",li:"margin:0",".s-option":"padding: 0.45em 0.6em; r:6px cursor:pointer transition: background 0.1s;",".s-option[aria-selected=true]":"background: color-mix(in srgb, $s-text 10%, transparent);",".s-add":"fg:$s-accent font-style:italic",".s-empty":"padding: 0.45em 0.6em; fg:$s-muted"}});var w1=s.proxy({cur:null});function r0(t,a){t.style.maxHeight="";let p=t.offsetHeight,r=window.innerHeight-a.bottom-4-8,o=a.top-4-8,d=p>r&&o>r;t.style.left=`${a.left}px`,t.style.width=`${a.width}px`,t.style.maxHeight=`${Math.min(p,Math.max(d?o:r,60))}px`,t.style.top=d?"auto":`${a.bottom+4}px`,t.style.bottom=d?`${window.innerHeight-a.top+4}px`:"auto"}F(()=>{let t=w1.cur;if(!t)return;let a,e=s("ul.s-ac-menu.s-s.neutral.shadow role=listbox",`id=${t.id} z-index:${t.zIndex}`,()=>{s("mousedown=",h=>h.preventDefault()),t.draw(),a?.()});a=r1(t.anchor,h=>r0(e,h))});function o0(t){return typeof t=="string"?{value:t,label:t}:{value:t.value,label:t.label??t.value}}function d0(t){let a=j("ac-menu"),e=s.proxy({query:"",open:!1,active:0}),h=()=>(typeof t.options=="function"?t.options():t.options).map(o0),p=()=>{let v=t.bind?.value;return v==null||v===""?[]:Array.isArray(v)?v:[v]},r=v=>h().find(w=>w.value===v)?.label??v;if(!t.multi){let v=t.bind?s.peek(t.bind,"value"):void 0;typeof v=="string"&&v&&(e.query=s.peek(()=>r(v)))}let o=()=>{let v=new Set(p()),w=h();t.multi&&(w=w.filter(A=>!v.has(A.value)));let V=e.query.trim().toLowerCase();return V&&(w=w.filter(A=>A.label.toLowerCase().includes(V))),w},d=(v,w)=>{if(t.multi){let V=Array.isArray(t.bind?.value)?[...t.bind.value]:[];V.includes(v)||V.push(v),t.bind&&(t.bind.value=V),e.query=""}else t.bind&&(t.bind.value=v),e.query=r(v),e.open=!1;e.active=0,w?.focus()},n=v=>{if(!t.bind)return;let w=t.bind.value??[];t.bind.value=w.filter(V=>V!==v)},c,m=()=>{let v=o(),w=e.query.trim(),V=t.allowCustom!==!1&&w!==""&&!v.some(A=>A.label.toLowerCase()===w.toLowerCase());v.forEach((A,g)=>{s("li.s-option role=option",`id=${a}-opt-${g}`,()=>{s(()=>s("aria-selected=",e.active===g?"true":"false")),s("#",A.label),s("click=",()=>d(A.value,c)),s("mousemove=",()=>{e.active=g})})}),V&&s("li.s-option.s-add role=option",()=>{s("#",`Add "${w}"`),s("click=",()=>d(w,c))}),v.length===0&&!V&&s("li.s-empty #No matches")};_(t,(v,w)=>{s("div.s-ac",t.inputAttrs,()=>{s(()=>s("aria-invalid=",w()?"true":"false"));let V=s("div.s-control",()=>{s("click=",()=>c?.focus()),s(()=>{if(t.multi)for(let A of p())s("span.s-chip",()=>{s("span #",s.peek(()=>r(A))),s("button type=button aria-label=",`Remove ${A}`,()=>{s("#\xD7"),s("click=",g=>{g.stopPropagation(),n(A),c?.focus()})})})}),c=s("input type=text role=combobox autocomplete=off",()=>{s("id=",v,`aria-controls=${a} aria-autocomplete=list`),t.placeholder!=null&&s("placeholder=",t.placeholder),t.disabled&&s("disabled=true"),t.required&&s("aria-required=true"),s("bind=",s.ref(e,"query")),s(()=>s("aria-expanded=",e.open?"true":"false")),s(()=>{let g=o()[e.active];s("aria-activedescendant=",e.open&&g?`${a}-opt-${e.active}`:"")}),s("input=",()=>{e.open=!0,e.active=0}),s("focus=",()=>{e.open=!0}),s("blur=",()=>{setTimeout(()=>H(),150)}),s("keydown=",A=>$(A,c))})});s(()=>{if(!e.open)return;let A=V.closest(".s-dialog")?350:150;w1.cur={id:a,anchor:V,zIndex:A,draw:m},s.clean(()=>{w1.cur?.id===a&&(w1.cur=null)})}),s(()=>{if(t.name)if(t.multi)for(let A of p())s("input type=hidden",()=>{s("name=",t.name),s("value=",A)});else s("input type=hidden",()=>{s("name=",t.name),s("value=",p()[0]??"")})})})});function $(v,w){let V=o(),A=V.length-1;if(v.key==="ArrowDown")v.preventDefault(),e.open=!0,e.active=Math.min(A,e.active+1);else if(v.key==="ArrowUp")v.preventDefault(),e.active=Math.max(0,e.active-1);else if(v.key==="Enter"){v.preventDefault();let g=V[e.active];g?d(g.value,w):t.allowCustom!==!1&&e.query.trim()?d(e.query.trim(),w):e.open&&(e.open=!1)}else if(v.key==="Escape")e.open&&(v.preventDefault(),e.open=!1,t.multi||(e.query=r(p()[0]??"")));else if(v.key==="Backspace"&&t.multi&&e.query===""){let g=p();g.length&&n(g[g.length-1])}}function H(){e.open=!1,t.multi?e.query="":t.allowCustom!==!1&&e.query.trim()?d(e.query.trim()):e.query=r(p()[0]??"")}}import a1 from"aberdeen";import n0 from"aberdeen";var M1={size:24,color:"currentColor",strokeWidth:2,cap:"round",join:"round"};function c0(t,a){let e=a.size??M1.size,h=n0('svg.s-icon aria-hidden=true viewBox="0 0 24 24" fill=none',"width=",e,"height=",e,"stroke=",a.color??M1.color,"stroke-width=",a.strokeWidth??M1.strokeWidth,"stroke-linecap=",a.cap??M1.cap,"stroke-linejoin=",a.join??M1.join,a.attrs);h.innerHTML=t}function O(t){return(a={})=>c0(t,a)}var g2=O('<path d="m9 18 6-6-6-6" />');var b2=O('<circle cx="12" cy="12" r="10" />');var w2=O('<path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />');var H2=O('<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />');var H1=O('<path d="M4 5h16" /><path d="M4 12h16" /><path d="M4 19h16" />');var A2=O('<path d="M12 17v5" /><path d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" /><path d="m2 2 20 20" /><path d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" />'),K1=O('<path d="M12 17v5" /><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />');var V2=O('<path d="M22 2 2 22" />');var c1=O('<path d="M18 6 6 18" /><path d="m6 6 12 12" />');a1.insertGlobalCss({".s-box":{"&":"display:flex flex-direction:column overflow:hidden r: $s-radius-lg; position:relative","&:not(:first-child)":"margin-top: $3","> header":"display:flex align-items:center gap:$2 padding: $2 $3; border:0 border-bottom: 1px solid $s-faint; r:0 font-weight:600","> footer":"display:flex align-items:center justify-content:flex-end gap:$2 padding: $2 $3; border:0 border-top: 1px solid $s-faint; r:0","> div":"p:$3 gap:$3","> header > .s-box-close":"margin-left:auto","> .s-box-close":"position:absolute top:$2 right:$2 z-index:1"}});function i0(t={}){let a=typeof t=="string"||typeof t=="function"?{content:t}:t;a1("section.s-box.s-s.neutral.shadow",a.attrs,()=>{a1(()=>{a.header!=null?a1("header.s-s.neutral",a.headerAttrs,()=>{l(a.header),typeof a.close=="function"&&k2(a.close)}):typeof a.close=="function"&&k2(a.close)}),a1("div",a.contentAttrs,()=>{l(a.content)}),a1(()=>{a.footer!=null&&a1("footer.s-s.neutral",a.footerAttrs,()=>l(a.footer))})})}function k2(t){s1({icon:c1,ariaLabel:"Close",click:t,attrs:".s-box-close"})}import U1 from"aberdeen";function s0(t){U1(()=>{let a=t.bind.value;Y({attrs:t.attrs,buttons:Object.entries(t.options).map(([e,h])=>({content:h,ariaLabel:typeof h=="function"?e:void 0,attrs:a===e?".primary":".neutral",click:()=>{t.bind.value=t.allowDeselect&&a===e?void 0:e}}))})}),t.name&&U1(()=>U1("input type=hidden name=",t.name,"value=",t.bind.value??""))}import S from"aberdeen";S.insertGlobalCss({".s-check":{"&":"display:flex flex-direction:column gap:$1","> label":"display:flex align-items:center gap:$2 cursor:pointer user-select:none","> label:has(input:disabled)":"cursor:not-allowed opacity:0.45 filter:saturate(0.6)",input:"cursor:inherit m:0"}});function l0(t={}){let a=t.id??j("check");S("div.s-check",t.attrs,()=>{S("label for=",a,()=>{S("input type=checkbox",t.inputAttrs,()=>{S("id=",a),t.name&&S("name=",t.name),t.checked&&!t.bind&&S("checked=true"),t.change&&S("change=",t.change),S(()=>{t.disabled&&S("disabled=true")}),S(()=>{t.required&&S("aria-required=true")}),t.bind&&S("bind=",t.bind)}),S(()=>{t.label!=null&&l(t.label),t.required&&S("span.s-req aria-hidden=true #*")})}),S(()=>{t.help!=null&&!t.error&&S("div.s-help",()=>l(t.help))}),S(()=>{t.error&&S("div.s-error role=alert #",t.error)})})}import K from"aberdeen";K.insertGlobalCss({".s-form":{"&":"display:flex flex-direction:column gap:$3","&.grid":"display:grid grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap:$3","&.grid > .s-wide, &.grid > footer":"grid-column: 1 / -1;","> footer":"display:flex align-items:center justify-content:flex-end gap:$2 flex-wrap:wrap margin-top:$1"}});function M0(t={}){let a=typeof t=="string"||typeof t=="function"?{content:t}:t,e=K.proxy({value:!1});K("form.s-form",a.attrs,()=>{K(()=>{K(".grid=",a.layout==="grid")}),K(()=>{e.value&&K(".s-busy aria-busy=true")}),K("submit=",h=>{if(h.preventDefault(),a.submit&&!e.value){let p=new FormData(h.target),r={};for(let d of new Set(p.keys())){let n=p.getAll(d);r[d]=n.length===1?n[0]:n}let o=a.submit(r,h);if(o&&typeof o.then=="function"){e.value=!0;let d=()=>{e.value=!1};Promise.resolve(o).then(d,n=>{throw d(),n})}}}),l(a.content),K(()=>{a.actions&&K("footer",a.actionsAttrs,()=>l(a.actions))})})}import x from"aberdeen";import{current as a2}from"aberdeen/route";import y from"aberdeen";import{matchCurrent as u0,current as V1,go as C2}from"aberdeen/route";import z from"aberdeen";import{grow as x0,shrink as v0}from"aberdeen/transitions";z.insertGlobalCss({".s-toasts":"position:fixed bottom:$3 right:$3 z-index:400 display:flex flex-direction:column gap:$2 pointer-events:none max-width:min(90vw,24rem) w:24rem",".s-toast":{"&":"display:flex align-items:flex-start gap:$2 padding: $3; pointer-events:auto position:relative overflow:hidden",".s-toast-body":"display:flex flex-direction:column gap:$1 flex:1 min-width:0",".s-toast-title":"font-weight:700 line-height:1.3",".s-toast-close":"cursor:pointer border:0 background:transparent fg:$s-muted font-size:1.1em line-height:1 padding: 0 0.15em; r:4px flex-shrink:0 align-self:flex-start",".s-toast-close:hover":"fg:$s-text",".s-toast-close:focus-visible":"outline:none box-shadow: 0 0 0 3px $s-focus; fg:$s-text",".s-toast-progress":"position:absolute bottom:0 left:0 right:0 height:2px background:$s-accent width:100%"}});var m0=0,x1=z.proxy({});F(()=>{z.peek(()=>z.isEmpty(x1))&&z.isEmpty(x1)||z("div.s-toasts",()=>{z.onEach(x1,t=>{let{opts:a,id:e}=t,h=a.type==="danger"||a.type==="warning"?"alert":"status",p=a.type==null||a.type==="neutral"?"neutral":a.type,r=a.duration??6e3,o,d=null,n=()=>{clearTimeout(o),d&&(d.style.transition="none",d.style.width="100%",d.offsetWidth,d.style.transition=`width ${r}ms linear`,d.style.width="0%"),o=setTimeout(()=>N1(e),r)},c=()=>{clearTimeout(o),o=void 0,d&&(d.style.transition="none",d.style.width="100%")};z.clean(()=>clearTimeout(o)),z(`div.s-toast.s-s.${p}.extra-shadow aria-live=polite role=${h}`,"create=",x0,"destroy=",v0,a.attrs,()=>{r>0&&(z("mouseenter=",c),z("mouseleave=",n)),z("div.s-toast-body",()=>{z(()=>{a.title!=null&&z("div.s-toast-title",()=>l(a.title))}),z("div.s-toast-msg",()=>l(a.message))}),z(()=>{a.dismissible!==!1&&z("button.s-toast-close type=button aria-label=Dismiss",()=>{z("#\xD7"),z("click=",()=>N1(e))})}),r>0&&(d=z("div.s-toast-progress"))}),r>0&&requestAnimationFrame(n)})})});function N1(t){delete x1[t]}function A1(t){let a=++m0;return x1[a]={id:a,opts:t},()=>N1(a)}y.insertGlobalCss({".s-menu-list":"position:fixed z-index:350 min-width:10rem display:flex flex-direction:column p:$1 r:$s-radius-lg max-width: calc(100vw - 16px); overflow-y:auto max-height:min(80vh,28rem) transition: opacity 0.15s, transform 0.15s, visibility 0s;",".s-menu-list.hidden":"opacity:0 pointer-events:none transform:translateY(-6px) visibility:hidden transition: opacity 0.15s, transform 0.15s, visibility 0.15s;",".s-menu-item":"display:flex align-items:center gap:$2 w:100% scroll-margin:$2 padding: $m2 0; line-height:1.1 r:$s-radius cursor:pointer text-align:left font-weight:450 font-size:0.9em border:0 background:transparent fg:$s-text text-decoration:none transition: color 0.12s, transform 0.12s, text-shadow 0.12s;",".s-menu-item:focus-visible:not([aria-current=page]), .s-menu-item:hover:not([aria-disabled=true]):not([aria-current=page])":"filter:none color: color-mix(in lab, $s-primary 33%, $s-text);",".s-menu-item:focus-visible":"outline-offset:-2px background: color-mix(in srgb, $s-accent 14%, transparent);",".s-menu-item[aria-current=page]":"color:$s-accent filter:none",".s-menu-list .s-menu-item":"padding-inline:$2",".s-menu-item[aria-disabled=true]":"opacity:0.45 cursor:not-allowed pointer-events:none",".s-menu-icon":"flex-shrink:0",".s-menu-list .s-menu-icon":"display:flex",".s-menu-list .s-menu-icon > svg":"width:1.25em height:1.25em","hr.s-menu-sep":"border:0 height:1px margin: $1 0.6rem; background: linear-gradient(to right, transparent, $s-faint 18%, $s-faint 82%, transparent);",".s-menu-key":"margin-left:auto padding-left:$2 font-family:inherit font-size:0.8em opacity:0.55 white-space:nowrap flex-shrink:0","@media (hover: none) and (pointer: coarse)":{".s-menu-key":"display:none"},".s-menu-tt-key":"font-family:inherit font-size:0.85em opacity:0.7 white-space:nowrap",".s-tt-tip hr.s-menu-sep":"margin: 0.35em 0;",".s-menu-chevron":"margin-left:auto flex-shrink:0 display:flex transition: transform 0.15s ease;",".s-menu-key + .s-menu-chevron":"margin-left:0",".s-menu-chevron > svg":"width:1em height:1em",".s-menu-details":{"> summary":"list-style:none","> summary::-webkit-details-marker":"display:none","&::details-content":"interpolate-size:allow-keywords block-size:0 overflow-y:clip transition: block-size 0.15s ease, content-visibility 0.15s allow-discrete;","&[open]::details-content":"block-size:auto","&[open] > summary .s-menu-chevron":"transform:rotate(90deg)"},".s-menu-sub":"display:flex flex-direction:column gap:$1 padding-left:$3",".s-menu-inline":"display:flex flex-direction:column gap:$1"});function v1(t,a,e){y("keydown=",h=>{if(h.key==="Enter"&&!h.ctrlKey&&!h.metaKey&&!h.shiftKey&&!h.altKey&&h.target.tagName==="A"){queueMicrotask(()=>a?.());return}if(h.key!=="ArrowDown"&&h.key!=="ArrowUp"&&h.key!=="Home"&&h.key!=="End")return;h.preventDefault();let r=[...h.currentTarget.querySelectorAll(".s-menu-item")].filter(c=>c.getAttribute("aria-disabled")!=="true"&&!g0(c));if(!r.length)return;let o=r.indexOf(document.activeElement),d=h.key==="ArrowUp"?-1:1,n=h.key==="Home"?0:h.key==="End"?r.length-1:o<0?d>0?0:r.length-1:(o+d+r.length)%r.length;r[n].focus()}),z2(t,{onLeafSelect:a,keyHints:e,$hasCurrent:y.derive(()=>W1(t))})}function z2(t,a){for(let e of t){if(typeof e=="string"||typeof e=="function"){l(e);continue}if("separator"in e){y("hr.s-menu-sep");continue}e.items?f0(e,a):y0(e,a)}}function y0(t,a){let e=!1,h=y(t.href?"a.s-menu-item data-panel=open":"button.s-menu-item type=button",t.attrs,()=>{t.href&&(y("href=",t.href),t.target&&y("target=",t.target),y(()=>{let p=!e;e=!0,G1(t)&&(y("aria-current=page"),requestAnimationFrame(()=>h.scrollIntoView({block:"nearest",behavior:p?"instant":"smooth"})))})),t.disabled&&y("aria-disabled=true"),t.key&&y("aria-keyshortcuts=",D(t.key,!0)),y("click=",p=>{if(t.disabled){p.preventDefault();return}a.onLeafSelect?.(),t.click?.(p)}),t.icon&&y("span.s-menu-icon",()=>l(t.icon)),l(t.label),P2(t,a)})}var $2=new Map;function L2(t,a){return $2.set(t,a),a}function f0(t,a){let e=t.href??S2(t.items),h=e!=null?y.derive(()=>X1(t)?L2(e,!0):a.$hasCurrent.value?L2(e,!1):$2.get(e)??!1):null;y("details.s-menu-details",()=>{h&&y(()=>{h.value&&y("open=true")}),y("summary.s-menu-item.s-menu-branch",t.attrs,()=>{t.disabled&&y("aria-disabled=true"),t.key&&y("aria-keyshortcuts=",D(t.key,!0)),y(()=>{G1(t)&&y("aria-current=page")}),y("click=",p=>{if(t.disabled){p.preventDefault();return}e!=null&&(p.preventDefault(),w0(e),C2(e)),t.click?.(p)}),t.icon&&y("span.s-menu-icon",()=>l(t.icon)),l(t.label),P2(t,a),y("span.s-menu-chevron aria-hidden=true",()=>g2())}),y("div.s-menu-sub",()=>z2(t.items,a))})}function g0(t){for(let a=t.closest("details");a;a=a.parentElement&&a.parentElement.closest("details"))if(!a.open&&t.closest("summary")?.parentElement!==a)return!0;return!1}function W1(t){return t.some(a=>typeof a!="string"&&typeof a!="function"&&!("separator"in a)&&X1(a))}function G1(t){if(t.href!=null&&u0(t.href))return!0;let a=t.match;if(a==null)return!1;let e=V1.path;if(typeof a=="function")return a(e);let h=a.replace(/\/+$/,"")||"/";return e===h||e.startsWith(h==="/"?"/":h+"/")}function X1(t){if(G1(t))return!0;for(let a of t.items??[])if(!(typeof a=="string"||typeof a=="function"||"separator"in a)&&X1(a))return!0;return!1}function S2(t){for(let a of t){if(typeof a=="string"||typeof a=="function"||"separator"in a)continue;let e=a.href??(a.items?S2(a.items):void 0);if(e!=null)return e}}function P2(t,a){let e=a.keyHints?void 0:t.key;t.key&&!e&&y("kbd.s-menu-key aria-hidden=true text=",D(t.key)),!(t.tooltip==null&&!e)&&i1({placement:"right",tip:()=>{l(t.tooltip),e&&(t.tooltip!=null&&y("hr.s-menu-sep"),y("kbd.s-menu-tt-key aria-hidden=true text=",D(e)))}})}function m1(t,a){y(()=>{for(let e of E2(t(),[]))E(e.key,e.label,h=>{O2(),a?.(),e.click?.(h),e.href!=null&&b0(e.href,e.target)})})}function E2(t,a){for(let e of t)typeof e=="string"||typeof e=="function"||"separator"in e||(e.key&&!e.disabled&&a.push(e),e.items&&E2(e.items,a));return a}function b0(t,a){let e=new URL(t,location.href);a?window.open(e.href,a,a==="_blank"?"noopener":""):e.origin!==location.origin?location.href=e.href:C2(t)}var k1=null;function w0(t){try{k1=new URL(t,location.href).pathname.replace(/\/+$/,"")||"/"}catch{k1=null}}function j1(t){return k1!==t?!1:(k1=null,!0)}var J=y.proxy({opts:null});function X(){let t=J.opts?.anchor;J.opts=null,t?.focus()}function L1(t){let a=J.opts;return a!=null&&(t==null||a.anchor===t)}function O2(t){L1(t)&&X()}function H0(t,a){let e=t.offsetWidth,h=t.offsetHeight,p=window.innerWidth,r=window.innerHeight,o=4,d=a.left;d+e>p-8&&(d=Math.max(8,a.right-e));let n=a.bottom+o;n+h>r-8&&a.top-h-o>=8&&(n=a.top-h-o),t.style.left=Math.max(8,d)+"px",t.style.top=Math.max(8,n)+"px"}function A0(t){return[{label:"Open in new tab",icon:w2,click:()=>{window.open(t,"_blank","noopener")}},{label:"Copy link",icon:H2,click:()=>{V0(t)}}]}async function V0(t){let a=new URL(t,location.href).href;try{await navigator.clipboard.writeText(a),A1({message:"Link copied."})}catch{A1({message:"Couldn't copy the link.",type:"danger"})}}F(()=>{let t=J.opts;if(!t)return;let a=y("div.s-menu-list.s-s.neutral.shadow create=hidden destroy=hidden",t.dropdownAttrs,()=>{v1(t.link!=null?[...A0(t.link),{separator:!0},...t.items]:t.items,X,!0)}),e=r=>{let o=r.target;!a.contains(o)&&(t.closeOnAnchorClick||!t.anchor.contains(o))&&X()},h=r=>{(r.key==="Escape"||r.key==="Tab")&&(r.preventDefault(),X())},p=y.peek(V1,"path");y(()=>{V1.path!==p&&!j1(V1.path)&&X()}),document.addEventListener("click",e,!0),document.addEventListener("keydown",h,!0),y.clean(()=>{document.removeEventListener("click",e,!0),document.removeEventListener("keydown",h,!0)}),r1(t.at?new DOMRect(t.at.x,t.at.y,0,0):t.anchor,r=>H0(a,r)),requestAnimationFrame(()=>{document.body.contains(a)&&p1(a,".s-menu-item[aria-current=page]")})});function k0(t){y("nav.s-menu-inline",t.attrs,()=>{m1(()=>t.items,()=>t.onLeafSelect?.()),v1(t.items,t.onLeafSelect)})}function _1(t){return J.opts=t,X}function Q1(t){m1(()=>t.items);let a=null;y.clean(()=>{J.opts?.anchor===a&&X()}),y("contextmenu=",e=>{e.preventDefault(),a=e.currentTarget,_1({...t,anchor:a,at:{x:e.clientX,y:e.clientY},closeOnAnchorClick:!0})})}function L0(t){m1(()=>t.items);let a=null;y.clean(()=>{J.opts?.anchor===a&&X()}),Z({icon:H1,...t.button?.content==null?{ariaLabel:"Open menu"}:null,attrs:".neutral",...t.button,click:e=>{if(a=e.currentTarget,J.opts?.anchor===a){X();return}_1({items:t.items,anchor:a,dropdownAttrs:t.dropdownAttrs})}})}import i,{OPAQUE as q2}from"aberdeen";import*as b from"aberdeen/route";import L from"aberdeen";var C0=O('<path d="m15 18-6-6 6-6"/>'),z0=O('<path d="m9 18 6-6-6-6"/>');L.insertGlobalCss({".s-strip":{"&":"position:relative display:flex min-width:0","> .s-strip-row":"display:flex align-items:center flex:1 min-width:0 overflow-x:auto overflow-y:hidden scrollbar-width:none scroll-behavior:smooth","> .s-strip-row::-webkit-scrollbar":"display:none","> .s-strip-btn":"position:absolute top:0 bottom:0 z-index:1 display:none align-items:center justify-content:center width:2.4em border:0 padding:0 cursor:pointer fg:$s-muted transition: color 0.15s;","> .s-strip-btn:hover":"fg:$s-text","> .s-strip-btn-left":"left:0 justify-content:flex-start background: linear-gradient(to right, $s-bg 45%, transparent)","> .s-strip-btn-right":"right:0 justify-content:flex-end background: linear-gradient(to left, $s-bg 45%, transparent)","&.s-can-left > .s-strip-btn-left, &.s-can-right > .s-strip-btn-right":"display:flex"},".s-tabs":{"&":"display:flex flex-direction:column gap:$3",".s-tabbar":"border-bottom: 1px solid $s-faint;",".s-tablist":"gap:$1 align-items:stretch margin-bottom:-1px",".s-tab":"display:inline-flex align-items:center gap:$2 cursor:pointer background:transparent border:0 color: $s-muted; font-weight:600 padding: 0.6em 0.9em; white-space:nowrap border-bottom: 3px solid transparent; transition: color 0.15s, background 0.15s, border-color 0.15s;",".s-tab:hover:not(:disabled), .s-tab[aria-selected=true]":"color: $s-text;",".s-tab:focus-visible":"outline:none box-shadow: inset 0 0 0 2px $s-focus; r: $s-radius;",".s-tab[aria-selected=true]":"border-image: $s-gradient 1;",".s-tabpanel":"display:block"}});function C1(t){L("div.s-strip",t.attrs,()=>{let a=L("div.s-strip-row",t.stripAttrs,()=>l(t.content));T2(a,-1),T2(a,1),S0(a)})}function z1(t){let a=t.parentElement;if(!a||!t.isConnected)return;let e=parseFloat(getComputedStyle(a).fontSize)*2.6,h=t.getBoundingClientRect(),p=a.getBoundingClientRect(),r=h.left-p.left,o=h.right-p.right;r<e?a.scrollBy({left:r-e,behavior:"smooth"}):o>-e&&a.scrollBy({left:o+e,behavior:"smooth"})}function $0(t){let a=j("tabs"),e=(r,o)=>r.id??String(o),h=t.bind??L.proxy(e(t.tabs[0]??{label:""},0));t.tabs.length>0&&!t.tabs.some((r,o)=>e(r,o)===L.peek(()=>h.value))&&(h.value=e(t.tabs[0],0));let p=(r,o)=>{r.disabled||(h.value=e(r,o))};L("div.s-tabs",t.attrs,()=>{C1({attrs:".s-tabbar",stripAttrs:".s-tablist role=tablist",content:()=>{t.tabs.forEach((r,o)=>{let d=e(r,o),n=L("button.s-tab type=button role=tab",()=>{L("id=",`${a}-tab-${d}`,"aria-controls=",`${a}-panel-${d}`),L(()=>{let c=h.value===d;L("aria-selected=",c?"true":"false"),L("tabindex=",c?"0":"-1"),c&&requestAnimationFrame(()=>z1(n))}),r.disabled&&L("disabled=true"),L("click=",()=>p(r,o)),L("keydown=",c=>P0(c,t.tabs,o,p)),l(r.icon),l(r.label)})})}}),L("div.s-tabpanel role=tabpanel",t.contentAttrs,()=>{L(()=>{let r=h.value,o=t.tabs.findIndex((n,c)=>e(n,c)===r),d=t.tabs[o]??t.tabs[0];d&&(L("id=",`${a}-panel-${e(d,o)}`,"aria-labelledby=",`${a}-tab-${e(d,o)}`),l(d.content))})})})}function T2(t,a){L(`button.s-strip-btn.s-strip-btn-${a<0?"left":"right"} type=button`,()=>{L("tabindex=-1 aria-hidden=true"),L("click=",()=>t.scrollBy({left:a*t.clientWidth*.8,behavior:"smooth"})),(a<0?C0:z0)({size:"1.1em"})})}function S0(t){let a=t.parentElement;if(!a||typeof ResizeObserver>"u")return;let e=()=>{let r=t.scrollWidth-t.clientWidth;a.classList.toggle("s-can-left",t.scrollLeft>1),a.classList.toggle("s-can-right",t.scrollLeft<r-1)};t.addEventListener("scroll",e,{passive:!0});let h=new ResizeObserver(e);h.observe(t);let p=typeof MutationObserver>"u"?void 0:new MutationObserver(r=>{for(let o of r){for(let d of o.addedNodes)d instanceof Element&&h.observe(d);for(let d of o.removedNodes)d instanceof Element&&h.unobserve(d)}e()});p?.observe(t,{childList:!0});for(let r of Array.from(t.children))h.observe(r);e(),L.clean(()=>{t.removeEventListener("scroll",e),h.disconnect(),p?.disconnect()})}function P0(t,a,e,h){let p=e;if(t.key==="ArrowRight"||t.key==="ArrowDown")p=(e+1)%a.length;else if(t.key==="ArrowLeft"||t.key==="ArrowUp")p=(e-1+a.length)%a.length;else if(t.key==="Home")p=0;else if(t.key==="End")p=a.length-1;else return;t.preventDefault();let r=p>=e?1:-1;for(let o=0;o<a.length;o++){let d=a[p];if(d&&!d.disabled){h(d,p),t.currentTarget?.parentElement?.children[p]?.focus();return}p=(p+r+a.length)%a.length}}var t2={integer(t){if(!/^(0|-?[1-9]\d*)$/.test(t))return;let a=Number(t);return Number.isSafeInteger(a)?a:void 0}};function U(t){let a=String(t).replace(/\/+$/,"");return a.startsWith("/")||(a=`/${a}`),a}function u1(t){let a=U(t);return a==="/"?[]:a.slice(1).split("/")}function D2(t){let a=u1(t),e=a.map((h,p)=>{if(!h.startsWith("[")||!h.endsWith("]"))return{kind:"lit",value:h};let r=/^\[\.\.\.([A-Za-z_$][\w$]*)\]$/.exec(h);if(r){if(p!==a.length-1)throw new Error(`Staffa: "${h}" must be the last segment of route "${t}"`);return{kind:"rest",name:r[1]}}let o=/^\[([A-Za-z_$][\w$]*)(?:=([A-Za-z_$][\w$]*))?\]$/.exec(h);if(!o)throw new Error(`Staffa: malformed param "${h}" in route "${t}"`);let[,d,n]=o;if(n&&!(n in t2))throw new Error(`Staffa: unknown matcher "${n}" in route "${t}" (known: ${Object.keys(t2).join(", ")})`);return{kind:"param",name:d,matcher:n}});return{key:t,segs:e}}function E0(t){try{return decodeURIComponent(t)}catch{return t}}function J1(t,a){let e={};for(let h=0;h<t.segs.length;h++){let p=t.segs[h];if(p.kind==="rest")return h>=a.length?null:(e[p.name]=a.slice(h).join("/"),e);if(h>=a.length)return null;let r=a[h];if(p.kind==="lit"){if(r!==p.value)return null}else if(p.matcher){let o=t2[p.matcher](r);if(o===void 0)return null;e[p.name]=o}else e[p.name]=E0(r)}return t.segs.length===a.length?e:null}var N=250,O0=300,T0=360,$1=540;i.insertGlobalCss({":root":`--s-panel-ms:${N}ms`,".s-panels":"flex:1 min-width:0 min-height:0 position:relative overflow:clip isolation:isolate "+T1,".s-panel":{"&":"position:absolute top:0 bottom:0 left:0 display:flex flex-direction:column "+T1+` z-index:2 transition: transform ${N}ms ease-out, opacity ${N}ms linear;`,"&.s-panel-sep::before":"content:'' position:absolute left:0 top:0.6rem bottom:0.6rem width:1px z-index:1 background: linear-gradient(to bottom, transparent, $s-faint 18%, $s-faint 82%, transparent);","&.s-panel-new":"z-index:1","&.s-panel-closing":"z-index:0 opacity:0 pointer-events:none","&.s-panel-enter":"opacity:0","&.s-panel-hidden, &.s-panel-parked":"visibility:hidden"},".s-panel > .s-content":"flex:1 min-height:0 overflow-y:auto overflow-x:hidden p:$3",".s-panel-actions":"display:flex align-items:center justify-content:flex-end gap:$1 flex-shrink:0 padding: $3 $3 0;",".s-crumbs > .s-strip-row":"gap:$m1",".s-crumb":{"&":"flex: 1 0 4rem; font-size:0.85em line-height:1.5 fg:$s-muted text-decoration:none white-space:nowrap max-width:max-content overflow:hidden text-overflow:ellipsis transition: color 0.12s;","&.s-crumb-on":"font-weight:600 fg:$s-text","a&:hover":"filter:none color: color-mix(in lab, $s-primary 33%, $s-text);","svg.s-crumb-pin":"vertical-align:-0.12em margin-right:0.3em opacity:0.8 fill:currentColor","svg.s-crumb-unsaved":"vertical-align:0.08em margin-right:0.3em fill:currentColor"},"svg.s-crumb-sep":"flex-shrink:0 opacity:0.4",".s-main.s-shell-snap .s-panel":"transition:none",".s-panel-loading":{"&":"position:absolute inset:0 display:flex align-items:center justify-content:center gap:$1 pointer-events:none",i:"width:0.5rem height:0.5rem r:50% background:$s-muted opacity:0.45 animation: s-panel-pulse 1s ease-in-out infinite;","i:nth-child(2)":"animation-delay:0.15s","i:nth-child(3)":"animation-delay:0.3s"},"@keyframes s-panel-pulse":{"0%, 100%":"opacity:0.25 transform:scale(0.8)","50%":"opacity:0.7 transform:scale(1)"}});var Y1=!1,S1=class{[q2]=!0;compiled;ancestors;opts;$state=i.proxy({live:[],focus:0});$open=i.proxy({});nextOrder=0;containerEl;geom;lastGeom;layoutQueued=!1;timers=new Set;exiting=new Set;intent=null;settling=null;lastSeen=null;queued=null;constructor(a){if(Y1)throw new Error("Staffa: only one routed S.main() (one with `routes`) can be active at a time");Y1=!0,this.opts=a,this.compiled=Object.entries(a.routes).map(([e,h])=>({...D2(e),draw:h})),this.ancestors=Object.entries(a.ancestors??{}).filter(e=>e[1]!=null).map(([e,h])=>({...D2(e),fn:h})),i(()=>{let e=this.computeTarget(),h={...b.current.search},p=b.current.hash;i.peek(()=>{let r=this.lastSeen;if(r&&r.path!==b.current.path){let o=this.$state.live.find(d=>d.path===r.path);o&&(o.search=r.search,o.hash=r.hash)}this.lastSeen={path:b.current.path,search:h,hash:p},this.propose(e),Array.isArray(b.current.state.panels)||Object.assign(b.current.state,this.stateFor({stack:this.paths(),focus:this.$state.focus}))})}),this.interceptLinks(),this.watchTitle(),this.guardTabClose(),i.clean(()=>{for(let e of this.timers)clearTimeout(e);this.timers.clear(),this.queued?.settle(!1),this.queued=null,Y1=!1})}resolve(a){let e=u1(a);for(let h of this.compiled){let p=J1(h,e);if(p)return{draw:h.draw,params:p}}return{draw:this.opts.notFound??R0,params:{}}}matches(a){let e=u1(a);return this.compiled.some(h=>J1(h,e)!=null)}deriveStack(a){let e=U(a),h=this.askAncestors(e),p=h?h.map(U):this.prefixesOf(e),r=[];for(let o of p)o!==e&&!r.includes(o)&&this.matches(o)&&r.push(o);return r.push(e),r}askAncestors(a){let e=u1(a);for(let h of this.ancestors){let p=J1(h,e);if(p)return h.fn(p,a)??void 0}}prefixesOf(a){let e=u1(a),h=[];for(let p=1;p<e.length;p++)h.push("/"+e.slice(0,p).join("/"));return h}pinnedIn(a,e){return a.filter(h=>e.includes(h)?!1:this.$state.live.find(p=>p.path===h)?.$panel.pinned===!0)}unsavedAt(a){return this.$state.live.find(e=>e.path===a)?.$panel.unsaved===!0}targetFor(a,e){let h=Array.isArray(e?.panels)?e.panels.map(String):null;if(h){let p=Array.isArray(e.parked)?e.parked.map(String):[],r=U(a),o=new Set([r]),d=c=>c.map(U).filter(m=>!o.has(m)&&!!o.add(m)),n=d(h);return{stack:[...n,r,...d(p)],focus:n.length}}return i.peek(()=>{let p=this.deriveStack(a).slice(0,-1),r=[...p,...this.pinnedIn(this.paths(),[...p,U(a)]),U(a)];return{stack:r,focus:r.length-1}})}computeTarget(){return this.targetFor(b.current.path,b.current.state)}paths(){return this.$state.live.map(a=>a.path)}propose(a){let e=this.$state.live.filter(h=>!a.stack.includes(h.path)&&h.$panel.unsaved).map(h=>h.path);e.length&&(a={stack:[...a.stack,...e],focus:a.focus}),!(R2(this.paths(),a.stack)&&a.focus===this.$state.focus)&&this.commit(a,b.current.nav)}commit(a,e){this.geom=void 0;let h=b.current.state.pinned,p=new Set(Array.isArray(h)?h.map(String):[]),r=new Map(this.$state.live.map(n=>[n.path,n])),o=[];for(let n of a.stack){let c=r.get(n);if(c){r.delete(n),o.push(c);continue}let m=this.createEntry(n,o.length<=a.focus,p.has(n));e!=="load"&&(m.enter=!0),o.push(m),this.$open[n]=m}let d;for(let n of this.$state.live)r.has(n.path)?this.beginClose(n,d):d=n.path;this.$state.live=o,this.$state.focus=Math.min(a.focus,o.length-1),this.scheduleLayout()}createEntry(a,e,h){let{draw:p,params:r}=this.resolve(a),o={[q2]:!0,order:this.nextOrder++,path:a,draw:p,$ui:i.proxy({holding:!1}),maxWidth:"medium",width:0};return o.$panel=i.proxy({stack:this,params:r,path:a,width:0,visible:e,pinned:h||void 0,close:()=>this.closePath(o.path),open:(d,n)=>this.navigate(d,{from:o.path,how:n})}),o}beginClose(a,e){a.closing=!0,a.anchor=e,a.$panel.visible=!1,delete this.$open[a.path]}playExit(a,e){if(!a.closing){e.remove();return}e.classList.add("s-panel-closing"),e.setAttribute("inert","");let h=a.placed?{el:e,anchor:a.anchor,ride:0}:null;h&&this.exiting.add(h),this.afterTransition(e,"opacity",()=>{h&&this.exiting.delete(h),e.remove()})}afterTransition(a,e,h){let p=!1,r=setTimeout(()=>d(),N+80);this.timers.add(r);let o=()=>{clearTimeout(r),this.timers.delete(r)},d=()=>{o(),p||(p=!0,h())},n=c=>m=>{m.target===a&&m.propertyName===e&&c()};a.addEventListener("transitionrun",n(o)),a.addEventListener("transitionend",n(d)),a.addEventListener("transitioncancel",n(d))}intended(){return this.intent??{stack:this.paths(),focus:this.$state.focus}}stateFor(a){return{panels:a.stack.slice(0,a.focus),parked:a.stack.slice(a.focus+1),pinned:this.pinnedPaths()}}pinnedPaths(){return this.$state.live.filter(a=>a.$panel.pinned).map(a=>a.path)}issue(a,e){return this.intent=a,this.settling?(this.queued?.settle(!1),new Promise(h=>{this.queued={run:e,settle:h}})):this.start(e)}start(a){let e=p=>{this.settling=null;let r=this.queued;return this.queued=null,p&&r?this.start(r.run).then(r.settle,()=>r.settle(!1)):(this.intent=null,r?.settle(!1)),p},h=Promise.resolve(a()).then(e,p=>(console.error(p),e(!1)));return this.settling=h,h}focusAt(a){let e=this.intended();if(a<0||a>=e.stack.length||a===e.focus)return Promise.resolve(!1);let h={stack:e.stack,focus:a},p=e.stack[a];return this.issue(h,()=>{let r=this.$state.live.find(o=>o.path===p);return b.go({path:p,search:r?.search,hash:r?.hash,state:this.stateFor(h)})})}back(){return i.peek(()=>{let a=this.intended();return a.focus===a.stack.length-1&&!this.unsavedAt(a.stack[a.focus])?this.closePath(a.stack[a.focus]??""):a.focus===0?Promise.resolve(!1):this.focusAt(a.focus-1)})}closePath(a){return i.peek(()=>{let e=this.intended(),h=e.stack.indexOf(U(a));if(h<0||e.stack.length<2||this.unsavedAt(e.stack[h]))return Promise.resolve(!1);let p=e.stack.filter((c,m)=>m!==h),r=h===e.focus?Math.max(0,h-1):e.focus-(h<e.focus?1:0),o={stack:p,focus:r};if(h===e.focus&&h===e.stack.length-1){let c=this.$state.live.find(H=>H.path===p[r]),m={};c?.search&&(m.search=c.search),c?.hash&&(m.hash=c.hash);let $=p.filter(H=>this.$state.live.find(v=>v.path===H)?.$panel.pinned===!0);return this.issue(o,()=>Promise.resolve(b.back({path:p[r],state:{panels:p.slice(0,r),parked:[]}},m)).then(H=>(H&&(b.current.state.pinned=$),H)))}let d=p[r],n=d!==e.stack[e.focus];return this.issue(o,()=>{let c=n?this.$state.live.find(m=>m.path===d):void 0;return b.go({path:d,search:n?c?.search:{...b.current.search},hash:n?c?.hash:b.current.hash,state:this.stateFor(o)})})})}navigate(a,{from:e,how:h,beneath:p}={}){let r=h??this.opts.linkNavigation,o=r==="open"?null:e??null,d=r==="replace";return i.peek(()=>{let n;try{n=new URL(a,location.href)}catch{return Promise.resolve(!1)}let c=U(n.pathname),m=this.intended(),$=p?-1:m.stack.indexOf(c),H;if($>=0&&r!=="replace"&&r!=="open"){let g=this.pinnedIn(m.stack.slice($+1),[]);H={stack:[...m.stack.slice(0,$+1),...g],focus:$}}else{let g=o==null?-1:m.stack.indexOf(o),M=(p?p.map(U):g<0?this.deriveStack(c).slice(0,-1):m.stack.slice(0,d?g:g+1)).filter((k,G,h1)=>k!==c&&h1.indexOf(k)===G),u=[...M,...this.pinnedIn(m.stack,[...M,c,d?o:null])];H={stack:[...u,c],focus:u.length}}let v=$>=0?this.$state.live.find(g=>g.path===c):void 0,w=n.search?Object.fromEntries(new URLSearchParams(n.search)):v?.search??{},V=n.hash||v?.hash||"";if(H.focus===m.focus&&R2(H.stack,m.stack)&&n.search===location.search&&(n.hash||"")===(location.hash||""))return Promise.resolve(!0);let A=this.stateFor(H);return d?this.issue(H,()=>(b.current.path=c,b.current.search=w,b.current.hash=V,b.current.state=A,i.runQueue(),b.current.path===c)):this.issue(H,()=>b.go({path:c,search:w,hash:V,state:A}))})}pushPath(a,e){return i.peek(()=>{let h=this.intended();return this.navigate(a,{from:h.stack[h.focus],how:e?"replace":"push"})})}interceptLinks(){b.interceptLinks((a,e,h)=>{if(h instanceof KeyboardEvent&&(h.ctrlKey||h.metaKey||h.shiftKey||h.altKey))return!1;let p=e.getAttribute("data-panel")??void 0,r=e.closest(".s-panel"),o=r?this.$state.live.find(d=>d.el===r):e.closest(".s-panel-origin")?this.$state.live[this.$state.focus]:void 0;return this.navigate(a.href,{from:o?.path,how:p}),!0})}get currentPanel(){return this.$state.live[this.$state.focus]?.$panel}get panels(){return this.$state.live.map(a=>a.$panel)}get currentPanelIndex(){return this.$state.focus}pushPanel(a){return this.pushPath(a,!1)}replacePanel(a){return this.pushPath(a,!0)}openPanelStack(a,e){return this.navigate(a,{how:"open",beneath:e})}closePanel(a){return i.peek(()=>{let e=this.intended();return this.closePath(a??e.stack[e.focus]??"")})}setColumns(a){this.opts.columns!==a&&(this.opts.columns=a,this.scheduleLayout())}setLinkNavigation(a){this.opts.linkNavigation=a}drawCrumbs(){C1({attrs:".s-crumbs role=navigation aria-label=Breadcrumbs",content:()=>{i(()=>{let a=this.panels.map(p=>p.path),e=this.currentPanelIndex,h;for(let p=0;p<a.length;p++){p&&V2({size:"0.85em",attrs:".s-crumb-sep"});let r=this.drawCrumb(a[p],p,p===e);p===e&&(h=r)}requestAnimationFrame(()=>{h&&z1(h)})})}})}drawCrumb(a,e,h){let p=this.$state.live[e];return i(h?"span.s-crumb aria-current=page":"a.s-crumb",()=>{h||i("href=",a),i(()=>{p?.$panel.visible&&i(".s-crumb-on")}),i(()=>{p?.$panel.unsaved&&b2({size:"0.45em",attrs:".s-crumb-unsaved"})}),i(()=>{p?.$panel.pinned&&K1({size:"0.85em",attrs:".s-crumb-pin"})}),i(()=>{i("#",p?.$panel.title??p?.$ui.fallback??(a.split("/").pop()||a))}),Q1({link:a,items:[{label:()=>{i(()=>{i("#",p?.$panel.pinned?"Unpin":"Pin")})},icon:()=>{i(()=>{(p?.$panel.pinned?A2:K1)()})},click:()=>{p&&this.togglePin(p)}},{label:"Close",icon:c1,disabled:p?.$panel.unsaved===!0,click:()=>{this.closePath(a)}}]})})}togglePin(a){a.$panel.pinned=!a.$panel.pinned||void 0,b.current.state.pinned=this.pinnedPaths()}watchTitle(){let a=document.title;i(()=>{let e=this.$state.live[this.$state.focus],h=e?.$panel.title??e?.$ui.fallback,p=typeof this.opts.title=="string"?this.opts.title:void 0,r=this.$state.live.some(d=>d.$panel.unsaved),o=h&&p?`${h} \xB7 ${p}`:h||p;o&&(document.title=(r?"\u2022 ":"")+o)}),i.clean(()=>{document.title=a})}guardTabClose(){if(typeof window>"u")return;let a=e=>{let h=this.$state.live.find(p=>p.$panel.unsaved);h&&(e.preventDefault(),e.returnValue=!0,this.flushLayout(),h.$panel.visible||this.focusAt(this.intended().stack.indexOf(h.path)))};i(()=>{this.$state.live.some(e=>e.$panel.unsaved)&&(window.addEventListener("beforeunload",a),i.clean(()=>window.removeEventListener("beforeunload",a)))})}drawColumns(){let a=i("div.s-panels role=main",()=>{this.containerEl=i(),i.onEach(this.$open,e=>this.drawPanel(e),e=>e.order)});if(typeof ResizeObserver<"u"){let e=new ResizeObserver(()=>this.layout());e.observe(a),i.clean(()=>e.disconnect())}i.clean(()=>{this.containerEl===a&&(this.containerEl=void 0)}),this.scheduleLayout()}drawPanel(a){let e;i(()=>{let h=a.$panel.maxWidth;a.maxWidth=h==="small"||h==="large"||h==="none"?h:"medium";let p=this.roomFor(a.maxWidth);p&&(a.width=p,i.peek(a.$panel,"width")!==p&&(a.$panel.width=p),e&&(e.style.width=`${p}px`,this.scheduleLayout()))}),e=i(`section.s-panel${a.width?` w:${a.width}px`:""}`,"destroy=",h=>this.playExit(a,h),()=>{i(()=>this.drawActions(a)),i("div.s-content",()=>{if(a.draw(a.$panel),b.persistScroll(a.path),i.peek(a.$panel,"title")==null){let h=D0(i());h&&i.peek(a.$ui,"fallback")!==h&&(a.$ui.fallback=h)}}),i(()=>{!a.$panel.loading||a.$ui.holding||i("div.s-panel-loading aria-hidden=true",()=>{i("i"),i("i"),i("i")})})}),a.el=e,a.placed=!1,e.style.transition="none",i.clean(()=>{a.el===e&&(a.el=void 0)}),i(()=>{a.$panel.loading,this.scheduleLayout()}),this.scheduleLayout()}drawActions(a){this.opts.$shell.narrow||a.$panel.actions==null||i("div.s-panel-actions",()=>l(a.$panel.actions))}scheduleLayout(){this.layoutQueued||(this.layoutQueued=!0,requestAnimationFrame(()=>this.flushLayout()))}flushLayout(){this.layoutQueued&&(this.layoutQueued=!1,this.layout())}measure(){let a=this.containerEl,e=a?a.getBoundingClientRect().width:0;if(!e)return;let h=Math.ceil(e/$1),p=e/h>=T0?e/h:Math.min(e,$1),r=o=>Math.min(o*p,e);return{area:e,size:{small:p,medium:r(2),large:r(3),none:e}}}geometry(){return this.geom??=this.measure()}roomFor(a){return this.geometry()?.size[a]??0}layout(){let a=this.containerEl,e=a?.closest(".s-main");if(!a||!e)return;let h=this.$state.live,p=h.length;if(!p||h.some(M=>!M.el))return;this.geom=void 0;let r=this.geometry();if(!r)return;let o=this.opts.columns==="single",d=this.lastGeom?.area!==r.area;d&&(this.lastGeom=r,e.classList.add("s-shell-snap"));let n=M=>r.size[M.maxWidth],c=Math.min(this.$state.focus,p-1),m=c,$=n(h[c]);if(!o)for(let M=c-1;M>=0;M--){let u=$+n(h[M]);if(u>r.area)break;$=u,m=M}let H=m>0?0:(r.area-$)/2;for(let M=m;M<=c;M++)h[M].width=n(h[M]);for(let M of h)M.width||(M.width=n(M));let v=[],w=[],V=new Map,A=new Map;if(!d)for(let M of h)M.placed&&A.set(M,q0(M.el));let g=H,e1=0;for(let M=0;M<m;M++)g-=h[M].width;for(let M=0;M<p;M++){let u=h[M],k=u.el,G=M>=m&&M<=c;M===c+1&&(g=Math.max(g,r.area)),(u.enter||!u.placed)&&(!u.$panel.loading||u.holdDone?u.$ui.holding=!1:u.$ui.holding||(u.$ui.holding=!0,this.holdEnter(u))),u.placed?(e1=parseFloat(k.style.left)-g,V.set(u.path,e1),e1&&!d&&(k.style.transition=`opacity ${N}ms linear`,k.style.transform=`translateX(${(A.get(u)??0)+e1}px)`,w.push(k)),k.style.left=`${g}px`,u.enter&&!u.$ui.holding&&this.releaseEnter(u)):(v.push(u),k.style.left=`${g}px`,u.enter&&G&&(k.style.transform=`translateX(${e1}px)`,k.classList.add("s-panel-enter","s-panel-new"))),k.style.width=`${u.width}px`,g+=u.width,u.$panel.visible!==G&&(u.$panel.visible=G),u.$panel.width!==u.width&&(u.$panel.width=u.width),k.classList.toggle("s-panel-sep",G&&M>m);let h1=M<m,B2=k.classList.contains("s-panel-hidden")||k.classList.contains("s-panel-parked");G?k.classList.remove("s-panel-hidden","s-panel-parked"):B2||!u.placed||d?(k.classList.toggle("s-panel-hidden",h1),k.classList.toggle("s-panel-parked",!h1)):this.afterTransition(k,"transform",()=>{u.el!==k||!u.offstage||(k.classList.toggle("s-panel-hidden",h1),k.classList.toggle("s-panel-parked",!h1))}),u.offstage=!G,k.toggleAttribute("inert",!G)}for(let M of this.exiting){let u=M.anchor==null?void 0:V.get(M.anchor);u&&(M.ride-=u,M.el.style.transform=`translateX(${M.ride}px)`)}(v.length||w.length||d)&&a.offsetWidth,d&&e.classList.remove("s-shell-snap");for(let M of w)M.style.transition="",M.style.transform="";for(let M of v){let u=M.el;u.style.transition="",u.style.transform="",M.placed=!0,M.$ui.holding||this.releaseEnter(M)}}releaseEnter(a){a.enter=!1;let e=a.el;!e||!e.classList.contains("s-panel-enter")||(e.classList.remove("s-panel-enter"),this.afterTransition(e,"opacity",()=>e.classList.remove("s-panel-new")))}holdEnter(a){let e=setTimeout(()=>{this.timers.delete(e),a.holdDone=!0,a.$ui.holding&&(a.$ui.holding=!1,this.scheduleLayout())},O0);this.timers.add(e)}};function R2(t,a){return t.length===a.length&&t.every((e,h)=>e===a[h])}function q0(t){let a=getComputedStyle(t).transform;return a&&a!=="none"?new DOMMatrixReadOnly(a).m41:0}function D0(t){let a=document.createTreeWalker(t,NodeFilter.SHOW_TEXT);for(let e=a.nextNode();e;e=a.nextNode()){let h=e.textContent.trim();if(h)return h.length>48?`${h.slice(0,47).trimEnd()}\u2026`:h}}function R0(t){i("p fg:$s-muted",()=>i("#",`No panel at ${t.path}`))}var Z0=200;x.insertGlobalCss({".s-main":{"&":"display:flex flex-direction:column min-height:100vh max-height:100vh container-type:inline-size","body > &":"margin: calc(-1 * $3)","> header":"border:0 border-bottom: 1px solid $s-faint; r:0 position:sticky top:0 z-index:10","> footer":"border-top: 1px solid $s-faint; fg:$s-muted","> header > .s-bar, > footer > .s-bar":"display:flex align-items:center width:100% margin-inline:auto gap:$3 padding: $2 $3;","> header .s-logo, > header .s-nav-trigger":"display:flex align-items:center flex-shrink:0","> header .s-nav-trigger":"margin-left:-0.375rem","> header .s-logo":"font-size:1.4em background: $s-gradient; -webkit-background-clip:text; background-clip:text; color:transparent;","> header .s-titles":"display:flex flex-direction:column min-width:5rem flex: 0 1 auto;","> header .s-subtitle":"fg:$s-muted font-size:0.85em line-height:1.5 overflow:hidden text-overflow:ellipsis white-space:nowrap","> header .s-title":"font-weight:800 font-size:1.1em line-height:1.2 overflow:hidden text-overflow:ellipsis white-space:nowrap letter-spacing:-0.01em background: $s-gradient; -webkit-background-clip:text; background-clip:text; color:transparent; width:fit-content max-width:100%","> header a.s-logo, > header a.s-title":"text-decoration:none filter:none cursor:pointer","> header .s-menu":"display:flex align-items:center justify-content:flex-end gap:$2 flex: 1 1 auto;",".s-body":"flex:1 overflow:clip display:flex flex-direction:row min-height:0 justify-content:center position:relative",".s-body-inner":"flex:1 min-width:0 display:flex flex-direction:row min-height:0","&.s-nav-right .s-body-inner":"flex-direction:row-reverse",".s-nav-sep":"width:1px flex-shrink:0 align-self:stretch margin: 0.6rem 0; border:0 background: linear-gradient(to bottom, transparent, $s-faint 18%, $s-faint 82%, transparent);",".s-body main":`flex:1 min-width:0 min-height:0 overflow-x:hidden overflow-y:auto display:flex flex-direction:column transition: transform ${N}ms ease;`,".s-body main.s-slide-in":"transform: translateX(100%); transition:none",".s-body main > .s-content":"width:100% flex:1 p:$3",".s-body main.s-scroll-y":"margin-right:$3"},".s-nav-panel":{"&":"display:flex flex-direction:column overflow-y:auto flex-shrink:0 width: calc(var(--s-nav-w) - 1px); padding:$3 gap:$1"},".s-nav-page":{"&":`position:absolute inset:0 z-index:5 display:flex flex-direction:column overflow-y:auto overscroll-behavior:contain border:0 r:0 padding:$2 gap:$1 transition: transform ${N}ms ease, visibility 0s;`,"&.s-nav-page-off":`transform:translateX(-100%) pointer-events:none visibility:hidden transition: transform ${N}ms ease, visibility 0s ${N}ms;`,".s-menu-item":"padding: $2 $3; min-height:3rem font-size:1.05em gap:$3"},[`@container (max-width: ${g1}px)`]:{".s-main .s-nav-panel, .s-main .s-nav-sep":"display:none",".s-main > header > .s-bar":"gap:$1 padding: $1 $2;",".s-main .s-body main.s-scroll-y":"margin-right:0"},[`@container (max-width: ${$1}px)`]:{".s-content > .s-box":"margin-inline: calc(-1 * $3); r:0 border-inline:0"}});function B0(t={}){let a=t.nav,e=t.navPosition??"left",h=x.proxy({open:!1}),p=x.proxy({narrow:typeof document<"u"&&document.documentElement.clientWidth<=g1}),r=t.routes;if(r!=null&&t.content!=null)throw new Error("Staffa: S.main() takes either `content` or `routes`, not both");let o=r?new S1({routes:r,notFound:t.notFound,ancestors:t.ancestors,title:t.title,$shell:p}):null;o&&(x(()=>o.setColumns(t.columns)),x(()=>o.setLinkNavigation(t.linkNavigation)));let d=o&&t.home!==null?t.home??"/":null,n=()=>{t.maxWidth!=null&&x("max-width:",t.maxWidth)},c=x("div.s-main",t.attrs,()=>{x(()=>{a==null||!a.items.length?x("--s-nav-w: 0px"):x(`.s-nav-${e}`,`--s-nav-w: ${t.navWidth??Z0}px`)}),x(()=>{(o!=null||t.title!=null||t.subtitle!=null||t.logo!=null||t.menu!=null||a!=null&&a.items.length>0)&&x("header.s-s.neutral",t.topbarAttrs,()=>{x("div.s-bar",()=>{x(n),x(()=>{if(p.narrow&&a!=null&&a.items.length){x("div.s-nav-trigger",()=>N0(a,h));return}t.logo!=null&&x(d!=null?"a.s-logo aria-label=Home":"div.s-logo",()=>{d!=null&&x("href=",d),l(t.logo)})}),x("div.s-titles",()=>{x(()=>{t.title!=null&&x(d!=null?"a.s-title":"div.s-title",()=>{d!=null&&x("href=",d),l(t.title)})}),I0(t,o,a,p)}),x(()=>{let $=p.narrow?o?.currentPanel?.actions:void 0,H=$??t.menu;H!=null&&x(`div.s-menu${$!=null?".s-panel-origin":""}`,()=>l(H))})})})}),x("div.s-body",()=>{x("div.s-body-inner",()=>{x(n),x(()=>{a==null||!a.items.length||(x(`nav.s-nav-panel.s-nav-${e}`,t.navAttrs,()=>{v1(a.items)}),x("div.s-nav-sep aria-hidden=true"))}),X0(t,o)}),x(()=>{a!=null&&a.items.length&&h.open&&W0(a,t.navPageAttrs,h,p)})}),x(()=>{t.footer!=null&&x("footer",()=>{x("div.s-bar",()=>{x(n),l(t.footer)})})})});return U0(c,p),a!=null&&m1(()=>a.items,()=>{h.open=!1}),(a!=null||o)&&x(()=>{let m=H=>()=>{F1()||L1()||H()},$=()=>c.querySelector(".s-nav-trigger button");h.open?E("Esc","Close the navigation",m(()=>{h.open=!1,$()?.focus()}),"global"):o&&o.currentPanelIndex>0?E("Esc","Back to the previous panel",m(()=>{o.back()}),"global"):E("Esc","Jump to the navigation",m(()=>{let H=c.querySelector(".s-nav-panel");H?.offsetParent!=null?(H.querySelector("[aria-current=page]")??H.querySelector(".s-menu-item:not([aria-disabled=true])"))?.focus():$()?.click()}),"global")}),o??void 0}var P1=null;function F0(){P1?.()}function I0(t,a,e,h){x(()=>{if(t.subtitle!=null&&(a==null||K0(a,e,h))){x("div.s-subtitle",()=>l(t.subtitle));return}a?.drawCrumbs()})}function K0(t,a,e){return e.narrow||a==null||t.panels.length>1?!1:W1(a.items)}function U0(t,a){if(typeof ResizeObserver>"u")return;let e=new ResizeObserver(h=>{let p=h[0]?.contentBoxSize?.[0],r=p?p.inlineSize:h[0]?.contentRect.width;r!=null&&(a.narrow=r<=g1)});e.observe(t),x.clean(()=>e.disconnect())}function N0(t,a){s1({icon:t.button?.icon??(()=>x(()=>(a.open?c1:H1)())),ariaLabel:t.button?.ariaLabel??"Open navigation",attrs:t.button?.attrs,click:()=>{a.open=!a.open}})}function W0(t,a,e,h){let p=!1,r=()=>{p=!0,e.open=!1},o=x("nav.s-nav-page.s-s.neutral aria-label=Navigation create=s-nav-page-off destroy=s-nav-page-off",a,()=>v1(t.items,r));P1=r,x.clean(()=>{P1===r&&(P1=null)});let d=x.peek(a2,"path");x(()=>{a2.path!==d&&!j1(a2.path)&&r()});let n=o.closest(".s-main"),c=o.parentElement?.querySelector(":scope > .s-body-inner"),m=c?.querySelector(":scope > main");c?.setAttribute("inert",""),x(()=>{h.narrow||(e.open=!1)}),x.clean(()=>{c?.removeAttribute("inert"),p&&(m&&G0(m),n?.querySelector(".s-nav-trigger button")?.focus())}),requestAnimationFrame(()=>{document.body.contains(o)&&p1(o,".s-menu-item[aria-current=page]")})}function G0(t){t.classList.add("s-slide-in"),t.offsetWidth,t.classList.remove("s-slide-in")}function X0(t,a){if(a){a.drawColumns();return}let e=x("main",()=>{x("div.s-content",t.contentAttrs,()=>{l(t.content)})});j0(e)}function j0(t){if(typeof ResizeObserver>"u")return;let a=()=>t.classList.toggle("s-scroll-y",t.offsetWidth>t.clientWidth),e=new ResizeObserver(a);e.observe(t),t.firstElementChild&&e.observe(t.firstElementChild),a(),x.clean(()=>e.disconnect())}import T from"aberdeen";T.insertGlobalCss({".s-select_wrap":{"&":"position:relative display:block",select:"w:100% cursor:pointer padding-right:2.2em; appearance:none","&::after":"content: '\u25BE'; position:absolute right:0.7em top:50%; transform: translateY(-50%); pointer-events:none fg:$s-muted font-size:0.85em"}});function _0(t){_(t,(a,e)=>{T("div.s-select_wrap",()=>{T("select.s-input",t.inputAttrs,()=>{d1(t,a,e),T("change=",h=>{t.bind&&(t.bind.value=h.target.value)}),T(()=>{let h=typeof t.options=="function"?t.options():t.options,p=t.bind?.value??"";t.placeholder!=null&&T("option",()=>{T("value= disabled=true hidden=true"),p||T("selected=true"),T("#",t.placeholder)});for(let r of h){let o=typeof r=="string"?{value:r,label:r}:{value:r.value,label:r.label??r.value};T("option",()=>{T("value=",o.value),o.value===p&&T("selected=true"),T("#",o.label)})}})})})})}import W from"aberdeen";W.insertGlobalCss({"textarea.s-input":"resize:vertical min-height:3em line-height:1.45","textarea.s-input.s-autoGrow":"resize:none min-height:2.5em overflow-y:hidden"});function Q0(t={}){let a=t.autoGrow!==!1;_(t,(e,h)=>{let p=W("textarea.s-input",t.inputAttrs,()=>{a?(W(".s-autoGrow"),W("input=",r=>{Z2(r.currentTarget),t.input&&t.input(r)})):(W("rows=",t.rows??4),W("resize:",t.resize??"vertical"),t.input&&W("input=",t.input)),t.placeholder!=null&&W("placeholder=",t.placeholder),t.value!=null&&!t.bind&&W("value=",t.value),t.change&&W("change=",t.change),d1(t,e,h,t.bind)});a&&requestAnimationFrame(()=>Z2(p))})}function Z2(t){t.style.height="auto",t.style.height=`${t.scrollHeight}px`}export{Q1 as addContextMenu,i1 as addTooltip,a0 as alert,d0 as autocomplete,E as bindKey,i0 as box,Z as button,s0 as buttonChooser,Y as buttonGroup,l0 as checkbox,O2 as closeFloatingMenu,F0 as closeNav,e0 as confirm,n1 as dialog,M0 as form,D as formatKey,p2 as getDarkMode,s1 as iconButton,F1 as isDialogOpen,L1 as isFloatingMenuOpen,B0 as main,k0 as menu,L0 as menuButton,h0 as prompt,z1 as revealInStrip,C1 as scrollStrip,_0 as select,I2 as setDarkMode,p0 as setKeyHelp,_1 as showFloatingMenu,I1 as showKeyHelp,$0 as tabs,Q0 as textarea,B1 as textline,A1 as toast};
|
|
1
|
+
import B from"aberdeen";var e2=t=>`background: $s-bg linear-gradient(${t}, color-mix(in oklab, $s-bg, white 9%), color-mix(in oklab, $s-bg, black 9%));`,E1=e2("170deg"),T1=e2("180deg"),O1="staffa:darkMode",h2=B.proxy({value:I2()});function I2(){try{let t=localStorage.getItem(O1);if(t==="dark")return!0;if(t==="light")return!1}catch{}}function K2(t){h2.value=t;try{t===void 0?localStorage.removeItem(O1):localStorage.setItem(O1,t?"dark":"light")}catch{}}function p2(t=!1){let a=h2.value;return a===void 0&&!t?B.darkMode():a}B(()=>{p2()?B.insertGlobalCss({":root, .s-s.neutral":"--s-bg:#0e0f12 --s-text:#e9eaec",".s-s.neutral":"--s-bg:#191b1f --s-text:#e9eaec",".s-s.neutral .s-s.neutral":"--s-bg:#23262b"}):B.insertGlobalCss({":root, .s-s.neutral":"--s-bg:#eef0f3 --s-text:#1d1f24",".s-s.neutral, .s-s.neutral":"--s-bg:#ffffff --s-text:#1d1f24",".s-s.neutral .s-s.neutral":"--s-bg:#f6f7f9"})});B.setSpacingCssVars(1.1);B.insertGlobalCss({"*, *::before, *::after":"box-sizing:border-box",html:"text-size-adjust:100%",body:"m:0 p:$3 min-height:100dvh line-height:1.5 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing:antialiased text:$s-text "+E1,a:"color: $s-link-fg; text-decoration:underline text-underline-offset:2px; transition: color 0.12s, filter 0.12s;","a:hover":"filter: brightness(1.15)","input, button, textarea, select, optgroup":"font:inherit color:inherit","input:where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=image],[type=submit],[type=button],[type=reset],[type=hidden])), textarea, select":"background:$s-bg border: 1px solid $s-faint; r:$s-radius-sm padding: 0.45em 0.65em; max-width:100%","input:where([type=checkbox],[type=radio])":"width:1.15em height:1.15em cursor:pointer","input[type=range]":"appearance:none background:transparent cursor:pointer vertical-align:middle","input[type=range]::-webkit-slider-runnable-track":"height:4px r:99px background:$s-faint","input[type=range]::-moz-range-track":"height:4px r:99px background:$s-faint","input[type=range]::-moz-range-progress":"height:4px r:99px background:$s-accent","input[type=range]::-webkit-slider-thumb":"appearance:none width:16px height:16px margin-top:-6px r:50% background:$s-accent","input[type=range]::-moz-range-thumb":"width:16px height:16px border:0 r:50% background:$s-accent","input[type=file]":"cursor:pointer",progress:"appearance:none border:0 height:6px r:99px background:$s-faint overflow:hidden vertical-align:middle","progress::-webkit-progress-bar":"background:$s-faint r:99px","progress::-webkit-progress-value":"background:$s-accent r:99px","progress::-moz-progress-bar":"background:$s-accent r:99px",meter:"vertical-align:middle",fieldset:"border: 1px solid $s-faint; r:$s-radius-sm padding:$2 min-width:0",legend:"padding: 0 $1; font-weight:600","code, kbd, samp, pre":"font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;",code:"background: color-mix(in oklab, $s-text, $s-bg 86%); padding: 0.12em 0.34em; r:4px font-size:0.9em",pre:"background: color-mix(in oklab, $s-text, $s-bg 92%); p:$3 r: $s-radius; overflow:auto","pre code":"background:transparent p:0","img, svg, video, canvas":"max-width:100% h:auto",hr:"border:0 border-top: 1px solid $s-faint;","::placeholder":"color: $s-muted; opacity:1",":focus-visible":"outline: 2px solid $s-focus; outline-offset:2px",small:"color:$s-muted font-size:0.9em","@media (prefers-reduced-motion: reduce)":{"*, *::before, *::after":"transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important;"},":root":"--s-primary:#00a884 --s-danger:#dc5b41 --s-success:#00a884 --s-warning:#ef6b00 --s-link:#3f8cd8 --s-radius-sm:6px --s-radius:12px --s-radius-lg:18px --s-focus: color-mix(in srgb, $s-primary 38%, transparent); --s-gradient: linear-gradient(135deg, color-mix(in oklab, $s-primary, white 16%), color-mix(in oklab, $s-primary, black 14%));",":root, .s-s.neutral":"--s-accent:$s-primary --s-link-fg:$s-link",".s-s:not(.neutral)":"--s-bg:$s-primary border:0 --s-text:#eee --s-accent:#fff --s-link-fg:#eef --s-muted: color-mix(in srgb, #fff 70%, transparent); --s-faint: color-mix(in srgb, #fff 30%, transparent);",".s-s.danger":"--s-bg:$s-danger",".s-s.success":"--s-bg:$s-success",".s-s.warning":"--s-bg:$s-warning",".s-s.link":"--s-bg:$s-link",".s-s.primary":"--s-bg:$s-primary",":root, .s-s":"--s-muted: color-mix(in oklab, $s-text, $s-bg 42%); --s-faint: color-mix(in oklab, $s-text, $s-bg 80%); color:$s-text accent-color:$s-accent scrollbar-width:thin scrollbar-color: $s-faint transparent;",".s-s":E1+" r:$s-radius",":where(.s-s.neutral)":"border: 1px solid $s-faint;",".s-s::-webkit-scrollbar, .s-s ::-webkit-scrollbar":"width:10px height:10px",".s-s::-webkit-scrollbar-track, .s-s ::-webkit-scrollbar-track":"background:transparent",".s-s::-webkit-scrollbar-thumb, .s-s ::-webkit-scrollbar-thumb":"background:$s-faint border-radius:99px border: 2px solid transparent; background-clip:padding-box",".s-s.shadow.neutral:not(.s-btn)":"box-shadow: 0 4px 14px rgba(0,0,0,0.13);",".s-s.extra-shadow.neutral:not(.s-btn)":"box-shadow: 0 18px 50px rgba(0,0,0,0.28);",".s-s.shadow:not(.neutral):not(.tonal):not(.outlined)":"box-shadow: 0 4px 14px color-mix(in srgb, $s-bg 30%, transparent);",".s-s.extra-shadow:not(.neutral):not(.tonal):not(.outlined)":"box-shadow: 0 14px 40px color-mix(in srgb, $s-bg 40%, transparent);",".s-s.no-shadow":"box-shadow: none !important;",".s-s:not(.neutral).tonal, .s-s:not(.neutral).outlined":{"&":"--s-text:$s-bg --s-accent:$s-bg --s-link-fg:$s-bg --s-faint: color-mix(in srgb, $s-bg 30%, transparent); --s-muted: color-mix(in srgb, $s-bg 70%, transparent);",code:"background:transparent padding:0",pre:"background:transparent border: 1px solid $s-faint;"},".s-s:not(.neutral).tonal":"background: color-mix(in srgb, $s-bg 15%, transparent); border: 1px solid $s-faint;",".s-s:not(.neutral).outlined":"background: transparent; border: 1px solid color-mix(in srgb, $s-bg 45%, transparent);",".s-s:not(.neutral) .s-s.tonal, .s-s:not(.neutral) .s-s.outlined":"--s-text:#fff --s-accent:#fff --s-link-fg:#fff "+E1+" border-color: transparent;"});B.insertGlobalCss({".s-preload, .s-preload *, .s-preload *::before, .s-preload *::after":"transition: none !important; animation: none !important;"});if(typeof document<"u"&&typeof requestAnimationFrame=="function"){let t=document.documentElement;t.classList.add("s-preload"),requestAnimationFrame(()=>requestAnimationFrame(()=>t.classList.remove("s-preload")))}B.insertGlobalCss({":disabled, [aria-disabled=true]":"opacity:0.45 filter:saturate(0.6) user-select:none",":disabled, [aria-disabled=true], :disabled *, [aria-disabled=true] *":"pointer-events:none cursor:not-allowed"});var U2="p, ul, ol, dl, blockquote, pre, table, figure, hr, h1, h2, h3, h4, h5, h6";B.insertGlobalCss({[`${U2}`]:{"&":"margin:0","&:not(:first-child)":"margin-top:$3"},"h1, h2, h3, h4, h5, h6":{"&":"line-height:1.15 font-weight:700 text-wrap:balance","&:not(:first-child)":"margin-top:1.4em"},h1:"font-size:2em font-weight:800 letter-spacing:-0.022em",h2:"font-size:1.55em letter-spacing:-0.018em",h3:"font-size:1.3em letter-spacing:-0.011em",h4:"font-size:1.1em",h5:"font-size:0.95em letter-spacing:0.005em",h6:"font-size:0.8em fg:$s-muted text-transform:uppercase letter-spacing:0.07em","ul, ol":{"&":"padding-left:1.5em","> li:not(:first-child), li > &:not(:first-child)":"margin-top:$1"},blockquote:"border-left: 3px solid $s-faint; padding-left: $3; fg: $s-muted",table:"border-collapse:collapse","th, td":"text-align:left padding: $1 $2; border-bottom: 1px solid $s-faint; vertical-align:top",th:"font-weight:600","thead th":"border-bottom: 2px solid $s-faint;",dt:"font-weight:600",dd:"margin-left: 1.5em",figcaption:"fg:$s-muted font-size:0.9em margin-top:$1 text-align:center"});import q1 from"aberdeen";var y1=typeof navigator<"u"&&/mac|iphone|ipad|ipod/i.test(navigator.platform||navigator.userAgent),N2={esc:"escape",space:" "},W2={" ":"Space",escape:"Esc",arrowup:"\u2191",arrowdown:"\u2193",arrowleft:"\u2190",arrowright:"\u2192"},f1=new WeakMap,q=[];function o2(){let t=q1();if(!t)throw new Error("Staffa: claimKeyboard needs a current element");return q.push(t),()=>{let a=q.indexOf(t);a>=0&&q.splice(a,1)}}function d2(t){let[,a,e,h]=/^(mod\+)?(shift\+)?(.*)$/i.exec(t),p=h.toLowerCase();if(p=N2[p]??p,!p||p.length>1&&/[-+]/.test(p))throw new Error(`Staffa: can't parse key "${t}" \u2014 write "k", "f2", "mod+k" or "mod+shift+f2"`);if(e&&p.toUpperCase()===p)throw new Error(`Staffa: "${t}" \u2014 write the shifted character itself ("?", not "shift+/")`);return(a?"mod+":"")+(e?"shift+":"")+p}function G2(t){if(t.altKey||(y1?t.ctrlKey:t.metaKey))return null;let a=t.key.toLowerCase(),e=t.shiftKey&&(a.length>1||t.key.toUpperCase()!==a);return((y1?t.metaKey:t.ctrlKey)?"mod+":"")+(e?"shift+":"")+a}function n2(t,a){if(!(a instanceof HTMLElement))return!1;let e=t.startsWith("mod+"),h=t.replace(/^(mod\+)?(shift\+)?/,"");if(h==="enter"&&a.closest("a[href]")!=null||!e&&(h==="enter"||h===" ")&&a.closest("button, summary, [role=button]")!=null)return!0;let p=a.tagName;return!e&&h!=="escape"&&(p==="INPUT"||p==="TEXTAREA"||p==="SELECT"||a.isContentEditable)}function c2(t,a){let e=q[q.length-1];return a.global===!0||!e||e.contains(t)}function X2(t){for(let a=q.length-1;a>=0;a--)if(q[a].contains(t))return q[a]}function i2(){return q[q.length-1]??document.body}function s2(t){let a=q[q.length-1];return a&&!(t&&a.contains(t))?a:t??document.body}var r2=!1;function j2(t){if(t.defaultPrevented||t.repeat||t.isComposing)return;let a=G2(t),e=t.target instanceof Element?t.target:null;if(!(a==null||n2(a,e)))for(let h=s2(e);h;h=h.parentElement){let p=f1.get(h)?.get(a);if(p&&c2(h,p)){p.press&&(t.preventDefault(),p.press(t));return}}}function l2(t){let a=new Map;for(let e=s2(t);e;e=e.parentElement){let h=f1.get(e);if(h)for(let[p,r]of h)!a.has(p)&&c2(e,r)&&!n2(p,t)&&a.set(p,r)}return[...a]}function E(t,a,e,h="normal"){let p=q1(),r=h==="global"?document.body:h==="local"?p:h==="normal"?(p&&X2(p))??document.body:h;if(!r)throw new Error("Staffa: a local key binding needs a current element");let o=d2(t),d=f1.get(r);d||f1.set(r,d=new Map);let n={description:a,press:e,global:h==="global",prev:d.get(o)};d.set(o,n),r2||(r2=!0,document.addEventListener("keydown",j2)),q1.clean(()=>{let c=d.get(o);if(c===n)n.prev?d.set(o,n.prev):d.delete(o);else for(;c;c=c.prev)if(c.prev===n){c.prev=n.prev;break}})}function D(t,a=!1){let e=d2(t),h=e.startsWith("mod+"),p=h?e.slice(4):e,r=p.startsWith("shift+"),o=r?p.slice(6):p,d=o.length===1?o.toUpperCase():o[0].toUpperCase()+o.slice(1);if(a){let c=o===" "?"Space":r||o.length>1?d:o;return(h?y1?"Meta+":"Control+":"")+(r?"Shift+":"")+c}let n=W2[o]??d;return y1?(r?"\u21E7":"")+(h?"\u2318":"")+n:(h?"Ctrl+":"")+(r?"Shift+":"")+n}import Q from"aberdeen";import D1 from"aberdeen";var g1=640,_2=0;function j(t="s"){return`${t}-${++_2}`}function l(t,...a){t!=null&&(typeof t=="function"?t(...a):D1("rich=",t))}var Q2="a[href], button, input, select, textarea, [tabindex]",x2=t=>t instanceof HTMLElement&&!t.hasAttribute("disabled")&&t.getAttribute("aria-disabled")!=="true"&&t.tabIndex>=0&&t.getClientRects().length>0;function R1(t){return[...t.querySelectorAll(Q2)].filter(x2)}function p1(t,a){let e=(a?[...t.querySelectorAll(a)].find(x2):void 0)??R1(t)[0];return e?.focus(),e!=null}function F(t){queueMicrotask(()=>D1(t))}var M2=["scroll","resize","transitionstart","animationstart"];function r1(t,a){let e="",h=0,p=0,r=()=>{let d=t instanceof Element?t.getBoundingClientRect():t,n=`${d.left} ${d.top} ${d.bottom} ${d.width}`;n!==e&&(e=n,a(d),p=0),h=++p>30?0:requestAnimationFrame(r)},o=()=>{p=0,h||r()};for(let d of M2)window.addEventListener(d,o,!0);return D1.clean(()=>{cancelAnimationFrame(h);for(let d of M2)window.removeEventListener(d,o,!0)}),r(),()=>{e="",o()}}import f from"aberdeen";import C from"aberdeen";import R from"aberdeen";R.insertGlobalCss({".s-tt-tip":{"&":"position:fixed z-index:500 max-width:20rem w:max-content padding: 0.3em 0.65em; font-size:0.85em line-height:1.4 pointer-events:none"}});var o1=R.proxy(void 0),I=null;function J2(t,a,e,h){let r=window.innerWidth,o=window.innerHeight,d=0,n=0;return h==="bottom"?(d=t.left+(t.width-a)/2,n=t.bottom+7,n+e>o-8&&(n=t.top-e-7)):h==="left"?(d=t.left-a-7,n=t.top+(t.height-e)/2,d<8&&(d=t.right+7)):h==="right"?(d=t.right+7,n=t.top+(t.height-e)/2,d+a>r-8&&(d=t.left-a-7)):(d=t.left+(t.width-a)/2,n=t.top-e-7,n<8&&(n=t.bottom+7)),{x:Math.max(8,Math.min(d,r-a-8)),y:Math.max(8,Math.min(n,o-e-8))}}function Z1(){I&&clearTimeout(I),I=setTimeout(()=>{o1.value=void 0,I=null},100)}F(()=>{let t=o1.value;if(!t)return;let{opts:a,anchor:e}=t,h=a.placement??"top",p=R("div.s-tt-tip.s-s.neutral.shadow role=tooltip",a.attrs,()=>{R("mouseenter=",()=>{I&&(clearTimeout(I),I=null)}),R("mouseleave=",Z1),l(a.tip)});r1(e,r=>{if(r.bottom<0||r.top>window.innerHeight||r.right<0||r.left>window.innerWidth||e.closest("[inert]")){o1.value=void 0;return}let{x:o,y:d}=J2(r,p.offsetWidth,p.offsetHeight,h);p.style.left=o+"px",p.style.top=d+"px"})});function i1(t){let a=e=>{I&&(clearTimeout(I),I=null),o1.value={opts:t,anchor:e.currentTarget}};R("mouseenter=",a),R("mouseleave=",Z1),R("focusin=",e=>{e.target.matches?.(":focus-visible")&&a(e)}),R("focusout=",Z1),R.clean(()=>{R.unproxy(o1).value?.opts===t&&(o1.value=void 0)})}C.insertGlobalCss({".s-btn":{"&":"display:inline-flex align-items:center justify-content:center gap:$2 font-weight:450 line-height:1.1 white-space:nowrap cursor:pointer text-decoration:none padding: $m2 $m3; transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s, box-shadow 0.15s, transform 0.08s;","&:focus-visible":"outline: 3px solid $s-focus; outline-offset: 1px;","&:hover:not([aria-disabled=true])":"filter: brightness(1.06)","&.tonal:hover:not([aria-disabled=true]), &.outlined:hover:not([aria-disabled=true])":"background: color-mix(in srgb, $s-bg 24%, transparent);","&.neutral:hover:not([aria-disabled=true])":"filter:none background: color-mix(in srgb, $s-text 8%, $s-bg);","> svg":"width:1.25em height:1.25em","&:active:not(:disabled):not([aria-disabled=true])":"transform: translateY(1px)","&[aria-disabled=true]":"pointer-events:auto cursor:not-allowed","&.small, .small > &":"padding: $m1 $m2; font-size:0.85em border-radius:$s-radius-sm","&.large, .large > &":"font-size:1.4em border-radius:$s-radius-lg"},".s-icon-btn":{"&":"display:inline-flex align-items:center justify-content:center flex-shrink:0 width:2rem height:2rem p:0 border:0 background:transparent cursor:pointer fg:$s-muted r:$s-radius-sm line-height:1 font-size:1rem text-decoration:none transition: color 0.12s, background 0.12s;","> svg":"width:1.25em height:1.25em","&:hover:not(:disabled):not([aria-disabled=true])":"fg:$s-text background: color-mix(in srgb, $s-text 10%, transparent);","&:focus-visible":"outline: 3px solid $s-focus; outline-offset:1px","&[aria-disabled=true]":"pointer-events:auto cursor:not-allowed","&.small, .small > &":"width:1.6rem height:1.6rem font-size:0.8rem","&.large, .large > &":"width:2.4rem height:2.4rem font-size:1.2rem"},".s-btn.s-busy, .s-icon-btn.s-busy, .s-busy .s-btn[type=submit]":"pointer-events:none cursor:progress",".s-btn.s-busy::after, .s-icon-btn.s-busy::after, .s-busy .s-btn[type=submit]::after":"content:'' flex-shrink:0 width:1em height:1em r:50% border: 2px solid currentColor; border-top-color: transparent; animation: s-spin 0.7s linear infinite;",".s-icon-btn.s-busy > svg":"display:none","@keyframes s-spin":{to:"transform: rotate(360deg)"}});function s1(t){let a=t.href!=null?"a":"button",e=t.tooltip===!1?void 0:t.tooltip,h=t.ariaLabel??(typeof e=="string"?m2(e):void 0);C(`${a}.s-icon-btn`,t.attrs,()=>{v2(t,e!=null),C("aria-label=",h),u2(t.tooltip,t.key,h,t.disabled),l(t.icon)})}function v2(t,a=!1){t.href!=null?(C("role=button"),t.disabled?C("aria-disabled=true"):C("href=",t.href)):t.disabled&&a?(C("type=",t.type??"button"),C("aria-disabled=true tabindex=-1"),C("click=",e=>{e.preventDefault(),e.stopPropagation()})):(C("type=",t.type??"button"),t.disabled&&C("disabled=true")),t.click&&!t.disabled&&Y2(t.click)}function Y2(t){let a=C.proxy({value:!1});C(()=>{a.value&&C(".s-busy aria-busy=true")}),C("click=",e=>{if(a.value)return;let h=t(e);if(!h||typeof h.then!="function")return;a.value=!0;let p=()=>{a.value=!1};Promise.resolve(h).then(p,r=>{throw p(),r})})}function m2(t){return t.replace(/\*\*(.+?)\*\*|\*(.+?)\*|`(.+?)`|\[(.+?)\]\((.+?)\)/g,(a,e,h,p,r)=>e??h??p??r)}function u2(t,a,e,h){if(t!==!1&&(t!=null||a)&&i1({tip:()=>{l(t),a&&C("#",t==null?D(a):` \xB7 ${D(a)}`)}}),a&&!h){let p=C();C("aria-keyshortcuts=",D(a,!0)),E(a,e,()=>p.click())}}function Z(t={}){let a=typeof t=="string"||typeof t=="function"?{content:t}:t,e=a.href!=null?"a":"button",h=a.tooltip===!1?void 0:a.tooltip,p=a.ariaLabel??(a.content==null&&typeof h=="string"?m2(h):void 0);C(`${e}.s-btn.s-s.shadow`,a.attrs,()=>{v2(a,h!=null),p&&C("aria-label=",p),u2(a.tooltip,a.key,typeof a.content=="string"?a.content:p,a.disabled),l(a.icon),l(a.content)})}import y2 from"aberdeen";y2.insertGlobalCss({".s-bgroup":{"&":"display:inline-flex align-items:stretch","&.s-spaced":"gap:$2 flex-wrap:wrap","&.s-vertical":"flex-direction:column","&.s-attached":"gap:0","&.s-attached:not(.s-vertical) > .s-btn:not(:first-child)":"margin-left:-1px","&.s-attached:not(.s-vertical) > .s-btn:not(:first-child):not(:last-child)":"r:0","&.s-attached:not(.s-vertical) > .s-btn:first-child:not(:last-child)":"border-top-right-radius:0 border-bottom-right-radius:0","&.s-attached:not(.s-vertical) > .s-btn:last-child:not(:first-child)":"border-top-left-radius:0 border-bottom-left-radius:0","&.s-attached.s-vertical > .s-btn:not(:first-child)":"margin-top:-1px","&.s-attached.s-vertical > .s-btn:not(:first-child):not(:last-child)":"r:0","&.s-attached.s-vertical > .s-btn:first-child:not(:last-child)":"border-bottom-left-radius:0 border-bottom-right-radius:0","&.s-attached.s-vertical > .s-btn:last-child:not(:first-child)":"border-top-left-radius:0 border-top-right-radius:0","&.s-attached > .s-btn:hover, &.s-attached > .s-btn:focus-visible":"z-index:1"}});function Y(t={}){let e=`.s-${t.layout??"attached"}${t.vertical?".s-vertical":""}`;y2(`div.s-bgroup${e} role=group`,t.attrs,()=>{if(t.buttons)for(let h of t.buttons)Z(h);l(t.content)})}import t1 from"aberdeen";import P from"aberdeen";P.insertGlobalCss({".s-field":{"&":"display:flex flex-direction:column gap:$1","> label":"font-weight:600 font-size:0.9em fg:$s-text user-select:none"},".s-req":"fg:$s-danger margin-left:2px",".s-help":"font-size:0.82em fg:$s-muted",".s-error":"font-size:0.82em fg:$s-danger",".s-input":{"&":"w:100% background: color-mix(in oklab, $s-bg, $s-text 4%); color:$s-text border: 1px solid $s-faint; r:$s-radius padding: 0.55em 0.7em; transition: border-color 0.15s, box-shadow 0.15s;","&:hover:not(:disabled)":"border-color: color-mix(in oklab, $s-text, $s-bg 55%);","&:focus-visible":"border-color:$s-accent box-shadow: 0 0 0 3px $s-focus; outline:none","&[aria-invalid=true]":"border-color:$s-danger"}});function _(t,a){let e=t.id??j("field"),h=()=>!!t.error;P("div.s-field",t.attrs,()=>{P(()=>{t.label!=null&&P("label for=",e,()=>{l(t.label),t.required&&P("span.s-req aria-hidden=true #*")})}),a(e,h),P(()=>{t.help!=null&&!t.error&&P("div.s-help",()=>l(t.help))}),P(()=>{t.error&&P("div.s-error role=alert #",t.error)})})}function d1(t,a,e,h){P("id=",a),t.name&&P("name=",t.name),P(()=>{t.disabled&&P("disabled=true")}),P(()=>{t.required&&P("aria-required=true")}),P(()=>P("aria-invalid=",e()?"true":"false")),h&&P("bind=",h)}function B1(t={}){_(t,(a,e)=>{t1("input.s-input",t.inputAttrs,()=>{t1("type=",t.type??"text"),t.placeholder!=null&&t1("placeholder=",t.placeholder),t.autocomplete!=null&&t1("autocomplete=",t.autocomplete),t.value!=null&&!t.bind&&t1("value=",t.value),t.input&&t1("input=",t.input),t.change&&t1("change=",t.change),d1(t,a,e,t.bind)})})}f.insertGlobalCss({".s-backdrop":{"&":"position:fixed inset:0 z-index:200 display:block background: rgba(0,0,0,0.55); transition: opacity 0.4s ease-in-out;","&.hidden":"opacity:0 pointer-events:none"},".s-dialog":{"&":"position:fixed z-index:200 top:50% left:50% display:flex flex-direction:column transform:translate(-50%,-50%) min-width:min(20rem,90vw) max-width:min(90vw,44rem) max-height:min(88vh,800px) r: $s-radius-lg; overflow:hidden transition: opacity 0.2s ease-out, transform 0.2s ease-out;","> header":"display:flex align-items:center gap:$2 padding: $2 $3; border:0 border-bottom: 1px solid $s-faint; r:0 font-weight:600 flex-shrink:0","> footer":"display:flex align-items:center justify-content:flex-end gap:$2 padding: $2 $3; border:0 border-top: 1px solid $s-faint; r:0 flex-shrink:0","> div":"p:$3 gap:$3 display:flex flex-direction:column overflow-y:auto flex:1 min-height:0","&.hidden":"opacity:0 pointer-events:none transform: translate(-50%, calc(-50% + 20px)); pointer-events:none"}});var l1=f.proxy({}),t0=0,f2=f.derive(()=>{let t=Object.keys(l1);if(t.length)return t[t.length-1]});function F1(){return f2.value!=null}F(()=>{f.onEach(l1,({resolve:t,opts:a},e)=>{let h=()=>{delete l1[e]};f.clean(()=>{a.onClose?.(),t()});let p=document.activeElement;f.clean(()=>{p instanceof HTMLElement&&document.contains(p)&&p.focus()});let r=f.derive(()=>f2.value!=e);f("div.s-backdrop create=hidden destroy=hidden .hidden=",r,"click=",()=>{a.allowCancel!==!1&&h()});let o=`s-dialog-title-${e}`,d=f("div.s-dialog.neutral.s-s.extra-shadow role=dialog create=hidden destroy=hidden",a.attrs,()=>{if(!a.keyboardTransparent){let c=f();f.clean(o2()),f("aria-modal=true"),f("keydown=",m=>a0(c,m))}let n=i2();f(()=>{let c=a.allowCancel!==!1;E("esc",c?"Close this dialog":void 0,c?h:()=>{},n)}),f(()=>{a.header!=null&&(f("aria-labelledby=",o),f("header.s-s.neutral id=",o,a.headerAttrs,()=>l(a.header)))}),f("div",a.contentAttrs,()=>{l(a.content,h)}),f(()=>{a.footer!=null&&f("footer.s-s.neutral",a.footerAttrs,()=>l(a.footer))})});requestAnimationFrame(()=>{document.body.contains(d)&&p1(d)})})});function a0(t,a){if(a.key!=="Tab"||a.altKey||a.ctrlKey||a.metaKey)return;let e=R1(t),h=a.shiftKey?e[0]:e[e.length-1];!h||document.activeElement!==h||(a.preventDefault(),(a.shiftKey?e[e.length-1]:e[0]).focus())}function n1(t){let a=++t0;return t.cancelWithScope!==!1&&f.clean(()=>{delete l1[a]}),new Promise(e=>{l1[a]={resolve:e,opts:t}})}function e0(t,a={}){return n1({header:"Alert",allowCancel:!0,content:e=>{f("p",()=>{f("#",t)}),Y({layout:"spaced",attrs:"align-self:flex-end",content:()=>{Z({content:"OK",click:e})}})},...a})}function h0(t,a={}){return new Promise(e=>{let h=!1;n1({header:"Confirm",allowCancel:!0,content:p=>{f("p",()=>{f("#",t)}),Y({layout:"spaced",attrs:"align-self:flex-end",content:()=>{Z({content:"Cancel",attrs:".neutral",click:p}),Z({content:"OK",click:()=>{h=!0,p()}})}})},...a,onClose:()=>{e(h),a.onClose?.()}})})}function p0(t,a="",e={}){return new Promise(h=>{let p=null;n1({header:"Input",allowCancel:!0,content:r=>{f("p",()=>{f("#",t)});let o=f.proxy({value:a});f("form display:contents",()=>{f("submit=",d=>{d.preventDefault(),p=o.value,r()}),B1({bind:f.ref(o,"value")}),Y({layout:"spaced",attrs:"align-self:flex-end",content:()=>{Z({content:"Cancel",attrs:".neutral",type:"button",click:r}),Z({content:"OK",type:"submit"})}})})},...e,onClose:()=>{h(p),e.onClose?.()}})})}Q.insertGlobalCss({".s-keyhelp":{"&":"display:flex flex-direction:column gap:$1 min-width:14rem","> div":"display:flex align-items:baseline justify-content:space-between gap:$4",kbd:"font-family:inherit font-size:0.85em fg:$s-muted white-space:nowrap border: 1px solid $s-faint; r:$s-radius-sm padding: 0 0.4em;"}});var b1=null;function I1(){if(b1){b1();return}let t=l2(document.activeElement);n1({header:"Keyboard shortcuts",cancelWithScope:!1,keyboardTransparent:!0,onClose:()=>{b1=null},content:a=>{b1=a;let e=h=>{h.repeat||["Control","Shift","Alt","Meta","Escape","?"].includes(h.key)||a()};document.addEventListener("keydown",e,!0),Q.clean(()=>document.removeEventListener("keydown",e,!0)),Q("div.s-keyhelp",()=>{for(let[h,p]of t)p.description!==void 0&&Q("div",()=>{Q("span",()=>l(p.description)),Q("kbd text=",D(h))})})}})}var g2=Q.proxy(!0);function r0(t){g2.value=t}Q(()=>{g2.value&&(E("?",void 0,I1,"global"),E("mod+?","This overview",I1,"global"))});import s from"aberdeen";s.insertGlobalCss({".s-ac":{"> .s-control":"display:flex flex-wrap:wrap align-items:center gap:$1 background: color-mix(in oklab, $s-bg, $s-text 4%); color:$s-text border: 1px solid $s-faint; r:$s-radius padding: 0.3em 0.4em; cursor:text; transition: border-color 0.15s, box-shadow 0.15s;","> .s-control:hover":"border-color: color-mix(in oklab, $s-text, $s-bg 55%);","> .s-control:focus-within":"border-color:$s-accent box-shadow: 0 0 0 3px $s-focus;","&[aria-invalid=true] > .s-control":"border-color:$s-danger",".s-chip":"display:inline-flex align-items:center gap:$1 font-size:0.85em background: color-mix(in oklab, $s-bg, $s-text 10%); border: 1px solid $s-faint; r:$s-radius padding: 0.1em 0.2em 0.1em 0.5em;",".s-chip > button":"cursor:pointer border:0 background:transparent fg:$s-muted font-size:1.1em line-height:1 padding: 0 0.2em; r:4px",".s-chip > button:hover":"fg:$s-text background:$s-faint",input:"flex:1 min-width:6ch border:0 background:transparent color:inherit outline:none padding:0.25em"},".s-ac-menu.s-s":{"&":"position:fixed max-height:15rem overflow-y:auto list-style:none p:$1 margin:0",li:"margin:0",".s-option":"padding: 0.45em 0.6em; r:6px cursor:pointer transition: background 0.1s;",".s-option[aria-selected=true]":"background: color-mix(in srgb, $s-text 10%, transparent);",".s-add":"fg:$s-accent font-style:italic",".s-empty":"padding: 0.45em 0.6em; fg:$s-muted"}});var w1=s.proxy({cur:null});function o0(t,a){t.style.maxHeight="";let p=t.offsetHeight,r=window.innerHeight-a.bottom-4-8,o=a.top-4-8,d=p>r&&o>r;t.style.left=`${a.left}px`,t.style.width=`${a.width}px`,t.style.maxHeight=`${Math.min(p,Math.max(d?o:r,60))}px`,t.style.top=d?"auto":`${a.bottom+4}px`,t.style.bottom=d?`${window.innerHeight-a.top+4}px`:"auto"}F(()=>{let t=w1.cur;if(!t)return;let a,e=s("ul.s-ac-menu.s-s.neutral.shadow role=listbox",`id=${t.id} z-index:${t.zIndex}`,()=>{s("mousedown=",h=>h.preventDefault()),t.draw(),a?.()});a=r1(t.anchor,h=>o0(e,h))});function d0(t){return typeof t=="string"?{value:t,label:t}:{value:t.value,label:t.label??t.value}}function n0(t){let a=j("ac-menu"),e=s.proxy({query:"",open:!1,active:0}),h=()=>(typeof t.options=="function"?t.options():t.options).map(d0),p=()=>{let v=t.bind?.value;return v==null||v===""?[]:Array.isArray(v)?v:[v]},r=v=>h().find(w=>w.value===v)?.label??v;if(!t.multi){let v=t.bind?s.peek(t.bind,"value"):void 0;typeof v=="string"&&v&&(e.query=s.peek(()=>r(v)))}let o=()=>{let v=new Set(p()),w=h();t.multi&&(w=w.filter(A=>!v.has(A.value)));let V=e.query.trim().toLowerCase();return V&&(w=w.filter(A=>A.label.toLowerCase().includes(V))),w},d=(v,w)=>{if(t.multi){let V=Array.isArray(t.bind?.value)?[...t.bind.value]:[];V.includes(v)||V.push(v),t.bind&&(t.bind.value=V),e.query=""}else t.bind&&(t.bind.value=v),e.query=r(v),e.open=!1;e.active=0,w?.focus()},n=v=>{if(!t.bind)return;let w=t.bind.value??[];t.bind.value=w.filter(V=>V!==v)},c,m=()=>{let v=o(),w=e.query.trim(),V=t.allowCustom!==!1&&w!==""&&!v.some(A=>A.label.toLowerCase()===w.toLowerCase());v.forEach((A,g)=>{s("li.s-option role=option",`id=${a}-opt-${g}`,()=>{s(()=>s("aria-selected=",e.active===g?"true":"false")),s("#",A.label),s("click=",()=>d(A.value,c)),s("mousemove=",()=>{e.active=g})})}),V&&s("li.s-option.s-add role=option",()=>{s("#",`Add "${w}"`),s("click=",()=>d(w,c))}),v.length===0&&!V&&s("li.s-empty #No matches")};_(t,(v,w)=>{s("div.s-ac",t.inputAttrs,()=>{s(()=>s("aria-invalid=",w()?"true":"false"));let V=s("div.s-control",()=>{s("click=",()=>c?.focus()),s(()=>{if(t.multi)for(let A of p())s("span.s-chip",()=>{s("span #",s.peek(()=>r(A))),s("button type=button aria-label=",`Remove ${A}`,()=>{s("#\xD7"),s("click=",g=>{g.stopPropagation(),n(A),c?.focus()})})})}),c=s("input type=text role=combobox autocomplete=off",()=>{s("id=",v,`aria-controls=${a} aria-autocomplete=list`),t.placeholder!=null&&s("placeholder=",t.placeholder),t.disabled&&s("disabled=true"),t.required&&s("aria-required=true"),s("bind=",s.ref(e,"query")),s(()=>s("aria-expanded=",e.open?"true":"false")),s(()=>{let g=o()[e.active];s("aria-activedescendant=",e.open&&g?`${a}-opt-${e.active}`:"")}),s("input=",()=>{e.open=!0,e.active=0}),s("focus=",()=>{e.open=!0}),s("blur=",()=>{setTimeout(()=>H(),150)}),s("keydown=",A=>$(A,c))})});s(()=>{if(!e.open)return;let A=V.closest(".s-dialog")?350:150;w1.cur={id:a,anchor:V,zIndex:A,draw:m},s.clean(()=>{w1.cur?.id===a&&(w1.cur=null)})}),s(()=>{if(t.name)if(t.multi)for(let A of p())s("input type=hidden",()=>{s("name=",t.name),s("value=",A)});else s("input type=hidden",()=>{s("name=",t.name),s("value=",p()[0]??"")})})})});function $(v,w){let V=o(),A=V.length-1;if(v.key==="ArrowDown")v.preventDefault(),e.open=!0,e.active=Math.min(A,e.active+1);else if(v.key==="ArrowUp")v.preventDefault(),e.active=Math.max(0,e.active-1);else if(v.key==="Enter"){v.preventDefault();let g=V[e.active];g?d(g.value,w):t.allowCustom!==!1&&e.query.trim()?d(e.query.trim(),w):e.open&&(e.open=!1)}else if(v.key==="Escape")e.open&&(v.preventDefault(),e.open=!1,t.multi||(e.query=r(p()[0]??"")));else if(v.key==="Backspace"&&t.multi&&e.query===""){let g=p();g.length&&n(g[g.length-1])}}function H(){e.open=!1,t.multi?e.query="":t.allowCustom!==!1&&e.query.trim()?d(e.query.trim()):e.query=r(p()[0]??"")}}import a1 from"aberdeen";import c0 from"aberdeen";var M1={size:24,color:"currentColor",strokeWidth:2,cap:"round",join:"round"};function i0(t,a){let e=a.size??M1.size,h=c0('svg.s-icon aria-hidden=true viewBox="0 0 24 24" fill=none',"width=",e,"height=",e,"stroke=",a.color??M1.color,"stroke-width=",a.strokeWidth??M1.strokeWidth,"stroke-linecap=",a.cap??M1.cap,"stroke-linejoin=",a.join??M1.join,a.attrs);h.innerHTML=t}function O(t){return(a={})=>i0(t,a)}var b2=O('<path d="m9 18 6-6-6-6" />');var w2=O('<circle cx="12" cy="12" r="10" />');var H2=O('<path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />');var A2=O('<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />');var H1=O('<path d="M4 5h16" /><path d="M4 12h16" /><path d="M4 19h16" />');var V2=O('<path d="M12 17v5" /><path d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" /><path d="m2 2 20 20" /><path d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" />'),K1=O('<path d="M12 17v5" /><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />');var k2=O('<path d="M22 2 2 22" />');var c1=O('<path d="M18 6 6 18" /><path d="m6 6 12 12" />');a1.insertGlobalCss({".s-box":{"&":"display:flex flex-direction:column overflow:hidden r: $s-radius-lg; position:relative","&:not(:first-child)":"margin-top: $3","> header":"display:flex align-items:center gap:$2 padding: $2 $3; border:0 border-bottom: 1px solid $s-faint; r:0 font-weight:600","> footer":"display:flex align-items:center justify-content:flex-end gap:$2 padding: $2 $3; border:0 border-top: 1px solid $s-faint; r:0","> div":"p:$3 gap:$3","> header > .s-box-close":"margin-left:auto","> .s-box-close":"position:absolute top:$2 right:$2 z-index:1"}});function s0(t={}){let a=typeof t=="string"||typeof t=="function"?{content:t}:t;a1("section.s-box.s-s.neutral.shadow",a.attrs,()=>{a1(()=>{a.header!=null?a1("header.s-s.neutral",a.headerAttrs,()=>{l(a.header),typeof a.close=="function"&&L2(a.close)}):typeof a.close=="function"&&L2(a.close)}),a1("div",a.contentAttrs,()=>{l(a.content)}),a1(()=>{a.footer!=null&&a1("footer.s-s.neutral",a.footerAttrs,()=>l(a.footer))})})}function L2(t){s1({icon:c1,ariaLabel:"Close",click:t,attrs:".s-box-close"})}import U1 from"aberdeen";function l0(t){U1(()=>{let a=t.bind.value;Y({attrs:t.attrs,buttons:Object.entries(t.options).map(([e,h])=>({content:h,ariaLabel:typeof h=="function"?e:void 0,attrs:a===e?".primary":".neutral",click:()=>{t.bind.value=t.allowDeselect&&a===e?void 0:e}}))})}),t.name&&U1(()=>U1("input type=hidden name=",t.name,"value=",t.bind.value??""))}import S from"aberdeen";S.insertGlobalCss({".s-check":{"&":"display:flex flex-direction:column gap:$1","> label":"display:flex align-items:center gap:$2 cursor:pointer user-select:none","> label:has(input:disabled)":"cursor:not-allowed opacity:0.45 filter:saturate(0.6)",input:"cursor:inherit m:0"}});function M0(t={}){let a=t.id??j("check");S("div.s-check",t.attrs,()=>{S("label for=",a,()=>{S("input type=checkbox",t.inputAttrs,()=>{S("id=",a),t.name&&S("name=",t.name),t.checked&&!t.bind&&S("checked=true"),t.change&&S("change=",t.change),S(()=>{t.disabled&&S("disabled=true")}),S(()=>{t.required&&S("aria-required=true")}),t.bind&&S("bind=",t.bind)}),S(()=>{t.label!=null&&l(t.label),t.required&&S("span.s-req aria-hidden=true #*")})}),S(()=>{t.help!=null&&!t.error&&S("div.s-help",()=>l(t.help))}),S(()=>{t.error&&S("div.s-error role=alert #",t.error)})})}import K from"aberdeen";K.insertGlobalCss({".s-form":{"&":"display:flex flex-direction:column gap:$3","&.grid":"display:grid grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap:$3","&.grid > .s-wide, &.grid > footer":"grid-column: 1 / -1;","> footer":"display:flex align-items:center justify-content:flex-end gap:$2 flex-wrap:wrap margin-top:$1"}});function x0(t={}){let a=typeof t=="string"||typeof t=="function"?{content:t}:t,e=K.proxy({value:!1});K("form.s-form",a.attrs,()=>{K(()=>{K(".grid=",a.layout==="grid")}),K(()=>{e.value&&K(".s-busy aria-busy=true")}),K("submit=",h=>{if(h.preventDefault(),a.submit&&!e.value){let p=new FormData(h.target),r={};for(let d of new Set(p.keys())){let n=p.getAll(d);r[d]=n.length===1?n[0]:n}let o=a.submit(r,h);if(o&&typeof o.then=="function"){e.value=!0;let d=()=>{e.value=!1};Promise.resolve(o).then(d,n=>{throw d(),n})}}}),l(a.content),K(()=>{a.actions&&K("footer",a.actionsAttrs,()=>l(a.actions))})})}import x from"aberdeen";import{current as a2}from"aberdeen/route";import y from"aberdeen";import{matchCurrent as y0,current as V1,go as z2}from"aberdeen/route";import z from"aberdeen";import{grow as v0,shrink as m0}from"aberdeen/transitions";z.insertGlobalCss({".s-toasts":"position:fixed bottom:$3 right:$3 z-index:400 display:flex flex-direction:column gap:$2 pointer-events:none max-width:min(90vw,24rem) w:24rem",".s-toast":{"&":"display:flex align-items:flex-start gap:$2 padding: $3; pointer-events:auto position:relative overflow:hidden",".s-toast-body":"display:flex flex-direction:column gap:$1 flex:1 min-width:0",".s-toast-title":"font-weight:700 line-height:1.3",".s-toast-close":"cursor:pointer border:0 background:transparent fg:$s-muted font-size:1.1em line-height:1 padding: 0 0.15em; r:4px flex-shrink:0 align-self:flex-start",".s-toast-close:hover":"fg:$s-text",".s-toast-close:focus-visible":"outline:none box-shadow: 0 0 0 3px $s-focus; fg:$s-text",".s-toast-progress":"position:absolute bottom:0 left:0 right:0 height:2px background:$s-accent width:100%"}});var u0=0,x1=z.proxy({});F(()=>{z.peek(()=>z.isEmpty(x1))&&z.isEmpty(x1)||z("div.s-toasts",()=>{z.onEach(x1,t=>{let{opts:a,id:e}=t,h=a.type==="danger"||a.type==="warning"?"alert":"status",p=a.type==null||a.type==="neutral"?"neutral":a.type,r=a.duration??6e3,o,d=null,n=()=>{clearTimeout(o),d&&(d.style.transition="none",d.style.width="100%",d.offsetWidth,d.style.transition=`width ${r}ms linear`,d.style.width="0%"),o=setTimeout(()=>N1(e),r)},c=()=>{clearTimeout(o),o=void 0,d&&(d.style.transition="none",d.style.width="100%")};z.clean(()=>clearTimeout(o)),z(`div.s-toast.s-s.${p}.extra-shadow aria-live=polite role=${h}`,"create=",v0,"destroy=",m0,a.attrs,()=>{r>0&&(z("mouseenter=",c),z("mouseleave=",n)),z("div.s-toast-body",()=>{z(()=>{a.title!=null&&z("div.s-toast-title",()=>l(a.title))}),z("div.s-toast-msg",()=>l(a.message))}),z(()=>{a.dismissible!==!1&&z("button.s-toast-close type=button aria-label=Dismiss",()=>{z("#\xD7"),z("click=",()=>N1(e))})}),r>0&&(d=z("div.s-toast-progress"))}),r>0&&requestAnimationFrame(n)})})});function N1(t){delete x1[t]}function A1(t){let a=++u0;return x1[a]={id:a,opts:t},()=>N1(a)}y.insertGlobalCss({".s-menu-list":"position:fixed z-index:350 min-width:10rem display:flex flex-direction:column p:$1 r:$s-radius-lg max-width: calc(100vw - 16px); overflow-y:auto max-height:min(80vh,28rem) transition: opacity 0.15s, transform 0.15s, visibility 0s;",".s-menu-list.hidden":"opacity:0 pointer-events:none transform:translateY(-6px) visibility:hidden transition: opacity 0.15s, transform 0.15s, visibility 0.15s;",".s-menu-item":"display:flex align-items:center gap:$2 w:100% scroll-margin:$2 padding: $m2 0; line-height:1.1 r:$s-radius cursor:pointer text-align:left font-weight:450 font-size:0.9em border:0 background:transparent fg:$s-text text-decoration:none transition: color 0.12s, transform 0.12s, text-shadow 0.12s;",".s-menu-item:focus-visible:not([aria-current=page]), .s-menu-item:hover:not([aria-disabled=true]):not([aria-current=page])":"filter:none color: color-mix(in lab, $s-primary 33%, $s-text);",".s-menu-item:focus-visible":"outline-offset:-2px background: color-mix(in srgb, $s-accent 14%, transparent);",".s-menu-item[aria-current=page]":"color:$s-accent filter:none",".s-menu-list .s-menu-item":"padding-inline:$2",".s-menu-item[aria-disabled=true]":"opacity:0.45 cursor:not-allowed pointer-events:none",".s-menu-icon":"flex-shrink:0",".s-menu-list .s-menu-icon":"display:flex",".s-menu-list .s-menu-icon > svg":"width:1.25em height:1.25em","hr.s-menu-sep":"border:0 height:1px margin: $1 0.6rem; background: linear-gradient(to right, transparent, $s-faint 18%, $s-faint 82%, transparent);",".s-menu-key":"margin-left:auto padding-left:$2 font-family:inherit font-size:0.8em opacity:0.55 white-space:nowrap flex-shrink:0","@media (hover: none) and (pointer: coarse)":{".s-menu-key":"display:none"},".s-menu-tt-key":"font-family:inherit font-size:0.85em opacity:0.7 white-space:nowrap",".s-tt-tip hr.s-menu-sep":"margin: 0.35em 0;",".s-menu-chevron":"margin-left:auto flex-shrink:0 display:flex transition: transform 0.15s ease;",".s-menu-key + .s-menu-chevron":"margin-left:0",".s-menu-chevron > svg":"width:1em height:1em",".s-menu-details":{"> summary":"list-style:none","> summary::-webkit-details-marker":"display:none","&::details-content":"interpolate-size:allow-keywords block-size:0 overflow-y:clip transition: block-size 0.15s ease, content-visibility 0.15s allow-discrete;","&[open]::details-content":"block-size:auto","&[open] > summary .s-menu-chevron":"transform:rotate(90deg)"},".s-menu-sub":"display:flex flex-direction:column gap:$1 padding-left:$3",".s-menu-inline":"display:flex flex-direction:column gap:$1"});function v1(t,a,e){y("keydown=",h=>{if(h.key==="Enter"&&!h.ctrlKey&&!h.metaKey&&!h.shiftKey&&!h.altKey&&h.target.tagName==="A"){queueMicrotask(()=>a?.());return}if(h.key!=="ArrowDown"&&h.key!=="ArrowUp"&&h.key!=="Home"&&h.key!=="End")return;h.preventDefault();let r=[...h.currentTarget.querySelectorAll(".s-menu-item")].filter(c=>c.getAttribute("aria-disabled")!=="true"&&!b0(c));if(!r.length)return;let o=r.indexOf(document.activeElement),d=h.key==="ArrowUp"?-1:1,n=h.key==="Home"?0:h.key==="End"?r.length-1:o<0?d>0?0:r.length-1:(o+d+r.length)%r.length;r[n].focus()}),$2(t,{onLeafSelect:a,keyHints:e,$hasCurrent:y.derive(()=>W1(t))})}function $2(t,a){for(let e of t){if(typeof e=="string"||typeof e=="function"){l(e);continue}if("separator"in e){y("hr.s-menu-sep");continue}e.items?g0(e,a):f0(e,a)}}function f0(t,a){let e=!1,h=y(t.href?"a.s-menu-item data-panel=open":"button.s-menu-item type=button",t.attrs,()=>{t.href&&(y("href=",t.href),t.target&&y("target=",t.target),y(()=>{let p=!e;e=!0,G1(t)&&(y("aria-current=page"),requestAnimationFrame(()=>h.scrollIntoView({block:"nearest",behavior:p?"instant":"smooth"})))})),t.disabled&&y("aria-disabled=true"),t.key&&y("aria-keyshortcuts=",D(t.key,!0)),y("click=",p=>{if(t.disabled){p.preventDefault();return}a.onLeafSelect?.(),t.click?.(p)}),t.icon&&y("span.s-menu-icon",()=>l(t.icon)),l(t.label),E2(t,a)})}var S2=new Map;function C2(t,a){return S2.set(t,a),a}function g0(t,a){let e=t.href??P2(t.items),h=e!=null?y.derive(()=>X1(t)?C2(e,!0):a.$hasCurrent.value?C2(e,!1):S2.get(e)??!1):null;y("details.s-menu-details",()=>{h&&y(()=>{h.value&&y("open=true")}),y("summary.s-menu-item.s-menu-branch",t.attrs,()=>{t.disabled&&y("aria-disabled=true"),t.key&&y("aria-keyshortcuts=",D(t.key,!0)),y(()=>{G1(t)&&y("aria-current=page")}),y("click=",p=>{if(t.disabled){p.preventDefault();return}e!=null&&(p.preventDefault(),H0(e),z2(e)),t.click?.(p)}),t.icon&&y("span.s-menu-icon",()=>l(t.icon)),l(t.label),E2(t,a),y("span.s-menu-chevron aria-hidden=true",()=>b2())}),y("div.s-menu-sub",()=>$2(t.items,a))})}function b0(t){for(let a=t.closest("details");a;a=a.parentElement&&a.parentElement.closest("details"))if(!a.open&&t.closest("summary")?.parentElement!==a)return!0;return!1}function W1(t){return t.some(a=>typeof a!="string"&&typeof a!="function"&&!("separator"in a)&&X1(a))}function G1(t){if(t.href!=null&&y0(t.href))return!0;let a=t.match;if(a==null)return!1;let e=V1.path;if(typeof a=="function")return a(e);let h=a.replace(/\/+$/,"")||"/";return e===h||e.startsWith(h==="/"?"/":h+"/")}function X1(t){if(G1(t))return!0;for(let a of t.items??[])if(!(typeof a=="string"||typeof a=="function"||"separator"in a)&&X1(a))return!0;return!1}function P2(t){for(let a of t){if(typeof a=="string"||typeof a=="function"||"separator"in a)continue;let e=a.href??(a.items?P2(a.items):void 0);if(e!=null)return e}}function E2(t,a){let e=a.keyHints?void 0:t.key;t.key&&!e&&y("kbd.s-menu-key aria-hidden=true text=",D(t.key)),!(t.tooltip==null&&!e)&&i1({placement:"right",tip:()=>{l(t.tooltip),e&&(t.tooltip!=null&&y("hr.s-menu-sep"),y("kbd.s-menu-tt-key aria-hidden=true text=",D(e)))}})}function m1(t,a){y(()=>{for(let e of O2(t(),[]))E(e.key,e.label,h=>{T2(),a?.(),e.click?.(h),e.href!=null&&w0(e.href,e.target)})})}function O2(t,a){for(let e of t)typeof e=="string"||typeof e=="function"||"separator"in e||(e.key&&!e.disabled&&a.push(e),e.items&&O2(e.items,a));return a}function w0(t,a){let e=new URL(t,location.href);a?window.open(e.href,a,a==="_blank"?"noopener":""):e.origin!==location.origin?location.href=e.href:z2(t)}var k1=null;function H0(t){try{k1=new URL(t,location.href).pathname.replace(/\/+$/,"")||"/"}catch{k1=null}}function j1(t){return k1!==t?!1:(k1=null,!0)}var J=y.proxy({opts:null});function X(){let t=J.opts?.anchor;J.opts=null,t?.focus()}function L1(t){let a=J.opts;return a!=null&&(t==null||a.anchor===t)}function T2(t){L1(t)&&X()}function A0(t,a){let e=t.offsetWidth,h=t.offsetHeight,p=window.innerWidth,r=window.innerHeight,o=4,d=a.left;d+e>p-8&&(d=Math.max(8,a.right-e));let n=a.bottom+o;n+h>r-8&&a.top-h-o>=8&&(n=a.top-h-o),t.style.left=Math.max(8,d)+"px",t.style.top=Math.max(8,n)+"px"}function V0(t){return[{label:"Open in new tab",icon:H2,click:()=>{window.open(t,"_blank","noopener")}},{label:"Copy link",icon:A2,click:()=>{k0(t)}}]}async function k0(t){let a=new URL(t,location.href).href;try{await navigator.clipboard.writeText(a),A1({message:"Link copied."})}catch{A1({message:"Couldn't copy the link.",type:"danger"})}}F(()=>{let t=J.opts;if(!t)return;let a=y("div.s-menu-list.s-s.neutral.shadow create=hidden destroy=hidden",t.dropdownAttrs,()=>{v1(t.link!=null?[...V0(t.link),{separator:!0},...t.items]:t.items,X,!0)}),e=r=>{let o=r.target;!a.contains(o)&&(t.closeOnAnchorClick||!t.anchor.contains(o))&&X()},h=r=>{(r.key==="Escape"||r.key==="Tab")&&(r.preventDefault(),X())},p=y.peek(V1,"path");y(()=>{V1.path!==p&&!j1(V1.path)&&X()}),document.addEventListener("click",e,!0),document.addEventListener("keydown",h,!0),y.clean(()=>{document.removeEventListener("click",e,!0),document.removeEventListener("keydown",h,!0)}),r1(t.at?new DOMRect(t.at.x,t.at.y,0,0):t.anchor,r=>A0(a,r)),requestAnimationFrame(()=>{document.body.contains(a)&&p1(a,".s-menu-item[aria-current=page]")})});function L0(t){y("nav.s-menu-inline",t.attrs,()=>{m1(()=>t.items,()=>t.onLeafSelect?.()),v1(t.items,t.onLeafSelect)})}function _1(t){return J.opts=t,X}function Q1(t){m1(()=>t.items);let a=null;y.clean(()=>{J.opts?.anchor===a&&X()}),y("contextmenu=",e=>{e.preventDefault(),a=e.currentTarget,_1({...t,anchor:a,at:{x:e.clientX,y:e.clientY},closeOnAnchorClick:!0})})}function C0(t){m1(()=>t.items);let a=null;y.clean(()=>{J.opts?.anchor===a&&X()}),Z({icon:H1,...t.button?.content==null?{ariaLabel:"Open menu"}:null,attrs:".neutral",...t.button,click:e=>{if(a=e.currentTarget,J.opts?.anchor===a){X();return}_1({items:t.items,anchor:a,dropdownAttrs:t.dropdownAttrs})}})}import i,{OPAQUE as D2}from"aberdeen";import*as b from"aberdeen/route";import L from"aberdeen";var z0=O('<path d="m15 18-6-6 6-6"/>'),$0=O('<path d="m9 18 6-6-6-6"/>');L.insertGlobalCss({".s-strip":{"&":"position:relative display:flex min-width:0","> .s-strip-row":"display:flex align-items:center flex:1 min-width:0 overflow-x:auto overflow-y:hidden scrollbar-width:none scroll-behavior:smooth","> .s-strip-row::-webkit-scrollbar":"display:none","> .s-strip-btn":"position:absolute top:0 bottom:0 z-index:1 display:none align-items:center justify-content:center width:2.4em border:0 padding:0 cursor:pointer fg:$s-muted transition: color 0.15s;","> .s-strip-btn:hover":"fg:$s-text","> .s-strip-btn-left":"left:0 justify-content:flex-start background: linear-gradient(to right, $s-bg 45%, transparent)","> .s-strip-btn-right":"right:0 justify-content:flex-end background: linear-gradient(to left, $s-bg 45%, transparent)","&.s-can-left > .s-strip-btn-left, &.s-can-right > .s-strip-btn-right":"display:flex"},".s-tabs":{"&":"display:flex flex-direction:column gap:$3",".s-tabbar":"border-bottom: 1px solid $s-faint;",".s-tablist":"gap:$1 align-items:stretch margin-bottom:-1px",".s-tab":"display:inline-flex align-items:center gap:$2 cursor:pointer background:transparent border:0 color: $s-muted; font-weight:600 padding: 0.6em 0.9em; white-space:nowrap border-bottom: 3px solid transparent; transition: color 0.15s, background 0.15s, border-color 0.15s;",".s-tab:hover:not(:disabled), .s-tab[aria-selected=true]":"color: $s-text;",".s-tab:focus-visible":"outline:none box-shadow: inset 0 0 0 2px $s-focus; r: $s-radius;",".s-tab[aria-selected=true]":"border-image: $s-gradient 1;",".s-tabpanel":"display:block"}});function C1(t){L("div.s-strip",t.attrs,()=>{let a=L("div.s-strip-row",t.stripAttrs,()=>l(t.content));q2(a,-1),q2(a,1),P0(a)})}function z1(t){let a=t.parentElement;if(!a||!t.isConnected)return;let e=parseFloat(getComputedStyle(a).fontSize)*2.6,h=t.getBoundingClientRect(),p=a.getBoundingClientRect(),r=h.left-p.left,o=h.right-p.right;r<e?a.scrollBy({left:r-e,behavior:"smooth"}):o>-e&&a.scrollBy({left:o+e,behavior:"smooth"})}function S0(t){let a=j("tabs"),e=(r,o)=>r.id??String(o),h=t.bind??L.proxy(e(t.tabs[0]??{label:""},0));t.tabs.length>0&&!t.tabs.some((r,o)=>e(r,o)===L.peek(()=>h.value))&&(h.value=e(t.tabs[0],0));let p=(r,o)=>{r.disabled||(h.value=e(r,o))};L("div.s-tabs",t.attrs,()=>{C1({attrs:".s-tabbar",stripAttrs:".s-tablist role=tablist",content:()=>{t.tabs.forEach((r,o)=>{let d=e(r,o),n=L("button.s-tab type=button role=tab",()=>{L("id=",`${a}-tab-${d}`,"aria-controls=",`${a}-panel-${d}`),L(()=>{let c=h.value===d;L("aria-selected=",c?"true":"false"),L("tabindex=",c?"0":"-1"),c&&requestAnimationFrame(()=>z1(n))}),r.disabled&&L("disabled=true"),L("click=",()=>p(r,o)),L("keydown=",c=>E0(c,t.tabs,o,p)),l(r.icon),l(r.label)})})}}),L("div.s-tabpanel role=tabpanel",t.contentAttrs,()=>{L(()=>{let r=h.value,o=t.tabs.findIndex((n,c)=>e(n,c)===r),d=t.tabs[o]??t.tabs[0];d&&(L("id=",`${a}-panel-${e(d,o)}`,"aria-labelledby=",`${a}-tab-${e(d,o)}`),l(d.content))})})})}function q2(t,a){L(`button.s-strip-btn.s-strip-btn-${a<0?"left":"right"} type=button`,()=>{L("tabindex=-1 aria-hidden=true"),L("click=",()=>t.scrollBy({left:a*t.clientWidth*.8,behavior:"smooth"})),(a<0?z0:$0)({size:"1.1em"})})}function P0(t){let a=t.parentElement;if(!a||typeof ResizeObserver>"u")return;let e=()=>{let r=t.scrollWidth-t.clientWidth;a.classList.toggle("s-can-left",t.scrollLeft>1),a.classList.toggle("s-can-right",t.scrollLeft<r-1)};t.addEventListener("scroll",e,{passive:!0});let h=new ResizeObserver(e);h.observe(t);let p=typeof MutationObserver>"u"?void 0:new MutationObserver(r=>{for(let o of r){for(let d of o.addedNodes)d instanceof Element&&h.observe(d);for(let d of o.removedNodes)d instanceof Element&&h.unobserve(d)}e()});p?.observe(t,{childList:!0});for(let r of Array.from(t.children))h.observe(r);e(),L.clean(()=>{t.removeEventListener("scroll",e),h.disconnect(),p?.disconnect()})}function E0(t,a,e,h){let p=e;if(t.key==="ArrowRight"||t.key==="ArrowDown")p=(e+1)%a.length;else if(t.key==="ArrowLeft"||t.key==="ArrowUp")p=(e-1+a.length)%a.length;else if(t.key==="Home")p=0;else if(t.key==="End")p=a.length-1;else return;t.preventDefault();let r=p>=e?1:-1;for(let o=0;o<a.length;o++){let d=a[p];if(d&&!d.disabled){h(d,p),t.currentTarget?.parentElement?.children[p]?.focus();return}p=(p+r+a.length)%a.length}}var t2={integer(t){if(!/^(0|-?[1-9]\d*)$/.test(t))return;let a=Number(t);return Number.isSafeInteger(a)?a:void 0}};function U(t){let a=String(t).replace(/\/+$/,"");return a.startsWith("/")||(a=`/${a}`),a}function u1(t){let a=U(t);return a==="/"?[]:a.slice(1).split("/")}function R2(t){let a=u1(t),e=a.map((h,p)=>{if(!h.startsWith("[")||!h.endsWith("]"))return{kind:"lit",value:h};let r=/^\[\.\.\.([A-Za-z_$][\w$]*)\]$/.exec(h);if(r){if(p!==a.length-1)throw new Error(`Staffa: "${h}" must be the last segment of route "${t}"`);return{kind:"rest",name:r[1]}}let o=/^\[([A-Za-z_$][\w$]*)(?:=([A-Za-z_$][\w$]*))?\]$/.exec(h);if(!o)throw new Error(`Staffa: malformed param "${h}" in route "${t}"`);let[,d,n]=o;if(n&&!(n in t2))throw new Error(`Staffa: unknown matcher "${n}" in route "${t}" (known: ${Object.keys(t2).join(", ")})`);return{kind:"param",name:d,matcher:n}});return{key:t,segs:e}}function O0(t){try{return decodeURIComponent(t)}catch{return t}}function J1(t,a){let e={};for(let h=0;h<t.segs.length;h++){let p=t.segs[h];if(p.kind==="rest")return h>=a.length?null:(e[p.name]=a.slice(h).join("/"),e);if(h>=a.length)return null;let r=a[h];if(p.kind==="lit"){if(r!==p.value)return null}else if(p.matcher){let o=t2[p.matcher](r);if(o===void 0)return null;e[p.name]=o}else e[p.name]=O0(r)}return t.segs.length===a.length?e:null}var N=250,T0=300,q0=360,$1=540;i.insertGlobalCss({":root":`--s-panel-ms:${N}ms`,".s-panels":"flex:1 min-width:0 min-height:0 position:relative overflow:clip isolation:isolate "+T1,".s-panel":{"&":"position:absolute top:0 bottom:0 left:0 display:flex flex-direction:column "+T1+` z-index:2 transition: transform ${N}ms ease-out, opacity ${N}ms linear;`,"&.s-panel-sep::before":"content:'' position:absolute left:0 top:0.6rem bottom:0.6rem width:1px z-index:1 background: linear-gradient(to bottom, transparent, $s-faint 18%, $s-faint 82%, transparent);","&.s-panel-new":"z-index:1","&.s-panel-closing":"z-index:0 opacity:0 pointer-events:none","&.s-panel-enter":"opacity:0","&.s-panel-hidden, &.s-panel-parked":"visibility:hidden"},".s-panel > .s-content":"flex:1 min-height:0 overflow-y:auto overflow-x:hidden p:$3",".s-panel-actions":"display:flex align-items:center justify-content:flex-end gap:$1 flex-shrink:0 padding: $3 $3 0;",".s-crumbs > .s-strip-row":"gap:$m1",".s-crumb":{"&":"flex: 1 0 4rem; font-size:0.85em line-height:1.5 fg:$s-muted text-decoration:none white-space:nowrap max-width:max-content overflow:hidden text-overflow:ellipsis transition: color 0.12s;","&.s-crumb-on":"font-weight:600 fg:$s-text","a&:hover":"filter:none color: color-mix(in lab, $s-primary 33%, $s-text);","svg.s-crumb-pin":"vertical-align:-0.12em margin-right:0.3em opacity:0.8 fill:currentColor","svg.s-crumb-unsaved":"vertical-align:0.08em margin-right:0.3em fill:currentColor"},"svg.s-crumb-sep":"flex-shrink:0 opacity:0.4",".s-main.s-shell-snap .s-panel":"transition:none",".s-panel-loading":{"&":"position:absolute inset:0 display:flex align-items:center justify-content:center gap:$1 pointer-events:none",i:"width:0.5rem height:0.5rem r:50% background:$s-muted opacity:0.45 animation: s-panel-pulse 1s ease-in-out infinite;","i:nth-child(2)":"animation-delay:0.15s","i:nth-child(3)":"animation-delay:0.3s"},"@keyframes s-panel-pulse":{"0%, 100%":"opacity:0.25 transform:scale(0.8)","50%":"opacity:0.7 transform:scale(1)"}});var Y1=!1,S1=class{[D2]=!0;compiled;ancestors;opts;$state=i.proxy({live:[],focus:0});$open=i.proxy({});nextOrder=0;containerEl;geom;lastGeom;layoutQueued=!1;timers=new Set;exiting=new Set;intent=null;settling=null;lastSeen=null;queued=null;constructor(a){if(Y1)throw new Error("Staffa: only one routed S.main() (one with `routes`) can be active at a time");Y1=!0,this.opts=a,this.compiled=Object.entries(a.routes).map(([e,h])=>({...R2(e),draw:h})),this.ancestors=Object.entries(a.ancestors??{}).filter(e=>e[1]!=null).map(([e,h])=>({...R2(e),fn:h})),i(()=>{let e=this.computeTarget(),h={...b.current.search},p=b.current.hash;i.peek(()=>{let r=this.lastSeen;if(r&&r.path!==b.current.path){let o=this.$state.live.find(d=>d.path===r.path);o&&(o.search=r.search,o.hash=r.hash)}this.lastSeen={path:b.current.path,search:h,hash:p},this.propose(e),Array.isArray(b.current.state.panels)||Object.assign(b.current.state,this.stateFor({stack:this.paths(),focus:this.$state.focus}))})}),this.interceptLinks(),this.watchTitle(),this.guardTabClose(),i.clean(()=>{for(let e of this.timers)clearTimeout(e);this.timers.clear(),this.queued?.settle(!1),this.queued=null,Y1=!1})}resolve(a){let e=u1(a);for(let h of this.compiled){let p=J1(h,e);if(p)return{draw:h.draw,params:p}}return{draw:this.opts.notFound??Z0,params:{}}}matches(a){let e=u1(a);return this.compiled.some(h=>J1(h,e)!=null)}deriveStack(a){let e=U(a),h=this.askAncestors(e),p=h?h.map(U):this.prefixesOf(e),r=[];for(let o of p)o!==e&&!r.includes(o)&&this.matches(o)&&r.push(o);return r.push(e),r}askAncestors(a){let e=u1(a);for(let h of this.ancestors){let p=J1(h,e);if(p)return h.fn(p,a)??void 0}}prefixesOf(a){let e=u1(a),h=[];for(let p=1;p<e.length;p++)h.push("/"+e.slice(0,p).join("/"));return h}pinnedIn(a,e){return a.filter(h=>e.includes(h)?!1:this.$state.live.find(p=>p.path===h)?.$panel.pinned===!0)}unsavedAt(a){return this.$state.live.find(e=>e.path===a)?.$panel.unsaved===!0}targetFor(a,e){let h=Array.isArray(e?.panels)?e.panels.map(String):null;if(h){let p=Array.isArray(e.parked)?e.parked.map(String):[],r=U(a),o=new Set([r]),d=c=>c.map(U).filter(m=>!o.has(m)&&!!o.add(m)),n=d(h);return{stack:[...n,r,...d(p)],focus:n.length}}return i.peek(()=>{let p=this.deriveStack(a).slice(0,-1),r=[...p,...this.pinnedIn(this.paths(),[...p,U(a)]),U(a)];return{stack:r,focus:r.length-1}})}computeTarget(){return this.targetFor(b.current.path,b.current.state)}paths(){return this.$state.live.map(a=>a.path)}propose(a){let e=this.$state.live.filter(h=>!a.stack.includes(h.path)&&h.$panel.unsaved).map(h=>h.path);e.length&&(a={stack:[...a.stack,...e],focus:a.focus}),!(Z2(this.paths(),a.stack)&&a.focus===this.$state.focus)&&this.commit(a,b.current.nav)}commit(a,e){this.geom=void 0;let h=b.current.state.pinned,p=new Set(Array.isArray(h)?h.map(String):[]),r=new Map(this.$state.live.map(n=>[n.path,n])),o=[];for(let n of a.stack){let c=r.get(n);if(c){r.delete(n),o.push(c);continue}let m=this.createEntry(n,o.length<=a.focus,p.has(n));e!=="load"&&(m.enter=!0),o.push(m),this.$open[n]=m}let d;for(let n of this.$state.live)r.has(n.path)?this.beginClose(n,d):d=n.path;this.$state.live=o,this.$state.focus=Math.min(a.focus,o.length-1),this.scheduleLayout()}createEntry(a,e,h){let{draw:p,params:r}=this.resolve(a),o={[D2]:!0,order:this.nextOrder++,path:a,draw:p,$ui:i.proxy({holding:!1}),maxWidth:"medium",width:0};return o.$panel=i.proxy({stack:this,params:r,path:a,width:0,visible:e,pinned:h||void 0,close:()=>this.closePath(o.path),open:(d,n)=>this.navigate(d,{from:o.path,how:n})}),o}beginClose(a,e){a.closing=!0,a.anchor=e,a.$panel.visible=!1,delete this.$open[a.path]}playExit(a,e){if(!a.closing){e.remove();return}e.classList.add("s-panel-closing"),e.setAttribute("inert","");let h=a.placed?{el:e,anchor:a.anchor,ride:0}:null;h&&this.exiting.add(h),this.afterTransition(e,"opacity",()=>{h&&this.exiting.delete(h),e.remove()})}afterTransition(a,e,h){let p=!1,r=setTimeout(()=>d(),N+80);this.timers.add(r);let o=()=>{clearTimeout(r),this.timers.delete(r)},d=()=>{o(),p||(p=!0,h())},n=c=>m=>{m.target===a&&m.propertyName===e&&c()};a.addEventListener("transitionrun",n(o)),a.addEventListener("transitionend",n(d)),a.addEventListener("transitioncancel",n(d))}intended(){return this.intent??{stack:this.paths(),focus:this.$state.focus}}stateFor(a){return{panels:a.stack.slice(0,a.focus),parked:a.stack.slice(a.focus+1),pinned:this.pinnedPaths()}}pinnedPaths(){return this.$state.live.filter(a=>a.$panel.pinned).map(a=>a.path)}issue(a,e){return this.intent=a,this.settling?(this.queued?.settle(!1),new Promise(h=>{this.queued={run:e,settle:h}})):this.start(e)}start(a){let e=p=>{this.settling=null;let r=this.queued;return this.queued=null,p&&r?this.start(r.run).then(r.settle,()=>r.settle(!1)):(this.intent=null,r?.settle(!1)),p},h=Promise.resolve(a()).then(e,p=>(console.error(p),e(!1)));return this.settling=h,h}focusAt(a){let e=this.intended();if(a<0||a>=e.stack.length||a===e.focus)return Promise.resolve(!1);let h={stack:e.stack,focus:a},p=e.stack[a];return this.issue(h,()=>{let r=this.$state.live.find(o=>o.path===p);return b.go({path:p,search:r?.search,hash:r?.hash,state:this.stateFor(h)})})}back(){return i.peek(()=>{let a=this.intended();return a.focus===a.stack.length-1&&!this.unsavedAt(a.stack[a.focus])?this.closePath(a.stack[a.focus]??""):a.focus===0?Promise.resolve(!1):this.focusAt(a.focus-1)})}closePath(a){return i.peek(()=>{let e=this.intended(),h=e.stack.indexOf(U(a));if(h<0||e.stack.length<2||this.unsavedAt(e.stack[h]))return Promise.resolve(!1);let p=e.stack.filter((c,m)=>m!==h),r=h===e.focus?Math.max(0,h-1):e.focus-(h<e.focus?1:0),o={stack:p,focus:r};if(h===e.focus&&h===e.stack.length-1){let c=this.$state.live.find(H=>H.path===p[r]),m={};c?.search&&(m.search=c.search),c?.hash&&(m.hash=c.hash);let $=p.filter(H=>this.$state.live.find(v=>v.path===H)?.$panel.pinned===!0);return this.issue(o,()=>Promise.resolve(b.back({path:p[r],state:{panels:p.slice(0,r),parked:[]}},m)).then(H=>(H&&(b.current.state.pinned=$),H)))}let d=p[r],n=d!==e.stack[e.focus];return this.issue(o,()=>{let c=n?this.$state.live.find(m=>m.path===d):void 0;return b.go({path:d,search:n?c?.search:{...b.current.search},hash:n?c?.hash:b.current.hash,state:this.stateFor(o)})})})}navigate(a,{from:e,how:h,beneath:p}={}){let r=h??this.opts.linkNavigation,o=r==="open"?null:e??null,d=r==="replace";return i.peek(()=>{let n;try{n=new URL(a,location.href)}catch{return Promise.resolve(!1)}let c=U(n.pathname),m=this.intended(),$=p?-1:m.stack.indexOf(c),H;if($>=0&&r!=="replace"&&r!=="open"){let g=this.pinnedIn(m.stack.slice($+1),[]);H={stack:[...m.stack.slice(0,$+1),...g],focus:$}}else{let g=o==null?-1:m.stack.indexOf(o),M=(p?p.map(U):g<0?this.deriveStack(c).slice(0,-1):m.stack.slice(0,d?g:g+1)).filter((k,G,h1)=>k!==c&&h1.indexOf(k)===G),u=[...M,...this.pinnedIn(m.stack,[...M,c,d?o:null])];H={stack:[...u,c],focus:u.length}}let v=$>=0?this.$state.live.find(g=>g.path===c):void 0,w=n.search?Object.fromEntries(new URLSearchParams(n.search)):v?.search??{},V=n.hash||v?.hash||"";if(H.focus===m.focus&&Z2(H.stack,m.stack)&&n.search===location.search&&(n.hash||"")===(location.hash||""))return Promise.resolve(!0);let A=this.stateFor(H);return d?this.issue(H,()=>(b.current.path=c,b.current.search=w,b.current.hash=V,b.current.state=A,i.runQueue(),b.current.path===c)):this.issue(H,()=>b.go({path:c,search:w,hash:V,state:A}))})}pushPath(a,e){return i.peek(()=>{let h=this.intended();return this.navigate(a,{from:h.stack[h.focus],how:e?"replace":"push"})})}interceptLinks(){b.interceptLinks((a,e,h)=>{if(h instanceof KeyboardEvent&&(h.ctrlKey||h.metaKey||h.shiftKey||h.altKey))return!1;let p=e.getAttribute("data-panel")??void 0,r=e.closest(".s-panel"),o=r?this.$state.live.find(d=>d.el===r):e.closest(".s-panel-origin")?this.$state.live[this.$state.focus]:void 0;return this.navigate(a.href,{from:o?.path,how:p}),!0})}get currentPanel(){return this.$state.live[this.$state.focus]?.$panel}get panels(){return this.$state.live.map(a=>a.$panel)}get currentPanelIndex(){return this.$state.focus}pushPanel(a){return this.pushPath(a,!1)}replacePanel(a){return this.pushPath(a,!0)}openPanelStack(a,e){return this.navigate(a,{how:"open",beneath:e})}closePanel(a){return i.peek(()=>{let e=this.intended();return this.closePath(a??e.stack[e.focus]??"")})}setColumns(a){this.opts.columns!==a&&(this.opts.columns=a,this.scheduleLayout())}setLinkNavigation(a){this.opts.linkNavigation=a}drawCrumbs(){C1({attrs:".s-crumbs role=navigation aria-label=Breadcrumbs",content:()=>{i(()=>{let a=this.panels.map(p=>p.path),e=this.currentPanelIndex,h;for(let p=0;p<a.length;p++){p&&k2({size:"0.85em",attrs:".s-crumb-sep"});let r=this.drawCrumb(a[p],p,p===e);p===e&&(h=r)}requestAnimationFrame(()=>{h&&z1(h)})})}})}drawCrumb(a,e,h){let p=this.$state.live[e];return i(h?"span.s-crumb aria-current=page":"a.s-crumb",()=>{h||i("href=",a),i(()=>{p?.$panel.visible&&i(".s-crumb-on")}),i(()=>{p?.$panel.unsaved&&w2({size:"0.45em",attrs:".s-crumb-unsaved"})}),i(()=>{p?.$panel.pinned&&K1({size:"0.85em",attrs:".s-crumb-pin"})}),i(()=>{i("#",p?.$panel.title??p?.$ui.fallback??(a.split("/").pop()||a))}),Q1({link:a,items:[{label:()=>{i(()=>{i("#",p?.$panel.pinned?"Unpin":"Pin")})},icon:()=>{i(()=>{(p?.$panel.pinned?V2:K1)()})},click:()=>{p&&this.togglePin(p)}},{label:"Close",icon:c1,disabled:p?.$panel.unsaved===!0,click:()=>{this.closePath(a)}}]})})}togglePin(a){a.$panel.pinned=!a.$panel.pinned||void 0,b.current.state.pinned=this.pinnedPaths()}watchTitle(){let a=document.title;i(()=>{let e=this.$state.live[this.$state.focus],h=e?.$panel.title??e?.$ui.fallback,p=typeof this.opts.title=="string"?this.opts.title:void 0,r=this.$state.live.some(d=>d.$panel.unsaved),o=h&&p?`${h} \xB7 ${p}`:h||p;o&&(document.title=(r?"\u2022 ":"")+o)}),i.clean(()=>{document.title=a})}guardTabClose(){if(typeof window>"u")return;let a=e=>{let h=this.$state.live.find(p=>p.$panel.unsaved);h&&(e.preventDefault(),e.returnValue=!0,this.flushLayout(),h.$panel.visible||this.focusAt(this.intended().stack.indexOf(h.path)))};i(()=>{this.$state.live.some(e=>e.$panel.unsaved)&&(window.addEventListener("beforeunload",a),i.clean(()=>window.removeEventListener("beforeunload",a)))})}drawColumns(){let a=i("div.s-panels role=main",()=>{this.containerEl=i(),i.onEach(this.$open,e=>this.drawPanel(e),e=>e.order)});if(typeof ResizeObserver<"u"){let e=new ResizeObserver(()=>this.layout());e.observe(a),i.clean(()=>e.disconnect())}i.clean(()=>{this.containerEl===a&&(this.containerEl=void 0)}),this.scheduleLayout()}drawPanel(a){let e;i(()=>{let h=a.$panel.maxWidth;a.maxWidth=h==="small"||h==="large"||h==="none"?h:"medium";let p=this.roomFor(a.maxWidth);p&&(a.width=p,i.peek(a.$panel,"width")!==p&&(a.$panel.width=p),e&&(e.style.width=`${p}px`,this.scheduleLayout()))}),e=i(`section.s-panel${a.width?` w:${a.width}px`:""}`,"destroy=",h=>this.playExit(a,h),()=>{i(()=>this.drawActions(a)),i("div.s-content",()=>{if(a.draw(a.$panel),b.persistScroll(a.path),i.peek(a.$panel,"title")==null){let h=R0(i());h&&i.peek(a.$ui,"fallback")!==h&&(a.$ui.fallback=h)}}),i(()=>{!a.$panel.loading||a.$ui.holding||i("div.s-panel-loading aria-hidden=true",()=>{i("i"),i("i"),i("i")})})}),a.el=e,a.placed=!1,e.style.transition="none",i.clean(()=>{a.el===e&&(a.el=void 0)}),i(()=>{a.$panel.loading,this.scheduleLayout()}),this.scheduleLayout()}drawActions(a){this.opts.$shell.narrow||a.$panel.actions==null||i("div.s-panel-actions",()=>l(a.$panel.actions))}scheduleLayout(){this.layoutQueued||(this.layoutQueued=!0,requestAnimationFrame(()=>this.flushLayout()))}flushLayout(){this.layoutQueued&&(this.layoutQueued=!1,this.layout())}measure(){let a=this.containerEl,e=a?a.getBoundingClientRect().width:0;if(!e)return;let h=Math.ceil(e/$1),p=e/h>=q0?e/h:Math.min(e,$1),r=o=>Math.min(o*p,e);return{area:e,size:{small:p,medium:r(2),large:r(3),none:e}}}geometry(){return this.geom??=this.measure()}roomFor(a){return this.geometry()?.size[a]??0}layout(){let a=this.containerEl,e=a?.closest(".s-main");if(!a||!e)return;let h=this.$state.live,p=h.length;if(!p||h.some(M=>!M.el))return;this.geom=void 0;let r=this.geometry();if(!r)return;let o=this.opts.columns==="single",d=this.lastGeom?.area!==r.area;d&&(this.lastGeom=r,e.classList.add("s-shell-snap"));let n=M=>r.size[M.maxWidth],c=Math.min(this.$state.focus,p-1),m=c,$=n(h[c]);if(!o)for(let M=c-1;M>=0;M--){let u=$+n(h[M]);if(u>r.area)break;$=u,m=M}let H=m>0?0:(r.area-$)/2;for(let M=m;M<=c;M++)h[M].width=n(h[M]);for(let M of h)M.width||(M.width=n(M));let v=[],w=[],V=new Map,A=new Map;if(!d)for(let M of h)M.placed&&A.set(M,D0(M.el));let g=H,e1=0;for(let M=0;M<m;M++)g-=h[M].width;for(let M=0;M<p;M++){let u=h[M],k=u.el,G=M>=m&&M<=c;M===c+1&&(g=Math.max(g,r.area)),(u.enter||!u.placed)&&(!u.$panel.loading||u.holdDone?u.$ui.holding=!1:u.$ui.holding||(u.$ui.holding=!0,this.holdEnter(u))),u.placed?(e1=parseFloat(k.style.left)-g,V.set(u.path,e1),e1&&!d&&(k.style.transition=`opacity ${N}ms linear`,k.style.transform=`translateX(${(A.get(u)??0)+e1}px)`,w.push(k)),k.style.left=`${g}px`,u.enter&&!u.$ui.holding&&this.releaseEnter(u)):(v.push(u),k.style.left=`${g}px`,u.enter&&G&&(k.style.transform=`translateX(${e1}px)`,k.classList.add("s-panel-enter","s-panel-new"))),k.style.width=`${u.width}px`,g+=u.width,u.$panel.visible!==G&&(u.$panel.visible=G),u.$panel.width!==u.width&&(u.$panel.width=u.width),k.classList.toggle("s-panel-sep",G&&M>m);let h1=M<m,F2=k.classList.contains("s-panel-hidden")||k.classList.contains("s-panel-parked");G?k.classList.remove("s-panel-hidden","s-panel-parked"):F2||!u.placed||d?(k.classList.toggle("s-panel-hidden",h1),k.classList.toggle("s-panel-parked",!h1)):this.afterTransition(k,"transform",()=>{u.el!==k||!u.offstage||(k.classList.toggle("s-panel-hidden",h1),k.classList.toggle("s-panel-parked",!h1))}),u.offstage=!G,k.toggleAttribute("inert",!G)}for(let M of this.exiting){let u=M.anchor==null?void 0:V.get(M.anchor);u&&(M.ride-=u,M.el.style.transform=`translateX(${M.ride}px)`)}(v.length||w.length||d)&&a.offsetWidth,d&&e.classList.remove("s-shell-snap");for(let M of w)M.style.transition="",M.style.transform="";for(let M of v){let u=M.el;u.style.transition="",u.style.transform="",M.placed=!0,M.$ui.holding||this.releaseEnter(M)}}releaseEnter(a){a.enter=!1;let e=a.el;!e||!e.classList.contains("s-panel-enter")||(e.classList.remove("s-panel-enter"),this.afterTransition(e,"opacity",()=>e.classList.remove("s-panel-new")))}holdEnter(a){let e=setTimeout(()=>{this.timers.delete(e),a.holdDone=!0,a.$ui.holding&&(a.$ui.holding=!1,this.scheduleLayout())},T0);this.timers.add(e)}};function Z2(t,a){return t.length===a.length&&t.every((e,h)=>e===a[h])}function D0(t){let a=getComputedStyle(t).transform;return a&&a!=="none"?new DOMMatrixReadOnly(a).m41:0}function R0(t){let a=document.createTreeWalker(t,NodeFilter.SHOW_TEXT);for(let e=a.nextNode();e;e=a.nextNode()){let h=e.textContent.trim();if(h)return h.length>48?`${h.slice(0,47).trimEnd()}\u2026`:h}}function Z0(t){i("p fg:$s-muted",()=>i("#",`No panel at ${t.path}`))}var B0=200;x.insertGlobalCss({".s-main":{"&":"display:flex flex-direction:column min-height:100vh max-height:100vh container-type:inline-size","body > &":"margin: calc(-1 * $3)","> header":"border:0 border-bottom: 1px solid $s-faint; r:0 position:sticky top:0 z-index:10","> footer":"border-top: 1px solid $s-faint; fg:$s-muted","> header > .s-bar, > footer > .s-bar":"display:flex align-items:center width:100% margin-inline:auto gap:$3 padding: $2 $3;","> header .s-logo, > header .s-nav-trigger":"display:flex align-items:center flex-shrink:0","> header .s-nav-trigger":"margin-left:-0.375rem","> header .s-logo":"font-size:1.4em background: $s-gradient; -webkit-background-clip:text; background-clip:text; color:transparent;","> header .s-titles":"display:flex flex-direction:column min-width:5rem flex: 0 1 auto;","> header .s-subtitle":"fg:$s-muted font-size:0.85em line-height:1.5 overflow:hidden text-overflow:ellipsis white-space:nowrap","> header .s-title":"font-weight:800 font-size:1.1em line-height:1.2 overflow:hidden text-overflow:ellipsis white-space:nowrap letter-spacing:-0.01em background: $s-gradient; -webkit-background-clip:text; background-clip:text; color:transparent; width:fit-content max-width:100%","> header a.s-logo, > header a.s-title":"text-decoration:none filter:none cursor:pointer","> header .s-menu":"display:flex align-items:center justify-content:flex-end gap:$2 flex: 1 1 auto;",".s-body":"flex:1 overflow:clip display:flex flex-direction:row min-height:0 justify-content:center position:relative",".s-body-inner":"flex:1 min-width:0 display:flex flex-direction:row min-height:0","&.s-nav-right .s-body-inner":"flex-direction:row-reverse",".s-nav-sep":"width:1px flex-shrink:0 align-self:stretch margin: 0.6rem 0; border:0 background: linear-gradient(to bottom, transparent, $s-faint 18%, $s-faint 82%, transparent);",".s-body main":`flex:1 min-width:0 min-height:0 overflow-x:hidden overflow-y:auto display:flex flex-direction:column transition: transform ${N}ms ease;`,".s-body main.s-slide-in":"transform: translateX(100%); transition:none",".s-body main > .s-content":"width:100% flex:1 p:$3",".s-body main.s-scroll-y":"margin-right:$3"},".s-nav-panel":{"&":"display:flex flex-direction:column overflow-y:auto flex-shrink:0 width: calc(var(--s-nav-w) - 1px); padding:$3 gap:$1"},".s-nav-page":{"&":`position:absolute inset:0 z-index:5 display:flex flex-direction:column overflow-y:auto overscroll-behavior:contain border:0 r:0 padding:$2 gap:$1 transition: transform ${N}ms ease, visibility 0s;`,"&.s-nav-page-off":`transform:translateX(-100%) pointer-events:none visibility:hidden transition: transform ${N}ms ease, visibility 0s ${N}ms;`,".s-menu-item":"padding: $2 $3; min-height:3rem font-size:1.05em gap:$3"},[`@container (max-width: ${g1}px)`]:{".s-main .s-nav-panel, .s-main .s-nav-sep":"display:none",".s-main > header > .s-bar":"gap:$1 padding: $1 $2;",".s-main .s-body main.s-scroll-y":"margin-right:0"},[`@container (max-width: ${$1}px)`]:{".s-content > .s-box":"margin-inline: calc(-1 * $3); r:0 border-inline:0"}});function F0(t={}){let a=t.nav,e=t.navPosition??"left",h=x.proxy({open:!1}),p=x.proxy({narrow:typeof document<"u"&&document.documentElement.clientWidth<=g1}),r=t.routes;if(r!=null&&t.content!=null)throw new Error("Staffa: S.main() takes either `content` or `routes`, not both");let o=r?new S1({routes:r,notFound:t.notFound,ancestors:t.ancestors,title:t.title,$shell:p}):null;o&&(x(()=>o.setColumns(t.columns)),x(()=>o.setLinkNavigation(t.linkNavigation)));let d=o&&t.home!==null?t.home??"/":null,n=()=>{t.maxWidth!=null&&x("max-width:",t.maxWidth)},c=x("div.s-main",t.attrs,()=>{x(()=>{a==null||!a.items.length?x("--s-nav-w: 0px"):x(`.s-nav-${e}`,`--s-nav-w: ${t.navWidth??B0}px`)}),x(()=>{(o!=null||t.title!=null||t.subtitle!=null||t.logo!=null||t.menu!=null||a!=null&&a.items.length>0)&&x("header.s-s.neutral",t.topbarAttrs,()=>{x("div.s-bar",()=>{x(n),x(()=>{if(p.narrow&&a!=null&&a.items.length){x("div.s-nav-trigger",()=>W0(a,h));return}t.logo!=null&&x(d!=null?"a.s-logo aria-label=Home":"div.s-logo",()=>{d!=null&&x("href=",d),l(t.logo)})}),x("div.s-titles",()=>{x(()=>{t.title!=null&&x(d!=null?"a.s-title":"div.s-title",()=>{d!=null&&x("href=",d),l(t.title)})}),K0(t,o,a,p)}),x(()=>{let $=p.narrow?o?.currentPanel?.actions:void 0,H=$??t.menu;H!=null&&x(`div.s-menu${$!=null?".s-panel-origin":""}`,()=>l(H))})})})}),x("div.s-body",()=>{x("div.s-body-inner",()=>{x(n),x(()=>{a==null||!a.items.length||(x(`nav.s-nav-panel.s-nav-${e}`,t.navAttrs,()=>{v1(a.items)}),x("div.s-nav-sep aria-hidden=true"))}),j0(t,o)}),x(()=>{a!=null&&a.items.length&&h.open&&G0(a,t.navPageAttrs,h,p)})}),x(()=>{t.footer!=null&&x("footer",()=>{x("div.s-bar",()=>{x(n),l(t.footer)})})})});return N0(c,p),a!=null&&m1(()=>a.items,()=>{h.open=!1}),(a!=null||o)&&x(()=>{let m=H=>()=>{F1()||L1()||H()},$=()=>c.querySelector(".s-nav-trigger button");h.open?E("Esc","Close the navigation",m(()=>{h.open=!1,$()?.focus()}),"global"):o&&o.currentPanelIndex>0?E("Esc","Back to the previous panel",m(()=>{o.back()}),"global"):E("Esc","Jump to the navigation",m(()=>{let H=c.querySelector(".s-nav-panel");H?.offsetParent!=null?(H.querySelector("[aria-current=page]")??H.querySelector(".s-menu-item:not([aria-disabled=true])"))?.focus():$()?.click()}),"global")}),o??void 0}var P1=null;function I0(){P1?.()}function K0(t,a,e,h){x(()=>{if(t.subtitle!=null&&(a==null||U0(a,e,h))){x("div.s-subtitle",()=>l(t.subtitle));return}a?.drawCrumbs()})}function U0(t,a,e){return e.narrow||a==null||t.panels.length>1?!1:W1(a.items)}function N0(t,a){if(typeof ResizeObserver>"u")return;let e=new ResizeObserver(h=>{let p=h[0]?.contentBoxSize?.[0],r=p?p.inlineSize:h[0]?.contentRect.width;r!=null&&(a.narrow=r<=g1)});e.observe(t),x.clean(()=>e.disconnect())}function W0(t,a){s1({icon:t.button?.icon??(()=>x(()=>(a.open?c1:H1)())),ariaLabel:t.button?.ariaLabel??"Open navigation",attrs:t.button?.attrs,click:()=>{a.open=!a.open}})}function G0(t,a,e,h){let p=!1,r=()=>{p=!0,e.open=!1},o=x("nav.s-nav-page.s-s.neutral aria-label=Navigation create=s-nav-page-off destroy=s-nav-page-off",a,()=>v1(t.items,r));P1=r,x.clean(()=>{P1===r&&(P1=null)});let d=x.peek(a2,"path");x(()=>{a2.path!==d&&!j1(a2.path)&&r()});let n=o.closest(".s-main"),c=o.parentElement?.querySelector(":scope > .s-body-inner"),m=c?.querySelector(":scope > main");c?.setAttribute("inert",""),x(()=>{h.narrow||(e.open=!1)}),x.clean(()=>{c?.removeAttribute("inert"),p&&(m&&X0(m),n?.querySelector(".s-nav-trigger button")?.focus())}),requestAnimationFrame(()=>{document.body.contains(o)&&p1(o,".s-menu-item[aria-current=page]")})}function X0(t){t.classList.add("s-slide-in"),t.offsetWidth,t.classList.remove("s-slide-in")}function j0(t,a){if(a){a.drawColumns();return}let e=x("main",()=>{x("div.s-content",t.contentAttrs,()=>{l(t.content)})});_0(e)}function _0(t){if(typeof ResizeObserver>"u")return;let a=()=>t.classList.toggle("s-scroll-y",t.offsetWidth>t.clientWidth),e=new ResizeObserver(a);e.observe(t),t.firstElementChild&&e.observe(t.firstElementChild),a(),x.clean(()=>e.disconnect())}import T from"aberdeen";T.insertGlobalCss({".s-select_wrap":{"&":"position:relative display:block",select:"w:100% cursor:pointer padding-right:2.2em; appearance:none","&::after":"content: '\u25BE'; position:absolute right:0.7em top:50%; transform: translateY(-50%); pointer-events:none fg:$s-muted font-size:0.85em"}});function Q0(t){_(t,(a,e)=>{T("div.s-select_wrap",()=>{T("select.s-input",t.inputAttrs,()=>{d1(t,a,e),T("change=",h=>{t.bind&&(t.bind.value=h.target.value)}),T(()=>{let h=typeof t.options=="function"?t.options():t.options,p=t.bind?.value??"";t.placeholder!=null&&T("option",()=>{T("value= disabled=true hidden=true"),p||T("selected=true"),T("#",t.placeholder)});for(let r of h){let o=typeof r=="string"?{value:r,label:r}:{value:r.value,label:r.label??r.value};T("option",()=>{T("value=",o.value),o.value===p&&T("selected=true"),T("#",o.label)})}})})})})}import W from"aberdeen";W.insertGlobalCss({"textarea.s-input":"resize:vertical min-height:3em line-height:1.45","textarea.s-input.s-autoGrow":"resize:none min-height:2.5em overflow-y:hidden"});function J0(t={}){let a=t.autoGrow!==!1;_(t,(e,h)=>{let p=W("textarea.s-input",t.inputAttrs,()=>{a?(W(".s-autoGrow"),W("input=",r=>{B2(r.currentTarget),t.input&&t.input(r)})):(W("rows=",t.rows??4),W("resize:",t.resize??"vertical"),t.input&&W("input=",t.input)),t.placeholder!=null&&W("placeholder=",t.placeholder),t.value!=null&&!t.bind&&W("value=",t.value),t.change&&W("change=",t.change),d1(t,e,h,t.bind)});a&&requestAnimationFrame(()=>B2(p))})}function B2(t){t.style.height="auto",t.style.height=`${t.scrollHeight}px`}export{Q1 as addContextMenu,i1 as addTooltip,e0 as alert,n0 as autocomplete,E as bindKey,s0 as box,Z as button,l0 as buttonChooser,Y as buttonGroup,M0 as checkbox,T2 as closeFloatingMenu,I0 as closeNav,h0 as confirm,n1 as dialog,x0 as form,D as formatKey,p2 as getDarkMode,s1 as iconButton,F1 as isDialogOpen,L1 as isFloatingMenuOpen,F0 as main,L0 as menu,C0 as menuButton,p0 as prompt,z1 as revealInStrip,C1 as scrollStrip,Q0 as select,K2 as setDarkMode,r0 as setKeyHelp,_1 as showFloatingMenu,I1 as showKeyHelp,S0 as tabs,J0 as textarea,B1 as textline,A1 as toast};
|
package/package.json
CHANGED
package/skill/ButtonOptions.md
CHANGED
|
@@ -48,7 +48,8 @@ Render as a link (`<a role=button>`) pointing here instead of a `<button>`.
|
|
|
48
48
|
|
|
49
49
|
### buttonOptions.ariaLabel · member
|
|
50
50
|
|
|
51
|
-
Accessible label, when the button has only an icon.
|
|
51
|
+
Accessible label, when the button has only an icon. A string `tooltip` is
|
|
52
|
+
taken as the label of such a button when this is left out.
|
|
52
53
|
|
|
53
54
|
**Type:** `string`
|
|
54
55
|
|
|
@@ -67,9 +68,10 @@ its `ariaLabel`).
|
|
|
67
68
|
### buttonOptions.tooltip · member
|
|
68
69
|
|
|
69
70
|
A tooltip, shown on hover and keyboard focus. A string renders as rich
|
|
70
|
-
text, a function draws its own markup.
|
|
71
|
-
|
|
72
|
-
|
|
71
|
+
text, a function draws its own markup. There is none unless you ask for
|
|
72
|
+
one. A `key` is appended to it, behind a `·`; pass `false` to suppress
|
|
73
|
+
even that. On an icon-only button, a string tooltip doubles as the
|
|
74
|
+
`ariaLabel` when that is left out.
|
|
73
75
|
|
|
74
76
|
Works on a disabled button too, which is where a tooltip earns its keep:
|
|
75
77
|
it is the only room there is to say why.
|
|
@@ -10,7 +10,9 @@ The glyph, usually one of the `staffa/icons` draw functions.
|
|
|
10
10
|
|
|
11
11
|
### iconButtonOptions.ariaLabel · member
|
|
12
12
|
|
|
13
|
-
What it does, for screen readers
|
|
13
|
+
What it does, for screen readers: there is no visible text to read. Required,
|
|
14
|
+
unless the `tooltip` is a string — that names the button just as well, and is
|
|
15
|
+
taken as the label when this is left out.
|
|
14
16
|
|
|
15
17
|
**Type:** `string`
|
|
16
18
|
|
|
@@ -24,18 +26,19 @@ settles, with further clicks bouncing off — see `ButtonOptions.click`.
|
|
|
24
26
|
### iconButtonOptions.key · member
|
|
25
27
|
|
|
26
28
|
A keyboard shortcut that presses this button — see `ButtonOptions.key`.
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
lists it under that label too.
|
|
29
|
+
It is shown after the button's `tooltip`, or alone in a tooltip of its own
|
|
30
|
+
when there is none, and the `?` overview lists it under the button's label.
|
|
30
31
|
|
|
31
32
|
**Type:** `string`
|
|
32
33
|
|
|
33
34
|
### iconButtonOptions.tooltip · member
|
|
34
35
|
|
|
35
36
|
A tooltip, shown on hover and keyboard focus; a string renders as rich
|
|
36
|
-
text.
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
text. There is none unless you ask for one — but do consider it here, as
|
|
38
|
+
a glyph says nothing to whoever cannot guess it. A string doubles as the
|
|
39
|
+
`ariaLabel` when that is left out, so an icon button usually needs one
|
|
40
|
+
option, not two. A `key` is appended to the tip, behind a `·`; pass
|
|
41
|
+
`false` to suppress even that.
|
|
39
42
|
|
|
40
43
|
Works on a disabled button too, which is where a tooltip earns its keep:
|
|
41
44
|
it is the only room there is to say why.
|
package/skill/SKILL.md
CHANGED
|
@@ -249,10 +249,10 @@ Buttons, icon buttons and menu items carry a `tooltip` option of their own, so m
|
|
|
249
249
|
|
|
250
250
|
```ts
|
|
251
251
|
S.button({ content: "Publish", tooltip: "Not until the draft validates", disabled: true });
|
|
252
|
-
S.iconButton({ icon: trash2,
|
|
252
|
+
S.iconButton({ icon: trash2, tooltip: "Delete" }); // says "Delete" on hover, and to screen readers
|
|
253
253
|
```
|
|
254
254
|
|
|
255
|
-
|
|
255
|
+
A tooltip appears only where one is asked for; on an icon button, a string `tooltip` doubles as the `ariaLabel` when that is left out, so naming a glyph takes one option rather than two. A `key` is appended to whatever the tip says (`tooltip: false` keeps even that quiet), and — unlike a tooltip on a plain disabled `<button>`, which the browser gives no hover events — these show while disabled, which is where a tooltip earns its keep.
|
|
256
256
|
|
|
257
257
|
`src/index.ts` is the authoritative list of exports.
|
|
258
258
|
|
package/skill/iconButton.md
CHANGED
|
@@ -20,7 +20,9 @@ an icon alone is unambiguous only for a handful of universal actions.
|
|
|
20
20
|
import { trash2, share2 } from "staffa/icons";
|
|
21
21
|
|
|
22
22
|
$panel.actions = () => {
|
|
23
|
-
|
|
23
|
+
// A string `tooltip` names the button for screen readers too, so one option does.
|
|
24
|
+
S.iconButton({ icon: share2, tooltip: "Share", click: share });
|
|
25
|
+
// Named, but silent on hover: `ariaLabel` alone raises no tooltip.
|
|
24
26
|
S.iconButton({ icon: trash2, ariaLabel: "Delete", click: del, attrs: "fg:$s-danger" });
|
|
25
27
|
};
|
|
26
28
|
```
|
package/src/components/button.ts
CHANGED
|
@@ -7,8 +7,12 @@ import { addTooltip } from "./tooltip.js";
|
|
|
7
7
|
export interface IconButtonOptions {
|
|
8
8
|
/** The glyph, usually one of the `staffa/icons` draw functions. */
|
|
9
9
|
icon: Slot;
|
|
10
|
-
/**
|
|
11
|
-
|
|
10
|
+
/**
|
|
11
|
+
* What it does, for screen readers: there is no visible text to read. Required,
|
|
12
|
+
* unless the `tooltip` is a string — that names the button just as well, and is
|
|
13
|
+
* taken as the label when this is left out.
|
|
14
|
+
*/
|
|
15
|
+
ariaLabel?: string;
|
|
12
16
|
/**
|
|
13
17
|
* Click handler. Return a promise and the glyph becomes a spinner until it
|
|
14
18
|
* settles, with further clicks bouncing off — see {@link ButtonOptions.click}.
|
|
@@ -16,16 +20,17 @@ export interface IconButtonOptions {
|
|
|
16
20
|
click?: (event: Event) => unknown;
|
|
17
21
|
/**
|
|
18
22
|
* A keyboard shortcut that presses this button — see {@link ButtonOptions.key}.
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
* lists it under that label too.
|
|
23
|
+
* It is shown after the button's `tooltip`, or alone in a tooltip of its own
|
|
24
|
+
* when there is none, and the `?` overview lists it under the button's label.
|
|
22
25
|
*/
|
|
23
26
|
key?: string;
|
|
24
27
|
/**
|
|
25
28
|
* A tooltip, shown on hover and keyboard focus; a string renders as rich
|
|
26
|
-
* text.
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
+
* text. There is none unless you ask for one — but do consider it here, as
|
|
30
|
+
* a glyph says nothing to whoever cannot guess it. A string doubles as the
|
|
31
|
+
* `ariaLabel` when that is left out, so an icon button usually needs one
|
|
32
|
+
* option, not two. A `key` is appended to the tip, behind a `·`; pass
|
|
33
|
+
* `false` to suppress even that.
|
|
29
34
|
*
|
|
30
35
|
* Works on a disabled button too, which is where a tooltip earns its keep:
|
|
31
36
|
* it is the only room there is to say why.
|
|
@@ -67,7 +72,10 @@ export interface ButtonOptions {
|
|
|
67
72
|
type?: "button" | "submit" | "reset";
|
|
68
73
|
/** Render as a link (`<a role=button>`) pointing here instead of a `<button>`. */
|
|
69
74
|
href?: string;
|
|
70
|
-
/**
|
|
75
|
+
/**
|
|
76
|
+
* Accessible label, when the button has only an icon. A string `tooltip` is
|
|
77
|
+
* taken as the label of such a button when this is left out.
|
|
78
|
+
*/
|
|
71
79
|
ariaLabel?: string;
|
|
72
80
|
/**
|
|
73
81
|
* A keyboard shortcut that presses this button: `"mod+s"`, `"f2"` — see
|
|
@@ -81,9 +89,10 @@ export interface ButtonOptions {
|
|
|
81
89
|
key?: string;
|
|
82
90
|
/**
|
|
83
91
|
* A tooltip, shown on hover and keyboard focus. A string renders as rich
|
|
84
|
-
* text, a function draws its own markup.
|
|
85
|
-
*
|
|
86
|
-
*
|
|
92
|
+
* text, a function draws its own markup. There is none unless you ask for
|
|
93
|
+
* one. A `key` is appended to it, behind a `·`; pass `false` to suppress
|
|
94
|
+
* even that. On an icon-only button, a string tooltip doubles as the
|
|
95
|
+
* `ariaLabel` when that is left out.
|
|
87
96
|
*
|
|
88
97
|
* Works on a disabled button too, which is where a tooltip earns its keep:
|
|
89
98
|
* it is the only room there is to say why.
|
|
@@ -184,22 +193,25 @@ A.insertGlobalCss({
|
|
|
184
193
|
* import { trash2, share2 } from "staffa/icons";
|
|
185
194
|
*
|
|
186
195
|
* $panel.actions = () => {
|
|
187
|
-
*
|
|
196
|
+
* // A string `tooltip` names the button for screen readers too, so one option does.
|
|
197
|
+
* S.iconButton({ icon: share2, tooltip: "Share", click: share });
|
|
198
|
+
* // Named, but silent on hover: `ariaLabel` alone raises no tooltip.
|
|
188
199
|
* S.iconButton({ icon: trash2, ariaLabel: "Delete", click: del, attrs: "fg:$s-danger" });
|
|
189
200
|
* };
|
|
190
201
|
* ```
|
|
191
202
|
*/
|
|
192
203
|
export function iconButton(opts: IconButtonOptions): void {
|
|
193
204
|
const tag = opts.href != null ? "a" : "button";
|
|
194
|
-
|
|
195
|
-
//
|
|
196
|
-
|
|
205
|
+
const tip = opts.tooltip === false ? undefined : opts.tooltip;
|
|
206
|
+
// A glyph says nothing on its own, so the button needs a name — and a tooltip
|
|
207
|
+
// written as a string already is one. Said once, it serves both.
|
|
208
|
+
const label = opts.ariaLabel ?? (typeof tip === "string" ? plainText(tip) : undefined);
|
|
197
209
|
A(`${tag}.s-icon-btn`, opts.attrs, () => {
|
|
198
210
|
applyActionBehavior(opts, tip != null);
|
|
199
|
-
A("aria-label=",
|
|
211
|
+
A("aria-label=", label);
|
|
200
212
|
// Before the glyph, so a tooltip the caller adds in there is the later of
|
|
201
213
|
// the two and wins the hover.
|
|
202
|
-
applyTooltipAndKey(
|
|
214
|
+
applyTooltipAndKey(opts.tooltip, opts.key, label, opts.disabled);
|
|
203
215
|
drawSlot(opts.icon);
|
|
204
216
|
});
|
|
205
217
|
}
|
|
@@ -265,24 +277,41 @@ function applyClick(click: (event: Event) => unknown): void {
|
|
|
265
277
|
});
|
|
266
278
|
}
|
|
267
279
|
|
|
280
|
+
/**
|
|
281
|
+
* A rich-text string as a screen reader should hear it. Same pattern Aberdeen's
|
|
282
|
+
* `rich=` draws with, so a tooltip standing in as the accessible name says the
|
|
283
|
+
* words it shows, and not its own asterisks and brackets.
|
|
284
|
+
*/
|
|
285
|
+
function plainText(rich: string): string {
|
|
286
|
+
return rich.replace(/\*\*(.+?)\*\*|\*(.+?)\*|`(.+?)`|\[(.+?)\]\((.+?)\)/g,
|
|
287
|
+
(_m, bold, italic, code, link) => bold ?? italic ?? code ?? link);
|
|
288
|
+
}
|
|
289
|
+
|
|
268
290
|
/**
|
|
269
291
|
* The tooltip and shortcut plumbing {@link button} and {@link iconButton} share:
|
|
270
292
|
* show the tip, with the key appended — the only place a button can say what its
|
|
271
293
|
* key is without shouting it beside the label — then bind that key and announce
|
|
272
|
-
* it as `aria-keyshortcuts`.
|
|
294
|
+
* it as `aria-keyshortcuts`. A key with no tooltip to join gets a tip of its
|
|
295
|
+
* own, saying the combination and no more.
|
|
273
296
|
*
|
|
274
|
-
* Pressing
|
|
297
|
+
* Pressing the key clicks the element rather than calling `click` directly, so a
|
|
275
298
|
* `type=submit` still submits its form and an `href` still navigates. Call this
|
|
276
299
|
* inside the button's own element scope, whose element it takes and whose life
|
|
277
|
-
* the binding follows.
|
|
300
|
+
* the binding follows. `keyLabel` is how the `?` overview names the shortcut.
|
|
278
301
|
*/
|
|
279
|
-
function applyTooltipAndKey(
|
|
280
|
-
|
|
302
|
+
function applyTooltipAndKey(
|
|
303
|
+
tooltip: Slot | false | undefined,
|
|
304
|
+
key: string | undefined,
|
|
305
|
+
keyLabel: string | undefined,
|
|
306
|
+
disabled?: boolean,
|
|
307
|
+
): void {
|
|
308
|
+
// `false` is a vow of silence: not even a key raises a tip on this one.
|
|
309
|
+
if (tooltip !== false && (tooltip != null || key)) {
|
|
281
310
|
addTooltip({
|
|
282
311
|
tip: () => {
|
|
283
|
-
drawSlot(
|
|
312
|
+
drawSlot(tooltip);
|
|
284
313
|
// A draw function, not a string: a key like `*` is markup to rich text.
|
|
285
|
-
if (key) A("#",
|
|
314
|
+
if (key) A("#", tooltip == null ? formatKey(key) : ` · ${formatKey(key)}`);
|
|
286
315
|
},
|
|
287
316
|
});
|
|
288
317
|
}
|
|
@@ -292,7 +321,7 @@ function applyTooltipAndKey(tip: Slot | undefined, key: string | undefined, labe
|
|
|
292
321
|
if (key && !disabled) {
|
|
293
322
|
const el = A() as HTMLElement;
|
|
294
323
|
A("aria-keyshortcuts=", formatKey(key, true));
|
|
295
|
-
bindKey(key,
|
|
324
|
+
bindKey(key, keyLabel, () => el.click());
|
|
296
325
|
}
|
|
297
326
|
}
|
|
298
327
|
|
|
@@ -326,18 +355,19 @@ export function button(opts: ButtonOptions | Slot = {}): void {
|
|
|
326
355
|
const o: ButtonOptions = typeof opts === "string" || typeof opts === "function" ? { content: opts } : opts;
|
|
327
356
|
|
|
328
357
|
const tag = o.href != null ? "a" : "button";
|
|
329
|
-
|
|
330
|
-
//
|
|
331
|
-
|
|
358
|
+
const tip = o.tooltip === false ? undefined : o.tooltip;
|
|
359
|
+
// Only a button without visible text needs naming, and a string tooltip is a
|
|
360
|
+
// name: on one that has text, an aria-label would *hide* that text from AT.
|
|
361
|
+
const label = o.ariaLabel ?? (o.content == null && typeof tip === "string" ? plainText(tip) : undefined);
|
|
332
362
|
|
|
333
363
|
// A bare `.s-s` is a filled `.primary` surface (see theme.ts), so no role
|
|
334
364
|
// detection here: `attrs` just names another role or variant.
|
|
335
365
|
A(`${tag}.s-btn.s-s.shadow`, o.attrs, () => {
|
|
336
366
|
applyActionBehavior(o, tip != null);
|
|
337
|
-
if (
|
|
367
|
+
if (label) A("aria-label=", label);
|
|
338
368
|
// Before the content, so a tooltip the caller adds in there is the later of
|
|
339
369
|
// the two and wins the hover.
|
|
340
|
-
applyTooltipAndKey(
|
|
370
|
+
applyTooltipAndKey(o.tooltip, o.key, typeof o.content === "string" ? o.content : label, o.disabled);
|
|
341
371
|
|
|
342
372
|
drawSlot(o.icon);
|
|
343
373
|
drawSlot(o.content);
|