staffa 0.4.4 → 0.6.0

package/README.md

@@ -26,6 +26,10 @@ S.main({
 
 Staffa is made to look decent out of the box, but easily customizable at runtime.
 
+## Screenshot
+
+![Screenshot](screenshot.png)
+
 ## Install
 
 ```sh
@@ -281,6 +285,10 @@ ln -s ../../node_modules/staffa/skill .claude/skills/staffa
 
 ## Breaking changes
 
+- **0.5**
+  - Surfaces (`.s-s`) now apply `border-radius` and — for `.tonal` and `.outlined` variants — `border` automatically. Custom surfaces or components that previously set these manually may see doubled or conflicting styles; remove the manual declarations.
+  - `border:0` is now applied to `.s-btn` by default (overriding the browser's 2px button border). Custom button-like components built on `.s-btn` that relied on the browser default border should add an explicit border.
+
 - **0.4**
   - There is no default export anymore: replace `import S from "staffa"` with `import * as S from "staffa"`.
   - `S.button` no longer has a `text` option: use `content` instead (it accepts a string or a draw function).

package/dist/components/button.d.ts

@@ -27,8 +27,8 @@ export interface ButtonOptions {
     attrs?: Attributes;
 }
 /**
- * A button. Always carries at least a visible border so its affordance is
- * obvious at a glance.
+ * A button. Tonal and outlined variants show a border; filled variants rely on
+ * their solid background for affordance.
  *
  * Shortcut: pass a string to use it as the label, or a function for custom
  * content.

package/dist/components/button.js

@@ -1,16 +1,15 @@
 import A from "aberdeen";
 import { drawSlot } from "../core.js";
 // The button is a `.s-s` surface (defaulting to `.primary` in button() below), so
-// its colours come from the surface classes in theme.ts. This rule only handles
-// layout, border, focus, hover and sizing.
+// its colours, border, and border-radius come from the surface classes in theme.ts.
+// This rule only handles layout, focus, hover and sizing.
 A.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; " +
+            "border:0 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 feedback is colour-only (no movement). The filled `.gradient` CTA
         // below layers a deeper shadow on top, so it still reads as the signature action.
         "&:hover": "filter: brightness(1.08)",
@@ -23,10 +22,10 @@ A.insertGlobalCss({
         // the border (rather than making it transparent) also sidesteps a Chromium
         // artifact where a gradient clipped to a transparent rounded border fringes
         // the edge with the gradient's far colour.
-        "&.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)": "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);",
         // Subtle press feedback.
-        "&:active:not(:disabled):not([aria-disabled=true])": "transform: translateY(1px)",
+        "&:active:not(:disabled)": "transform: translateY(1px)",
         // Size: set on the button itself, or inherited from a `.small`/`.large`
         // parent (e.g. a buttonGroup), so a container can size all its buttons at once.
         "&.small, .small > &": "padding: 0.32em 0.7em; font-size:0.85em",
@@ -37,8 +36,8 @@ A.insertGlobalCss({
 // the default `.gradient` base so the two roles don't stack on one element.
 const ROLE_CLASS = /\.(gradient|primary|secondary|neutral|danger|success|warning|base|panel|raised)(\.|\s|$)/;
 /**
- * A button. Always carries at least a visible border so its affordance is
- * obvious at a glance.
+ * A button. Tonal and outlined variants show a border; filled variants rely on
+ * their solid background for affordance.
  *
  * Shortcut: pass a string to use it as the label, or a function for custom
  * content.

package/dist/components/checkbox.js

@@ -4,7 +4,7 @@ A.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",
+        "> label:has(input:disabled)": "cursor:not-allowed opacity:0.45 filter:saturate(0.6)",
         // Native control styled with accent-color: accessible and zero-fuss.
         "input": "width:1.15em height:1.15em accent-color:$s-accent cursor:inherit m:0",
     },

package/dist/components/field.js

@@ -12,7 +12,6 @@ A.insertGlobalCss({
         "&": "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",
     },
 });

package/dist/components/tabs.js

@@ -10,7 +10,6 @@ A.insertGlobalCss({
             "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",

package/dist/components/toast.d.ts

@@ -10,7 +10,7 @@ export interface ToastOptions {
      */
     type?: "success" | "danger" | "warning" | "neutral";
     /**
-     * Auto-dismiss delay in milliseconds. Defaults to `4000`.
+     * Auto-dismiss delay in milliseconds. Defaults to `6000`.
      * Pass `0` to make the toast persistent until dismissed manually.
      */
     duration?: number;
@@ -21,7 +21,7 @@ export interface ToastOptions {
 }
 /**
  * Show a toast notification. Returns a `dismiss()` function to remove it
- * programmatically. Auto-dismisses after `duration` ms (default 4 000).
+ * programmatically. Auto-dismisses after `duration` ms (default 6 000).
  *
  * @example
  * ```ts

package/dist/components/toast.js

@@ -8,7 +8,7 @@ A.insertGlobalCss({
     ".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",
+            "pointer-events:auto position:relative overflow:hidden",
         ".s-toast-body": "display:flex flex-direction:column gap:$1 flex:1 min-width:0",
         ".s-toast-title": "font-weight:700 line-height:1.3",
         ".s-toast-msg": "font-size:0.9em fg:$s-fg-muted line-height:1.4",
@@ -16,21 +16,50 @@ A.insertGlobalCss({
             "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",
+        ".s-toast-progress": "position:absolute bottom:0 left:0 right:0 height:2px background:$s-accent width:100%",
     },
 });
 let toastCount = 0;
 // Keyed by stable ID so A.onEach scopes are per-toast — removing one never re-renders others.
 const toasts = A.proxy({});
 mountPortal(() => {
-    // Only redraws when emptiness flips, keeping the DOM clean while no toasts show.
-    if (A.isEmpty(toasts))
+    // In initial peek is here to NOT subscribe to changes once `toasts` first becomes non empty,
+    // leaving the container in the DOM forever after. (So as not to cut of hide animations.)
+    if (A.peek(() => A.isEmpty(toasts)) && A.isEmpty(toasts))
         return;
     A("div.s-toasts aria-live=polite aria-atomic=false", () => {
         A.onEach(toasts, (entry) => {
-            const { opts } = entry;
+            const { opts, id } = entry;
             const role = opts.type === "danger" || opts.type === "warning" ? "alert" : "status";
             const surface = opts.type ?? "neutral";
+            const duration = opts.duration ?? 6000;
+            let timer;
+            let progressEl = null;
+            const startCountdown = () => {
+                clearTimeout(timer);
+                if (progressEl) {
+                    progressEl.style.transition = "none";
+                    progressEl.style.width = "100%";
+                    progressEl.offsetWidth; // force reflow so transition triggers
+                    progressEl.style.transition = `width ${duration}ms linear`;
+                    progressEl.style.width = "0%";
+                }
+                timer = setTimeout(() => dismiss(id), duration);
+            };
+            const stopCountdown = () => {
+                clearTimeout(timer);
+                timer = undefined;
+                if (progressEl) {
+                    progressEl.style.transition = "none";
+                    progressEl.style.width = "100%";
+                }
+            };
+            A.clean(() => clearTimeout(timer));
             A(`div.s-toast.s-s.${surface} role=${role}`, "create=", grow, "destroy=", shrink, opts.attrs, () => {
+                if (duration > 0) {
+                    A("mouseenter=", stopCountdown);
+                    A("mouseleave=", startCountdown);
+                }
                 A("div.s-toast-body", () => {
                     A(() => {
                         if (opts.title != null)
@@ -43,10 +72,16 @@ mountPortal(() => {
                         return;
                     A("button.s-toast-close type=button aria-label=Dismiss", () => {
                         A("#×");
-                        A("click=", () => dismiss(entry.id));
+                        A("click=", () => dismiss(id));
                     });
                 });
+                if (duration > 0) {
+                    progressEl = A("div.s-toast-progress");
+                }
             });
+            if (duration > 0) {
+                requestAnimationFrame(startCountdown);
+            }
         });
     });
 });
@@ -55,7 +90,7 @@ function dismiss(id) {
 }
 /**
  * Show a toast notification. Returns a `dismiss()` function to remove it
- * programmatically. Auto-dismisses after `duration` ms (default 4 000).
+ * programmatically. Auto-dismisses after `duration` ms (default 6 000).
  *
  * @example
  * ```ts
@@ -68,14 +103,5 @@ function dismiss(id) {
 export function toast(opts) {
     const id = ++toastCount;
     toasts[id] = { id, opts };
-    const duration = opts.duration ?? 4000;
-    let timer;
-    if (duration > 0) {
-        timer = setTimeout(() => dismiss(id), duration);
-    }
-    return () => {
-        if (timer != null)
-            clearTimeout(timer);
-        dismiss(id);
-    };
+    return () => dismiss(id);
 }

package/dist/staffa.esm.js

@@ -1 +1 @@
-import O from"aberdeen";var _="staffa:darkMode",oe=O.proxy({value:ce()});function ce(){try{let e=localStorage.getItem(_);if(e==="dark")return!0;if(e==="light")return!1}catch{}}function ue(e){oe.value=e;try{e===void 0?localStorage.removeItem(_):localStorage.setItem(_,e?"dark":"light")}catch{}}function ie(e=!1){let t=oe.value;return t===void 0&&!e?O.darkMode():t}O(()=>{ie()?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 s from"aberdeen";import re from"aberdeen";var fe=0;function C(e="s"){return`${e}-${++fe}`}function l(e,...t){e!=null&&(typeof e=="function"?e(...t):re("rich=",e))}function M(e){queueMicrotask(()=>re(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"),o=()=>!!e.error;h("div.s-field",e.attrs,()=>{h(()=>{e.label!=null&&h(`label for=${n}`,()=>{l(e.label),e.required&&h("span.s-req aria-hidden=true #*")})}),t(n,o),h(()=>{e.help!=null&&!e.error&&h("div.s-help",()=>l(e.help))}),h(()=>{e.error&&h("div.s-error role=alert #",e.error)})})}function R(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)}s.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=s.proxy({query:"",open:!1,active:0}),o=()=>(typeof e.options=="function"?e.options():e.options).map(me),i=()=>{let c=e.bind?.value;return c==null||c===""?[]:Array.isArray(c)?c:[c]},r=c=>o().find(v=>v.value===c)?.label??c;if(!e.multi){let c=e.bind?s.peek(e.bind,"value"):void 0;typeof c=="string"&&c&&(n.query=s.peek(()=>r(c)))}let a=()=>{let c=new Set(i()),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},d=(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=r(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)=>{s("div.s-ac",e.inputAttrs,()=>{s(()=>s("aria-invalid=",v()?"true":"false"));let b;s("div.s-control",()=>{s("click=",()=>b?.focus()),s(()=>{if(e.multi)for(let g of i())s("span.s-chip",()=>{s("span #",s.peek(()=>r(g))),s("button type=button aria-label=",`Remove ${g}`,()=>{s("#\xD7"),s("click=",$=>{$.stopPropagation(),p(g),b?.focus()})})})}),b=s("input type=text role=combobox autocomplete=off",()=>{s(`id=${c} aria-controls=${t} aria-autocomplete=list`),e.placeholder!=null&&s("placeholder=",e.placeholder),e.disabled&&s("disabled=true"),e.required&&s("aria-required=true"),s("bind=",s.ref(n,"query")),s(()=>s("aria-expanded=",n.open?"true":"false")),s(()=>{let $=a()[n.active];s("aria-activedescendant=",n.open&&$?`${t}-opt-${n.active}`:"")}),s("input=",()=>{n.open=!0,n.active=0}),s("focus=",()=>{n.open=!0}),s("blur=",()=>{setTimeout(()=>le(),150)}),s("keydown=",g=>U(g,b))})}),s(()=>{if(!n.open)return;let g=a(),$=n.query.trim(),ne=e.allowCustom!==!1&&$!==""&&!g.some(P=>P.label.toLowerCase()===$.toLowerCase());s("ul.s-menu role=listbox",`id=${t}`,()=>{g.forEach((P,Y)=>{s("li.s-option role=option",`id=${t}-opt-${Y}`,()=>{s(()=>s("aria-selected=",n.active===Y?"true":"false")),s("#",P.label),s("mousedown=",de=>de.preventDefault()),s("click=",()=>d(P.value,b)),s("mousemove=",()=>{n.active=Y})})}),ne&&s("li.s-option.s-add role=option",()=>{s("#",`Add "${$}"`),s("mousedown=",P=>P.preventDefault()),s("click=",()=>d($,b))}),g.length===0&&!ne&&s("li.s-empty #No matches")})}),s(()=>{if(e.name)if(e.multi)for(let g of i())s("input type=hidden",()=>{s("name=",e.name),s("value=",g)});else s("input type=hidden",()=>{s("name=",e.name),s("value=",i()[0]??"")})})})});function U(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 $=b[n.active];$?d($.value,v):e.allowCustom!==!1&&n.query.trim()?d(n.query.trim(),v):n.open&&(n.open=!1)}else if(c.key==="Escape")n.open=!1,e.multi||(n.query=r(i()[0]??""));else if(c.key==="Backspace"&&e.multi&&n.query===""){let $=i();$.length&&p($[$.length-1])}}function le(){n.open=!1,e.multi?n.query="":e.allowCustom!==!1&&n.query.trim()?d(n.query.trim()):n.query=r(i()[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,()=>l(t.header))}),q("div",t.contentAttrs,()=>{l(t.content)}),q(()=>{t.footer!=null&&q("footer.s-s.raised",t.footerAttrs,()=>l(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)","&.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);","&: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",o=t.attrs&&he.test(t.attrs)?"":".gradient";B(`${n}.s-btn.s-s${o}`,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),l(t.icon),l(t.content)})}import N from"aberdeen";import se from"aberdeen";se.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":""}`;se(`div.s-bgroup${n} role=group`,e.attrs,()=>{if(e.buttons)for(let o of e.buttons)A(o);l(e.content)})}function xe(e){N(()=>{let t=e.bind.value;z({attrs:e.attrs,buttons:Object.entries(e.options).map(([n,o])=>({content:o,ariaLabel:typeof o=="function"?n:void 0,attrs:t===n?".primary":".neutral .outlined",click:()=>{e.bind.value=e.allowDeselect&&t===n?void 0:n}}))})}),e.name&&N(()=>N(`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&&l(e.label),e.required&&m("span.s-req aria-hidden=true #*")})}),m(()=>{e.help!=null&&!e.error&&m("div.s-help",()=>l(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 o=new FormData(n.target),i={};for(let r of new Set(o.keys())){let a=o.getAll(r);i[r]=a.length===1?a[0]:a}t.submit(i,n)}}),l(t.content),F(()=>{t.actions&&F("footer",t.actionsAttrs,()=>l(t.actions))})})}import u from"aberdeen";import x from"aberdeen";import{matchCurrent as $e}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]):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 V(e,t){x("keydown=",n=>{if(n.key!=="ArrowDown"&&n.key!=="ArrowUp"&&n.key!=="Home"&&n.key!=="End")return;n.preventDefault();let i=[...n.currentTarget.querySelectorAll(".s-menu-item, .s-menu-item-link")].filter(p=>p.getAttribute("aria-disabled")!=="true");if(!i.length)return;let r=i.indexOf(document.activeElement),a=n.key==="ArrowUp"?-1:1,d=n.key==="Home"?0:n.key==="End"?i.length-1:r<0?a>0?0:i.length-1:(r+a+i.length)%i.length;i[d].focus()});for(let n of e){if(typeof n=="string"||typeof n=="function"){l(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(()=>{$e(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",()=>l(n.icon)),l(n.label)})}}var G=x.proxy({opts:null});function D(){let e=G.opts?.anchor;G.opts=null,e?.focus()}function we(e,t){let n=e.offsetWidth,o=e.offsetHeight,i=window.innerWidth,r=window.innerHeight,a=4,d=t.left;d+n>i-8&&(d=Math.max(8,t.right-n));let p=t.bottom+a;p+o>r-8&&t.top-o-a>=8&&(p=t.top-o-a),e.style.left=Math.max(8,d)+"px",e.style.top=Math.max(8,p)+"px"}M(()=>{let e=G.opts;if(!e)return;let t=x("div.s-menu-list.s-s.panel create=hidden destroy=hidden",e.dropdownAttrs,()=>{V(e.items,D)}),n=i=>{let r=i.target;!t.contains(r)&&!e.anchor.contains(r)&&D()},o=i=>{(i.key==="Escape"||i.key==="Tab")&&(i.preventDefault(),D())};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)&&(we(t,e.anchor.getBoundingClientRect()),t.querySelector(".s-menu-item:not([aria-disabled=true]), .s-menu-item-link:not([aria-disabled=true])")?.focus())})});function J(e){return G.opts=e,D}function ke(e){let t=null;x.clean(()=>{G.opts?.anchor===t&&D()}),x("contextmenu=",n=>{n.preventDefault(),t=n.currentTarget,J({items:e.items,anchor:t,dropdownAttrs:e.dropdownAttrs})})}function Q(e){let t=null;x.clean(()=>{G.opts?.anchor===t&&D()}),A({icon:()=>x("span aria-hidden=true #\u2630"),...e.button?.content==null?{ariaLabel:"Open menu"}:null,attrs:".neutral .outlined",...e.button,click:n=>{if(t=n.currentTarget,G.opts?.anchor===t){D();return}J({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 Ae(e={}){let t=e.nav,n=e.navPosition??"left",o=t!=null&&t.items.length>0,i=o?n==="button"?".s-nav-btn-only":`.s-nav-${n}`:"";u(`div.s-main.s-s.base${i}`,e.attrs,()=>{u(()=>{(e.title!=null||e.subtitle!=null||e.icon!=null||e.menu!=null||o)&&u("header.s-s.raised",e.topbarAttrs,()=>{u("div.s-bar",()=>{u(()=>{e.maxWidth!=null&&u("max-width:",e.maxWidth)}),u(()=>{o&&u("div.s-nav-trigger",()=>{Q({...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",()=>l(e.icon))}),u("div.s-titles",()=>{u(()=>{e.title!=null&&u("div.s-title",()=>l(e.title))}),u(()=>{e.subtitle!=null&&u("div.s-subtitle",()=>l(e.subtitle))})}),u(()=>{e.menu&&u("div.s-menu",()=>l(e.menu))})})})}),u("div.s-body",()=>{u("div.s-body-inner",()=>{u(()=>{e.maxWidth!=null&&u("max-width:",e.maxWidth)}),o&&n!=="button"&&(u(`nav.s-nav-panel.s-s.raised.s-nav-${n}`,e.navAttrs,()=>{V(t.items)}),u("div.s-nav-sep aria-hidden=true")),Oe(e)})}),u(()=>{e.footer!=null&&u("footer",()=>{u("div.s-bar",()=>{u(()=>{e.maxWidth!=null&&u("max-width:",e.maxWidth)}),l(e.footer)})})})})}function Oe(e){let t=u("main",()=>{u("div.s-content",e.contentAttrs,()=>{l(e.content)})});Ee(t)}function Ee(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 I from"aberdeen";function X(e={}){L(e,(t,n)=>{I("input.s-input",e.inputAttrs,()=>{I("type=",e.type??"text"),e.placeholder!=null&&I("placeholder=",e.placeholder),e.autocomplete!=null&&I("autocomplete=",e.autocomplete),e.value!=null&&!e.bind&&I("value=",e.value),e.input&&I("input=",e.input),e.change&&I("change=",e.change),R(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 H=f.proxy({}),Z=0,Se=f.derive(()=>{let e=Object.keys(H);if(e.length)return e[e.length-1]});M(()=>{f.onEach(H,({resolve:e,opts:t},n)=>{let o=()=>{delete H[n]};f.clean(()=>{t.onClose?.(),e()});let i=f.derive(()=>Se.value!=n);f("div.s-backdrop create=hidden destroy=hidden .hidden=",i,"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,()=>l(t.header))}),f("div",t.contentAttrs,()=>{l(t.content,o)}),f(()=>{t.footer!=null&&f("footer.s-s.raised",t.footerAttrs,()=>l(t.footer))})})})});function j(e){Z||document.addEventListener("keydown",n=>{if(n.key==="Escape"&&e.allowCancel!==!1){let o=f.unproxy(H);for(let i=Z;i>0;i--)if(o[i]){o[i].opts.allowCancel!==!1&&delete H[i];break}}});let t=++Z;return e.cancelWithScope!==!1&&f.clean(()=>{delete H[t]}),new Promise(n=>{H[t]={resolve:n,opts:e}})}function Te(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 Ce(e,t={}){return new Promise(n=>{let o=!1;j({header:"Confirm",allowCancel:!0,content:i=>{f("p",()=>{f("#",e)}),z({layout:"spaced",attrs:"align-self:flex-end",content:()=>{A({content:"Cancel",attrs:".neutral .outlined",click:i}),A({content:"OK",click:()=>{o=!0,i()}})}})},...t,onClose:()=>{n(o),t.onClose?.()}})})}function Me(e,t="",n={}){return new Promise(o=>{let i=null;j({header:"Input",allowCancel:!0,content:r=>{f("p",()=>{f("#",e)});let a=f.proxy({value:t});f("form display:contents",()=>{f("submit=",d=>{d.preventDefault(),i=a.value,r()}),X({bind:f.ref(a,"value")}),z({layout:"spaced",attrs:"align-self:flex-end",content:()=>{A({content:"Cancel",attrs:".neutral .outlined",type:"button",click:r}),A({content:"OK",type:"submit"})}})})},...n,onClose:()=>{o(i),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 Le(e){L(e,(t,n)=>{k("div.s-select_wrap",e.inputAttrs,()=>{k("select.s-input",()=>{R(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,i=e.bind?.value??"";e.placeholder!=null&&k("option",()=>{k("value= disabled=true hidden=true"),i||k("selected=true"),k("#",e.placeholder)});for(let r of o){let a=typeof r=="string"?{value:r,label:r}:{value:r.value,label:r.label??r.value};k("option",()=>{k("value=",a.value),a.value===i&&k("selected=true"),k("#",a.label)})}})})})})}import y from"aberdeen";y.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 Be(e){let t=C("tabs"),n=(r,a)=>r.id??String(a),o=e.bind??y.proxy(n(e.tabs[0]??{label:""},0));e.tabs.length>0&&!e.tabs.some((r,a)=>n(r,a)===y.peek(()=>o.value))&&(o.value=n(e.tabs[0],0));let i=(r,a)=>{r.disabled||(o.value=n(r,a))};y("div.s-tabs",e.attrs,()=>{y("div.s-tablist role=tablist",()=>{e.tabs.forEach((r,a)=>{let d=n(r,a);y("button.s-tab type=button role=tab",()=>{y(`id=${t}-tab-${d} aria-controls=${t}-panel-${d}`),y(()=>{let p=o.value===d;y("aria-selected=",p?"true":"false"),y("tabindex=",p?"0":"-1")}),r.disabled&&y("disabled=true"),y("click=",()=>i(r,a)),y("keydown=",p=>qe(p,e.tabs,a,i)),l(r.icon),l(r.label)})})}),y("div.s-tabpanel role=tabpanel",e.contentAttrs,()=>{y(()=>{let r=o.value,a=e.tabs.findIndex((p,U)=>n(p,U)===r),d=e.tabs[a]??e.tabs[0];d&&(y(`id=${t}-panel-${n(d,a)} aria-labelledby=${t}-tab-${n(d,a)}`),l(d.content))})})})}function qe(e,t,n,o){let i=n;if(e.key==="ArrowRight"||e.key==="ArrowDown")i=(n+1)%t.length;else if(e.key==="ArrowLeft"||e.key==="ArrowUp")i=(n-1+t.length)%t.length;else if(e.key==="Home")i=0;else if(e.key==="End")i=t.length-1;else return;e.preventDefault();let r=i>=n?1:-1;for(let a=0;a<t.length;a++){let d=t[i];if(d&&!d.disabled){o(d,i),e.currentTarget?.parentElement?.children[i]?.focus();return}i=(i+r+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 ze(e={}){let t=e.autoGrow!==!1;L(e,(n,o)=>{let i=E("textarea.s-input",e.inputAttrs,()=>{t?(E(".s-autoGrow"),E("input=",r=>{ae(r.currentTarget),e.input&&e.input(r)})):(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),R(e,n,o,e.bind)});t&&requestAnimationFrame(()=>ae(i))})}function ae(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,W=w.proxy({});M(()=>{w.isEmpty(W)||w("div.s-toasts aria-live=polite aria-atomic=false",()=>{w.onEach(W,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",()=>l(t.title))}),w("div.s-toast-msg",()=>l(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 W[e]}function Ie(e){let t=++Ge;W[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 S from"aberdeen";S.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=S.proxy(void 0),T=null;typeof window<"u"&&window.addEventListener("scroll",()=>{K.value=void 0},{capture:!0,passive:!0});function He(e,t,n,o){let r=window.innerWidth,a=window.innerHeight,d=0,p=0;return o==="bottom"?(d=e.left+(e.width-t)/2,p=e.bottom+7,p+n>a-8&&(p=e.top-n-7)):o==="left"?(d=e.left-t-7,p=e.top+(e.height-n)/2,d<8&&(d=e.right+7)):o==="right"?(d=e.right+7,p=e.top+(e.height-n)/2,d+t>r-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,r-t-8)),y:Math.max(8,Math.min(p,a-n-8))}}function te(){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,o=t.placement??"top",i=S("div.s-tt-tip role=tooltip visibility:hidden",t.attrs,()=>{S("mouseenter=",()=>{T&&(clearTimeout(T),T=null)}),S("mouseleave=",te),l(t.tip)});requestAnimationFrame(()=>{if(!document.body.contains(i))return;let{x:r,y:a}=He(n.getBoundingClientRect(),i.offsetWidth,i.offsetHeight,o);i.style.left=r+"px",i.style.top=a+"px",i.style.visibility=""})});function Pe(e){let t=n=>{T&&(clearTimeout(T),T=null),K.value={opts:e,anchor:n.currentTarget}};S("mouseenter=",t),S("mouseleave=",te),S("focusin=",t),S("focusout=",te),S.clean(()=>{K.value?.opts===e&&(K.value=void 0)})}export{ke as addContextMenu,Pe as addTooltip,Te as alert,be as autocomplete,ge as box,A as button,xe as buttonChooser,z as buttonGroup,ve as checkbox,Ce as confirm,j as dialog,ye as form,ie as getDarkMode,Ae as main,Q as menuButton,Me as prompt,Le as select,ue as setDarkMode,J as showFloatingMenu,Be as tabs,ze as textarea,X as textline,Ie as toast};
+import A from"aberdeen";var _="staffa:darkMode",oe=A.proxy({value:ce()});function ce(){try{let e=localStorage.getItem(_);if(e==="dark")return!0;if(e==="light")return!1}catch{}}function ue(e){oe.value=e;try{e===void 0?localStorage.removeItem(_):localStorage.setItem(_,e?"dark":"light")}catch{}}function ie(e=!1){let t=oe.value;return t===void 0&&!e?A.darkMode():t}A(()=>{ie()?A.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"}):A.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"})});A.setSpacingCssVars();A.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 r:$s-radius",".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); border: 1px solid $s-border;",".s-s.outlined":"--s-fg:$s-b --s-bg:inherit background:transparent --s-border: color-mix(in srgb, $s-fg 55%, $s-bg); border: 1px solid $s-border;",".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",".s-s.primary .s-s.tonal, .s-s.secondary .s-s.tonal, .s-s.gradient .s-s.tonal, .s-s.danger .s-s.tonal, .s-s.success .s-s.tonal, .s-s.warning .s-s.tonal, .s-s.primary .s-s.outlined, .s-s.secondary .s-s.outlined, .s-s.gradient .s-s.outlined, .s-s.danger .s-s.outlined, .s-s.success .s-s.outlined, .s-s.warning .s-s.outlined":"--s-bg: $s-panel; background: $s-panel;"});A.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;"}});A.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")))}A.insertGlobalCss({":disabled, [aria-disabled=true]":"opacity:0.45 filter:saturate(0.6) user-select:none",":disabled, [aria-disabled=true], :disabled *, [aria-disabled=true] *":"pointer-events:none cursor:not-allowed"});var pe="p, ul, ol, dl, blockquote, pre, table, figure, hr, h1, h2, h3, h4, h5, h6";A.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 s from"aberdeen";import re from"aberdeen";var fe=0;function S(e="s"){return`${e}-${++fe}`}function d(e,...t){e!=null&&(typeof e=="function"?e(...t):re("rich=",e))}function M(e){queueMicrotask(()=>re(e))}import x from"aberdeen";x.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","&[aria-invalid=true]":"border-color:$s-danger"}});function L(e,t){let n=e.id??S("field"),i=()=>!!e.error;x("div.s-field",e.attrs,()=>{x(()=>{e.label!=null&&x(`label for=${n}`,()=>{d(e.label),e.required&&x("span.s-req aria-hidden=true #*")})}),t(n,i),x(()=>{e.help!=null&&!e.error&&x("div.s-help",()=>d(e.help))}),x(()=>{e.error&&x("div.s-error role=alert #",e.error)})})}function R(e,t,n,i){x(`id=${t}`),e.name&&x(`name=${e.name}`),x(()=>{e.disabled&&x("disabled=true")}),x(()=>{e.required&&x("aria-required=true")}),x(()=>x("aria-invalid=",n()?"true":"false")),i&&x("bind=",i)}s.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=S("ac-menu"),n=s.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]},r=c=>i().find(y=>y.value===c)?.label??c;if(!e.multi){let c=e.bind?s.peek(e.bind,"value"):void 0;typeof c=="string"&&c&&(n.query=s.peek(()=>r(c)))}let a=()=>{let c=new Set(o()),y=i();e.multi&&(y=y.filter(h=>!c.has(h.value)));let g=n.query.trim().toLowerCase();return g&&(y=y.filter(h=>h.label.toLowerCase().includes(g))),y},l=(c,y)=>{if(e.multi){let g=Array.isArray(e.bind?.value)?[...e.bind.value]:[];g.includes(c)||g.push(c),e.bind&&(e.bind.value=g),n.query=""}else e.bind&&(e.bind.value=c),n.query=r(c),n.open=!1;n.active=0,y?.focus()},p=c=>{if(!e.bind)return;let y=e.bind.value??[];e.bind.value=y.filter(g=>g!==c)};L(e,(c,y)=>{s("div.s-ac",e.inputAttrs,()=>{s(()=>s("aria-invalid=",y()?"true":"false"));let g;s("div.s-control",()=>{s("click=",()=>g?.focus()),s(()=>{if(e.multi)for(let h of o())s("span.s-chip",()=>{s("span #",s.peek(()=>r(h))),s("button type=button aria-label=",`Remove ${h}`,()=>{s("#\xD7"),s("click=",w=>{w.stopPropagation(),p(h),g?.focus()})})})}),g=s("input type=text role=combobox autocomplete=off",()=>{s(`id=${c} aria-controls=${t} aria-autocomplete=list`),e.placeholder!=null&&s("placeholder=",e.placeholder),e.disabled&&s("disabled=true"),e.required&&s("aria-required=true"),s("bind=",s.ref(n,"query")),s(()=>s("aria-expanded=",n.open?"true":"false")),s(()=>{let w=a()[n.active];s("aria-activedescendant=",n.open&&w?`${t}-opt-${n.active}`:"")}),s("input=",()=>{n.open=!0,n.active=0}),s("focus=",()=>{n.open=!0}),s("blur=",()=>{setTimeout(()=>le(),150)}),s("keydown=",h=>j(h,g))})}),s(()=>{if(!n.open)return;let h=a(),w=n.query.trim(),ne=e.allowCustom!==!1&&w!==""&&!h.some(P=>P.label.toLowerCase()===w.toLowerCase());s("ul.s-menu role=listbox",`id=${t}`,()=>{h.forEach((P,Y)=>{s("li.s-option role=option",`id=${t}-opt-${Y}`,()=>{s(()=>s("aria-selected=",n.active===Y?"true":"false")),s("#",P.label),s("mousedown=",de=>de.preventDefault()),s("click=",()=>l(P.value,g)),s("mousemove=",()=>{n.active=Y})})}),ne&&s("li.s-option.s-add role=option",()=>{s("#",`Add "${w}"`),s("mousedown=",P=>P.preventDefault()),s("click=",()=>l(w,g))}),h.length===0&&!ne&&s("li.s-empty #No matches")})}),s(()=>{if(e.name)if(e.multi)for(let h of o())s("input type=hidden",()=>{s("name=",e.name),s("value=",h)});else s("input type=hidden",()=>{s("name=",e.name),s("value=",o()[0]??"")})})})});function j(c,y){let g=a(),h=g.length-1;if(c.key==="ArrowDown")c.preventDefault(),n.open=!0,n.active=Math.min(h,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 w=g[n.active];w?l(w.value,y):e.allowCustom!==!1&&n.query.trim()?l(n.query.trim(),y):n.open&&(n.open=!1)}else if(c.key==="Escape")n.open=!1,e.multi||(n.query=r(o()[0]??""));else if(c.key==="Backspace"&&e.multi&&n.query===""){let w=o();w.length&&p(w[w.length-1])}}function le(){n.open=!1,e.multi?n.query="":e.allowCustom!==!1&&n.query.trim()?l(n.query.trim()):n.query=r(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,()=>d(t.header))}),q("div",t.contentAttrs,()=>{d(t.content)}),q(()=>{t.footer!=null&&q("footer.s-s.raised",t.footerAttrs,()=>d(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:0 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;","&:hover":"filter: brightness(1.08)","&.tonal:hover, &.outlined:hover":"background: color-mix(in srgb, $s-b 26%, transparent);","&.gradient:not(.tonal):not(.outlined)":"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);","&:active:not(:disabled)":"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 O(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),d(t.icon),d(t.content)})}import N from"aberdeen";import se from"aberdeen";se.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":""}`;se(`div.s-bgroup${n} role=group`,e.attrs,()=>{if(e.buttons)for(let i of e.buttons)O(i);d(e.content)})}function xe(e){N(()=>{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&&N(()=>N(`input type=hidden name=${e.name} value=`,e.bind.value??""))}import b from"aberdeen";b.insertGlobalCss({".s-check":{"&":"display:flex flex-direction:column gap:$1","> label":"display:flex align-items:center gap:$2 cursor:pointer user-select:none","> label:has(input:disabled)":"cursor:not-allowed opacity:0.45 filter:saturate(0.6)",input:"width:1.15em height:1.15em accent-color:$s-accent cursor:inherit m:0"}});function ve(e={}){let t=e.id??S("check");b("div.s-check",e.attrs,()=>{b(`label for=${t}`,()=>{b("input type=checkbox",e.inputAttrs,()=>{b(`id=${t}`),e.name&&b(`name=${e.name}`),e.checked&&!e.bind&&b("checked=true"),e.change&&b("change=",e.change),b(()=>{e.disabled&&b("disabled=true")}),b(()=>{e.required&&b("aria-required=true")}),e.bind&&b("bind=",e.bind)}),b(()=>{e.label!=null&&d(e.label),e.required&&b("span.s-req aria-hidden=true #*")})}),b(()=>{e.help!=null&&!e.error&&b("div.s-help",()=>d(e.help))}),b(()=>{e.error&&b("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 r of new Set(i.keys())){let a=i.getAll(r);o[r]=a.length===1?a[0]:a}t.submit(o,n)}}),d(t.content),F(()=>{t.actions&&F("footer",t.actionsAttrs,()=>d(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 V(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 r=o.indexOf(document.activeElement),a=n.key==="ArrowUp"?-1:1,l=n.key==="Home"?0:n.key==="End"?o.length-1:r<0?a>0?0:o.length-1:(r+a+o.length)%o.length;o[l].focus()});for(let n of e){if(typeof n=="string"||typeof n=="function"){d(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",()=>d(n.icon)),d(n.label)})}}var D=v.proxy({opts:null});function G(){let e=D.opts?.anchor;D.opts=null,e?.focus()}function we(e,t){let n=e.offsetWidth,i=e.offsetHeight,o=window.innerWidth,r=window.innerHeight,a=4,l=t.left;l+n>o-8&&(l=Math.max(8,t.right-n));let p=t.bottom+a;p+i>r-8&&t.top-i-a>=8&&(p=t.top-i-a),e.style.left=Math.max(8,l)+"px",e.style.top=Math.max(8,p)+"px"}M(()=>{let e=D.opts;if(!e)return;let t=v("div.s-menu-list.s-s.panel create=hidden destroy=hidden",e.dropdownAttrs,()=>{V(e.items,G)}),n=o=>{let r=o.target;!t.contains(r)&&!e.anchor.contains(r)&&G()},i=o=>{(o.key==="Escape"||o.key==="Tab")&&(o.preventDefault(),G())};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 J(e){return D.opts=e,G}function ke(e){let t=null;v.clean(()=>{D.opts?.anchor===t&&G()}),v("contextmenu=",n=>{n.preventDefault(),t=n.currentTarget,J({items:e.items,anchor:t,dropdownAttrs:e.dropdownAttrs})})}function Q(e){let t=null;v.clean(()=>{D.opts?.anchor===t&&G()}),O({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,D.opts?.anchor===t){G();return}J({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 Ae(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",()=>{Q({...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",()=>d(e.icon))}),u("div.s-titles",()=>{u(()=>{e.title!=null&&u("div.s-title",()=>d(e.title))}),u(()=>{e.subtitle!=null&&u("div.s-subtitle",()=>d(e.subtitle))})}),u(()=>{e.menu&&u("div.s-menu",()=>d(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,()=>{V(t.items)}),u("div.s-nav-sep aria-hidden=true")),Oe(e)})}),u(()=>{e.footer!=null&&u("footer",()=>{u("div.s-bar",()=>{u(()=>{e.maxWidth!=null&&u("max-width:",e.maxWidth)}),d(e.footer)})})})})}function Oe(e){let t=u("main",()=>{u("div.s-content",e.contentAttrs,()=>{d(e.content)})});Ee(t)}function Ee(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 H from"aberdeen";function X(e={}){L(e,(t,n)=>{H("input.s-input",e.inputAttrs,()=>{H("type=",e.type??"text"),e.placeholder!=null&&H("placeholder=",e.placeholder),e.autocomplete!=null&&H("autocomplete=",e.autocomplete),e.value!=null&&!e.bind&&H("value=",e.value),e.input&&H("input=",e.input),e.change&&H("change=",e.change),R(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 I=f.proxy({}),Z=0,Te=f.derive(()=>{let e=Object.keys(I);if(e.length)return e[e.length-1]});M(()=>{f.onEach(I,({resolve:e,opts:t},n)=>{let i=()=>{delete I[n]};f.clean(()=>{t.onClose?.(),e()});let o=f.derive(()=>Te.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,()=>d(t.header))}),f("div",t.contentAttrs,()=>{d(t.content,i)}),f(()=>{t.footer!=null&&f("footer.s-s.raised",t.footerAttrs,()=>d(t.footer))})})})});function U(e){Z||document.addEventListener("keydown",n=>{if(n.key==="Escape"&&e.allowCancel!==!1){let i=f.unproxy(I);for(let o=Z;o>0;o--)if(i[o]){i[o].opts.allowCancel!==!1&&delete I[o];break}}});let t=++Z;return e.cancelWithScope!==!1&&f.clean(()=>{delete I[t]}),new Promise(n=>{I[t]={resolve:n,opts:e}})}function Ce(e,t={}){return U({header:"Alert",allowCancel:!0,content:n=>{f("p",()=>{f("#",e)}),z({layout:"spaced",attrs:"align-self:flex-end",content:()=>{O({content:"OK",click:n})}})},...t})}function Se(e,t={}){return new Promise(n=>{let i=!1;U({header:"Confirm",allowCancel:!0,content:o=>{f("p",()=>{f("#",e)}),z({layout:"spaced",attrs:"align-self:flex-end",content:()=>{O({content:"Cancel",attrs:".neutral .outlined",click:o}),O({content:"OK",click:()=>{i=!0,o()}})}})},...t,onClose:()=>{n(i),t.onClose?.()}})})}function Me(e,t="",n={}){return new Promise(i=>{let o=null;U({header:"Input",allowCancel:!0,content:r=>{f("p",()=>{f("#",e)});let a=f.proxy({value:t});f("form display:contents",()=>{f("submit=",l=>{l.preventDefault(),o=a.value,r()}),X({bind:f.ref(a,"value")}),z({layout:"spaced",attrs:"align-self:flex-end",content:()=>{O({content:"Cancel",attrs:".neutral .outlined",type:"button",click:r}),O({content:"OK",type:"submit"})}})})},...n,onClose:()=>{i(o),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 Le(e){L(e,(t,n)=>{k("div.s-select_wrap",e.inputAttrs,()=>{k("select.s-input",()=>{R(e,t,n),k("change=",i=>{e.bind&&(e.bind.value=i.target.value)}),k(()=>{let i=typeof e.options=="function"?e.options():e.options,o=e.bind?.value??"";e.placeholder!=null&&k("option",()=>{k("value= disabled=true hidden=true"),o||k("selected=true"),k("#",e.placeholder)});for(let r of i){let a=typeof r=="string"?{value:r,label:r}:{value:r.value,label:r.label??r.value};k("option",()=>{k("value=",a.value),a.value===o&&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: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 Be(e){let t=S("tabs"),n=(r,a)=>r.id??String(a),i=e.bind??$.proxy(n(e.tabs[0]??{label:""},0));e.tabs.length>0&&!e.tabs.some((r,a)=>n(r,a)===$.peek(()=>i.value))&&(i.value=n(e.tabs[0],0));let o=(r,a)=>{r.disabled||(i.value=n(r,a))};$("div.s-tabs",e.attrs,()=>{$("div.s-tablist role=tablist",()=>{e.tabs.forEach((r,a)=>{let l=n(r,a);$("button.s-tab type=button role=tab",()=>{$(`id=${t}-tab-${l} aria-controls=${t}-panel-${l}`),$(()=>{let p=i.value===l;$("aria-selected=",p?"true":"false"),$("tabindex=",p?"0":"-1")}),r.disabled&&$("disabled=true"),$("click=",()=>o(r,a)),$("keydown=",p=>qe(p,e.tabs,a,o)),d(r.icon),d(r.label)})})}),$("div.s-tabpanel role=tabpanel",e.contentAttrs,()=>{$(()=>{let r=i.value,a=e.tabs.findIndex((p,j)=>n(p,j)===r),l=e.tabs[a]??e.tabs[0];l&&($(`id=${t}-panel-${n(l,a)} aria-labelledby=${t}-tab-${n(l,a)}`),d(l.content))})})})}function qe(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 r=o>=n?1:-1;for(let a=0;a<t.length;a++){let l=t[o];if(l&&!l.disabled){i(l,o),e.currentTarget?.parentElement?.children[o]?.focus();return}o=(o+r+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 ze(e={}){let t=e.autoGrow!==!1;L(e,(n,i)=>{let o=E("textarea.s-input",e.inputAttrs,()=>{t?(E(".s-autoGrow"),E("input=",r=>{ae(r.currentTarget),e.input&&e.input(r)})):(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),R(e,n,i,e.bind)});t&&requestAnimationFrame(()=>ae(o))})}function ae(e){e.style.height="auto",e.style.height=`${e.scrollHeight}px`}import m from"aberdeen";import{grow as Fe,shrink as Ge}from"aberdeen/transitions";m.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 position:relative overflow:hidden",".s-toast-body":"display:flex flex-direction:column gap:$1 flex:1 min-width:0",".s-toast-title":"font-weight:700 line-height:1.3",".s-toast-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",".s-toast-progress":"position:absolute bottom:0 left:0 right:0 height:2px background:$s-accent width:100%"}});var De=0,W=m.proxy({});M(()=>{m.peek(()=>m.isEmpty(W))&&m.isEmpty(W)||m("div.s-toasts aria-live=polite aria-atomic=false",()=>{m.onEach(W,e=>{let{opts:t,id:n}=e,i=t.type==="danger"||t.type==="warning"?"alert":"status",o=t.type??"neutral",r=t.duration??6e3,a,l=null,p=()=>{clearTimeout(a),l&&(l.style.transition="none",l.style.width="100%",l.offsetWidth,l.style.transition=`width ${r}ms linear`,l.style.width="0%"),a=setTimeout(()=>ee(n),r)},j=()=>{clearTimeout(a),a=void 0,l&&(l.style.transition="none",l.style.width="100%")};m.clean(()=>clearTimeout(a)),m(`div.s-toast.s-s.${o} role=${i}`,"create=",Fe,"destroy=",Ge,t.attrs,()=>{r>0&&(m("mouseenter=",j),m("mouseleave=",p)),m("div.s-toast-body",()=>{m(()=>{t.title!=null&&m("div.s-toast-title",()=>d(t.title))}),m("div.s-toast-msg",()=>d(t.message))}),m(()=>{t.dismissible!==!1&&m("button.s-toast-close type=button aria-label=Dismiss",()=>{m("#\xD7"),m("click=",()=>ee(n))})}),r>0&&(l=m("div.s-toast-progress"))}),r>0&&requestAnimationFrame(p)})})});function ee(e){delete W[e]}function He(e){let t=++De;return W[t]={id:t,opts:e},()=>ee(t)}import T from"aberdeen";T.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=T.proxy(void 0),C=null;typeof window<"u"&&window.addEventListener("scroll",()=>{K.value=void 0},{capture:!0,passive:!0});function Ie(e,t,n,i){let r=window.innerWidth,a=window.innerHeight,l=0,p=0;return i==="bottom"?(l=e.left+(e.width-t)/2,p=e.bottom+7,p+n>a-8&&(p=e.top-n-7)):i==="left"?(l=e.left-t-7,p=e.top+(e.height-n)/2,l<8&&(l=e.right+7)):i==="right"?(l=e.right+7,p=e.top+(e.height-n)/2,l+t>r-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,r-t-8)),y:Math.max(8,Math.min(p,a-n-8))}}function te(){C&&clearTimeout(C),C=setTimeout(()=>{K.value=void 0,C=null},100)}M(()=>{let e=K.value;if(!e)return;let{opts:t,anchor:n}=e,i=t.placement??"top",o=T("div.s-tt-tip role=tooltip visibility:hidden",t.attrs,()=>{T("mouseenter=",()=>{C&&(clearTimeout(C),C=null)}),T("mouseleave=",te),d(t.tip)});requestAnimationFrame(()=>{if(!document.body.contains(o))return;let{x:r,y:a}=Ie(n.getBoundingClientRect(),o.offsetWidth,o.offsetHeight,i);o.style.left=r+"px",o.style.top=a+"px",o.style.visibility=""})});function Pe(e){let t=n=>{C&&(clearTimeout(C),C=null),K.value={opts:e,anchor:n.currentTarget}};T("mouseenter=",t),T("mouseleave=",te),T("focusin=",t),T("focusout=",te),T.clean(()=>{K.value?.opts===e&&(K.value=void 0)})}export{ke as addContextMenu,Pe as addTooltip,Ce as alert,be as autocomplete,ge as box,O as button,xe as buttonChooser,z as buttonGroup,ve as checkbox,Se as confirm,U as dialog,ye as form,ie as getDarkMode,Ae as main,Q as menuButton,Me as prompt,Le as select,ue as setDarkMode,J as showFloatingMenu,Be as tabs,ze as textarea,X as textline,He as toast};

package/dist/theme.js

@@ -234,7 +234,7 @@ A.insertGlobalCss({
         // Chromium): the thumb uses the surface's derived border token, so the bar
         // tracks the active mode/re-skin and a nested surface's own colours.
         "scrollbar-width:thin scrollbar-color: $s-border-strong transparent; " +
-        "background:$s-bg color:$s-fg",
+        "background:$s-bg color:$s-fg r:$s-radius",
     // WebKit/older-Chromium counterpart to the standard `scrollbar-*` props above:
     // a transparent track and a rounded thumb (border-clipped to leave breathing
     // room) that brightens on hover.
@@ -243,12 +243,12 @@ A.insertGlobalCss({
     ".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",
     // Tonal: the fill colour becomes the ink, over a soft tint of itself.
-    ".s-s.tonal": "--s-fg:$s-b --s-bg: color-mix(in srgb, $s-b 16%, transparent);",
+    ".s-s.tonal": "--s-fg:$s-b --s-bg: color-mix(in srgb, $s-b 16%, transparent); border: 1px solid $s-border;",
     // Outlined: the fill colour is the ink; --s-bg *inherits* the parent's bg (the
     // token the derivations read, so the edge mixes ink with the real surroundings)
     // while the painted background is transparent, letting that parent fill — even
     // a gradient or image — show through.
-    ".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.outlined": "--s-fg:$s-b --s-bg:inherit background:transparent --s-border: color-mix(in srgb, $s-fg 55%, $s-bg); border: 1px solid $s-border;",
     // Filled, explicit — last among the variants so a caller's `attrs: ".filled"`
     // overrides a component's default `.tonal`/`.outlined` (resetting both the
     // anchors and the painted background).
@@ -268,6 +268,11 @@ A.insertGlobalCss({
     // the surface's own ink. (Keyed on the role modifier, so it holds across
     // variants — and tracks the tonal/outlined fg remap.)
     ".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",
+    // Tonal/outlined nested inside a filled accent surface would lose legibility:
+    // their transparency bleeds into the vivid parent fill. Swap in the neutral
+    // panel as a base so the role color reads as ink rather than fill.
+    // Specificity (4 classes) beats the 2-class variant rules — no !important needed.
+    ".s-s.primary .s-s.tonal, .s-s.secondary .s-s.tonal, .s-s.gradient .s-s.tonal, .s-s.danger .s-s.tonal, .s-s.success .s-s.tonal, .s-s.warning .s-s.tonal, .s-s.primary .s-s.outlined, .s-s.secondary .s-s.outlined, .s-s.gradient .s-s.outlined, .s-s.danger .s-s.outlined, .s-s.success .s-s.outlined, .s-s.warning .s-s.outlined": "--s-bg: $s-panel; background: $s-panel;",
 });
 // A deliberately light reset. Colours/shape come from the contextual tokens, so
 // rich content (e.g. markdown-to-HTML) adapts to whatever surface holds it. The
@@ -311,6 +316,15 @@ if (typeof document !== "undefined" && typeof requestAnimationFrame === "functio
     root.classList.add("s-preload");
     requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove("s-preload")));
 }
+// ── Disabled region ───────────────────────────────────────────────────────────
+// aria-disabled="true" on any container dims it and blocks pointer events on
+// it and all descendants, matching the per-element disabled look. Keyboard
+// access to focusable descendants is unaffected — add the `inert` attribute too
+// if you need that.
+A.insertGlobalCss({
+    ":disabled, [aria-disabled=true]": "opacity:0.45 filter:saturate(0.6) user-select:none",
+    ":disabled, [aria-disabled=true], :disabled *, [aria-disabled=true] *": "pointer-events:none cursor:not-allowed",
+});
 // ── Flow content: vertical rhythm & light typography ─────────────────────────
 // Sensible block defaults for *any* content — your own UI just as much as
 // markdown-rendered HTML. The rhythm: strip the browser's block margins, then

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "staffa",
-  "version": "0.4.4",
+  "version": "0.6.0",
   "description": "An opinionated component library for the Aberdeen reactive UI library.",
   "license": "ISC",
   "author": "",
@@ -32,10 +32,10 @@
     "test": "shotest test"
   },
   "peerDependencies": {
-    "aberdeen": "^1.17.1"
+    "aberdeen": "^1.18.1"
   },
   "devDependencies": {
-    "aberdeen": "^1.17.1",
+    "aberdeen": "^1.18.1",
     "esbuild": "^0.28.0",
     "http-server": "^14.1.1",
     "jsdom": "^29.1.1",

package/src/components/button.ts

@@ -30,17 +30,16 @@ export interface ButtonOptions {
 }
 
 // The button is a `.s-s` surface (defaulting to `.primary` in button() below), so
-// its colours come from the surface classes in theme.ts. This rule only handles
-// layout, border, focus, hover and sizing.
+// its colours, border, and border-radius come from the surface classes in theme.ts.
+// This rule only handles layout, focus, hover and sizing.
 A.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; " +
+			"border:0 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 feedback is colour-only (no movement). The filled `.gradient` CTA
 		// below layers a deeper shadow on top, so it still reads as the signature action.
 		"&:hover": "filter: brightness(1.08)",
@@ -54,11 +53,11 @@ A.insertGlobalCss({
 		// artifact where a gradient clipped to a transparent rounded border fringes
 		// the edge with the gradient's far colour.
 		"&.gradient:not(.tonal):not(.outlined)":
-			"border:0 box-shadow: inset 0 1px 0 color-mix(in srgb, white 25%, transparent), $s-glow;",
+			"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);",
 		// Subtle press feedback.
-		"&:active:not(:disabled):not([aria-disabled=true])": "transform: translateY(1px)",
+		"&:active:not(:disabled)": "transform: translateY(1px)",
 		// Size: set on the button itself, or inherited from a `.small`/`.large`
 		// parent (e.g. a buttonGroup), so a container can size all its buttons at once.
 		"&.small, .small > &": "padding: 0.32em 0.7em; font-size:0.85em",
@@ -71,8 +70,8 @@ A.insertGlobalCss({
 const ROLE_CLASS = /\.(gradient|primary|secondary|neutral|danger|success|warning|base|panel|raised)(\.|\s|$)/;
 
 /**
- * A button. Always carries at least a visible border so its affordance is
- * obvious at a glance.
+ * A button. Tonal and outlined variants show a border; filled variants rely on
+ * their solid background for affordance.
  *
  * Shortcut: pass a string to use it as the label, or a function for custom
  * content.

package/src/components/checkbox.ts

@@ -18,7 +18,7 @@ A.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",
+		"> label:has(input:disabled)": "cursor:not-allowed opacity:0.45 filter:saturate(0.6)",
 		// Native control styled with accent-color: accessible and zero-fuss.
 		"input": "width:1.15em height:1.15em accent-color:$s-accent cursor:inherit m:0",
 	},

package/src/components/field.ts

@@ -45,8 +45,7 @@ A.insertGlobalCss({
 		"&": "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",
+"&[aria-invalid=true]": "border-color:$s-danger",
 	},
 });
 

package/src/components/tabs.ts

@@ -41,8 +41,7 @@ A.insertGlobalCss({
 			"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: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",
 	},

package/src/components/toast.ts

@@ -13,7 +13,7 @@ export interface ToastOptions {
 	 */
 	type?: "success" | "danger" | "warning" | "neutral"
 	/**
-	 * Auto-dismiss delay in milliseconds. Defaults to `4000`.
+	 * Auto-dismiss delay in milliseconds. Defaults to `6000`.
 	 * Pass `0` to make the toast persistent until dismissed manually.
 	 */
 	duration?: number;
@@ -37,7 +37,7 @@ A.insertGlobalCss({
 		"&":
 			"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",
+			"pointer-events:auto position:relative overflow:hidden",
 		".s-toast-body": "display:flex flex-direction:column gap:$1 flex:1 min-width:0",
 		".s-toast-title": "font-weight:700 line-height:1.3",
 		".s-toast-msg": "font-size:0.9em fg:$s-fg-muted line-height:1.4",
@@ -46,6 +46,7 @@ A.insertGlobalCss({
 			"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",
+		".s-toast-progress": "position:absolute bottom:0 left:0 right:0 height:2px background:$s-accent width:100%",
 	},
 });
 
@@ -54,15 +55,47 @@ let toastCount = 0;
 const toasts = A.proxy({} as Record<number, ToastEntry>);
 
 mountPortal(() => {
-	// Only redraws when emptiness flips, keeping the DOM clean while no toasts show.
-	if (A.isEmpty(toasts)) return;
+	// In initial peek is here to NOT subscribe to changes once `toasts` first becomes non empty,
+	// leaving the container in the DOM forever after. (So as not to cut of hide animations.)
+	if (A.peek(() => A.isEmpty(toasts)) && A.isEmpty(toasts)) return;
 	A("div.s-toasts aria-live=polite aria-atomic=false", () => {
 		A.onEach(toasts, (entry) => {
-			const { opts } = entry;
+			const { opts, id } = entry;
 			const role = opts.type === "danger" || opts.type === "warning" ? "alert" : "status";
 			const surface = opts.type ?? "neutral";
+			const duration = opts.duration ?? 6000;
+
+			let timer: ReturnType<typeof setTimeout> | undefined;
+			let progressEl: HTMLElement | null = null;
+
+			const startCountdown = () => {
+				clearTimeout(timer);
+				if (progressEl) {
+					progressEl.style.transition = "none";
+					progressEl.style.width = "100%";
+					progressEl.offsetWidth; // force reflow so transition triggers
+					progressEl.style.transition = `width ${duration}ms linear`;
+					progressEl.style.width = "0%";
+				}
+				timer = setTimeout(() => dismiss(id), duration);
+			};
+
+			const stopCountdown = () => {
+				clearTimeout(timer);
+				timer = undefined;
+				if (progressEl) {
+					progressEl.style.transition = "none";
+					progressEl.style.width = "100%";
+				}
+			};
+
+			A.clean(() => clearTimeout(timer));
 
 			A(`div.s-toast.s-s.${surface} role=${role}`, "create=", grow, "destroy=", shrink, opts.attrs, () => {
+				if (duration > 0) {
+					A("mouseenter=", stopCountdown);
+					A("mouseleave=", startCountdown);
+				}
 				A("div.s-toast-body", () => {
 					A(() => {
 						if (opts.title != null) A("div.s-toast-title", () => drawSlot(opts.title));
@@ -73,10 +106,17 @@ mountPortal(() => {
 					if (opts.dismissible === false) return;
 					A("button.s-toast-close type=button aria-label=Dismiss", () => {
 						A("#×");
-						A("click=", () => dismiss(entry.id));
+						A("click=", () => dismiss(id));
 					});
 				});
+				if (duration > 0) {
+					progressEl = A("div.s-toast-progress") as HTMLElement;
+				}
 			});
+
+			if (duration > 0) {
+				requestAnimationFrame(startCountdown);
+			}
 		});
 	});
 });
@@ -87,7 +127,7 @@ function dismiss(id: number): void {
 
 /**
  * Show a toast notification. Returns a `dismiss()` function to remove it
- * programmatically. Auto-dismisses after `duration` ms (default 4 000).
+ * programmatically. Auto-dismisses after `duration` ms (default 6 000).
  *
  * @example
  * ```ts
@@ -100,15 +140,5 @@ function dismiss(id: number): void {
 export function toast(opts: ToastOptions): () => void {
 	const id = ++toastCount;
 	toasts[id] = { id, opts };
-
-	const duration = opts.duration ?? 4000;
-	let timer: ReturnType<typeof setTimeout> | undefined;
-	if (duration > 0) {
-		timer = setTimeout(() => dismiss(id), duration);
-	}
-
-	return () => {
-		if (timer != null) clearTimeout(timer);
-		dismiss(id);
-	};
+	return () => dismiss(id);
 }

package/src/theme.ts

@@ -244,7 +244,7 @@ A.insertGlobalCss({
 		// Chromium): the thumb uses the surface's derived border token, so the bar
 		// tracks the active mode/re-skin and a nested surface's own colours.
 		"scrollbar-width:thin scrollbar-color: $s-border-strong transparent; " +
-		"background:$s-bg color:$s-fg",
+		"background:$s-bg color:$s-fg r:$s-radius",
 	// WebKit/older-Chromium counterpart to the standard `scrollbar-*` props above:
 	// a transparent track and a rounded thumb (border-clipped to leave breathing
 	// room) that brightens on hover.
@@ -253,12 +253,12 @@ A.insertGlobalCss({
 	".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",
 	// Tonal: the fill colour becomes the ink, over a soft tint of itself.
-	".s-s.tonal": "--s-fg:$s-b --s-bg: color-mix(in srgb, $s-b 16%, transparent);",
+	".s-s.tonal": "--s-fg:$s-b --s-bg: color-mix(in srgb, $s-b 16%, transparent); border: 1px solid $s-border;",
 	// Outlined: the fill colour is the ink; --s-bg *inherits* the parent's bg (the
 	// token the derivations read, so the edge mixes ink with the real surroundings)
 	// while the painted background is transparent, letting that parent fill — even
 	// a gradient or image — show through.
-	".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.outlined": "--s-fg:$s-b --s-bg:inherit background:transparent --s-border: color-mix(in srgb, $s-fg 55%, $s-bg); border: 1px solid $s-border;",
 	// Filled, explicit — last among the variants so a caller's `attrs: ".filled"`
 	// overrides a component's default `.tonal`/`.outlined` (resetting both the
 	// anchors and the painted background).
@@ -279,6 +279,12 @@ A.insertGlobalCss({
 	// the surface's own ink. (Keyed on the role modifier, so it holds across
 	// variants — and tracks the tonal/outlined fg remap.)
 	".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",
+	// Tonal/outlined nested inside a filled accent surface would lose legibility:
+	// their transparency bleeds into the vivid parent fill. Swap in the neutral
+	// panel as a base so the role color reads as ink rather than fill.
+	// Specificity (4 classes) beats the 2-class variant rules — no !important needed.
+	".s-s.primary .s-s.tonal, .s-s.secondary .s-s.tonal, .s-s.gradient .s-s.tonal, .s-s.danger .s-s.tonal, .s-s.success .s-s.tonal, .s-s.warning .s-s.tonal, .s-s.primary .s-s.outlined, .s-s.secondary .s-s.outlined, .s-s.gradient .s-s.outlined, .s-s.danger .s-s.outlined, .s-s.success .s-s.outlined, .s-s.warning .s-s.outlined":
+		"--s-bg: $s-panel; background: $s-panel;",
 });
 
 // A deliberately light reset. Colours/shape come from the contextual tokens, so
@@ -326,6 +332,16 @@ if (typeof document !== "undefined" && typeof requestAnimationFrame === "functio
 	requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove("s-preload")));
 }
 
+// ── Disabled region ───────────────────────────────────────────────────────────
+// aria-disabled="true" on any container dims it and blocks pointer events on
+// it and all descendants, matching the per-element disabled look. Keyboard
+// access to focusable descendants is unaffected — add the `inert` attribute too
+// if you need that.
+A.insertGlobalCss({
+	":disabled, [aria-disabled=true]": "opacity:0.45 filter:saturate(0.6) user-select:none",
+	":disabled, [aria-disabled=true], :disabled *, [aria-disabled=true] *": "pointer-events:none cursor:not-allowed",
+});
+
 // ── Flow content: vertical rhythm & light typography ─────────────────────────
 // Sensible block defaults for *any* content — your own UI just as much as
 // markdown-rendered HTML. The rhythm: strip the browser's block margins, then