staffa 0.3.0 → 0.4.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.
Files changed (43) hide show
  1. package/README.md +35 -2
  2. package/dist/components/box.d.ts +2 -2
  3. package/dist/components/box.js +3 -4
  4. package/dist/components/button.d.ts +9 -11
  5. package/dist/components/button.js +16 -18
  6. package/dist/components/buttonChooser.d.ts +5 -5
  7. package/dist/components/buttonChooser.js +7 -5
  8. package/dist/components/buttonGroup.js +2 -2
  9. package/dist/components/dialog.d.ts +2 -2
  10. package/dist/components/dialog.js +10 -10
  11. package/dist/components/form.d.ts +4 -4
  12. package/dist/components/form.js +6 -6
  13. package/dist/components/main.d.ts +5 -5
  14. package/dist/components/main.js +28 -40
  15. package/dist/components/menu.d.ts +3 -3
  16. package/dist/components/menu.js +8 -6
  17. package/dist/components/tabs.d.ts +3 -3
  18. package/dist/components/tabs.js +1 -1
  19. package/dist/components/toast.d.ts +1 -3
  20. package/dist/components/toast.js +2 -2
  21. package/dist/components/tooltip.js +2 -2
  22. package/dist/core.d.ts +10 -4
  23. package/dist/core.js +13 -0
  24. package/dist/index.d.ts +19 -65
  25. package/dist/index.js +18 -48
  26. package/dist/staffa.esm.js +1 -1
  27. package/dist/theme.d.ts +0 -7
  28. package/dist/theme.js +37 -14
  29. package/package.json +9 -2
  30. package/src/components/box.ts +5 -5
  31. package/src/components/button.ts +21 -22
  32. package/src/components/buttonChooser.ts +10 -8
  33. package/src/components/buttonGroup.ts +2 -1
  34. package/src/components/dialog.ts +10 -10
  35. package/src/components/form.ts +8 -8
  36. package/src/components/main.ts +31 -40
  37. package/src/components/menu.ts +9 -7
  38. package/src/components/tabs.ts +4 -4
  39. package/src/components/toast.ts +3 -5
  40. package/src/components/tooltip.ts +2 -2
  41. package/src/core.ts +16 -5
  42. package/src/index.ts +21 -76
  43. package/src/theme.ts +36 -22
@@ -1,6 +1,6 @@
1
1
  import A from "aberdeen";
2
2
  import { matchCurrent } from "aberdeen/route";
3
- import { drawSlot } from "../core.js";
3
+ import { drawSlot, mountPortal } from "../core.js";
4
4
  import { button } from "./button.js";
5
5
  // Styles shared by the floating dropdown and the sidebar nav, so both look
6
6
  // identical. The item styles aren't scoped to a container, so `drawMenu` can
@@ -19,7 +19,7 @@ A.insertGlobalCss({
19
19
  // cleanly: transitioning background from `transparent` toward an opaque colour
20
20
  // flashes through dark mid-tones in browsers that interpolate non-premultiplied.
21
21
  // Staying ink-hued at low alpha keeps the fade the right colour throughout.
22
- ".s-menu-item:hover:not([aria-disabled=true]), .s-menu-item-link:hover": "background: color-mix(in srgb, $s-fg 10%, transparent);",
22
+ ".s-menu-item:hover:not([aria-disabled=true]):not([aria-current=page]), .s-menu-item-link:hover:not([aria-current=page])": "background: color-mix(in srgb, $s-fg 10%, transparent);",
23
23
  // Active (current page): a filled brand-gradient pill with a soft glow — the
24
24
  // one place the menu shows real colour, so the current page is unmistakable.
25
25
  ".s-menu-item[aria-current=page], .s-menu-item-link[aria-current=page]": "color:$s-on-accent font-weight:600 background: $s-gradient; box-shadow: 0 3px 10px color-mix(in srgb, $s-primary 38%, transparent);",
@@ -68,8 +68,8 @@ export function drawMenu(items, onActivate) {
68
68
  els[next].focus();
69
69
  });
70
70
  for (const entry of items) {
71
- if (typeof entry === "function") {
72
- entry();
71
+ if (typeof entry === "string" || typeof entry === "function") {
72
+ drawSlot(entry);
73
73
  continue;
74
74
  }
75
75
  if ("separator" in entry) {
@@ -122,7 +122,7 @@ function positionMenu(menuEl, rect) {
122
122
  menuEl.style.left = Math.max(8, x) + "px";
123
123
  menuEl.style.top = Math.max(8, y) + "px";
124
124
  }
125
- A.mount(document.body, () => {
125
+ mountPortal(() => {
126
126
  const f = $floating.opts;
127
127
  if (!f)
128
128
  return;
@@ -202,7 +202,9 @@ export function menuButton(opts) {
202
202
  closeFloating(); });
203
203
  button({
204
204
  icon: () => A("span aria-hidden=true #☰"),
205
- ariaLabel: "Open menu",
205
+ // Only label the trigger "Open menu" when it has no visible text of its
206
+ // own — an aria-label would otherwise *hide* that text from AT.
207
+ ...(opts.button?.content == null ? { ariaLabel: "Open menu" } : null),
206
208
  attrs: ".neutral .outlined",
207
209
  ...opts.button,
208
210
  click: (e) => {
@@ -1,4 +1,4 @@
1
- import { type Bindable, type Content, type Slot, type Attributes } from "../core.js";
1
+ import { type Bindable, type Slot, type Attributes } from "../core.js";
2
2
  /** A single tab definition. */
3
3
  export interface Tab {
4
4
  /** Stable id used as the selection value. Falls back to the array index. */
@@ -7,8 +7,8 @@ export interface Tab {
7
7
  label: Slot;
8
8
  /** Optional leading icon. */
9
9
  icon?: Slot;
10
- /** Content rendered in the panel when this tab is active. */
11
- content?: Content;
10
+ /** Content rendered in the panel when this tab is active. A string is rendered as rich text. */
11
+ content?: Slot;
12
12
  /** Disables selecting this tab. */
13
13
  disabled?: boolean;
14
14
  }
@@ -67,7 +67,7 @@ export function tabs(opts) {
67
67
  if (!tab)
68
68
  return;
69
69
  A(`id=${groupId}-panel-${keyOf(tab, index)} aria-labelledby=${groupId}-tab-${keyOf(tab, index)}`);
70
- tab.content?.();
70
+ drawSlot(tab.content);
71
71
  });
72
72
  });
73
73
  });
@@ -1,5 +1,4 @@
1
1
  import { type Slot, type Attributes } from "../core.js";
2
- import type { SurfaceRole } from "../theme.js";
3
2
  /** Options for {@link toast}. */
4
3
  export interface ToastOptions {
5
4
  /** Primary message. A string is rendered as rich text. */
@@ -8,9 +7,8 @@ export interface ToastOptions {
8
7
  title?: Slot;
9
8
  /**
10
9
  * Colour role. Defaults to `"neutral"`.
11
- * Use `"success"` / `"danger"` / `"warning"` for semantic feedback.
12
10
  */
13
- type?: SurfaceRole;
11
+ type?: "success" | "danger" | "warning" | "neutral";
14
12
  /**
15
13
  * Auto-dismiss delay in milliseconds. Defaults to `4000`.
16
14
  * Pass `0` to make the toast persistent until dismissed manually.
@@ -1,6 +1,6 @@
1
1
  import A from "aberdeen";
2
2
  import { grow, shrink } from "aberdeen/transitions";
3
- import { drawSlot } from "../core.js";
3
+ import { drawSlot, mountPortal } from "../core.js";
4
4
  A.insertGlobalCss({
5
5
  ".s-toasts": "position:fixed bottom:$3 right:$3 z-index:400 " +
6
6
  "display:flex flex-direction:column gap:$2 " +
@@ -21,7 +21,7 @@ A.insertGlobalCss({
21
21
  let toastCount = 0;
22
22
  // Keyed by stable ID so A.onEach scopes are per-toast — removing one never re-renders others.
23
23
  const toasts = A.proxy({});
24
- A.mount(document.body, () => {
24
+ mountPortal(() => {
25
25
  A("div.s-toasts aria-live=polite aria-atomic=false", () => {
26
26
  A.onEach(toasts, (entry) => {
27
27
  const { opts } = entry;
@@ -1,5 +1,5 @@
1
1
  import A from "aberdeen";
2
- import { drawSlot } from "../core.js";
2
+ import { drawSlot, mountPortal } from "../core.js";
3
3
  A.insertGlobalCss({
4
4
  ".s-tt-tip": {
5
5
  "&": "position:fixed z-index:500 " +
@@ -67,7 +67,7 @@ function scheduleHide() {
67
67
  }, 100);
68
68
  }
69
69
  // ─── Portal ──────────────────────────────────────────────────────────────────
70
- A.mount(document.body, () => {
70
+ mountPortal(() => {
71
71
  const active = $ttActive.value;
72
72
  if (!active)
73
73
  return;
package/dist/core.d.ts CHANGED
@@ -26,8 +26,6 @@ export type Attributes = string;
26
26
  export type Bindable<T> = {
27
27
  value: T;
28
28
  };
29
- /** A content function. It runs inside the relevant element's reactive scope. */
30
- export type Content = () => void;
31
29
  /**
32
30
  * Something that renders a small piece of content: either a plain string or a
33
31
  * draw function (for icons, badges, custom markup, ...).
@@ -47,8 +45,8 @@ export type Slot<Args extends unknown[] = []> = string | ((...args: Args) => voi
47
45
  export interface ContentOptions {
48
46
  /** Aberdeen attr/style string applied to the widget's outermost element. */
49
47
  attrs?: Attributes;
50
- /** Draws the children of this component. */
51
- content?: Content;
48
+ /** Draws the children of this component. A string is rendered as rich text. */
49
+ content?: Slot;
52
50
  }
53
51
  /** Generates a process-unique id, used to wire `<label for>` to its control. */
54
52
  export declare function uniqueId(prefix?: string): string;
@@ -58,3 +56,11 @@ export declare function uniqueId(prefix?: string): string;
58
56
  * `rich` markup (`*italic*`, `**bold**`, `` `code` ``, `[link](/path)`).
59
57
  */
60
58
  export declare function drawSlot<Args extends unknown[] = []>(slot: Slot<Args> | undefined, ...args: Args): void;
59
+ /**
60
+ * Mount a portal (tooltip, toast, menu, dialog, …) in its own dedicated
61
+ * container under `<body>`. Each portal gets a private parent element because
62
+ * two `A.mount`s sharing one parent can't tell their nodes apart: a redraw of
63
+ * one (e.g. a tooltip hiding) may sweep up nodes another portal inserted
64
+ * earlier in the same parent (e.g. an open menu).
65
+ */
66
+ export declare function mountPortal(draw: () => void): void;
package/dist/core.js CHANGED
@@ -17,3 +17,16 @@ export function drawSlot(slot, ...args) {
17
17
  else
18
18
  A("rich=", slot);
19
19
  }
20
+ /**
21
+ * Mount a portal (tooltip, toast, menu, dialog, …) in its own dedicated
22
+ * container under `<body>`. Each portal gets a private parent element because
23
+ * two `A.mount`s sharing one parent can't tell their nodes apart: a redraw of
24
+ * one (e.g. a tooltip hiding) may sweep up nodes another portal inserted
25
+ * earlier in the same parent (e.g. an open menu).
26
+ */
27
+ export function mountPortal(draw) {
28
+ const container = document.createElement("div");
29
+ container.style.display = "contents";
30
+ document.body.appendChild(container);
31
+ A.mount(container, draw);
32
+ }
package/dist/index.d.ts CHANGED
@@ -5,7 +5,7 @@
5
5
  * Import the default `S` object and call its component functions:
6
6
  *
7
7
  * ```ts
8
- * import S from "staffa";
8
+ * import * as S from "staffa";
9
9
  *
10
10
  * S.main({
11
11
  * title: "Hello",
@@ -17,7 +17,7 @@
17
17
  * S.textline({ label: "Email", type: "email", bind: A.ref($u, "email") });
18
18
  * S.checkbox({ label: "Remember me", bind: A.ref($u, "remember") });
19
19
  * },
20
- * actions: () => S.button({ text: "Sign in", type: "submit" }),
20
+ * actions: () => S.button({ content: "Sign in", type: "submit" }),
21
21
  * });
22
22
  * }});
23
23
  * },
@@ -29,68 +29,22 @@
29
29
  * which case the component re-renders the affected parts in place when you
30
30
  * mutate it. See `AGENTS.md` for the design philosophy.
31
31
  */
32
- import { setDarkMode, getDarkMode } from "./theme.js";
33
- import { autocomplete } from "./components/autocomplete.js";
34
- import { box } from "./components/box.js";
35
- import { button } from "./components/button.js";
36
- import { buttonChooser } from "./components/buttonChooser.js";
37
- import { buttonGroup } from "./components/buttonGroup.js";
38
- import { checkbox } from "./components/checkbox.js";
39
- import { form } from "./components/form.js";
40
- import { main } from "./components/main.js";
41
- import { menuButton, showFloatingMenu } from "./components/menu.js";
42
- import { dialog, alert, confirm, prompt } from "./components/dialog.js";
43
- import { select } from "./components/select.js";
44
- import { tabs } from "./components/tabs.js";
45
- import { textarea } from "./components/textarea.js";
46
- import { textline } from "./components/textline.js";
47
- import { toast } from "./components/toast.js";
48
- import { addTooltip } from "./components/tooltip.js";
49
- /** The Staffa component namespace. */
50
- export declare const S: {
51
- main: typeof main;
52
- box: typeof box;
53
- dialog: typeof dialog;
54
- alert: typeof alert;
55
- confirm: typeof confirm;
56
- prompt: typeof prompt;
57
- form: typeof form;
58
- menuButton: typeof menuButton;
59
- showFloatingMenu: typeof showFloatingMenu;
60
- textline: typeof textline;
61
- textarea: typeof textarea;
62
- checkbox: typeof checkbox;
63
- tabs: typeof tabs;
64
- button: typeof button;
65
- buttonChooser: typeof buttonChooser;
66
- buttonGroup: typeof buttonGroup;
67
- autocomplete: typeof autocomplete;
68
- select: typeof select;
69
- toast: typeof toast;
70
- addTooltip: typeof addTooltip;
71
- setDarkMode: typeof setDarkMode;
72
- getDarkMode: typeof getDarkMode;
73
- };
74
- export default S;
75
32
  export { setDarkMode, getDarkMode } from "./theme.js";
76
- export type { SurfaceRole, Variant } from "./theme.js";
77
- export type { ContentOptions, Bindable, Content, Slot, Attributes as Styling, } from "./core.js";
78
- export { drawSlot, uniqueId } from "./core.js";
33
+ export { autocomplete, type AutocompleteOptions, type AutocompleteOptionInput } from "./components/autocomplete.js";
34
+ export { box, type BoxOptions } from "./components/box.js";
35
+ export { button, type ButtonOptions } from "./components/button.js";
36
+ export { buttonChooser, type ButtonChooserOptions } from "./components/buttonChooser.js";
37
+ export { buttonGroup, type ButtonGroupOptions } from "./components/buttonGroup.js";
38
+ export { checkbox, type CheckboxOptions } from "./components/checkbox.js";
39
+ export { form, type FormOptions } from "./components/form.js";
40
+ export { main, type MainOptions } from "./components/main.js";
41
+ export { menuButton, showFloatingMenu, type MenuOptions, type MenuEntry, type MenuItem, type MenuSeparator, type FloatingMenuOptions } from "./components/menu.js";
42
+ export { dialog, alert, confirm, prompt, type DialogOptions } from "./components/dialog.js";
43
+ export { select, type SelectOptions, type SelectOptionInput } from "./components/select.js";
44
+ export { tabs, type Tab, type TabsOptions } from "./components/tabs.js";
45
+ export { textarea, type TextareaOptions } from "./components/textarea.js";
46
+ export { textline, type TextlineOptions, type TextlineType } from "./components/textline.js";
47
+ export { toast, type ToastOptions } from "./components/toast.js";
48
+ export { addTooltip, type TooltipOptions } from "./components/tooltip.js";
79
49
  export type { FieldOptions } from "./components/field.js";
80
- export type { MainOptions } from "./components/main.js";
81
- export type { MenuOptions, MenuEntry, MenuItem, MenuSeparator, FloatingMenuOptions } from "./components/menu.js";
82
- export { drawMenu } from "./components/menu.js";
83
- export type { ToastOptions } from "./components/toast.js";
84
- export type { TooltipOptions } from "./components/tooltip.js";
85
- export type { BoxOptions } from "./components/box.js";
86
- export type { FormOptions } from "./components/form.js";
87
- export type { TextlineOptions, TextlineType } from "./components/textline.js";
88
- export type { TextareaOptions } from "./components/textarea.js";
89
- export type { CheckboxOptions } from "./components/checkbox.js";
90
- export type { Tab, TabsOptions } from "./components/tabs.js";
91
- export type { ButtonOptions } from "./components/button.js";
92
- export type { ButtonChooserOptions } from "./components/buttonChooser.js";
93
- export type { ButtonGroupOptions } from "./components/buttonGroup.js";
94
- export type { AutocompleteOptions, AutocompleteOptionInput } from "./components/autocomplete.js";
95
- export type { SelectOptions, SelectOptionInput } from "./components/select.js";
96
- export type { DialogOptions } from "./components/dialog.js";
50
+ export type { ContentOptions, Bindable, Slot, Attributes } from "./core.js";
package/dist/index.js CHANGED
@@ -5,7 +5,7 @@
5
5
  * Import the default `S` object and call its component functions:
6
6
  *
7
7
  * ```ts
8
- * import S from "staffa";
8
+ * import * as S from "staffa";
9
9
  *
10
10
  * S.main({
11
11
  * title: "Hello",
@@ -17,7 +17,7 @@
17
17
  * S.textline({ label: "Email", type: "email", bind: A.ref($u, "email") });
18
18
  * S.checkbox({ label: "Remember me", bind: A.ref($u, "remember") });
19
19
  * },
20
- * actions: () => S.button({ text: "Sign in", type: "submit" }),
20
+ * actions: () => S.button({ content: "Sign in", type: "submit" }),
21
21
  * });
22
22
  * }});
23
23
  * },
@@ -32,50 +32,20 @@
32
32
  // Importing the theme module installs spacing vars, the reactive theme and the
33
33
  // base stylesheet. Customise it from your app with A.insertGlobalCss (see
34
34
  // theme.ts); toggle modes with setDarkMode / getDarkMode.
35
- import { setDarkMode, getDarkMode } from "./theme.js";
36
- import { autocomplete } from "./components/autocomplete.js";
37
- import { box } from "./components/box.js";
38
- import { button } from "./components/button.js";
39
- import { buttonChooser } from "./components/buttonChooser.js";
40
- import { buttonGroup } from "./components/buttonGroup.js";
41
- import { checkbox } from "./components/checkbox.js";
42
- import { form } from "./components/form.js";
43
- import { main } from "./components/main.js";
44
- import { menuButton, showFloatingMenu } from "./components/menu.js";
45
- import { dialog, alert, confirm, prompt } from "./components/dialog.js";
46
- import { select } from "./components/select.js";
47
- import { tabs } from "./components/tabs.js";
48
- import { textarea } from "./components/textarea.js";
49
- import { textline } from "./components/textline.js";
50
- import { toast } from "./components/toast.js";
51
- import { addTooltip } from "./components/tooltip.js";
52
- /** The Staffa component namespace. */
53
- export const S = {
54
- main,
55
- box,
56
- dialog,
57
- alert,
58
- confirm,
59
- prompt,
60
- form,
61
- menuButton,
62
- showFloatingMenu,
63
- textline,
64
- textarea,
65
- checkbox,
66
- tabs,
67
- button,
68
- buttonChooser,
69
- buttonGroup,
70
- autocomplete,
71
- select,
72
- toast,
73
- addTooltip,
74
- setDarkMode,
75
- getDarkMode,
76
- };
77
- export default S;
78
- // Re-export theming and shared types for advanced use.
79
35
  export { setDarkMode, getDarkMode } from "./theme.js";
80
- export { drawSlot, uniqueId } from "./core.js";
81
- export { drawMenu } from "./components/menu.js";
36
+ export { autocomplete } from "./components/autocomplete.js";
37
+ export { box } from "./components/box.js";
38
+ export { button } from "./components/button.js";
39
+ export { buttonChooser } from "./components/buttonChooser.js";
40
+ export { buttonGroup } from "./components/buttonGroup.js";
41
+ export { checkbox } from "./components/checkbox.js";
42
+ export { form } from "./components/form.js";
43
+ export { main } from "./components/main.js";
44
+ export { menuButton, showFloatingMenu } from "./components/menu.js";
45
+ export { dialog, alert, confirm, prompt } from "./components/dialog.js";
46
+ export { select } from "./components/select.js";
47
+ export { tabs } from "./components/tabs.js";
48
+ export { textarea } from "./components/textarea.js";
49
+ export { textline } from "./components/textline.js";
50
+ export { toast } from "./components/toast.js";
51
+ export { addTooltip } from "./components/tooltip.js";
@@ -1 +1 @@
1
- import C from"aberdeen";var N="staffa:darkMode",re=C.proxy({value:Ae()});function Ae(){try{let e=localStorage.getItem(N);if(e==="dark")return!0;if(e==="light")return!1}catch{}}function J(e){re.value=e;try{e===void 0?localStorage.removeItem(N):localStorage.setItem(N,e?"dark":"light")}catch{}}function P(e=!1){let t=re.value;return t===void 0&&!e?C.darkMode():t}C(()=>{P()?C.insertGlobalCss({":root":"--s-primary:#8b7bff --s-secondary:#ef7fd0 --s-danger:#ff6b6b --s-success:#46d39a --s-warning:#fbbf24 --s-neutral:#3c4352 --s-page:#0e1015 --s-panel:#181b22 --s-raised:#222632 --s-ink:#e8eaf0 --s-on-accent:#0c0a14 --s-focus:rgba(139,123,255,0.45) --s-radius:12px --s-radius-lg:18px --s-shadow: 0 10px 34px rgba(0,0,0,0.5);",":root, .s-s.base, .s-s.panel, .s-s.raised, .s-s.neutral":"--s-link:#6db3ff"}):C.insertGlobalCss({":root":"--s-primary:#6c5ce7 --s-secondary:#d6459e --s-danger:#e23b3b --s-success:#1f9d6b --s-warning:#d97706 --s-neutral:#c7ccda --s-page:#f3f4f8 --s-panel:#ffffff --s-raised:#eceef4 --s-ink:#1b1e27 --s-on-accent:#0c0a14 --s-focus:rgba(108,92,231,0.35) --s-radius:12px --s-radius-lg:18px --s-shadow: 0 10px 30px rgba(20,24,40,0.13);",":root, .s-s.base, .s-s.panel, .s-s.raised, .s-s.neutral":"--s-link:#2563eb"})});C.setSpacingCssVars();C.insertGlobalCss({":root":"--s-gradient: linear-gradient(135deg, $s-primary, $s-secondary); --s-glow: 0 8px 24px color-mix(in srgb, $s-primary 32%, transparent); --s-page-bg: radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, $s-secondary, transparent 86%), transparent 56%), radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, $s-primary, transparent 87%), transparent 56%), $s-page;",":root, .s-s.base":"--s-a:$s-ink --s-b:$s-page",".s-s.base":"background: $s-page-bg;",".s-s.panel":"--s-a:$s-ink --s-b:$s-panel",".s-s.raised":"--s-a:$s-ink --s-b:$s-raised",".s-s.neutral":"--s-a:$s-ink --s-b:$s-neutral",".s-s.primary":"--s-a:$s-on-accent --s-b:$s-primary",".s-s.secondary":"--s-a:$s-on-accent --s-b:$s-secondary",".s-s.danger":"--s-a:$s-on-accent --s-b:$s-danger",".s-s.success":"--s-a:$s-on-accent --s-b:$s-success",".s-s.warning":"--s-a:$s-on-accent --s-b:$s-warning",".s-s.gradient":"--s-a:$s-on-accent --s-b:$s-primary",":root, .s-s":"--s-fg:$s-a --s-bg:$s-b --s-fg-muted: color-mix(in oklab, $s-fg, $s-bg 42%); --s-fg-faint: color-mix(in oklab, $s-fg, $s-bg 64%); --s-border: color-mix(in oklab, $s-fg, $s-bg 82%); --s-border-strong: color-mix(in oklab, $s-fg, $s-bg 68%); scrollbar-width:thin scrollbar-color: $s-border-strong transparent; background:$s-bg color:$s-fg",".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-border-strong border-radius:99px border: 2px solid transparent; background-clip:padding-box",".s-s::-webkit-scrollbar-thumb:hover, .s-s ::-webkit-scrollbar-thumb:hover":"background:$s-fg-faint background-clip:padding-box",".s-s.tonal":"--s-fg:$s-b --s-bg: color-mix(in srgb, $s-b 16%, transparent);",".s-s.outlined":"--s-fg:$s-b --s-bg:inherit background:transparent --s-border: color-mix(in srgb, $s-fg 55%, $s-bg);",".s-s.filled":"--s-fg:$s-a --s-bg:$s-b background:$s-bg;",".s-s.gradient:not(.tonal):not(.outlined)":"background: $s-gradient;",":root, .s-s.base, .s-s.panel, .s-s.raised, .s-s.neutral":"--s-accent:$s-primary",".s-s.primary, .s-s.secondary, .s-s.danger, .s-s.success, .s-s.warning, .s-s.gradient":"--s-accent:$s-fg --s-link:$s-fg"});C.insertGlobalCss({"*, *::before, *::after":"box-sizing:border-box",html:"text-size-adjust:100%",body:"m:0 line-height:1.5 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing:antialiased",a:"color: $s-link; text-decoration:underline text-underline-offset:2px; transition: color 0.12s, filter 0.12s;","a:hover":"filter: brightness(1.15)","input, button, textarea, select":"font:inherit color:inherit","code, kbd, samp, pre":"font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;",code:"background: color-mix(in oklab, $s-fg, $s-bg 86%); padding: 0.12em 0.34em; r:4px font-size:0.9em",pre:"background: color-mix(in oklab, $s-fg, $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-border;","::placeholder":"color: $s-fg-faint; opacity:1",":focus-visible":"outline: 2px solid $s-focus; outline-offset:2px",small:"color:$s-fg-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;"}});C.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 e=document.documentElement;e.classList.add("s-preload"),requestAnimationFrame(()=>requestAnimationFrame(()=>e.classList.remove("s-preload")))}var Oe="p, ul, ol, dl, blockquote, pre, table, figure, hr, h1, h2, h3, h4, h5, h6";C.insertGlobalCss({[`${Oe}`]:{"&":"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-fg-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-border; padding-left: $3; fg: $s-fg-muted",table:"border-collapse:collapse","th, td":"text-align:left padding: $1 $2; border-bottom: 1px solid $s-border; vertical-align:top",th:"font-weight:600","thead th":"border-bottom: 2px solid $s-border-strong;",dt:"font-weight:600",dd:"margin-left: 1.5em",figcaption:"fg:$s-fg-muted font-size:0.9em margin-top:$1 text-align:center"});import i from"aberdeen";import Ce from"aberdeen";var Ee=0;function S(e="s"){return`${e}-${++Ee}`}function u(e,...t){e!=null&&(typeof e=="function"?e(...t):Ce("rich=",e))}import h from"aberdeen";h.insertGlobalCss({".s-field":{"&":"display:flex flex-direction:column gap:$1","> label":"font-weight:600 font-size:0.9em fg:$s-fg user-select:none"},".s-req":"fg:$s-danger margin-left:2px",".s-help":"font-size:0.82em fg:$s-fg-muted",".s-error":"font-size:0.82em fg:$s-danger",".s-input":{"&":"w:100% bg:$s-panel fg:$s-ink border: 1px solid $s-border; r:$s-radius padding: 0.55em 0.7em; transition: border-color 0.15s, box-shadow 0.15s;","&:hover:not(:disabled)":"border-color:$s-border-strong","&:focus-visible":"border-color:$s-accent box-shadow: 0 0 0 3px $s-focus; outline:none","&:disabled":"opacity:0.6 cursor:not-allowed","&[aria-invalid=true]":"border-color:$s-danger"}});function L(e,t){let n=e.id??S("field"),o=()=>!!e.error;h("div.s-field",e.attrs,()=>{h(()=>{e.label!=null&&h(`label for=${n}`,()=>{u(e.label),e.required&&h("span.s-req aria-hidden=true #*")})}),t(n,o),h(()=>{e.help!=null&&!e.error&&h("div.s-help",()=>u(e.help))}),h(()=>{e.error&&h("div.s-error role=alert #",e.error)})})}function I(e,t,n,o){h(`id=${t}`),e.name&&h(`name=${e.name}`),h(()=>{e.disabled&&h("disabled=true")}),h(()=>{e.required&&h("aria-required=true")}),h(()=>h("aria-invalid=",n()?"true":"false")),o&&h("bind=",o)}i.insertGlobalCss({".s-ac":{"&":"position:relative","> .s-control":"display:flex flex-wrap:wrap align-items:center gap:$1 bg:$s-panel fg:$s-ink border: 1px solid $s-border; r:$s-radius padding: 0.3em 0.4em; cursor:text; transition: border-color 0.15s, box-shadow 0.15s;","> .s-control:hover":"border-color:$s-border-strong","> .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 bg:$s-raised border: 1px solid $s-border; r:$s-radius padding: 0.1em 0.2em 0.1em 0.5em;",".s-chip > button":"cursor:pointer border:0 background:transparent fg:$s-fg-muted font-size:1.1em line-height:1 padding: 0 0.2em; r:4px",".s-chip > button:hover":"fg:$s-fg background:$s-border",input:"flex:1 min-width:6ch border:0 background:transparent color:inherit outline:none padding:0.25em","> .s-menu":"position:absolute top:100% left:0 right:0 z-index:20 margin-top:4px max-height:15rem overflow-y:auto list-style:none p:$1 margin-bottom:0 bg:$s-panel border: 1px solid $s-border; r:$s-radius box-shadow:$s-shadow","> .s-menu 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-fg 10%, transparent);",".s-add":"fg:$s-accent font-style:italic",".s-empty":"padding: 0.45em 0.6em; fg:$s-fg-muted"}});function Te(e){return typeof e=="string"?{value:e,label:e}:{value:e.value,label:e.label??e.value}}function ie(e){let t=S("ac-menu"),n=i.proxy({query:"",open:!1,active:0}),o=()=>(typeof e.options=="function"?e.options():e.options).map(Te),r=()=>{let c=e.bind?.value;return c==null||c===""?[]:Array.isArray(c)?c:[c]},s=c=>o().find(v=>v.value===c)?.label??c;if(!e.multi){let c=e.bind?i.peek(e.bind,"value"):void 0;typeof c=="string"&&c&&(n.query=i.peek(()=>s(c)))}let a=()=>{let c=new Set(r()),v=o();e.multi&&(v=v.filter(g=>!c.has(g.value)));let b=n.query.trim().toLowerCase();return b&&(v=v.filter(g=>g.label.toLowerCase().includes(b))),v},l=(c,v)=>{if(e.multi){let b=Array.isArray(e.bind?.value)?[...e.bind.value]:[];b.includes(c)||b.push(c),e.bind&&(e.bind.value=b),n.query=""}else e.bind&&(e.bind.value=c),n.query=s(c),n.open=!1;n.active=0,v?.focus()},p=c=>{if(!e.bind)return;let v=e.bind.value??[];e.bind.value=v.filter(b=>b!==c)};L(e,(c,v)=>{i("div.s-ac",e.inputAttrs,()=>{i(()=>i("aria-invalid=",v()?"true":"false"));let b;i("div.s-control",()=>{i("click=",()=>b?.focus()),i(()=>{if(e.multi)for(let g of r())i("span.s-chip",()=>{i("span #",i.peek(()=>s(g))),i("button type=button aria-label=",`Remove ${g}`,()=>{i("#\xD7"),i("click=",y=>{y.stopPropagation(),p(g),b?.focus()})})})}),b=i("input type=text role=combobox autocomplete=off",()=>{i(`id=${c} aria-controls=${t} aria-autocomplete=list`),e.placeholder!=null&&i("placeholder=",e.placeholder),e.disabled&&i("disabled=true"),e.required&&i("aria-required=true"),i("bind=",i.ref(n,"query")),i(()=>i("aria-expanded=",n.open?"true":"false")),i(()=>{let y=a()[n.active];i("aria-activedescendant=",n.open&&y?`${t}-opt-${n.active}`:"")}),i("input=",()=>{n.open=!0,n.active=0}),i("focus=",()=>{n.open=!0}),i("blur=",()=>{setTimeout(()=>we(),150)}),i("keydown=",g=>V(g,b))})}),i(()=>{if(!n.open)return;let g=a(),y=n.query.trim(),oe=e.allowCustom!==!1&&y!==""&&!g.some(G=>G.label.toLowerCase()===y.toLowerCase());i("ul.s-menu role=listbox",`id=${t}`,()=>{g.forEach((G,_)=>{i("li.s-option role=option",`id=${t}-opt-${_}`,()=>{i(()=>i("aria-selected=",n.active===_?"true":"false")),i("#",G.label),i("mousedown=",ke=>ke.preventDefault()),i("click=",()=>l(G.value,b)),i("mousemove=",()=>{n.active=_})})}),oe&&i("li.s-option.s-add role=option",()=>{i("#",`Add "${y}"`),i("mousedown=",G=>G.preventDefault()),i("click=",()=>l(y,b))}),g.length===0&&!oe&&i("li.s-empty #No matches")})}),i(()=>{if(e.name)if(e.multi)for(let g of r())i("input type=hidden",()=>{i("name=",e.name),i("value=",g)});else i("input type=hidden",()=>{i("name=",e.name),i("value=",r()[0]??"")})})})});function V(c,v){let b=a(),g=b.length-1;if(c.key==="ArrowDown")c.preventDefault(),n.open=!0,n.active=Math.min(g,n.active+1);else if(c.key==="ArrowUp")c.preventDefault(),n.active=Math.max(0,n.active-1);else if(c.key==="Enter"){c.preventDefault();let y=b[n.active];y?l(y.value,v):e.allowCustom!==!1&&n.query.trim()?l(n.query.trim(),v):n.open&&(n.open=!1)}else if(c.key==="Escape")n.open=!1,e.multi||(n.query=s(r()[0]??""));else if(c.key==="Backspace"&&e.multi&&n.query===""){let y=r();y.length&&p(y[y.length-1])}}function we(){n.open=!1,e.multi?n.query="":e.allowCustom!==!1&&n.query.trim()?l(n.query.trim()):n.query=s(r()[0]??"")}}import q from"aberdeen";q.insertGlobalCss({".s-box":{"&":"display:flex flex-direction:column border: 1px solid $s-border; r: $s-radius-lg; overflow:hidden box-shadow: $s-shadow;","&:not(:first-child)":"margin-top: $3","> header":"display:flex align-items:center gap:$2 padding: $2 $3; border-bottom: 1px solid $s-border; font-weight:600","> footer":"display:flex align-items:center gap:$2 padding: $2 $3; border-top: 1px solid $s-border;","> div":"p:$3 gap:$3"}});function se(e={}){let t=typeof e=="function"?{content:e}:e;q("section.s-box.s-s.panel",t.attrs,()=>{q(()=>{t.header!=null&&q("header.s-s.raised",t.headerAttrs,()=>u(t.header))}),q("div",t.contentAttrs,()=>{t.content&&t.content()}),q(()=>{t.footer!=null&&q("footer.s-s.raised",t.footerAttrs,()=>u(t.footer))})})}import M from"aberdeen";M.insertGlobalCss({".s-btn":{"&":"display:inline-flex align-items:center justify-content:center gap:$2 font-weight:600 line-height:1.2 white-space:nowrap cursor:pointer text-decoration:none border: 1px solid $s-border; r: $s-radius; padding: 0.5em 1em; transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s, box-shadow 0.15s, transform 0.08s;","&:focus-visible":"outline:none box-shadow: 0 0 0 3px $s-focus;","&:disabled, &[aria-disabled=true]":"opacity:0.45 cursor:not-allowed pointer-events:none filter:saturate(0.6)","&:hover":"filter: brightness(1.08); transform: translateY(-1px)","&.tonal:hover, &.outlined:hover":"background: color-mix(in srgb, $s-b 26%, transparent);","&.gradient:not(.tonal):not(.outlined)":"border:0 box-shadow: $s-glow;","&.gradient:not(.tonal):not(.outlined):hover":"filter: brightness(1.06); box-shadow: 0 10px 28px color-mix(in srgb, $s-primary 42%, transparent); transform: translateY(-1px);","&:active:not(:disabled):not([aria-disabled=true])":"transform: translateY(1px)","&.small, .small > &":"padding: 0.32em 0.7em; font-size:0.85em","&.large, .large > &":"padding: 0.66em 1.3em; font-size:1.1em"}});var Se=/\.(gradient|primary|secondary|neutral|danger|success|warning|base|panel|raised)(\.|\s|$)/;function A(e={}){let t=typeof e=="string"?{text:e}:typeof e=="function"?{content:e}:e,n=t.href!=null?"a":"button",o=t.attrs&&Se.test(t.attrs)?"":".gradient";M(`${n}.s-btn.s-s${o}`,t.attrs,()=>{t.href!=null?(M(`href=${t.href} role=button`),t.disabled&&M("aria-disabled=true")):(M("type=",t.type??"button"),t.disabled&&M("disabled=true")),t.ariaLabel&&M("aria-label=",t.ariaLabel),t.click&&M("click=",t.click),u(t.icon),t.content?t.content():t.text!=null&&M("#",t.text)})}import Q from"aberdeen";import ae from"aberdeen";ae.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 B(e={}){let n=`.s-${e.layout??"attached"}${e.vertical?".s-vertical":""}`;ae(`div.s-bgroup${n} role=group`,e.attrs,()=>{if(e.buttons)for(let o of e.buttons)A(o);e.content&&e.content()})}function le(e){Q(()=>{let t=e.bind.value;B({attrs:e.attrs,buttons:Object.entries(e.options).map(([n,o])=>({text:typeof o=="string"?o:void 0,content:typeof o=="function"?o:void 0,attrs:t===n?".primary":".neutral .outlined",click:()=>{e.bind.value=e.allowDeselect&&t===n?null:n}}))})}),e.name&&Q(()=>Q(`input type=hidden name=${e.name} value=`,e.bind.value??""))}import m from"aberdeen";m.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.6",input:"width:1.15em height:1.15em accent-color:$s-accent cursor:inherit m:0"}});function de(e={}){let t=e.id??S("check");m("div.s-check",e.attrs,()=>{m(`label for=${t}`,()=>{m("input type=checkbox",e.inputAttrs,()=>{m(`id=${t}`),e.name&&m(`name=${e.name}`),e.checked&&!e.bind&&m("checked=true"),e.change&&m("change=",e.change),m(()=>{e.disabled&&m("disabled=true")}),m(()=>{e.required&&m("aria-required=true")}),e.bind&&m("bind=",e.bind)}),m(()=>{e.label!=null&&u(e.label),e.required&&m("span.s-req aria-hidden=true #*")})}),m(()=>{e.help!=null&&!e.error&&m("div.s-help",()=>u(e.help))}),m(()=>{e.error&&m("div.s-error role=alert #",e.error)})})}import z from"aberdeen";z.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 gap:$2 flex-wrap:wrap margin-top:$1"}});function ce(e={}){let t=typeof e=="function"?{content:e}:e;z("form.s-form",t.attrs,()=>{z(()=>{z(".grid=",t.layout==="grid")}),z("submit=",n=>{if(n.preventDefault(),t.submit){let o=new FormData(n.target),r={};for(let s of new Set(o.keys())){let a=o.getAll(s);r[s]=a.length===1?a[0]:a}t.submit(r,n)}}),t.content&&t.content(),z(()=>{t.actions&&z("footer",t.actionsAttrs,()=>t.actions?.())})})}import d from"aberdeen";import x from"aberdeen";import{matchCurrent as Me}from"aberdeen/route";x.insertGlobalCss({".s-menu-list":"position:fixed z-index:350 min-width:10rem display:flex flex-direction:column p:$1 border: 1px solid $s-border; r:$s-radius-lg box-shadow:$s-shadow overflow-y:auto max-height:min(80vh,28rem) transition: opacity 0.15s, transform 0.15s;",".s-menu-list.hidden":"opacity:0 pointer-events:none transform:translateY(-6px)",".s-menu-item, .s-menu-item-link":"display:flex align-items:center gap:$2 w:100% padding: 0.5em 0.65em; r:$s-radius cursor:pointer text-align:left font-size:0.9em border:0 background:transparent fg:$s-fg text-decoration:none transition: background 0.12s, color 0.12s, transform 0.12s, box-shadow 0.12s;",".s-menu-item:hover:not([aria-disabled=true]), .s-menu-item-link:hover":"background: color-mix(in srgb, $s-fg 10%, transparent);",".s-menu-item[aria-current=page], .s-menu-item-link[aria-current=page]":"color:$s-on-accent font-weight:600 background: $s-gradient; box-shadow: 0 3px 10px color-mix(in srgb, $s-primary 38%, transparent);",".s-menu-item[aria-current=page] .s-menu-icon, .s-menu-item-link[aria-current=page] .s-menu-icon":"color:$s-on-accent",".s-menu-item[aria-current=page]:hover, .s-menu-item-link[aria-current=page]:hover":"filter:brightness(1.06)",".s-menu-item:focus-visible, .s-menu-item-link:focus-visible":"outline:none background: color-mix(in srgb, $s-fg 10%, transparent); box-shadow: 0 0 0 2px inset $s-focus;",".s-menu-item[aria-disabled=true], .s-menu-item-link[aria-disabled=true]":"opacity:0.45 cursor:not-allowed pointer-events:none",".s-menu-icon":"fg:$s-fg-muted flex-shrink:0","hr.s-menu-sep":"border:0 height:1px margin: $1 0.6rem; background: linear-gradient(to right, transparent, $s-border-strong 18%, $s-border-strong 82%, transparent);"});function W(e,t){x("keydown=",n=>{if(n.key!=="ArrowDown"&&n.key!=="ArrowUp"&&n.key!=="Home"&&n.key!=="End")return;n.preventDefault();let r=[...n.currentTarget.querySelectorAll(".s-menu-item, .s-menu-item-link")].filter(p=>p.getAttribute("aria-disabled")!=="true");if(!r.length)return;let s=r.indexOf(document.activeElement),a=n.key==="ArrowUp"?-1:1,l=n.key==="Home"?0:n.key==="End"?r.length-1:s<0?a>0?0:r.length-1:(s+a+r.length)%r.length;r[l].focus()});for(let n of e){if(typeof n=="function"){n();continue}if("separator"in n){x("hr.s-menu-sep");continue}x(n.href?"a.s-menu-item-link":"button.s-menu-item type=button",n.attrs,()=>{n.href&&(x("href=",n.href),n.target&&x("target=",n.target),x(()=>{Me(n.href)&&x("aria-current=page")})),n.disabled&&x("aria-disabled=true"),x("click=",o=>{if(n.disabled){o.preventDefault();return}t?.(),n.click?.(o)}),n.icon&&x("span.s-menu-icon",()=>u(n.icon)),u(n.label)})}}var H=x.proxy({opts:null});function j(){let e=H.opts?.anchor;H.opts=null,e?.focus()}function Le(e,t){let n=e.offsetWidth,o=e.offsetHeight,r=window.innerWidth,s=window.innerHeight,a=4,l=t.left;l+n>r-8&&(l=Math.max(8,t.right-n));let p=t.bottom+a;p+o>s-8&&t.top-o-a>=8&&(p=t.top-o-a),e.style.left=Math.max(8,l)+"px",e.style.top=Math.max(8,p)+"px"}x.mount(document.body,()=>{let e=H.opts;if(!e)return;let t=x("div.s-menu-list.s-s.panel create=hidden destroy=hidden",e.dropdownAttrs,()=>{W(e.items,j)}),n=r=>{let s=r.target;!t.contains(s)&&!e.anchor.contains(s)&&j()},o=r=>{(r.key==="Escape"||r.key==="Tab")&&(r.preventDefault(),j())};document.addEventListener("click",n,!0),document.addEventListener("keydown",o,!0),x.clean(()=>{document.removeEventListener("click",n,!0),document.removeEventListener("keydown",o,!0)}),requestAnimationFrame(()=>{document.body.contains(t)&&(Le(t,e.anchor.getBoundingClientRect()),t.querySelector(".s-menu-item:not([aria-disabled=true]), .s-menu-item-link:not([aria-disabled=true])")?.focus())})});function X(e){return H.opts=e,j}function Y(e){let t=null;x.clean(()=>{H.opts?.anchor===t&&j()}),A({icon:()=>x("span aria-hidden=true #\u2630"),ariaLabel:"Open menu",attrs:".neutral .outlined",...e.button,click:n=>{if(t=n.currentTarget,H.opts?.anchor===t){j();return}X({items:e.items,anchor:t,dropdownAttrs:e.dropdownAttrs})}})}d.insertGlobalCss({".s-main":{"&":"display:flex flex-direction:column min-height:100vh max-height:100vh container-type:inline-size","> header":"border-bottom: 1px solid $s-border; position:sticky top:0 z-index:10","> footer":"border-top: 1px solid $s-border; fg:$s-fg-muted","> header > .s-bar, > footer > .s-bar":"display:flex align-items:center width:100% margin-inline:auto gap:$3 padding: $2 $3;","> header .s-header-icon":"display:flex align-items:center 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:0 flex:1","> 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 .s-subtitle":"fg:$s-fg-muted font-size:0.85em overflow:hidden text-overflow:ellipsis white-space:nowrap","> header .s-menu":"display:flex align-items:center gap:$2",".s-body":"flex:1 overflow:hidden display:flex flex-direction:row min-height:0 justify-content:center",".s-body-inner":"flex:1 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-border-strong 18%, $s-border-strong 82%, transparent);","> main, .s-body main":"flex:1 overflow-y:auto display:flex flex-direction:column","> main > .s-content, .s-body main > .s-content":"width:100% flex:1 p:$3","> main.s-scroll-y, .s-body main.s-scroll-y":"margin-right:$3"},".s-nav-panel":{"&":"display:flex flex-direction:column overflow-y:auto flex-shrink:0 max-width:228px padding:$3 gap:$1 background:transparent"},".s-main.s-nav-left .s-nav-trigger, .s-main.s-nav-right .s-nav-trigger":"display:none",".s-main.s-nav-btn-only .s-nav-panel":"display:none",".s-main.s-nav-btn-only .s-nav-trigger":"display:flex","@container (max-width: 640px)":{".s-main.s-nav-left .s-nav-panel, .s-main.s-nav-right .s-nav-panel, .s-main .s-nav-sep":"display:none",".s-main.s-nav-left .s-nav-trigger, .s-main.s-nav-right .s-nav-trigger":"display:flex",".s-content > .s-box":"margin-inline: calc(-1 * $3); r:0 border-inline:0"}});function pe(e={}){let t=e.nav,n=e.navPosition??"left",o=t!=null&&t.items.length>0,r=o?n==="button"?".s-nav-btn-only":`.s-nav-${n}`:"";d(`div.s-main.s-s.base${r}`,e.attrs,()=>{d(()=>{(e.title!=null||e.subtitle!=null||e.icon!=null||e.menu!=null||o)&&d("header.s-s.raised",e.topbarAttrs,()=>{d("div.s-bar",()=>{d(()=>{e.maxWidth!=null&&d("max-width:",e.maxWidth)}),d(()=>{o&&d("div.s-nav-trigger",()=>{Y({...t,button:{icon:()=>d("span aria-hidden=true #\u2630"),ariaLabel:"Open navigation",attrs:".neutral .outlined .small",...t.button}})})}),d(()=>{e.icon!=null&&d("div.s-header-icon",()=>u(e.icon))}),d("div.s-titles",()=>{d(()=>{e.title!=null&&d("div.s-title",()=>u(e.title))}),d(()=>{e.subtitle!=null&&d("div.s-subtitle",()=>u(e.subtitle))})}),d(()=>{e.menu&&d("div.s-menu",()=>e.menu?.())})})})}),o&&n!=="button"?d("div.s-body",()=>{d("div.s-body-inner",()=>{d(()=>{e.maxWidth!=null&&d("max-width:",e.maxWidth)}),d(`nav.s-nav-panel.s-s.raised.s-nav-${n}`,e.navAttrs,()=>{W(t.items)}),d("div.s-nav-sep aria-hidden=true"),ue(e,!1)})}):ue(e,!0),d(()=>{e.footer!=null&&d("footer",()=>{d("div.s-bar",()=>{d(()=>{e.maxWidth!=null&&d("max-width:",e.maxWidth)}),u(e.footer)})})})})}function ue(e,t){let n=d("main",()=>{d("div.s-content",e.contentAttrs,()=>{t&&d(()=>{e.maxWidth!=null&&d("margin-inline:auto max-width:",e.maxWidth)}),e.content&&e.content()})});Be(n)}function Be(e){if(typeof ResizeObserver>"u")return;let t=()=>e.classList.toggle("s-scroll-y",e.offsetWidth>e.clientWidth),n=new ResizeObserver(t);n.observe(e),e.firstElementChild&&n.observe(e.firstElementChild),t(),d.clean(()=>n.disconnect())}import f from"aberdeen";import F from"aberdeen";function U(e={}){L(e,(t,n)=>{F("input.s-input",e.inputAttrs,()=>{F("type=",e.type??"text"),e.placeholder!=null&&F("placeholder=",e.placeholder),e.autocomplete!=null&&F("autocomplete=",e.autocomplete),e.value!=null&&!e.bind&&F("value=",e.value),e.input&&F("input=",e.input),e.change&&F("change=",e.change),I(e,t,n,e.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:20rem max-width:min(90vw,44rem) max-height:min(88vh,800px) border: 1px solid $s-border; r: $s-radius-lg; box-shadow: $s-shadow; 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-bottom: 1px solid $s-border; font-weight:600 flex-shrink:0","> footer":"display:flex align-items:center gap:$2 padding: $2 $3; border-top: 1px solid $s-border; 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 D=f.proxy({}),Z=0,qe=f.derive(()=>{let e=Object.keys(D);if(e.length)return e[e.length-1]});f.mount(document.body,()=>{f.onEach(D,({resolve:e,opts:t},n)=>{let o=()=>{delete D[n]};f.clean(()=>{t.onClose?.(),e()});let r=f.derive(()=>qe.value!=n);f("div.s-backdrop create=hidden destroy=hidden .hidden=",r,"click=",()=>{t.allowCancel!==!1&&o()}),f("div.s-dialog.s-s.panel create=hidden destroy=hidden",t.attrs,()=>{f(()=>{t.header!=null&&f("header.s-s.raised",t.headerAttrs,()=>u(t.header))}),f("div",t.contentAttrs,()=>{u(t.content,o)}),f(()=>{t.footer!=null&&f("footer.s-s.raised",t.footerAttrs,()=>u(t.footer))})})})});function K(e){Z||document.addEventListener("keydown",n=>{if(n.key==="Escape"&&e.allowCancel!==!1){let o=f.unproxy(D);for(let r=Z;r>0;r--)if(o[r]){o[r].opts.allowCancel!==!1&&delete D[r];break}}});let t=++Z;return e.cancelWithScope!==!1&&f.clean(()=>{delete D[t]}),new Promise(n=>{D[t]={resolve:n,opts:e}})}function fe(e,t={}){return K({header:"Alert",allowCancel:!0,content:n=>{f("p",()=>{f("#",e)}),B({layout:"spaced",attrs:"align-self:flex-end",content:()=>{A({text:"OK",click:n})}})},...t})}function me(e,t={}){return new Promise(n=>{let o=!1;K({header:"Confirm",allowCancel:!0,content:r=>{f("p",()=>{f("#",e)}),B({layout:"spaced",attrs:"align-self:flex-end",content:()=>{A({text:"Cancel",attrs:".neutral .outlined",click:r}),A({text:"OK",click:()=>{o=!0,r()}})}})},...t,onClose:()=>{n(o),t.onClose?.()}})})}function be(e,t="",n={}){return new Promise(o=>{let r=null;K({header:"Input",allowCancel:!0,content:s=>{f("p",()=>{f("#",e)});let a=f.proxy({value:t});f("form display:contents",()=>{f("submit=",l=>{l.preventDefault(),r=a.value,s()}),U({bind:f.ref(a,"value")}),B({layout:"spaced",attrs:"align-self:flex-end",content:()=>{A({text:"Cancel",attrs:".neutral .outlined",type:"button",click:s}),A({text:"OK",type:"submit"})}})})},...n,onClose:()=>{o(r),n.onClose?.()}})})}import k from"aberdeen";k.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-fg-muted font-size:0.85em"}});function ge(e){L(e,(t,n)=>{k("div.s-select_wrap",e.inputAttrs,()=>{k("select.s-input",()=>{I(e,t,n),k("change=",o=>{e.bind&&(e.bind.value=o.target.value)}),k(()=>{let o=typeof e.options=="function"?e.options():e.options,r=e.bind?.value??"";e.placeholder!=null&&k("option",()=>{k("value= disabled=true hidden=true"),r||k("selected=true"),k("#",e.placeholder)});for(let s of o){let a=typeof s=="string"?{value:s,label:s}:{value:s.value,label:s.label??s.value};k("option",()=>{k("value=",a.value),a.value===r&&k("selected=true"),k("#",a.label)})}})})})})}import $ from"aberdeen";$.insertGlobalCss({".s-tabs":{"&":"display:flex flex-direction:column gap:$3",".s-tablist":"display:flex gap:$1 align-items:stretch overflow-x:auto scrollbar-width:none border-bottom: 1px solid $s-border;",".s-tablist::-webkit-scrollbar":"display:none",".s-tab":"display:inline-flex align-items:center gap:$2 cursor:pointer background:transparent border:0 color: $s-fg-muted; font-weight:600 padding: 0.6em 0.9em; border-bottom: 3px solid transparent; margin-bottom:-1px transition: color 0.15s, background 0.15s, border-color 0.15s;",".s-tab:hover:not(:disabled), .s-tab[aria-selected=true]":"color: $s-fg;",".s-tab:disabled":"opacity:0.5 cursor:not-allowed",".s-tab:focus-visible":"outline:none box-shadow: 0 0 0 3px $s-focus; r: $s-radius;",".s-tab[aria-selected=true]":"border-image: $s-gradient 1;",".s-tabpanel":"display:block"}});function he(e){let t=S("tabs"),n=(s,a)=>s.id??String(a),o=e.bind??$.proxy(n(e.tabs[0]??{label:""},0)),r=(s,a)=>{s.disabled||(o.value=n(s,a))};$("div.s-tabs",e.attrs,()=>{$("div.s-tablist role=tablist",()=>{e.tabs.forEach((s,a)=>{let l=n(s,a);$("button.s-tab type=button role=tab",()=>{$(`id=${t}-tab-${l} aria-controls=${t}-panel-${l}`),$(()=>{let p=o.value===l;$("aria-selected=",p?"true":"false"),$("tabindex=",p?"0":"-1")}),s.disabled&&$("disabled=true"),$("click=",()=>r(s,a)),$("keydown=",p=>ze(p,e.tabs,a,r)),u(s.icon),u(s.label)})})}),$("div.s-tabpanel role=tabpanel",e.contentAttrs,()=>{$(()=>{let s=o.value,a=e.tabs.findIndex((p,V)=>n(p,V)===s),l=e.tabs[a]??e.tabs[0];l&&($(`id=${t}-panel-${n(l,a)} aria-labelledby=${t}-tab-${n(l,a)}`),l.content?.())})})})}function ze(e,t,n,o){let r=n;if(e.key==="ArrowRight"||e.key==="ArrowDown")r=(n+1)%t.length;else if(e.key==="ArrowLeft"||e.key==="ArrowUp")r=(n-1+t.length)%t.length;else if(e.key==="Home")r=0;else if(e.key==="End")r=t.length-1;else return;e.preventDefault();let s=r>=n?1:-1;for(let a=0;a<t.length;a++){let l=t[r];if(l&&!l.disabled){o(l,r),e.currentTarget?.parentElement?.children[r]?.focus();return}r=(r+s+t.length)%t.length}}import E from"aberdeen";E.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 ve(e={}){let t=e.autoGrow!==!1;L(e,(n,o)=>{let r=E("textarea.s-input",e.inputAttrs,()=>{t?(E(".s-autoGrow"),E("input=",s=>{xe(s.currentTarget),e.input&&e.input(s)})):(E("rows=",e.rows??4),E("resize:",e.resize??"vertical"),e.input&&E("input=",e.input)),e.placeholder!=null&&E("placeholder=",e.placeholder),e.value!=null&&!e.bind&&E("value=",e.value),e.change&&E("change=",e.change),I(e,n,o,e.bind)});t&&requestAnimationFrame(()=>xe(r))})}function xe(e){e.style.height="auto",e.style.height=`${e.scrollHeight}px`}import w from"aberdeen";import{grow as Fe,shrink as De}from"aberdeen/transitions";w.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; border: 1px solid $s-border; r:$s-radius box-shadow:$s-shadow pointer-events:auto",".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-msg":"font-size:0.9em fg:$s-fg-muted line-height:1.4",".s-toast-close":"cursor:pointer border:0 background:transparent fg:$s-fg-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-fg",".s-toast-close:focus-visible":"outline:none box-shadow: 0 0 0 3px $s-focus; fg:$s-fg"}});var Ge=0,te=w.proxy({});w.mount(document.body,()=>{w("div.s-toasts aria-live=polite aria-atomic=false",()=>{w.onEach(te,e=>{let{opts:t}=e,n=t.type==="danger"||t.type==="warning"?"alert":"status",o=t.type??"neutral";w(`div.s-toast.s-s.${o} role=${n}`,"create=",Fe,"destroy=",De,t.attrs,()=>{w("div.s-toast-body",()=>{w(()=>{t.title!=null&&w("div.s-toast-title",()=>u(t.title))}),w("div.s-toast-msg",()=>u(t.message))}),w(()=>{t.dismissible!==!1&&w("button.s-toast-close type=button aria-label=Dismiss",()=>{w("#\xD7"),w("click=",()=>ee(e.id))})})})})})});function ee(e){delete te[e]}function ye(e){let t=++Ge;te[t]={id:t,opts:e};let n=e.duration??4e3,o;return n>0&&(o=setTimeout(()=>ee(t),n)),()=>{o!=null&&clearTimeout(o),ee(t)}}import O from"aberdeen";O.insertGlobalCss({".s-tt-tip":{"&":"position:fixed z-index:500 max-width:20rem w:max-content bg:$s-raised fg:$s-fg border: 1px solid $s-border-strong; r:$s-radius box-shadow:$s-shadow padding: 0.3em 0.65em; font-size:0.85em line-height:1.4 pointer-events:none"}});var R=O.proxy(void 0),T=null;typeof window<"u"&&window.addEventListener("scroll",()=>{R.value=void 0},{capture:!0,passive:!0});function Ie(e,t,n,o){let s=window.innerWidth,a=window.innerHeight,l=0,p=0;return o==="bottom"?(l=e.left+(e.width-t)/2,p=e.bottom+7,p+n>a-8&&(p=e.top-n-7)):o==="left"?(l=e.left-t-7,p=e.top+(e.height-n)/2,l<8&&(l=e.right+7)):o==="right"?(l=e.right+7,p=e.top+(e.height-n)/2,l+t>s-8&&(l=e.left-t-7)):(l=e.left+(e.width-t)/2,p=e.top-n-7,p<8&&(p=e.bottom+7)),{x:Math.max(8,Math.min(l,s-t-8)),y:Math.max(8,Math.min(p,a-n-8))}}function ne(){T&&clearTimeout(T),T=setTimeout(()=>{R.value=void 0,T=null},100)}O.mount(document.body,()=>{let e=R.value;if(!e)return;let{opts:t,anchor:n}=e,o=t.placement??"top",r=O("div.s-tt-tip role=tooltip visibility:hidden",t.attrs,()=>{O("mouseenter=",()=>{T&&(clearTimeout(T),T=null)}),O("mouseleave=",ne),u(t.tip)});requestAnimationFrame(()=>{if(!document.body.contains(r))return;let{x:s,y:a}=Ie(n.getBoundingClientRect(),r.offsetWidth,r.offsetHeight,o);r.style.left=s+"px",r.style.top=a+"px",r.style.visibility=""})});function $e(e){let t=n=>{T&&(clearTimeout(T),T=null),R.value={opts:e,anchor:n.currentTarget}};O("mouseenter=",t),O("mouseleave=",ne),O("focusin=",t),O("focusout=",ne),O.clean(()=>{R.value?.opts===e&&(R.value=void 0)})}var je={main:pe,box:se,dialog:K,alert:fe,confirm:me,prompt:be,form:ce,menuButton:Y,showFloatingMenu:X,textline:U,textarea:ve,checkbox:de,tabs:he,button:A,buttonChooser:le,buttonGroup:B,autocomplete:ie,select:ge,toast:ye,addTooltip:$e,setDarkMode:J,getDarkMode:P},pn=je;export{je as S,pn as default,W as drawMenu,u as drawSlot,P as getDarkMode,J as setDarkMode,S as uniqueId};
1
+ import O from"aberdeen";var U="staffa:darkMode",ne=O.proxy({value:ce()});function ce(){try{let e=localStorage.getItem(U);if(e==="dark")return!0;if(e==="light")return!1}catch{}}function ue(e){ne.value=e;try{e===void 0?localStorage.removeItem(U):localStorage.setItem(U,e?"dark":"light")}catch{}}function oe(e=!1){let t=ne.value;return t===void 0&&!e?O.darkMode():t}O(()=>{oe()?O.insertGlobalCss({":root":"--s-primary:#8b7bff --s-secondary:#ef7fd0 --s-danger:#ff6b6b --s-success:#46d39a --s-warning:#fbbf24 --s-neutral: color-mix(in oklab, #3d4047, $s-tint 14%); --s-page: color-mix(in oklab, #0e0f12, $s-tint 5%); --s-panel: color-mix(in oklab, #17181c, $s-tint 6%); --s-raised: color-mix(in oklab, #212327, $s-tint 8%); --s-ink: color-mix(in oklab, #e9eaec, $s-tint 8%); --s-on-accent:#0c0a14 --s-focus: color-mix(in srgb, $s-primary 45%, transparent); --s-radius:12px --s-radius-lg:18px --s-shadow: 0 10px 34px rgba(0,0,0,0.5);",":root, .s-s.base, .s-s.panel, .s-s.raised, .s-s.neutral":"--s-link:#6db3ff"}):O.insertGlobalCss({":root":"--s-primary:#6c5ce7 --s-secondary:#d6459e --s-danger:#e23b3b --s-success:#1f9d6b --s-warning:#d97706 --s-neutral: color-mix(in oklab, #c9cbd0, $s-tint 14%); --s-page: color-mix(in oklab, #f3f4f6, $s-tint 5%); --s-panel: color-mix(in oklab, #ffffff, $s-tint 2%); --s-raised: color-mix(in oklab, #edeef0, $s-tint 7%); --s-ink: color-mix(in oklab, #1d1f24, $s-tint 7%); --s-on-accent:#0c0a14 --s-focus: color-mix(in srgb, $s-primary 35%, transparent); --s-radius:12px --s-radius-lg:18px --s-shadow: 0 10px 30px rgba(20,24,40,0.13);",":root, .s-s.base, .s-s.panel, .s-s.raised, .s-s.neutral":"--s-link:#2563eb"})});O.setSpacingCssVars();O.insertGlobalCss({":root":"--s-tint: color-mix(in oklab, $s-primary, $s-secondary); --s-gradient: linear-gradient(135deg, $s-primary, $s-secondary); --s-gradient-surface: linear-gradient(170deg, color-mix(in oklab, $s-primary 85%, $s-secondary), color-mix(in oklab, $s-primary 30%, $s-secondary)); --s-glow: 0 5px 16px color-mix(in srgb, $s-primary 26%, transparent); --s-page-bg: radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, $s-secondary, transparent 86%), transparent 56%), radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, $s-primary, transparent 87%), transparent 56%), $s-page;",":root, .s-s.base":"--s-a:$s-ink --s-b:$s-page",".s-s.base":"background: $s-page-bg;",".s-s.panel":"--s-a:$s-ink --s-b:$s-panel",".s-s.raised":"--s-a:$s-ink --s-b:$s-raised",".s-s.neutral":"--s-a:$s-ink --s-b:$s-neutral",".s-s.primary":"--s-a:$s-on-accent --s-b:$s-primary",".s-s.secondary":"--s-a:$s-on-accent --s-b:$s-secondary",".s-s.danger":"--s-a:$s-on-accent --s-b:$s-danger",".s-s.success":"--s-a:$s-on-accent --s-b:$s-success",".s-s.warning":"--s-a:$s-on-accent --s-b:$s-warning",".s-s.gradient":"--s-a:$s-on-accent --s-b:$s-primary",":root, .s-s":"--s-fg:$s-a --s-bg:$s-b --s-fg-muted: color-mix(in oklab, $s-fg, $s-bg 42%); --s-fg-faint: color-mix(in oklab, $s-fg, $s-bg 64%); --s-border: color-mix(in oklab, $s-fg, $s-bg 82%); --s-border-strong: color-mix(in oklab, $s-fg, $s-bg 68%); scrollbar-width:thin scrollbar-color: $s-border-strong transparent; background:$s-bg color:$s-fg",".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-border-strong border-radius:99px border: 2px solid transparent; background-clip:padding-box",".s-s::-webkit-scrollbar-thumb:hover, .s-s ::-webkit-scrollbar-thumb:hover":"background:$s-fg-faint background-clip:padding-box",".s-s.tonal":"--s-fg:$s-b --s-bg: color-mix(in srgb, $s-b 16%, transparent);",".s-s.outlined":"--s-fg:$s-b --s-bg:inherit background:transparent --s-border: color-mix(in srgb, $s-fg 55%, $s-bg);",".s-s.filled":"--s-fg:$s-a --s-bg:$s-b background:$s-bg;",".s-s.gradient:not(.tonal):not(.outlined)":"background: $s-gradient-surface;",":root, .s-s.base, .s-s.panel, .s-s.raised, .s-s.neutral":"--s-accent:$s-primary",".s-s.primary, .s-s.secondary, .s-s.danger, .s-s.success, .s-s.warning, .s-s.gradient":"--s-accent:$s-fg --s-link:$s-fg"});O.insertGlobalCss({"*, *::before, *::after":"box-sizing:border-box",html:"text-size-adjust:100%",body:"m:0 line-height:1.5 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing:antialiased",a:"color: $s-link; text-decoration:underline text-underline-offset:2px; transition: color 0.12s, filter 0.12s;","a:hover":"filter: brightness(1.15)","input, button, textarea, select":"font:inherit color:inherit","code, kbd, samp, pre":"font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;",code:"background: color-mix(in oklab, $s-fg, $s-bg 86%); padding: 0.12em 0.34em; r:4px font-size:0.9em",pre:"background: color-mix(in oklab, $s-fg, $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-border;","::placeholder":"color: $s-fg-faint; opacity:1",":focus-visible":"outline: 2px solid $s-focus; outline-offset:2px",small:"color:$s-fg-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;"}});O.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 e=document.documentElement;e.classList.add("s-preload"),requestAnimationFrame(()=>requestAnimationFrame(()=>e.classList.remove("s-preload")))}var pe="p, ul, ol, dl, blockquote, pre, table, figure, hr, h1, h2, h3, h4, h5, h6";O.insertGlobalCss({[`${pe}`]:{"&":"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-fg-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-border; padding-left: $3; fg: $s-fg-muted",table:"border-collapse:collapse","th, td":"text-align:left padding: $1 $2; border-bottom: 1px solid $s-border; vertical-align:top",th:"font-weight:600","thead th":"border-bottom: 2px solid $s-border-strong;",dt:"font-weight:600",dd:"margin-left: 1.5em",figcaption:"fg:$s-fg-muted font-size:0.9em margin-top:$1 text-align:center"});import r from"aberdeen";import ie from"aberdeen";var fe=0;function C(e="s"){return`${e}-${++fe}`}function a(e,...t){e!=null&&(typeof e=="function"?e(...t):ie("rich=",e))}function M(e){let t=document.createElement("div");t.style.display="contents",document.body.appendChild(t),ie.mount(t,e)}import h from"aberdeen";h.insertGlobalCss({".s-field":{"&":"display:flex flex-direction:column gap:$1","> label":"font-weight:600 font-size:0.9em fg:$s-fg user-select:none"},".s-req":"fg:$s-danger margin-left:2px",".s-help":"font-size:0.82em fg:$s-fg-muted",".s-error":"font-size:0.82em fg:$s-danger",".s-input":{"&":"w:100% bg:$s-panel fg:$s-ink border: 1px solid $s-border; r:$s-radius padding: 0.55em 0.7em; transition: border-color 0.15s, box-shadow 0.15s;","&:hover:not(:disabled)":"border-color:$s-border-strong","&:focus-visible":"border-color:$s-accent box-shadow: 0 0 0 3px $s-focus; outline:none","&:disabled":"opacity:0.6 cursor:not-allowed","&[aria-invalid=true]":"border-color:$s-danger"}});function L(e,t){let n=e.id??C("field"),i=()=>!!e.error;h("div.s-field",e.attrs,()=>{h(()=>{e.label!=null&&h(`label for=${n}`,()=>{a(e.label),e.required&&h("span.s-req aria-hidden=true #*")})}),t(n,i),h(()=>{e.help!=null&&!e.error&&h("div.s-help",()=>a(e.help))}),h(()=>{e.error&&h("div.s-error role=alert #",e.error)})})}function H(e,t,n,i){h(`id=${t}`),e.name&&h(`name=${e.name}`),h(()=>{e.disabled&&h("disabled=true")}),h(()=>{e.required&&h("aria-required=true")}),h(()=>h("aria-invalid=",n()?"true":"false")),i&&h("bind=",i)}r.insertGlobalCss({".s-ac":{"&":"position:relative","> .s-control":"display:flex flex-wrap:wrap align-items:center gap:$1 bg:$s-panel fg:$s-ink border: 1px solid $s-border; r:$s-radius padding: 0.3em 0.4em; cursor:text; transition: border-color 0.15s, box-shadow 0.15s;","> .s-control:hover":"border-color:$s-border-strong","> .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 bg:$s-raised border: 1px solid $s-border; r:$s-radius padding: 0.1em 0.2em 0.1em 0.5em;",".s-chip > button":"cursor:pointer border:0 background:transparent fg:$s-fg-muted font-size:1.1em line-height:1 padding: 0 0.2em; r:4px",".s-chip > button:hover":"fg:$s-fg background:$s-border",input:"flex:1 min-width:6ch border:0 background:transparent color:inherit outline:none padding:0.25em","> .s-menu":"position:absolute top:100% left:0 right:0 z-index:20 margin-top:4px max-height:15rem overflow-y:auto list-style:none p:$1 margin-bottom:0 bg:$s-panel border: 1px solid $s-border; r:$s-radius box-shadow:$s-shadow","> .s-menu 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-fg 10%, transparent);",".s-add":"fg:$s-accent font-style:italic",".s-empty":"padding: 0.45em 0.6em; fg:$s-fg-muted"}});function me(e){return typeof e=="string"?{value:e,label:e}:{value:e.value,label:e.label??e.value}}function be(e){let t=C("ac-menu"),n=r.proxy({query:"",open:!1,active:0}),i=()=>(typeof e.options=="function"?e.options():e.options).map(me),o=()=>{let c=e.bind?.value;return c==null||c===""?[]:Array.isArray(c)?c:[c]},s=c=>i().find(x=>x.value===c)?.label??c;if(!e.multi){let c=e.bind?r.peek(e.bind,"value"):void 0;typeof c=="string"&&c&&(n.query=r.peek(()=>s(c)))}let l=()=>{let c=new Set(o()),x=i();e.multi&&(x=x.filter(g=>!c.has(g.value)));let b=n.query.trim().toLowerCase();return b&&(x=x.filter(g=>g.label.toLowerCase().includes(b))),x},d=(c,x)=>{if(e.multi){let b=Array.isArray(e.bind?.value)?[...e.bind.value]:[];b.includes(c)||b.push(c),e.bind&&(e.bind.value=b),n.query=""}else e.bind&&(e.bind.value=c),n.query=s(c),n.open=!1;n.active=0,x?.focus()},p=c=>{if(!e.bind)return;let x=e.bind.value??[];e.bind.value=x.filter(b=>b!==c)};L(e,(c,x)=>{r("div.s-ac",e.inputAttrs,()=>{r(()=>r("aria-invalid=",x()?"true":"false"));let b;r("div.s-control",()=>{r("click=",()=>b?.focus()),r(()=>{if(e.multi)for(let g of o())r("span.s-chip",()=>{r("span #",r.peek(()=>s(g))),r("button type=button aria-label=",`Remove ${g}`,()=>{r("#\xD7"),r("click=",y=>{y.stopPropagation(),p(g),b?.focus()})})})}),b=r("input type=text role=combobox autocomplete=off",()=>{r(`id=${c} aria-controls=${t} aria-autocomplete=list`),e.placeholder!=null&&r("placeholder=",e.placeholder),e.disabled&&r("disabled=true"),e.required&&r("aria-required=true"),r("bind=",r.ref(n,"query")),r(()=>r("aria-expanded=",n.open?"true":"false")),r(()=>{let y=l()[n.active];r("aria-activedescendant=",n.open&&y?`${t}-opt-${n.active}`:"")}),r("input=",()=>{n.open=!0,n.active=0}),r("focus=",()=>{n.open=!0}),r("blur=",()=>{setTimeout(()=>le(),150)}),r("keydown=",g=>W(g,b))})}),r(()=>{if(!n.open)return;let g=l(),y=n.query.trim(),te=e.allowCustom!==!1&&y!==""&&!g.some(I=>I.label.toLowerCase()===y.toLowerCase());r("ul.s-menu role=listbox",`id=${t}`,()=>{g.forEach((I,Y)=>{r("li.s-option role=option",`id=${t}-opt-${Y}`,()=>{r(()=>r("aria-selected=",n.active===Y?"true":"false")),r("#",I.label),r("mousedown=",de=>de.preventDefault()),r("click=",()=>d(I.value,b)),r("mousemove=",()=>{n.active=Y})})}),te&&r("li.s-option.s-add role=option",()=>{r("#",`Add "${y}"`),r("mousedown=",I=>I.preventDefault()),r("click=",()=>d(y,b))}),g.length===0&&!te&&r("li.s-empty #No matches")})}),r(()=>{if(e.name)if(e.multi)for(let g of o())r("input type=hidden",()=>{r("name=",e.name),r("value=",g)});else r("input type=hidden",()=>{r("name=",e.name),r("value=",o()[0]??"")})})})});function W(c,x){let b=l(),g=b.length-1;if(c.key==="ArrowDown")c.preventDefault(),n.open=!0,n.active=Math.min(g,n.active+1);else if(c.key==="ArrowUp")c.preventDefault(),n.active=Math.max(0,n.active-1);else if(c.key==="Enter"){c.preventDefault();let y=b[n.active];y?d(y.value,x):e.allowCustom!==!1&&n.query.trim()?d(n.query.trim(),x):n.open&&(n.open=!1)}else if(c.key==="Escape")n.open=!1,e.multi||(n.query=s(o()[0]??""));else if(c.key==="Backspace"&&e.multi&&n.query===""){let y=o();y.length&&p(y[y.length-1])}}function le(){n.open=!1,e.multi?n.query="":e.allowCustom!==!1&&n.query.trim()?d(n.query.trim()):n.query=s(o()[0]??"")}}import q from"aberdeen";q.insertGlobalCss({".s-box":{"&":"display:flex flex-direction:column border: 1px solid $s-border; r: $s-radius-lg; overflow:hidden box-shadow: $s-shadow;","&:not(:first-child)":"margin-top: $3","> header":"display:flex align-items:center gap:$2 padding: $2 $3; border-bottom: 1px solid $s-border; font-weight:600","> footer":"display:flex align-items:center justify-content:flex-end gap:$2 padding: $2 $3; border-top: 1px solid $s-border;","> div":"p:$3 gap:$3"}});function ge(e={}){let t=typeof e=="string"||typeof e=="function"?{content:e}:e;q("section.s-box.s-s.panel",t.attrs,()=>{q(()=>{t.header!=null&&q("header.s-s.raised",t.headerAttrs,()=>a(t.header))}),q("div",t.contentAttrs,()=>{a(t.content)}),q(()=>{t.footer!=null&&q("footer.s-s.raised",t.footerAttrs,()=>a(t.footer))})})}import B from"aberdeen";B.insertGlobalCss({".s-btn":{"&":"display:inline-flex align-items:center justify-content:center gap:$2 font-weight:600 line-height:1.2 white-space:nowrap cursor:pointer text-decoration:none border: 1px solid $s-border; r: $s-radius; padding: 0.5em 1em; transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s, box-shadow 0.15s, transform 0.08s;","&:focus-visible":"outline:none box-shadow: 0 0 0 3px $s-focus;","&:disabled, &[aria-disabled=true]":"opacity:0.45 cursor:not-allowed pointer-events:none filter:saturate(0.6)","&:hover":"filter: brightness(1.08); transform: translateY(-1px)","&.tonal:hover, &.outlined:hover":"background: color-mix(in srgb, $s-b 26%, transparent);","&.gradient:not(.tonal):not(.outlined)":"border:0 box-shadow: inset 0 1px 0 color-mix(in srgb, white 25%, transparent), $s-glow;","&.gradient:not(.tonal):not(.outlined):hover":"filter: brightness(1.05); box-shadow: inset 0 1px 0 color-mix(in srgb, white 25%, transparent), 0 7px 18px color-mix(in srgb, $s-primary 34%, transparent); transform: translateY(-1px);","&:active:not(:disabled):not([aria-disabled=true])":"transform: translateY(1px)","&.small, .small > &":"padding: 0.32em 0.7em; font-size:0.85em","&.large, .large > &":"padding: 0.66em 1.3em; font-size:1.1em"}});var he=/\.(gradient|primary|secondary|neutral|danger|success|warning|base|panel|raised)(\.|\s|$)/;function A(e={}){let t=typeof e=="string"||typeof e=="function"?{content:e}:e,n=t.href!=null?"a":"button",i=t.attrs&&he.test(t.attrs)?"":".gradient";B(`${n}.s-btn.s-s${i}`,t.attrs,()=>{t.href!=null?(B(`href=${t.href} role=button`),t.disabled&&B("aria-disabled=true")):(B("type=",t.type??"button"),t.disabled&&B("disabled=true")),t.ariaLabel&&B("aria-label=",t.ariaLabel),t.click&&B("click=",t.click),a(t.icon),a(t.content)})}import _ from"aberdeen";import re from"aberdeen";re.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 z(e={}){let n=`.s-${e.layout??"attached"}${e.vertical?".s-vertical":""}`;re(`div.s-bgroup${n} role=group`,e.attrs,()=>{if(e.buttons)for(let i of e.buttons)A(i);a(e.content)})}function xe(e){_(()=>{let t=e.bind.value;z({attrs:e.attrs,buttons:Object.entries(e.options).map(([n,i])=>({content:i,ariaLabel:typeof i=="function"?n:void 0,attrs:t===n?".primary":".neutral .outlined",click:()=>{e.bind.value=e.allowDeselect&&t===n?void 0:n}}))})}),e.name&&_(()=>_(`input type=hidden name=${e.name} value=`,e.bind.value??""))}import m from"aberdeen";m.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.6",input:"width:1.15em height:1.15em accent-color:$s-accent cursor:inherit m:0"}});function ve(e={}){let t=e.id??C("check");m("div.s-check",e.attrs,()=>{m(`label for=${t}`,()=>{m("input type=checkbox",e.inputAttrs,()=>{m(`id=${t}`),e.name&&m(`name=${e.name}`),e.checked&&!e.bind&&m("checked=true"),e.change&&m("change=",e.change),m(()=>{e.disabled&&m("disabled=true")}),m(()=>{e.required&&m("aria-required=true")}),e.bind&&m("bind=",e.bind)}),m(()=>{e.label!=null&&a(e.label),e.required&&m("span.s-req aria-hidden=true #*")})}),m(()=>{e.help!=null&&!e.error&&m("div.s-help",()=>a(e.help))}),m(()=>{e.error&&m("div.s-error role=alert #",e.error)})})}import F from"aberdeen";F.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 ye(e={}){let t=typeof e=="string"||typeof e=="function"?{content:e}:e;F("form.s-form",t.attrs,()=>{F(()=>{F(".grid=",t.layout==="grid")}),F("submit=",n=>{if(n.preventDefault(),t.submit){let i=new FormData(n.target),o={};for(let s of new Set(i.keys())){let l=i.getAll(s);o[s]=l.length===1?l[0]:l}t.submit(o,n)}}),a(t.content),F(()=>{t.actions&&F("footer",t.actionsAttrs,()=>a(t.actions))})})}import u from"aberdeen";import v from"aberdeen";import{matchCurrent as $e}from"aberdeen/route";v.insertGlobalCss({".s-menu-list":"position:fixed z-index:350 min-width:10rem display:flex flex-direction:column p:$1 border: 1px solid $s-border; r:$s-radius-lg box-shadow:$s-shadow overflow-y:auto max-height:min(80vh,28rem) transition: opacity 0.15s, transform 0.15s;",".s-menu-list.hidden":"opacity:0 pointer-events:none transform:translateY(-6px)",".s-menu-item, .s-menu-item-link":"display:flex align-items:center gap:$2 w:100% padding: 0.5em 0.65em; r:$s-radius cursor:pointer text-align:left font-size:0.9em border:0 background:transparent fg:$s-fg text-decoration:none transition: background 0.12s, color 0.12s, transform 0.12s, box-shadow 0.12s;",".s-menu-item:hover:not([aria-disabled=true]):not([aria-current=page]), .s-menu-item-link:hover:not([aria-current=page])":"background: color-mix(in srgb, $s-fg 10%, transparent);",".s-menu-item[aria-current=page], .s-menu-item-link[aria-current=page]":"color:$s-on-accent font-weight:600 background: $s-gradient; box-shadow: 0 3px 10px color-mix(in srgb, $s-primary 38%, transparent);",".s-menu-item[aria-current=page] .s-menu-icon, .s-menu-item-link[aria-current=page] .s-menu-icon":"color:$s-on-accent",".s-menu-item[aria-current=page]:hover, .s-menu-item-link[aria-current=page]:hover":"filter:brightness(1.06)",".s-menu-item:focus-visible, .s-menu-item-link:focus-visible":"outline:none background: color-mix(in srgb, $s-fg 10%, transparent); box-shadow: 0 0 0 2px inset $s-focus;",".s-menu-item[aria-disabled=true], .s-menu-item-link[aria-disabled=true]":"opacity:0.45 cursor:not-allowed pointer-events:none",".s-menu-icon":"fg:$s-fg-muted flex-shrink:0","hr.s-menu-sep":"border:0 height:1px margin: $1 0.6rem; background: linear-gradient(to right, transparent, $s-border-strong 18%, $s-border-strong 82%, transparent);"});function N(e,t){v("keydown=",n=>{if(n.key!=="ArrowDown"&&n.key!=="ArrowUp"&&n.key!=="Home"&&n.key!=="End")return;n.preventDefault();let o=[...n.currentTarget.querySelectorAll(".s-menu-item, .s-menu-item-link")].filter(p=>p.getAttribute("aria-disabled")!=="true");if(!o.length)return;let s=o.indexOf(document.activeElement),l=n.key==="ArrowUp"?-1:1,d=n.key==="Home"?0:n.key==="End"?o.length-1:s<0?l>0?0:o.length-1:(s+l+o.length)%o.length;o[d].focus()});for(let n of e){if(typeof n=="string"||typeof n=="function"){a(n);continue}if("separator"in n){v("hr.s-menu-sep");continue}v(n.href?"a.s-menu-item-link":"button.s-menu-item type=button",n.attrs,()=>{n.href&&(v("href=",n.href),n.target&&v("target=",n.target),v(()=>{$e(n.href)&&v("aria-current=page")})),n.disabled&&v("aria-disabled=true"),v("click=",i=>{if(n.disabled){i.preventDefault();return}t?.(),n.click?.(i)}),n.icon&&v("span.s-menu-icon",()=>a(n.icon)),a(n.label)})}}var R=v.proxy({opts:null});function P(){let e=R.opts?.anchor;R.opts=null,e?.focus()}function we(e,t){let n=e.offsetWidth,i=e.offsetHeight,o=window.innerWidth,s=window.innerHeight,l=4,d=t.left;d+n>o-8&&(d=Math.max(8,t.right-n));let p=t.bottom+l;p+i>s-8&&t.top-i-l>=8&&(p=t.top-i-l),e.style.left=Math.max(8,d)+"px",e.style.top=Math.max(8,p)+"px"}M(()=>{let e=R.opts;if(!e)return;let t=v("div.s-menu-list.s-s.panel create=hidden destroy=hidden",e.dropdownAttrs,()=>{N(e.items,P)}),n=o=>{let s=o.target;!t.contains(s)&&!e.anchor.contains(s)&&P()},i=o=>{(o.key==="Escape"||o.key==="Tab")&&(o.preventDefault(),P())};document.addEventListener("click",n,!0),document.addEventListener("keydown",i,!0),v.clean(()=>{document.removeEventListener("click",n,!0),document.removeEventListener("keydown",i,!0)}),requestAnimationFrame(()=>{document.body.contains(t)&&(we(t,e.anchor.getBoundingClientRect()),t.querySelector(".s-menu-item:not([aria-disabled=true]), .s-menu-item-link:not([aria-disabled=true])")?.focus())})});function se(e){return R.opts=e,P}function V(e){let t=null;v.clean(()=>{R.opts?.anchor===t&&P()}),A({icon:()=>v("span aria-hidden=true #\u2630"),...e.button?.content==null?{ariaLabel:"Open menu"}:null,attrs:".neutral .outlined",...e.button,click:n=>{if(t=n.currentTarget,R.opts?.anchor===t){P();return}se({items:e.items,anchor:t,dropdownAttrs:e.dropdownAttrs})}})}u.insertGlobalCss({".s-main":{"&":"display:flex flex-direction:column min-height:100vh max-height:100vh container-type:inline-size","> header":"border-bottom: 1px solid $s-border; position:sticky top:0 z-index:10","> footer":"border-top: 1px solid $s-border; fg:$s-fg-muted","> header > .s-bar, > footer > .s-bar":"display:flex align-items:center width:100% margin-inline:auto gap:$3 padding: $2 $3;","> header .s-header-icon":"display:flex align-items:center 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:0 flex:1","> 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 .s-subtitle":"fg:$s-fg-muted font-size:0.85em overflow:hidden text-overflow:ellipsis white-space:nowrap","> header .s-menu":"display:flex align-items:center gap:$2",".s-body":"flex:1 overflow:hidden display:flex flex-direction:row min-height:0 justify-content:center",".s-body-inner":"flex:1 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-border-strong 18%, $s-border-strong 82%, transparent);",".s-body main":"flex:1 min-height:0 overflow-y:auto display:flex flex-direction:column",".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 max-width:228px padding:$3 gap:$1 background:transparent"},".s-main.s-nav-left .s-nav-trigger, .s-main.s-nav-right .s-nav-trigger":"display:none",".s-main.s-nav-btn-only .s-nav-panel":"display:none",".s-main.s-nav-btn-only .s-nav-trigger":"display:flex","@container (max-width: 640px)":{".s-main.s-nav-left .s-nav-panel, .s-main.s-nav-right .s-nav-panel, .s-main .s-nav-sep":"display:none",".s-main.s-nav-left .s-nav-trigger, .s-main.s-nav-right .s-nav-trigger":"display:flex",".s-content > .s-box":"margin-inline: calc(-1 * $3); r:0 border-inline:0",".s-main .s-body main.s-scroll-y":"margin-right:0"}});function ke(e={}){let t=e.nav,n=e.navPosition??"left",i=t!=null&&t.items.length>0,o=i?n==="button"?".s-nav-btn-only":`.s-nav-${n}`:"";u(`div.s-main.s-s.base${o}`,e.attrs,()=>{u(()=>{(e.title!=null||e.subtitle!=null||e.icon!=null||e.menu!=null||i)&&u("header.s-s.raised",e.topbarAttrs,()=>{u("div.s-bar",()=>{u(()=>{e.maxWidth!=null&&u("max-width:",e.maxWidth)}),u(()=>{i&&u("div.s-nav-trigger",()=>{V({...t,button:{icon:()=>u("span aria-hidden=true #\u2630"),ariaLabel:"Open navigation",attrs:".neutral .outlined .small",...t.button}})})}),u(()=>{e.icon!=null&&u("div.s-header-icon",()=>a(e.icon))}),u("div.s-titles",()=>{u(()=>{e.title!=null&&u("div.s-title",()=>a(e.title))}),u(()=>{e.subtitle!=null&&u("div.s-subtitle",()=>a(e.subtitle))})}),u(()=>{e.menu&&u("div.s-menu",()=>a(e.menu))})})})}),u("div.s-body",()=>{u("div.s-body-inner",()=>{u(()=>{e.maxWidth!=null&&u("max-width:",e.maxWidth)}),i&&n!=="button"&&(u(`nav.s-nav-panel.s-s.raised.s-nav-${n}`,e.navAttrs,()=>{N(t.items)}),u("div.s-nav-sep aria-hidden=true")),Ae(e)})}),u(()=>{e.footer!=null&&u("footer",()=>{u("div.s-bar",()=>{u(()=>{e.maxWidth!=null&&u("max-width:",e.maxWidth)}),a(e.footer)})})})})}function Ae(e){let t=u("main",()=>{u("div.s-content",e.contentAttrs,()=>{a(e.content)})});Oe(t)}function Oe(e){if(typeof ResizeObserver>"u")return;let t=()=>e.classList.toggle("s-scroll-y",e.offsetWidth>e.clientWidth),n=new ResizeObserver(t);n.observe(e),e.firstElementChild&&n.observe(e.firstElementChild),t(),u.clean(()=>n.disconnect())}import f from"aberdeen";import G from"aberdeen";function J(e={}){L(e,(t,n)=>{G("input.s-input",e.inputAttrs,()=>{G("type=",e.type??"text"),e.placeholder!=null&&G("placeholder=",e.placeholder),e.autocomplete!=null&&G("autocomplete=",e.autocomplete),e.value!=null&&!e.bind&&G("value=",e.value),e.input&&G("input=",e.input),e.change&&G("change=",e.change),H(e,t,n,e.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:20rem max-width:min(90vw,44rem) max-height:min(88vh,800px) border: 1px solid $s-border; r: $s-radius-lg; box-shadow: $s-shadow; 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-bottom: 1px solid $s-border; font-weight:600 flex-shrink:0","> footer":"display:flex align-items:center justify-content:flex-end gap:$2 padding: $2 $3; border-top: 1px solid $s-border; 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 D=f.proxy({}),Q=0,Se=f.derive(()=>{let e=Object.keys(D);if(e.length)return e[e.length-1]});M(()=>{f.onEach(D,({resolve:e,opts:t},n)=>{let i=()=>{delete D[n]};f.clean(()=>{t.onClose?.(),e()});let o=f.derive(()=>Se.value!=n);f("div.s-backdrop create=hidden destroy=hidden .hidden=",o,"click=",()=>{t.allowCancel!==!1&&i()}),f("div.s-dialog.s-s.panel create=hidden destroy=hidden",t.attrs,()=>{f(()=>{t.header!=null&&f("header.s-s.raised",t.headerAttrs,()=>a(t.header))}),f("div",t.contentAttrs,()=>{a(t.content,i)}),f(()=>{t.footer!=null&&f("footer.s-s.raised",t.footerAttrs,()=>a(t.footer))})})})});function j(e){Q||document.addEventListener("keydown",n=>{if(n.key==="Escape"&&e.allowCancel!==!1){let i=f.unproxy(D);for(let o=Q;o>0;o--)if(i[o]){i[o].opts.allowCancel!==!1&&delete D[o];break}}});let t=++Q;return e.cancelWithScope!==!1&&f.clean(()=>{delete D[t]}),new Promise(n=>{D[t]={resolve:n,opts:e}})}function Ee(e,t={}){return j({header:"Alert",allowCancel:!0,content:n=>{f("p",()=>{f("#",e)}),z({layout:"spaced",attrs:"align-self:flex-end",content:()=>{A({content:"OK",click:n})}})},...t})}function Te(e,t={}){return new Promise(n=>{let i=!1;j({header:"Confirm",allowCancel:!0,content:o=>{f("p",()=>{f("#",e)}),z({layout:"spaced",attrs:"align-self:flex-end",content:()=>{A({content:"Cancel",attrs:".neutral .outlined",click:o}),A({content:"OK",click:()=>{i=!0,o()}})}})},...t,onClose:()=>{n(i),t.onClose?.()}})})}function Ce(e,t="",n={}){return new Promise(i=>{let o=null;j({header:"Input",allowCancel:!0,content:s=>{f("p",()=>{f("#",e)});let l=f.proxy({value:t});f("form display:contents",()=>{f("submit=",d=>{d.preventDefault(),o=l.value,s()}),J({bind:f.ref(l,"value")}),z({layout:"spaced",attrs:"align-self:flex-end",content:()=>{A({content:"Cancel",attrs:".neutral .outlined",type:"button",click:s}),A({content:"OK",type:"submit"})}})})},...n,onClose:()=>{i(o),n.onClose?.()}})})}import w from"aberdeen";w.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-fg-muted font-size:0.85em"}});function Me(e){L(e,(t,n)=>{w("div.s-select_wrap",e.inputAttrs,()=>{w("select.s-input",()=>{H(e,t,n),w("change=",i=>{e.bind&&(e.bind.value=i.target.value)}),w(()=>{let i=typeof e.options=="function"?e.options():e.options,o=e.bind?.value??"";e.placeholder!=null&&w("option",()=>{w("value= disabled=true hidden=true"),o||w("selected=true"),w("#",e.placeholder)});for(let s of i){let l=typeof s=="string"?{value:s,label:s}:{value:s.value,label:s.label??s.value};w("option",()=>{w("value=",l.value),l.value===o&&w("selected=true"),w("#",l.label)})}})})})})}import $ from"aberdeen";$.insertGlobalCss({".s-tabs":{"&":"display:flex flex-direction:column gap:$3",".s-tablist":"display:flex gap:$1 align-items:stretch overflow-x:auto scrollbar-width:none border-bottom: 1px solid $s-border;",".s-tablist::-webkit-scrollbar":"display:none",".s-tab":"display:inline-flex align-items:center gap:$2 cursor:pointer background:transparent border:0 color: $s-fg-muted; font-weight:600 padding: 0.6em 0.9em; border-bottom: 3px solid transparent; margin-bottom:-1px transition: color 0.15s, background 0.15s, border-color 0.15s;",".s-tab:hover:not(:disabled), .s-tab[aria-selected=true]":"color: $s-fg;",".s-tab:disabled":"opacity:0.5 cursor:not-allowed",".s-tab:focus-visible":"outline:none box-shadow: 0 0 0 3px $s-focus; r: $s-radius;",".s-tab[aria-selected=true]":"border-image: $s-gradient 1;",".s-tabpanel":"display:block"}});function Le(e){let t=C("tabs"),n=(s,l)=>s.id??String(l),i=e.bind??$.proxy(n(e.tabs[0]??{label:""},0)),o=(s,l)=>{s.disabled||(i.value=n(s,l))};$("div.s-tabs",e.attrs,()=>{$("div.s-tablist role=tablist",()=>{e.tabs.forEach((s,l)=>{let d=n(s,l);$("button.s-tab type=button role=tab",()=>{$(`id=${t}-tab-${d} aria-controls=${t}-panel-${d}`),$(()=>{let p=i.value===d;$("aria-selected=",p?"true":"false"),$("tabindex=",p?"0":"-1")}),s.disabled&&$("disabled=true"),$("click=",()=>o(s,l)),$("keydown=",p=>Be(p,e.tabs,l,o)),a(s.icon),a(s.label)})})}),$("div.s-tabpanel role=tabpanel",e.contentAttrs,()=>{$(()=>{let s=i.value,l=e.tabs.findIndex((p,W)=>n(p,W)===s),d=e.tabs[l]??e.tabs[0];d&&($(`id=${t}-panel-${n(d,l)} aria-labelledby=${t}-tab-${n(d,l)}`),a(d.content))})})})}function Be(e,t,n,i){let o=n;if(e.key==="ArrowRight"||e.key==="ArrowDown")o=(n+1)%t.length;else if(e.key==="ArrowLeft"||e.key==="ArrowUp")o=(n-1+t.length)%t.length;else if(e.key==="Home")o=0;else if(e.key==="End")o=t.length-1;else return;e.preventDefault();let s=o>=n?1:-1;for(let l=0;l<t.length;l++){let d=t[o];if(d&&!d.disabled){i(d,o),e.currentTarget?.parentElement?.children[o]?.focus();return}o=(o+s+t.length)%t.length}}import S from"aberdeen";S.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 qe(e={}){let t=e.autoGrow!==!1;L(e,(n,i)=>{let o=S("textarea.s-input",e.inputAttrs,()=>{t?(S(".s-autoGrow"),S("input=",s=>{ae(s.currentTarget),e.input&&e.input(s)})):(S("rows=",e.rows??4),S("resize:",e.resize??"vertical"),e.input&&S("input=",e.input)),e.placeholder!=null&&S("placeholder=",e.placeholder),e.value!=null&&!e.bind&&S("value=",e.value),e.change&&S("change=",e.change),H(e,n,i,e.bind)});t&&requestAnimationFrame(()=>ae(o))})}function ae(e){e.style.height="auto",e.style.height=`${e.scrollHeight}px`}import k from"aberdeen";import{grow as ze,shrink as Fe}from"aberdeen/transitions";k.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; border: 1px solid $s-border; r:$s-radius box-shadow:$s-shadow pointer-events:auto",".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-msg":"font-size:0.9em fg:$s-fg-muted line-height:1.4",".s-toast-close":"cursor:pointer border:0 background:transparent fg:$s-fg-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-fg",".s-toast-close:focus-visible":"outline:none box-shadow: 0 0 0 3px $s-focus; fg:$s-fg"}});var Ge=0,Z=k.proxy({});M(()=>{k("div.s-toasts aria-live=polite aria-atomic=false",()=>{k.onEach(Z,e=>{let{opts:t}=e,n=t.type==="danger"||t.type==="warning"?"alert":"status",i=t.type??"neutral";k(`div.s-toast.s-s.${i} role=${n}`,"create=",ze,"destroy=",Fe,t.attrs,()=>{k("div.s-toast-body",()=>{k(()=>{t.title!=null&&k("div.s-toast-title",()=>a(t.title))}),k("div.s-toast-msg",()=>a(t.message))}),k(()=>{t.dismissible!==!1&&k("button.s-toast-close type=button aria-label=Dismiss",()=>{k("#\xD7"),k("click=",()=>X(e.id))})})})})})});function X(e){delete Z[e]}function De(e){let t=++Ge;Z[t]={id:t,opts:e};let n=e.duration??4e3,i;return n>0&&(i=setTimeout(()=>X(t),n)),()=>{i!=null&&clearTimeout(i),X(t)}}import E from"aberdeen";E.insertGlobalCss({".s-tt-tip":{"&":"position:fixed z-index:500 max-width:20rem w:max-content bg:$s-raised fg:$s-fg border: 1px solid $s-border-strong; r:$s-radius box-shadow:$s-shadow padding: 0.3em 0.65em; font-size:0.85em line-height:1.4 pointer-events:none"}});var K=E.proxy(void 0),T=null;typeof window<"u"&&window.addEventListener("scroll",()=>{K.value=void 0},{capture:!0,passive:!0});function Ie(e,t,n,i){let s=window.innerWidth,l=window.innerHeight,d=0,p=0;return i==="bottom"?(d=e.left+(e.width-t)/2,p=e.bottom+7,p+n>l-8&&(p=e.top-n-7)):i==="left"?(d=e.left-t-7,p=e.top+(e.height-n)/2,d<8&&(d=e.right+7)):i==="right"?(d=e.right+7,p=e.top+(e.height-n)/2,d+t>s-8&&(d=e.left-t-7)):(d=e.left+(e.width-t)/2,p=e.top-n-7,p<8&&(p=e.bottom+7)),{x:Math.max(8,Math.min(d,s-t-8)),y:Math.max(8,Math.min(p,l-n-8))}}function ee(){T&&clearTimeout(T),T=setTimeout(()=>{K.value=void 0,T=null},100)}M(()=>{let e=K.value;if(!e)return;let{opts:t,anchor:n}=e,i=t.placement??"top",o=E("div.s-tt-tip role=tooltip visibility:hidden",t.attrs,()=>{E("mouseenter=",()=>{T&&(clearTimeout(T),T=null)}),E("mouseleave=",ee),a(t.tip)});requestAnimationFrame(()=>{if(!document.body.contains(o))return;let{x:s,y:l}=Ie(n.getBoundingClientRect(),o.offsetWidth,o.offsetHeight,i);o.style.left=s+"px",o.style.top=l+"px",o.style.visibility=""})});function He(e){let t=n=>{T&&(clearTimeout(T),T=null),K.value={opts:e,anchor:n.currentTarget}};E("mouseenter=",t),E("mouseleave=",ee),E("focusin=",t),E("focusout=",ee),E.clean(()=>{K.value?.opts===e&&(K.value=void 0)})}export{He as addTooltip,Ee as alert,be as autocomplete,ge as box,A as button,xe as buttonChooser,z as buttonGroup,ve as checkbox,Te as confirm,j as dialog,ye as form,oe as getDarkMode,ke as main,V as menuButton,Ce as prompt,Me as select,ue as setDarkMode,se as showFloatingMenu,Le as tabs,qe as textarea,J as textline,De as toast};
package/dist/theme.d.ts CHANGED
@@ -1,10 +1,3 @@
1
- /**
2
- * The named accent roles for interactive elements (buttons, tabs, badges, …).
3
- * Each maps to a `.s-s.<role>` class that sets `--s-a` (ink) and `--s-b` (fill).
4
- */
5
- export type SurfaceRole = "primary" | "secondary" | "gradient" | "neutral" | "danger" | "success" | "warning";
6
- /** How a surface's two colours are rendered. `filled` is the default. */
7
- export type Variant = "filled" | "tonal" | "outlined";
8
1
  /**
9
2
  * Force dark mode (`true`), light mode (`false`), or follow the OS preference
10
3
  * (`undefined`). Takes effect immediately and is persisted to localStorage.