staffa 0.2.1 → 0.3.0

package/dist/index.d.ts

@@ -38,11 +38,14 @@ import { buttonGroup } from "./components/buttonGroup.js";
 import { checkbox } from "./components/checkbox.js";
 import { form } from "./components/form.js";
 import { main } from "./components/main.js";
+import { menuButton, showFloatingMenu } from "./components/menu.js";
 import { dialog, alert, confirm, prompt } from "./components/dialog.js";
 import { select } from "./components/select.js";
 import { tabs } from "./components/tabs.js";
 import { textarea } from "./components/textarea.js";
 import { textline } from "./components/textline.js";
+import { toast } from "./components/toast.js";
+import { addTooltip } from "./components/tooltip.js";
 /** The Staffa component namespace. */
 export declare const S: {
     main: typeof main;
@@ -52,6 +55,8 @@ export declare const S: {
     confirm: typeof confirm;
     prompt: typeof prompt;
     form: typeof form;
+    menuButton: typeof menuButton;
+    showFloatingMenu: typeof showFloatingMenu;
     textline: typeof textline;
     textarea: typeof textarea;
     checkbox: typeof checkbox;
@@ -61,6 +66,8 @@ export declare const S: {
     buttonGroup: typeof buttonGroup;
     autocomplete: typeof autocomplete;
     select: typeof select;
+    toast: typeof toast;
+    addTooltip: typeof addTooltip;
     setDarkMode: typeof setDarkMode;
     getDarkMode: typeof getDarkMode;
 };
@@ -71,6 +78,10 @@ export type { ContentOptions, Bindable, Content, Slot, Attributes as Styling, }
 export { drawSlot, uniqueId } from "./core.js";
 export type { FieldOptions } from "./components/field.js";
 export type { MainOptions } from "./components/main.js";
+export type { MenuOptions, MenuEntry, MenuItem, MenuSeparator, FloatingMenuOptions } from "./components/menu.js";
+export { drawMenu } from "./components/menu.js";
+export type { ToastOptions } from "./components/toast.js";
+export type { TooltipOptions } from "./components/tooltip.js";
 export type { BoxOptions } from "./components/box.js";
 export type { FormOptions } from "./components/form.js";
 export type { TextlineOptions, TextlineType } from "./components/textline.js";

package/dist/index.js

@@ -41,11 +41,14 @@ import { buttonGroup } from "./components/buttonGroup.js";
 import { checkbox } from "./components/checkbox.js";
 import { form } from "./components/form.js";
 import { main } from "./components/main.js";
+import { menuButton, showFloatingMenu } from "./components/menu.js";
 import { dialog, alert, confirm, prompt } from "./components/dialog.js";
 import { select } from "./components/select.js";
 import { tabs } from "./components/tabs.js";
 import { textarea } from "./components/textarea.js";
 import { textline } from "./components/textline.js";
+import { toast } from "./components/toast.js";
+import { addTooltip } from "./components/tooltip.js";
 /** The Staffa component namespace. */
 export const S = {
     main,
@@ -55,6 +58,8 @@ export const S = {
     confirm,
     prompt,
     form,
+    menuButton,
+    showFloatingMenu,
     textline,
     textarea,
     checkbox,
@@ -64,6 +69,8 @@ export const S = {
     buttonGroup,
     autocomplete,
     select,
+    toast,
+    addTooltip,
     setDarkMode,
     getDarkMode,
 };
@@ -71,3 +78,4 @@ export default S;
 // Re-export theming and shared types for advanced use.
 export { setDarkMode, getDarkMode } from "./theme.js";
 export { drawSlot, uniqueId } from "./core.js";
+export { drawMenu } from "./components/menu.js";

package/dist/staffa.esm.js

@@ -1 +1 @@
-import S from"aberdeen";var K="staffa:darkMode",U=S.proxy({value:le()});function le(){try{let e=localStorage.getItem(K);if(e==="dark")return!0;if(e==="light")return!1}catch{}}function P(e){U.value=e;try{e===void 0?localStorage.removeItem(K):localStorage.setItem(K,e?"dark":"light")}catch{}}function M(e=!1){let t=U.value;return t===void 0&&!e?S.darkMode():t}S(()=>{M()?S.insertGlobalCss({":root":"--s-primary:#8b7bff --s-danger:#ff6b6b --s-success:#46d39a --s-warning:#fbbf24 --s-neutral:#3c4352 --s-page:#0e1015 --s-panel:#181b22 --s-raised:#222632 --s-ink:#e8eaf0 --s-on-accent:#0c0a14 --s-focus:rgba(139,123,255,0.45) --s-radius:10px --s-radius-lg:16px --s-shadow: 0 8px 30px rgba(0,0,0,0.45);",":root, .s-s.base, .s-s.panel, .s-s.raised, .s-s.neutral":"--s-link:#6db3ff"}):S.insertGlobalCss({":root":"--s-primary:#6c5ce7 --s-danger:#e23b3b --s-success:#1f9d6b --s-warning:#d97706 --s-neutral:#c7ccda --s-page:#f3f4f8 --s-panel:#ffffff --s-raised:#eceef4 --s-ink:#1b1e27 --s-on-accent:#ffffff --s-focus:rgba(108,92,231,0.35) --s-radius:10px --s-radius-lg:16px --s-shadow: 0 6px 24px rgba(20,24,40,0.12);",":root, .s-s.base, .s-s.panel, .s-s.raised, .s-s.neutral":"--s-link:#2563eb"})});S.setSpacingCssVars();S.insertGlobalCss({":root, .s-s.base":"--s-a:$s-ink --s-b:$s-page",".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.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",":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%); background:$s-bg color:$s-fg",".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;",":root, .s-s.base, .s-s.panel, .s-s.raised, .s-s.neutral":"--s-accent:$s-primary",".s-s.primary, .s-s.danger, .s-s.success, .s-s.warning":"--s-accent:$s-fg --s-link:$s-fg"});S.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","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; margin: $3 0;","::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"});import o from"aberdeen";import de from"aberdeen";var ce=0;function O(e="s"){return`${e}-${++ce}`}function c(e,...t){e!=null&&(typeof e=="function"?e(...t):de("rich=",e))}import g from"aberdeen";g.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 T(e,t){let n=e.id??O("field"),i=()=>!!e.error;g("div.s-field",e.attrs,()=>{g(()=>{e.label!=null&&g(`label for=${n}`,()=>{c(e.label),e.required&&g("span.s-req aria-hidden=true #*")})}),t(n,i),g(()=>{e.help!=null&&!e.error&&g("div.s-help",()=>c(e.help))}),g(()=>{e.error&&g("div.s-error role=alert #",e.error)})})}function F(e,t,n,i){g(`id=${t}`),e.name&&g(`name=${e.name}`),g(()=>{e.disabled&&g("disabled=true")}),g(()=>{e.required&&g("aria-required=true")}),g(()=>g("aria-invalid=",n()?"true":"false")),i&&g("bind=",i)}o.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-option":"padding: 0.45em 0.6em; r:6px cursor:pointer",".s-option[aria-selected=true]":"background:$s-raised",".s-add":"fg:$s-accent font-style:italic",".s-empty":"padding: 0.45em 0.6em; fg:$s-fg-muted"}});function ue(e){return typeof e=="string"?{value:e,label:e}:{value:e.value,label:e.label??e.value}}function _(e){let t=O("ac-menu"),n=o.proxy({query:"",open:!1,active:0}),i=()=>(typeof e.options=="function"?e.options():e.options).map(ue),r=()=>{let s=e.bind?.value;return s==null||s===""?[]:Array.isArray(s)?s:[s]},l=s=>i().find(x=>x.value===s)?.label??s;if(!e.multi){let s=e.bind?o.peek(e.bind,"value"):void 0;typeof s=="string"&&s&&(n.query=o.peek(()=>l(s)))}let a=()=>{let s=new Set(r()),x=i();e.multi&&(x=x.filter(m=>!s.has(m.value)));let b=n.query.trim().toLowerCase();return b&&(x=x.filter(m=>m.label.toLowerCase().includes(b))),x},u=(s,x)=>{if(e.multi){let b=Array.isArray(e.bind?.value)?[...e.bind.value]:[];b.includes(s)||b.push(s),e.bind&&(e.bind.value=b),n.query=""}else e.bind&&(e.bind.value=s),n.query=l(s),n.open=!1;n.active=0,x?.focus()},$=s=>{if(!e.bind)return;let x=e.bind.value??[];e.bind.value=x.filter(b=>b!==s)};T(e,(s,x)=>{o("div.s-ac",e.inputAttrs,()=>{o(()=>o("aria-invalid=",x()?"true":"false"));let b;o("div.s-control",()=>{o("click=",()=>b?.focus()),o(()=>{if(e.multi)for(let m of r())o("span.s-chip",()=>{o("span #",o.peek(()=>l(m))),o("button type=button aria-label=",`Remove ${m}`,()=>{o("#\xD7"),o("click=",v=>{v.stopPropagation(),$(m),b?.focus()})})})}),b=o("input type=text role=combobox autocomplete=off",()=>{o(`id=${s} aria-controls=${t} aria-autocomplete=list`),e.placeholder!=null&&o("placeholder=",e.placeholder),e.disabled&&o("disabled=true"),e.required&&o("aria-required=true"),o("bind=",o.ref(n,"query")),o(()=>o("aria-expanded=",n.open?"true":"false")),o(()=>{let v=a()[n.active];o("aria-activedescendant=",n.open&&v?`${t}-opt-${n.active}`:"")}),o("input=",()=>{n.open=!0,n.active=0}),o("focus=",()=>{n.open=!0}),o("blur=",()=>{setTimeout(()=>L(),150)}),o("keydown=",m=>A(m,b))})}),o(()=>{if(!n.open)return;let m=a(),v=n.query.trim(),W=e.allowCustom!==!1&&v!==""&&!m.some(G=>G.label.toLowerCase()===v.toLowerCase());o("ul.s-menu role=listbox",`id=${t}`,()=>{m.forEach((G,H)=>{o("li.s-option role=option",`id=${t}-opt-${H}`,()=>{o(()=>o("aria-selected=",n.active===H?"true":"false")),o("#",G.label),o("mousedown=",ae=>ae.preventDefault()),o("click=",()=>u(G.value,b)),o("mousemove=",()=>{n.active=H})})}),W&&o("li.s-option.s-add role=option",()=>{o("#",`Add "${v}"`),o("mousedown=",G=>G.preventDefault()),o("click=",()=>u(v,b))}),m.length===0&&!W&&o("li.s-empty #No matches")})}),o(()=>{if(e.name)if(e.multi)for(let m of r())o("input type=hidden",()=>{o("name=",e.name),o("value=",m)});else o("input type=hidden",()=>{o("name=",e.name),o("value=",r()[0]??"")})})})});function A(s,x){let b=a(),m=b.length-1;if(s.key==="ArrowDown")s.preventDefault(),n.open=!0,n.active=Math.min(m,n.active+1);else if(s.key==="ArrowUp")s.preventDefault(),n.active=Math.max(0,n.active-1);else if(s.key==="Enter"){s.preventDefault();let v=b[n.active];v?u(v.value,x):e.allowCustom!==!1&&n.query.trim()?u(n.query.trim(),x):n.open&&(n.open=!1)}else if(s.key==="Escape")n.open=!1,e.multi||(n.query=l(r()[0]??""));else if(s.key==="Backspace"&&e.multi&&n.query===""){let v=r();v.length&&$(v[v.length-1])}}function L(){n.open=!1,e.multi?n.query="":e.allowCustom!==!1&&n.query.trim()?u(n.query.trim()):n.query=l(r()[0]??"")}}import B from"aberdeen";B.insertGlobalCss({".s-box":{"&":"display:flex flex-direction:column border: 1px solid $s-border; r: $s-radius; overflow:hidden","> header":"display:flex align-items:center gap:$2 padding: $2 $3; border-bottom: 1px solid $s-border; font-weight:600","> footer":"display:flex align-items:center gap:$2 padding: $2 $3; border-top: 1px solid $s-border;","> div":"p:$3 gap:$3"}});function Y(e={}){let t=typeof e=="function"?{content:e}:e;B("section.s-box.s-s.panel",t.attrs,()=>{B(()=>{t.header!=null&&B("header.s-s.raised",t.headerAttrs,()=>c(t.header))}),B("div",t.contentAttrs,()=>{t.content&&t.content()}),B(()=>{t.footer!=null&&B("footer.s-s.raised",t.footerAttrs,()=>c(t.footer))})})}import C from"aberdeen";C.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, filter 0.15s, box-shadow 0.15s;","&: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);","&.s-sm":"padding: 0.32em 0.7em; font-size:0.85em","&.s-lg":"padding: 0.66em 1.3em; font-size:1.1em"}});function w(e={}){let t=typeof e=="string"?{text:e}:typeof e=="function"?{content:e}:e,n=t.href!=null?"a":"button",i=t.size!=null?`.s-${t.size}`:"";C(`${n}.s-btn.s-s.primary${i}`,t.attrs,()=>{t.href!=null?(C(`href=${t.href} role=button`),t.disabled&&C("aria-disabled=true")):(C("type=",t.type??"button"),t.disabled&&C("disabled=true")),t.ariaLabel&&C("aria-label=",t.ariaLabel),t.click&&C("click=",t.click),c(t.icon),t.content?t.content():t.text!=null&&C("#",t.text)})}import R from"aberdeen";import N from"aberdeen";N.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 E(e={}){let n=`.s-${e.layout??"attached"}${e.vertical?".s-vertical":""}`;N(`div.s-bgroup${n} role=group`,e.attrs,()=>{if(e.buttons)for(let i of e.buttons)w(i);e.content&&e.content()})}function J(e){R(()=>{let t=e.bind.value;E({attrs:e.attrs,buttons:Object.entries(e.options).map(([n,i])=>({text:i,size:e.size,attrs:t===n?".primary":".neutral .outlined",click:()=>{e.bind.value=e.allowDeselect&&t===n?null:n}}))})}),e.name&&R(()=>R(`input type=hidden name=${e.name} value=`,e.bind.value??""))}import p from"aberdeen";p.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 Q(e={}){let t=e.id??O("check");p("div.s-check",e.attrs,()=>{p(`label for=${t}`,()=>{p("input type=checkbox",e.inputAttrs,()=>{p(`id=${t}`),e.name&&p(`name=${e.name}`),e.checked&&!e.bind&&p("checked=true"),e.change&&p("change=",e.change),p(()=>{e.disabled&&p("disabled=true")}),p(()=>{e.required&&p("aria-required=true")}),e.bind&&p("bind=",e.bind)}),p(()=>{e.label!=null&&c(e.label),e.required&&p("span.s-req aria-hidden=true #*")})}),p(()=>{e.help!=null&&!e.error&&p("div.s-help",()=>c(e.help))}),p(()=>{e.error&&p("div.s-error role=alert #",e.error)})})}import q from"aberdeen";q.insertGlobalCss({".s-form":{"&":"display:flex flex-direction:column gap:$3","&.grid":"display:grid grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap:$3","&.grid > .s-wide, &.grid > footer":"grid-column: 1 / -1;","> footer":"display:flex align-items:center gap:$2 flex-wrap:wrap margin-top:$1"}});function X(e={}){let t=typeof e=="function"?{content:e}:e;q("form.s-form",t.attrs,()=>{q(()=>{q(".grid=",t.layout==="grid")}),q("submit=",n=>{if(n.preventDefault(),t.submit){let i=new FormData(n.target),r={};for(let l of new Set(i.keys())){let a=i.getAll(l);r[l]=a.length===1?a[0]:a}t.submit(r,n)}}),t.content&&t.content(),q(()=>{t.actions&&q("footer",t.actionsAttrs,()=>t.actions?.())})})}import f from"aberdeen";f.insertGlobalCss({".s-main":{"&":"display:flex flex-direction:column min-height:100vh max-height:100vh","> header":"display:flex align-items:center gap:$3 padding: $2 $3; border-bottom: 1px solid $s-border; position:sticky top:0 z-index:10","> header .s-icon":"display:flex align-items:center font-size:1.4em","> header .s-titles":"display:flex flex-direction:column min-width:0 flex:1","> header .s-title":"font-weight:700 font-size:1.1em line-height:1.2 overflow:hidden text-overflow:ellipsis white-space:nowrap","> 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","> main":"flex:1 overflow-y:auto display:flex flex-direction:column","> main > .s-content":"width:100% flex:1","> main > .s-content.s-framed":"margin: $3 auto; border: 1px solid $s-border; r:$s-radius-lg box-shadow:$s-shadow p:$4","> main > .s-content.s-plain":"p:$3","> footer":"display:flex align-items:center gap:$2 padding: $2 $3; border-top: 1px solid $s-border; fg:$s-fg-muted"}});function Z(e={}){f("div.s-main.s-s.base",e.attrs,()=>{f(()=>{(e.title!=null||e.subtitle!=null||e.icon!=null||e.menu!=null)&&f("header.s-s.raised",e.topbarAttrs,()=>{f(()=>{e.icon!=null&&f("div.s-icon",()=>c(e.icon))}),f("div.s-titles",()=>{f(()=>{e.title!=null&&f("div.s-title",()=>c(e.title))}),f(()=>{e.subtitle!=null&&f("div.s-subtitle",()=>c(e.subtitle))})}),f(()=>{e.menu&&f("div.s-menu",()=>e.menu?.())})})}),f("main",()=>{f("div.s-content",e.contentAttrs,()=>{f(()=>{let t=e.maxWidth;t!=null?f(".s-framed.s-s.panel max-width:",t):f(".s-plain")}),e.content&&e.content()})}),f(()=>{e.footer!=null&&f("footer",()=>c(e.footer))})})}import d from"aberdeen";import z from"aberdeen";function j(e={}){T(e,(t,n)=>{z("input.s-input",e.inputAttrs,()=>{z("type=",e.type??"text"),e.placeholder!=null&&z("placeholder=",e.placeholder),e.autocomplete!=null&&z("autocomplete=",e.autocomplete),e.value!=null&&!e.bind&&z("value=",e.value),e.input&&z("input=",e.input),e.change&&z("change=",e.change),F(e,t,n,e.bind)})})}d.insertGlobalCss({".s-backdrop":{"&":"position:fixed inset:0 z-index:200 display:block background: rgba(0,0,0,0.55); transition: opacity 0.4s ease-in-out;","&.hidden":"opacity:0 pointer-events:none"},".s-dialog":{"&":"position:fixed z-index:200 top:50% left:50% display:flex flex-direction:column transform:translate(-50%,-50%) min-width:20rem max-width:min(90vw,44rem) max-height:min(88vh,800px) border: 1px solid $s-border; r: $s-radius-lg; box-shadow: $s-shadow; overflow:hidden transition: opacity 0.2s ease-out, transform 0.2s ease-out;","> header":"display:flex align-items:center gap:$2 padding: $2 $3; border-bottom: 1px solid $s-border; font-weight:600 flex-shrink:0","> footer":"display:flex align-items:center gap:$2 padding: $2 $3; border-top: 1px solid $s-border; flex-shrink:0","> div":"p:$3 gap:$3 display:flex flex-direction:column overflow-y:auto flex:1 min-height:0","&.hidden":"opacity:0 pointer-events:none transform: translate(-50%, calc(-50% + 20px)); pointer-events:none"}});var I=d.proxy({}),V=0,fe=d.derive(()=>{let e=Object.keys(I);if(e.length)return e[e.length-1]});d.mount(document.body,()=>{d.onEach(I,({resolve:e,opts:t},n)=>{let i=()=>{delete I[n]};d.clean(()=>{t.onClose?.(),e()});let r=d.derive(()=>fe.value!=n);d("div.s-backdrop create=hidden destroy=hidden .hidden=",r,"click=",()=>{t.allowCancel!==!1&&i()}),d("div.s-dialog.s-s.panel create=hidden destroy=hidden",t.attrs,()=>{d(()=>{t.header!=null&&d("header.s-s.raised",t.headerAttrs,()=>c(t.header))}),d("div",t.contentAttrs,()=>{c(t.content,i)}),d(()=>{t.footer!=null&&d("footer.s-s.raised",t.footerAttrs,()=>c(t.footer))})})})});function D(e){V||document.addEventListener("keydown",n=>{if(n.key==="Escape"&&e.allowCancel!==!1){let i=d.unproxy(I);for(let r=V;r>0;r--)if(i[r]){i[r].opts.allowCancel!==!1&&delete I[r];break}}});let t=++V;return e.cancelWithScope!==!1&&d.clean(()=>{delete I[t]}),new Promise(n=>{I[t]={resolve:n,opts:e}})}function ee(e,t={}){return D({header:"Alert",allowCancel:!0,content:n=>{d("p",()=>{d("#",e)}),E({layout:"spaced",attrs:"align-self:flex-end",content:()=>{w({text:"OK",click:n})}})},...t})}function te(e,t={}){return new Promise(n=>{let i=!1;D({header:"Confirm",allowCancel:!0,content:r=>{d("p",()=>{d("#",e)}),E({layout:"spaced",attrs:"align-self:flex-end",content:()=>{w({text:"Cancel",attrs:".neutral .outlined",click:r}),w({text:"OK",click:()=>{i=!0,r()}})}})},...t,onClose:()=>{n(i),t.onClose?.()}})})}function ne(e,t="",n={}){return new Promise(i=>{let r=null;D({header:"Input",allowCancel:!0,content:l=>{d("p",()=>{d("#",e)});let a=d.proxy({value:t});d("form display:contents",()=>{d("submit=",u=>{u.preventDefault(),r=a.value,l()}),j({bind:d.ref(a,"value")}),E({layout:"spaced",attrs:"align-self:flex-end",content:()=>{w({text:"Cancel",attrs:".neutral .outlined",type:"button",click:l}),w({text:"OK",type:"submit"})}})})},...n,onClose:()=>{i(r),n.onClose?.()}})})}import y from"aberdeen";y.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 oe(e){T(e,(t,n)=>{y("div.s-select_wrap",e.inputAttrs,()=>{y("select.s-input",()=>{F(e,t,n),y("change=",i=>{e.bind&&(e.bind.value=i.target.value)}),y(()=>{let i=typeof e.options=="function"?e.options():e.options,r=e.bind?.value??"";e.placeholder!=null&&y("option",()=>{y("value= disabled=true hidden=true"),r||y("selected=true"),y("#",e.placeholder)});for(let l of i){let a=typeof l=="string"?{value:l,label:l}:{value:l.value,label:l.label??l.value};y("option",()=>{y("value=",a.value),a.value===r&&y("selected=true"),y("#",a.label)})}})})})})}import h from"aberdeen";h.insertGlobalCss({".s-tabs":{"&":"display:flex flex-direction:column gap:$3",".s-tablist":"display:flex gap:$1 align-items:stretch",".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; transition: color 0.15s, background 0.15s, border-color 0.15s;",".s-tab:hover:not(:disabled)":"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-underline .s-tablist":"border-bottom: 1px solid $s-border;","&.s-underline .s-tab":"border-bottom: 2px solid transparent; margin-bottom:-1px","&.s-underline .s-tab[aria-selected=true]":"color: $s-fg; border-bottom-color: $s-accent;","&.s-pills .s-tab":"r: $s-radius;","&.s-pills .s-tab[aria-selected=true]":"background: $s-bg; color: $s-fg;",".s-tabpanel":"display:block"}});function re(e){let t=e.variant??"underline",n=O("tabs"),i=(a,u)=>a.id??String(u),r=e.bind??h.proxy(i(e.tabs[0]??{label:""},0)),l=(a,u)=>{a.disabled||(r.value=i(a,u))};h(`div.s-tabs.s-${t}`,e.attrs,()=>{h("div.s-tablist role=tablist",()=>{e.tabs.forEach((a,u)=>{let $=i(a,u);h("button.s-tab type=button role=tab",()=>{h(`id=${n}-tab-${$} aria-controls=${n}-panel-${$}`),h(()=>{let A=r.value===$;h("aria-selected=",A?"true":"false"),h("tabindex=",A?"0":"-1"),A&&t==="pills"&&h(".s-s.primary")}),a.disabled&&h("disabled=true"),h("click=",()=>l(a,u)),h("keydown=",A=>pe(A,e.tabs,u,l)),c(a.icon),c(a.label)})})}),h("div.s-tabpanel role=tabpanel",e.contentAttrs,()=>{h(()=>{let a=r.value,u=e.tabs.findIndex((A,L)=>i(A,L)===a),$=e.tabs[u]??e.tabs[0];$&&(h(`id=${n}-panel-${i($,u)} aria-labelledby=${n}-tab-${i($,u)}`),$.content?.())})})})}function pe(e,t,n,i){let r=n;if(e.key==="ArrowRight"||e.key==="ArrowDown")r=(n+1)%t.length;else if(e.key==="ArrowLeft"||e.key==="ArrowUp")r=(n-1+t.length)%t.length;else if(e.key==="Home")r=0;else if(e.key==="End")r=t.length-1;else return;e.preventDefault();let l=r>=n?1:-1;for(let a=0;a<t.length;a++){let u=t[r];if(u&&!u.disabled){i(u,r),e.currentTarget?.parentElement?.children[r]?.focus();return}r=(r+l+t.length)%t.length}}import k from"aberdeen";k.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 se(e={}){let t=e.autoGrow!==!1;T(e,(n,i)=>{let r=k("textarea.s-input",e.inputAttrs,()=>{t?(k(".s-autoGrow"),k("input=",l=>{ie(l.currentTarget),e.input&&e.input(l)})):(k("rows=",e.rows??4),k("resize:",e.resize??"vertical"),e.input&&k("input=",e.input)),e.placeholder!=null&&k("placeholder=",e.placeholder),e.value!=null&&!e.bind&&k("value=",e.value),e.change&&k("change=",e.change),F(e,n,i,e.bind)});t&&requestAnimationFrame(()=>ie(r))})}function ie(e){e.style.height="auto",e.style.height=`${e.scrollHeight}px`}var be={main:Z,box:Y,dialog:D,alert:ee,confirm:te,prompt:ne,form:X,textline:j,textarea:se,checkbox:Q,tabs:re,button:w,buttonChooser:J,buttonGroup:E,autocomplete:_,select:oe,setDarkMode:P,getDarkMode:M},At=be;export{be as S,At as default,c as drawSlot,M as getDarkMode,P as setDarkMode,O as uniqueId};
+import C from"aberdeen";var N="staffa:darkMode",re=C.proxy({value:Ae()});function Ae(){try{let e=localStorage.getItem(N);if(e==="dark")return!0;if(e==="light")return!1}catch{}}function J(e){re.value=e;try{e===void 0?localStorage.removeItem(N):localStorage.setItem(N,e?"dark":"light")}catch{}}function P(e=!1){let t=re.value;return t===void 0&&!e?C.darkMode():t}C(()=>{P()?C.insertGlobalCss({":root":"--s-primary:#8b7bff --s-secondary:#ef7fd0 --s-danger:#ff6b6b --s-success:#46d39a --s-warning:#fbbf24 --s-neutral:#3c4352 --s-page:#0e1015 --s-panel:#181b22 --s-raised:#222632 --s-ink:#e8eaf0 --s-on-accent:#0c0a14 --s-focus:rgba(139,123,255,0.45) --s-radius:12px --s-radius-lg:18px --s-shadow: 0 10px 34px rgba(0,0,0,0.5);",":root, .s-s.base, .s-s.panel, .s-s.raised, .s-s.neutral":"--s-link:#6db3ff"}):C.insertGlobalCss({":root":"--s-primary:#6c5ce7 --s-secondary:#d6459e --s-danger:#e23b3b --s-success:#1f9d6b --s-warning:#d97706 --s-neutral:#c7ccda --s-page:#f3f4f8 --s-panel:#ffffff --s-raised:#eceef4 --s-ink:#1b1e27 --s-on-accent:#0c0a14 --s-focus:rgba(108,92,231,0.35) --s-radius:12px --s-radius-lg:18px --s-shadow: 0 10px 30px rgba(20,24,40,0.13);",":root, .s-s.base, .s-s.panel, .s-s.raised, .s-s.neutral":"--s-link:#2563eb"})});C.setSpacingCssVars();C.insertGlobalCss({":root":"--s-gradient: linear-gradient(135deg, $s-primary, $s-secondary); --s-glow: 0 8px 24px color-mix(in srgb, $s-primary 32%, transparent); --s-page-bg: radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, $s-secondary, transparent 86%), transparent 56%), radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, $s-primary, transparent 87%), transparent 56%), $s-page;",":root, .s-s.base":"--s-a:$s-ink --s-b:$s-page",".s-s.base":"background: $s-page-bg;",".s-s.panel":"--s-a:$s-ink --s-b:$s-panel",".s-s.raised":"--s-a:$s-ink --s-b:$s-raised",".s-s.neutral":"--s-a:$s-ink --s-b:$s-neutral",".s-s.primary":"--s-a:$s-on-accent --s-b:$s-primary",".s-s.secondary":"--s-a:$s-on-accent --s-b:$s-secondary",".s-s.danger":"--s-a:$s-on-accent --s-b:$s-danger",".s-s.success":"--s-a:$s-on-accent --s-b:$s-success",".s-s.warning":"--s-a:$s-on-accent --s-b:$s-warning",".s-s.gradient":"--s-a:$s-on-accent --s-b:$s-primary",":root, .s-s":"--s-fg:$s-a --s-bg:$s-b --s-fg-muted: color-mix(in oklab, $s-fg, $s-bg 42%); --s-fg-faint: color-mix(in oklab, $s-fg, $s-bg 64%); --s-border: color-mix(in oklab, $s-fg, $s-bg 82%); --s-border-strong: color-mix(in oklab, $s-fg, $s-bg 68%); scrollbar-width:thin scrollbar-color: $s-border-strong transparent; background:$s-bg color:$s-fg",".s-s::-webkit-scrollbar, .s-s ::-webkit-scrollbar":"width:10px height:10px",".s-s::-webkit-scrollbar-track, .s-s ::-webkit-scrollbar-track":"background:transparent",".s-s::-webkit-scrollbar-thumb, .s-s ::-webkit-scrollbar-thumb":"background:$s-border-strong border-radius:99px border: 2px solid transparent; background-clip:padding-box",".s-s::-webkit-scrollbar-thumb:hover, .s-s ::-webkit-scrollbar-thumb:hover":"background:$s-fg-faint background-clip:padding-box",".s-s.tonal":"--s-fg:$s-b --s-bg: color-mix(in srgb, $s-b 16%, transparent);",".s-s.outlined":"--s-fg:$s-b --s-bg:inherit background:transparent --s-border: color-mix(in srgb, $s-fg 55%, $s-bg);",".s-s.filled":"--s-fg:$s-a --s-bg:$s-b background:$s-bg;",".s-s.gradient:not(.tonal):not(.outlined)":"background: $s-gradient;",":root, .s-s.base, .s-s.panel, .s-s.raised, .s-s.neutral":"--s-accent:$s-primary",".s-s.primary, .s-s.secondary, .s-s.danger, .s-s.success, .s-s.warning, .s-s.gradient":"--s-accent:$s-fg --s-link:$s-fg"});C.insertGlobalCss({"*, *::before, *::after":"box-sizing:border-box",html:"text-size-adjust:100%",body:"m:0 line-height:1.5 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing:antialiased",a:"color: $s-link; text-decoration:underline text-underline-offset:2px; transition: color 0.12s, filter 0.12s;","a:hover":"filter: brightness(1.15)","input, button, textarea, select":"font:inherit color:inherit","code, kbd, samp, pre":"font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;",code:"background: color-mix(in oklab, $s-fg, $s-bg 86%); padding: 0.12em 0.34em; r:4px font-size:0.9em",pre:"background: color-mix(in oklab, $s-fg, $s-bg 92%); p:$3 r: $s-radius; overflow:auto","pre code":"background:transparent p:0","img, svg, video, canvas":"max-width:100% h:auto",hr:"border:0 border-top: 1px solid $s-border;","::placeholder":"color: $s-fg-faint; opacity:1",":focus-visible":"outline: 2px solid $s-focus; outline-offset:2px",small:"color:$s-fg-muted font-size:0.9em","@media (prefers-reduced-motion: reduce)":{"*, *::before, *::after":"transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important;"}});C.insertGlobalCss({".s-preload, .s-preload *, .s-preload *::before, .s-preload *::after":"transition: none !important; animation: none !important;"});if(typeof document<"u"&&typeof requestAnimationFrame=="function"){let e=document.documentElement;e.classList.add("s-preload"),requestAnimationFrame(()=>requestAnimationFrame(()=>e.classList.remove("s-preload")))}var Oe="p, ul, ol, dl, blockquote, pre, table, figure, hr, h1, h2, h3, h4, h5, h6";C.insertGlobalCss({[`${Oe}`]:{"&":"margin:0","&:not(:first-child)":"margin-top:$3"},"h1, h2, h3, h4, h5, h6":{"&":"line-height:1.15 font-weight:700 text-wrap:balance","&:not(:first-child)":"margin-top:1.4em"},h1:"font-size:2em font-weight:800 letter-spacing:-0.022em",h2:"font-size:1.55em letter-spacing:-0.018em",h3:"font-size:1.3em letter-spacing:-0.011em",h4:"font-size:1.1em",h5:"font-size:0.95em letter-spacing:0.005em",h6:"font-size:0.8em fg:$s-fg-muted text-transform:uppercase letter-spacing:0.07em","ul, ol":{"&":"padding-left:1.5em","> li:not(:first-child), li > &:not(:first-child)":"margin-top:$1"},blockquote:"border-left: 3px solid $s-border; padding-left: $3; fg: $s-fg-muted",table:"border-collapse:collapse","th, td":"text-align:left padding: $1 $2; border-bottom: 1px solid $s-border; vertical-align:top",th:"font-weight:600","thead th":"border-bottom: 2px solid $s-border-strong;",dt:"font-weight:600",dd:"margin-left: 1.5em",figcaption:"fg:$s-fg-muted font-size:0.9em margin-top:$1 text-align:center"});import i from"aberdeen";import Ce from"aberdeen";var Ee=0;function S(e="s"){return`${e}-${++Ee}`}function u(e,...t){e!=null&&(typeof e=="function"?e(...t):Ce("rich=",e))}import h from"aberdeen";h.insertGlobalCss({".s-field":{"&":"display:flex flex-direction:column gap:$1","> label":"font-weight:600 font-size:0.9em fg:$s-fg user-select:none"},".s-req":"fg:$s-danger margin-left:2px",".s-help":"font-size:0.82em fg:$s-fg-muted",".s-error":"font-size:0.82em fg:$s-danger",".s-input":{"&":"w:100% bg:$s-panel fg:$s-ink border: 1px solid $s-border; r:$s-radius padding: 0.55em 0.7em; transition: border-color 0.15s, box-shadow 0.15s;","&:hover:not(:disabled)":"border-color:$s-border-strong","&:focus-visible":"border-color:$s-accent box-shadow: 0 0 0 3px $s-focus; outline:none","&:disabled":"opacity:0.6 cursor:not-allowed","&[aria-invalid=true]":"border-color:$s-danger"}});function L(e,t){let n=e.id??S("field"),o=()=>!!e.error;h("div.s-field",e.attrs,()=>{h(()=>{e.label!=null&&h(`label for=${n}`,()=>{u(e.label),e.required&&h("span.s-req aria-hidden=true #*")})}),t(n,o),h(()=>{e.help!=null&&!e.error&&h("div.s-help",()=>u(e.help))}),h(()=>{e.error&&h("div.s-error role=alert #",e.error)})})}function I(e,t,n,o){h(`id=${t}`),e.name&&h(`name=${e.name}`),h(()=>{e.disabled&&h("disabled=true")}),h(()=>{e.required&&h("aria-required=true")}),h(()=>h("aria-invalid=",n()?"true":"false")),o&&h("bind=",o)}i.insertGlobalCss({".s-ac":{"&":"position:relative","> .s-control":"display:flex flex-wrap:wrap align-items:center gap:$1 bg:$s-panel fg:$s-ink border: 1px solid $s-border; r:$s-radius padding: 0.3em 0.4em; cursor:text; transition: border-color 0.15s, box-shadow 0.15s;","> .s-control:hover":"border-color:$s-border-strong","> .s-control:focus-within":"border-color:$s-accent box-shadow: 0 0 0 3px $s-focus;","&[aria-invalid=true] > .s-control":"border-color:$s-danger",".s-chip":"display:inline-flex align-items:center gap:$1 font-size:0.85em bg:$s-raised border: 1px solid $s-border; r:$s-radius padding: 0.1em 0.2em 0.1em 0.5em;",".s-chip > button":"cursor:pointer border:0 background:transparent fg:$s-fg-muted font-size:1.1em line-height:1 padding: 0 0.2em; r:4px",".s-chip > button:hover":"fg:$s-fg background:$s-border",input:"flex:1 min-width:6ch border:0 background:transparent color:inherit outline:none padding:0.25em","> .s-menu":"position:absolute top:100% left:0 right:0 z-index:20 margin-top:4px max-height:15rem overflow-y:auto list-style:none p:$1 margin-bottom:0 bg:$s-panel border: 1px solid $s-border; r:$s-radius box-shadow:$s-shadow","> .s-menu li":"margin:0",".s-option":"padding: 0.45em 0.6em; r:6px cursor:pointer transition: background 0.1s;",".s-option[aria-selected=true]":"background: color-mix(in srgb, $s-fg 10%, transparent);",".s-add":"fg:$s-accent font-style:italic",".s-empty":"padding: 0.45em 0.6em; fg:$s-fg-muted"}});function Te(e){return typeof e=="string"?{value:e,label:e}:{value:e.value,label:e.label??e.value}}function ie(e){let t=S("ac-menu"),n=i.proxy({query:"",open:!1,active:0}),o=()=>(typeof e.options=="function"?e.options():e.options).map(Te),r=()=>{let c=e.bind?.value;return c==null||c===""?[]:Array.isArray(c)?c:[c]},s=c=>o().find(v=>v.value===c)?.label??c;if(!e.multi){let c=e.bind?i.peek(e.bind,"value"):void 0;typeof c=="string"&&c&&(n.query=i.peek(()=>s(c)))}let a=()=>{let c=new Set(r()),v=o();e.multi&&(v=v.filter(g=>!c.has(g.value)));let b=n.query.trim().toLowerCase();return b&&(v=v.filter(g=>g.label.toLowerCase().includes(b))),v},l=(c,v)=>{if(e.multi){let b=Array.isArray(e.bind?.value)?[...e.bind.value]:[];b.includes(c)||b.push(c),e.bind&&(e.bind.value=b),n.query=""}else e.bind&&(e.bind.value=c),n.query=s(c),n.open=!1;n.active=0,v?.focus()},p=c=>{if(!e.bind)return;let v=e.bind.value??[];e.bind.value=v.filter(b=>b!==c)};L(e,(c,v)=>{i("div.s-ac",e.inputAttrs,()=>{i(()=>i("aria-invalid=",v()?"true":"false"));let b;i("div.s-control",()=>{i("click=",()=>b?.focus()),i(()=>{if(e.multi)for(let g of r())i("span.s-chip",()=>{i("span #",i.peek(()=>s(g))),i("button type=button aria-label=",`Remove ${g}`,()=>{i("#\xD7"),i("click=",y=>{y.stopPropagation(),p(g),b?.focus()})})})}),b=i("input type=text role=combobox autocomplete=off",()=>{i(`id=${c} aria-controls=${t} aria-autocomplete=list`),e.placeholder!=null&&i("placeholder=",e.placeholder),e.disabled&&i("disabled=true"),e.required&&i("aria-required=true"),i("bind=",i.ref(n,"query")),i(()=>i("aria-expanded=",n.open?"true":"false")),i(()=>{let y=a()[n.active];i("aria-activedescendant=",n.open&&y?`${t}-opt-${n.active}`:"")}),i("input=",()=>{n.open=!0,n.active=0}),i("focus=",()=>{n.open=!0}),i("blur=",()=>{setTimeout(()=>we(),150)}),i("keydown=",g=>V(g,b))})}),i(()=>{if(!n.open)return;let g=a(),y=n.query.trim(),oe=e.allowCustom!==!1&&y!==""&&!g.some(G=>G.label.toLowerCase()===y.toLowerCase());i("ul.s-menu role=listbox",`id=${t}`,()=>{g.forEach((G,_)=>{i("li.s-option role=option",`id=${t}-opt-${_}`,()=>{i(()=>i("aria-selected=",n.active===_?"true":"false")),i("#",G.label),i("mousedown=",ke=>ke.preventDefault()),i("click=",()=>l(G.value,b)),i("mousemove=",()=>{n.active=_})})}),oe&&i("li.s-option.s-add role=option",()=>{i("#",`Add "${y}"`),i("mousedown=",G=>G.preventDefault()),i("click=",()=>l(y,b))}),g.length===0&&!oe&&i("li.s-empty #No matches")})}),i(()=>{if(e.name)if(e.multi)for(let g of r())i("input type=hidden",()=>{i("name=",e.name),i("value=",g)});else i("input type=hidden",()=>{i("name=",e.name),i("value=",r()[0]??"")})})})});function V(c,v){let b=a(),g=b.length-1;if(c.key==="ArrowDown")c.preventDefault(),n.open=!0,n.active=Math.min(g,n.active+1);else if(c.key==="ArrowUp")c.preventDefault(),n.active=Math.max(0,n.active-1);else if(c.key==="Enter"){c.preventDefault();let y=b[n.active];y?l(y.value,v):e.allowCustom!==!1&&n.query.trim()?l(n.query.trim(),v):n.open&&(n.open=!1)}else if(c.key==="Escape")n.open=!1,e.multi||(n.query=s(r()[0]??""));else if(c.key==="Backspace"&&e.multi&&n.query===""){let y=r();y.length&&p(y[y.length-1])}}function we(){n.open=!1,e.multi?n.query="":e.allowCustom!==!1&&n.query.trim()?l(n.query.trim()):n.query=s(r()[0]??"")}}import q from"aberdeen";q.insertGlobalCss({".s-box":{"&":"display:flex flex-direction:column border: 1px solid $s-border; r: $s-radius-lg; overflow:hidden box-shadow: $s-shadow;","&:not(:first-child)":"margin-top: $3","> header":"display:flex align-items:center gap:$2 padding: $2 $3; border-bottom: 1px solid $s-border; font-weight:600","> footer":"display:flex align-items:center gap:$2 padding: $2 $3; border-top: 1px solid $s-border;","> div":"p:$3 gap:$3"}});function se(e={}){let t=typeof e=="function"?{content:e}:e;q("section.s-box.s-s.panel",t.attrs,()=>{q(()=>{t.header!=null&&q("header.s-s.raised",t.headerAttrs,()=>u(t.header))}),q("div",t.contentAttrs,()=>{t.content&&t.content()}),q(()=>{t.footer!=null&&q("footer.s-s.raised",t.footerAttrs,()=>u(t.footer))})})}import M from"aberdeen";M.insertGlobalCss({".s-btn":{"&":"display:inline-flex align-items:center justify-content:center gap:$2 font-weight:600 line-height:1.2 white-space:nowrap cursor:pointer text-decoration:none border: 1px solid $s-border; r: $s-radius; padding: 0.5em 1em; transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s, box-shadow 0.15s, transform 0.08s;","&:focus-visible":"outline:none box-shadow: 0 0 0 3px $s-focus;","&:disabled, &[aria-disabled=true]":"opacity:0.45 cursor:not-allowed pointer-events:none filter:saturate(0.6)","&:hover":"filter: brightness(1.08); transform: translateY(-1px)","&.tonal:hover, &.outlined:hover":"background: color-mix(in srgb, $s-b 26%, transparent);","&.gradient:not(.tonal):not(.outlined)":"border:0 box-shadow: $s-glow;","&.gradient:not(.tonal):not(.outlined):hover":"filter: brightness(1.06); box-shadow: 0 10px 28px color-mix(in srgb, $s-primary 42%, transparent); transform: translateY(-1px);","&:active:not(:disabled):not([aria-disabled=true])":"transform: translateY(1px)","&.small, .small > &":"padding: 0.32em 0.7em; font-size:0.85em","&.large, .large > &":"padding: 0.66em 1.3em; font-size:1.1em"}});var Se=/\.(gradient|primary|secondary|neutral|danger|success|warning|base|panel|raised)(\.|\s|$)/;function A(e={}){let t=typeof e=="string"?{text:e}:typeof e=="function"?{content:e}:e,n=t.href!=null?"a":"button",o=t.attrs&&Se.test(t.attrs)?"":".gradient";M(`${n}.s-btn.s-s${o}`,t.attrs,()=>{t.href!=null?(M(`href=${t.href} role=button`),t.disabled&&M("aria-disabled=true")):(M("type=",t.type??"button"),t.disabled&&M("disabled=true")),t.ariaLabel&&M("aria-label=",t.ariaLabel),t.click&&M("click=",t.click),u(t.icon),t.content?t.content():t.text!=null&&M("#",t.text)})}import Q from"aberdeen";import ae from"aberdeen";ae.insertGlobalCss({".s-bgroup":{"&":"display:inline-flex align-items:stretch","&.s-spaced":"gap:$2 flex-wrap:wrap","&.s-vertical":"flex-direction:column","&.s-attached":"gap:0","&.s-attached:not(.s-vertical) > .s-btn:not(:first-child)":"margin-left:-1px","&.s-attached:not(.s-vertical) > .s-btn:not(:first-child):not(:last-child)":"r:0","&.s-attached:not(.s-vertical) > .s-btn:first-child:not(:last-child)":"border-top-right-radius:0 border-bottom-right-radius:0","&.s-attached:not(.s-vertical) > .s-btn:last-child:not(:first-child)":"border-top-left-radius:0 border-bottom-left-radius:0","&.s-attached.s-vertical > .s-btn:not(:first-child)":"margin-top:-1px","&.s-attached.s-vertical > .s-btn:not(:first-child):not(:last-child)":"r:0","&.s-attached.s-vertical > .s-btn:first-child:not(:last-child)":"border-bottom-left-radius:0 border-bottom-right-radius:0","&.s-attached.s-vertical > .s-btn:last-child:not(:first-child)":"border-top-left-radius:0 border-top-right-radius:0","&.s-attached > .s-btn:hover, &.s-attached > .s-btn:focus-visible":"z-index:1"}});function B(e={}){let n=`.s-${e.layout??"attached"}${e.vertical?".s-vertical":""}`;ae(`div.s-bgroup${n} role=group`,e.attrs,()=>{if(e.buttons)for(let o of e.buttons)A(o);e.content&&e.content()})}function le(e){Q(()=>{let t=e.bind.value;B({attrs:e.attrs,buttons:Object.entries(e.options).map(([n,o])=>({text:typeof o=="string"?o:void 0,content:typeof o=="function"?o:void 0,attrs:t===n?".primary":".neutral .outlined",click:()=>{e.bind.value=e.allowDeselect&&t===n?null:n}}))})}),e.name&&Q(()=>Q(`input type=hidden name=${e.name} value=`,e.bind.value??""))}import m from"aberdeen";m.insertGlobalCss({".s-check":{"&":"display:flex flex-direction:column gap:$1","> label":"display:flex align-items:center gap:$2 cursor:pointer user-select:none","> label:has(input:disabled)":"cursor:not-allowed opacity:0.6",input:"width:1.15em height:1.15em accent-color:$s-accent cursor:inherit m:0"}});function de(e={}){let t=e.id??S("check");m("div.s-check",e.attrs,()=>{m(`label for=${t}`,()=>{m("input type=checkbox",e.inputAttrs,()=>{m(`id=${t}`),e.name&&m(`name=${e.name}`),e.checked&&!e.bind&&m("checked=true"),e.change&&m("change=",e.change),m(()=>{e.disabled&&m("disabled=true")}),m(()=>{e.required&&m("aria-required=true")}),e.bind&&m("bind=",e.bind)}),m(()=>{e.label!=null&&u(e.label),e.required&&m("span.s-req aria-hidden=true #*")})}),m(()=>{e.help!=null&&!e.error&&m("div.s-help",()=>u(e.help))}),m(()=>{e.error&&m("div.s-error role=alert #",e.error)})})}import z from"aberdeen";z.insertGlobalCss({".s-form":{"&":"display:flex flex-direction:column gap:$3","&.grid":"display:grid grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap:$3","&.grid > .s-wide, &.grid > footer":"grid-column: 1 / -1;","> footer":"display:flex align-items:center gap:$2 flex-wrap:wrap margin-top:$1"}});function ce(e={}){let t=typeof e=="function"?{content:e}:e;z("form.s-form",t.attrs,()=>{z(()=>{z(".grid=",t.layout==="grid")}),z("submit=",n=>{if(n.preventDefault(),t.submit){let o=new FormData(n.target),r={};for(let s of new Set(o.keys())){let a=o.getAll(s);r[s]=a.length===1?a[0]:a}t.submit(r,n)}}),t.content&&t.content(),z(()=>{t.actions&&z("footer",t.actionsAttrs,()=>t.actions?.())})})}import d from"aberdeen";import x from"aberdeen";import{matchCurrent as Me}from"aberdeen/route";x.insertGlobalCss({".s-menu-list":"position:fixed z-index:350 min-width:10rem display:flex flex-direction:column p:$1 border: 1px solid $s-border; r:$s-radius-lg box-shadow:$s-shadow overflow-y:auto max-height:min(80vh,28rem) transition: opacity 0.15s, transform 0.15s;",".s-menu-list.hidden":"opacity:0 pointer-events:none transform:translateY(-6px)",".s-menu-item, .s-menu-item-link":"display:flex align-items:center gap:$2 w:100% padding: 0.5em 0.65em; r:$s-radius cursor:pointer text-align:left font-size:0.9em border:0 background:transparent fg:$s-fg text-decoration:none transition: background 0.12s, color 0.12s, transform 0.12s, box-shadow 0.12s;",".s-menu-item:hover:not([aria-disabled=true]), .s-menu-item-link:hover":"background: color-mix(in srgb, $s-fg 10%, transparent);",".s-menu-item[aria-current=page], .s-menu-item-link[aria-current=page]":"color:$s-on-accent font-weight:600 background: $s-gradient; box-shadow: 0 3px 10px color-mix(in srgb, $s-primary 38%, transparent);",".s-menu-item[aria-current=page] .s-menu-icon, .s-menu-item-link[aria-current=page] .s-menu-icon":"color:$s-on-accent",".s-menu-item[aria-current=page]:hover, .s-menu-item-link[aria-current=page]:hover":"filter:brightness(1.06)",".s-menu-item:focus-visible, .s-menu-item-link:focus-visible":"outline:none background: color-mix(in srgb, $s-fg 10%, transparent); box-shadow: 0 0 0 2px inset $s-focus;",".s-menu-item[aria-disabled=true], .s-menu-item-link[aria-disabled=true]":"opacity:0.45 cursor:not-allowed pointer-events:none",".s-menu-icon":"fg:$s-fg-muted flex-shrink:0","hr.s-menu-sep":"border:0 height:1px margin: $1 0.6rem; background: linear-gradient(to right, transparent, $s-border-strong 18%, $s-border-strong 82%, transparent);"});function W(e,t){x("keydown=",n=>{if(n.key!=="ArrowDown"&&n.key!=="ArrowUp"&&n.key!=="Home"&&n.key!=="End")return;n.preventDefault();let r=[...n.currentTarget.querySelectorAll(".s-menu-item, .s-menu-item-link")].filter(p=>p.getAttribute("aria-disabled")!=="true");if(!r.length)return;let s=r.indexOf(document.activeElement),a=n.key==="ArrowUp"?-1:1,l=n.key==="Home"?0:n.key==="End"?r.length-1:s<0?a>0?0:r.length-1:(s+a+r.length)%r.length;r[l].focus()});for(let n of e){if(typeof n=="function"){n();continue}if("separator"in n){x("hr.s-menu-sep");continue}x(n.href?"a.s-menu-item-link":"button.s-menu-item type=button",n.attrs,()=>{n.href&&(x("href=",n.href),n.target&&x("target=",n.target),x(()=>{Me(n.href)&&x("aria-current=page")})),n.disabled&&x("aria-disabled=true"),x("click=",o=>{if(n.disabled){o.preventDefault();return}t?.(),n.click?.(o)}),n.icon&&x("span.s-menu-icon",()=>u(n.icon)),u(n.label)})}}var H=x.proxy({opts:null});function j(){let e=H.opts?.anchor;H.opts=null,e?.focus()}function Le(e,t){let n=e.offsetWidth,o=e.offsetHeight,r=window.innerWidth,s=window.innerHeight,a=4,l=t.left;l+n>r-8&&(l=Math.max(8,t.right-n));let p=t.bottom+a;p+o>s-8&&t.top-o-a>=8&&(p=t.top-o-a),e.style.left=Math.max(8,l)+"px",e.style.top=Math.max(8,p)+"px"}x.mount(document.body,()=>{let e=H.opts;if(!e)return;let t=x("div.s-menu-list.s-s.panel create=hidden destroy=hidden",e.dropdownAttrs,()=>{W(e.items,j)}),n=r=>{let s=r.target;!t.contains(s)&&!e.anchor.contains(s)&&j()},o=r=>{(r.key==="Escape"||r.key==="Tab")&&(r.preventDefault(),j())};document.addEventListener("click",n,!0),document.addEventListener("keydown",o,!0),x.clean(()=>{document.removeEventListener("click",n,!0),document.removeEventListener("keydown",o,!0)}),requestAnimationFrame(()=>{document.body.contains(t)&&(Le(t,e.anchor.getBoundingClientRect()),t.querySelector(".s-menu-item:not([aria-disabled=true]), .s-menu-item-link:not([aria-disabled=true])")?.focus())})});function X(e){return H.opts=e,j}function Y(e){let t=null;x.clean(()=>{H.opts?.anchor===t&&j()}),A({icon:()=>x("span aria-hidden=true #\u2630"),ariaLabel:"Open menu",attrs:".neutral .outlined",...e.button,click:n=>{if(t=n.currentTarget,H.opts?.anchor===t){j();return}X({items:e.items,anchor:t,dropdownAttrs:e.dropdownAttrs})}})}d.insertGlobalCss({".s-main":{"&":"display:flex flex-direction:column min-height:100vh max-height:100vh container-type:inline-size","> header":"border-bottom: 1px solid $s-border; position:sticky top:0 z-index:10","> footer":"border-top: 1px solid $s-border; fg:$s-fg-muted","> header > .s-bar, > footer > .s-bar":"display:flex align-items:center width:100% margin-inline:auto gap:$3 padding: $2 $3;","> header .s-header-icon":"display:flex align-items:center font-size:1.4em background: $s-gradient; -webkit-background-clip:text; background-clip:text; color:transparent;","> header .s-titles":"display:flex flex-direction:column min-width:0 flex:1","> header .s-title":"font-weight:800 font-size:1.1em line-height:1.2 overflow:hidden text-overflow:ellipsis white-space:nowrap letter-spacing:-0.01em background: $s-gradient; -webkit-background-clip:text; background-clip:text; color:transparent; width:fit-content max-width:100%","> header .s-subtitle":"fg:$s-fg-muted font-size:0.85em overflow:hidden text-overflow:ellipsis white-space:nowrap","> header .s-menu":"display:flex align-items:center gap:$2",".s-body":"flex:1 overflow:hidden display:flex flex-direction:row min-height:0 justify-content:center",".s-body-inner":"flex:1 display:flex flex-direction:row min-height:0","&.s-nav-right .s-body-inner":"flex-direction:row-reverse",".s-nav-sep":"width:1px flex-shrink:0 align-self:stretch margin: 0.6rem 0; border:0 background: linear-gradient(to bottom, transparent, $s-border-strong 18%, $s-border-strong 82%, transparent);","> main, .s-body main":"flex:1 overflow-y:auto display:flex flex-direction:column","> main > .s-content, .s-body main > .s-content":"width:100% flex:1 p:$3","> main.s-scroll-y, .s-body main.s-scroll-y":"margin-right:$3"},".s-nav-panel":{"&":"display:flex flex-direction:column overflow-y:auto flex-shrink:0 max-width:228px padding:$3 gap:$1 background:transparent"},".s-main.s-nav-left .s-nav-trigger, .s-main.s-nav-right .s-nav-trigger":"display:none",".s-main.s-nav-btn-only .s-nav-panel":"display:none",".s-main.s-nav-btn-only .s-nav-trigger":"display:flex","@container (max-width: 640px)":{".s-main.s-nav-left .s-nav-panel, .s-main.s-nav-right .s-nav-panel, .s-main .s-nav-sep":"display:none",".s-main.s-nav-left .s-nav-trigger, .s-main.s-nav-right .s-nav-trigger":"display:flex",".s-content > .s-box":"margin-inline: calc(-1 * $3); r:0 border-inline:0"}});function pe(e={}){let t=e.nav,n=e.navPosition??"left",o=t!=null&&t.items.length>0,r=o?n==="button"?".s-nav-btn-only":`.s-nav-${n}`:"";d(`div.s-main.s-s.base${r}`,e.attrs,()=>{d(()=>{(e.title!=null||e.subtitle!=null||e.icon!=null||e.menu!=null||o)&&d("header.s-s.raised",e.topbarAttrs,()=>{d("div.s-bar",()=>{d(()=>{e.maxWidth!=null&&d("max-width:",e.maxWidth)}),d(()=>{o&&d("div.s-nav-trigger",()=>{Y({...t,button:{icon:()=>d("span aria-hidden=true #\u2630"),ariaLabel:"Open navigation",attrs:".neutral .outlined .small",...t.button}})})}),d(()=>{e.icon!=null&&d("div.s-header-icon",()=>u(e.icon))}),d("div.s-titles",()=>{d(()=>{e.title!=null&&d("div.s-title",()=>u(e.title))}),d(()=>{e.subtitle!=null&&d("div.s-subtitle",()=>u(e.subtitle))})}),d(()=>{e.menu&&d("div.s-menu",()=>e.menu?.())})})})}),o&&n!=="button"?d("div.s-body",()=>{d("div.s-body-inner",()=>{d(()=>{e.maxWidth!=null&&d("max-width:",e.maxWidth)}),d(`nav.s-nav-panel.s-s.raised.s-nav-${n}`,e.navAttrs,()=>{W(t.items)}),d("div.s-nav-sep aria-hidden=true"),ue(e,!1)})}):ue(e,!0),d(()=>{e.footer!=null&&d("footer",()=>{d("div.s-bar",()=>{d(()=>{e.maxWidth!=null&&d("max-width:",e.maxWidth)}),u(e.footer)})})})})}function ue(e,t){let n=d("main",()=>{d("div.s-content",e.contentAttrs,()=>{t&&d(()=>{e.maxWidth!=null&&d("margin-inline:auto max-width:",e.maxWidth)}),e.content&&e.content()})});Be(n)}function Be(e){if(typeof ResizeObserver>"u")return;let t=()=>e.classList.toggle("s-scroll-y",e.offsetWidth>e.clientWidth),n=new ResizeObserver(t);n.observe(e),e.firstElementChild&&n.observe(e.firstElementChild),t(),d.clean(()=>n.disconnect())}import f from"aberdeen";import F from"aberdeen";function U(e={}){L(e,(t,n)=>{F("input.s-input",e.inputAttrs,()=>{F("type=",e.type??"text"),e.placeholder!=null&&F("placeholder=",e.placeholder),e.autocomplete!=null&&F("autocomplete=",e.autocomplete),e.value!=null&&!e.bind&&F("value=",e.value),e.input&&F("input=",e.input),e.change&&F("change=",e.change),I(e,t,n,e.bind)})})}f.insertGlobalCss({".s-backdrop":{"&":"position:fixed inset:0 z-index:200 display:block background: rgba(0,0,0,0.55); transition: opacity 0.4s ease-in-out;","&.hidden":"opacity:0 pointer-events:none"},".s-dialog":{"&":"position:fixed z-index:200 top:50% left:50% display:flex flex-direction:column transform:translate(-50%,-50%) min-width:20rem max-width:min(90vw,44rem) max-height:min(88vh,800px) border: 1px solid $s-border; r: $s-radius-lg; box-shadow: $s-shadow; overflow:hidden transition: opacity 0.2s ease-out, transform 0.2s ease-out;","> header":"display:flex align-items:center gap:$2 padding: $2 $3; border-bottom: 1px solid $s-border; font-weight:600 flex-shrink:0","> footer":"display:flex align-items:center gap:$2 padding: $2 $3; border-top: 1px solid $s-border; flex-shrink:0","> div":"p:$3 gap:$3 display:flex flex-direction:column overflow-y:auto flex:1 min-height:0","&.hidden":"opacity:0 pointer-events:none transform: translate(-50%, calc(-50% + 20px)); pointer-events:none"}});var D=f.proxy({}),Z=0,qe=f.derive(()=>{let e=Object.keys(D);if(e.length)return e[e.length-1]});f.mount(document.body,()=>{f.onEach(D,({resolve:e,opts:t},n)=>{let o=()=>{delete D[n]};f.clean(()=>{t.onClose?.(),e()});let r=f.derive(()=>qe.value!=n);f("div.s-backdrop create=hidden destroy=hidden .hidden=",r,"click=",()=>{t.allowCancel!==!1&&o()}),f("div.s-dialog.s-s.panel create=hidden destroy=hidden",t.attrs,()=>{f(()=>{t.header!=null&&f("header.s-s.raised",t.headerAttrs,()=>u(t.header))}),f("div",t.contentAttrs,()=>{u(t.content,o)}),f(()=>{t.footer!=null&&f("footer.s-s.raised",t.footerAttrs,()=>u(t.footer))})})})});function K(e){Z||document.addEventListener("keydown",n=>{if(n.key==="Escape"&&e.allowCancel!==!1){let o=f.unproxy(D);for(let r=Z;r>0;r--)if(o[r]){o[r].opts.allowCancel!==!1&&delete D[r];break}}});let t=++Z;return e.cancelWithScope!==!1&&f.clean(()=>{delete D[t]}),new Promise(n=>{D[t]={resolve:n,opts:e}})}function fe(e,t={}){return K({header:"Alert",allowCancel:!0,content:n=>{f("p",()=>{f("#",e)}),B({layout:"spaced",attrs:"align-self:flex-end",content:()=>{A({text:"OK",click:n})}})},...t})}function me(e,t={}){return new Promise(n=>{let o=!1;K({header:"Confirm",allowCancel:!0,content:r=>{f("p",()=>{f("#",e)}),B({layout:"spaced",attrs:"align-self:flex-end",content:()=>{A({text:"Cancel",attrs:".neutral .outlined",click:r}),A({text:"OK",click:()=>{o=!0,r()}})}})},...t,onClose:()=>{n(o),t.onClose?.()}})})}function be(e,t="",n={}){return new Promise(o=>{let r=null;K({header:"Input",allowCancel:!0,content:s=>{f("p",()=>{f("#",e)});let a=f.proxy({value:t});f("form display:contents",()=>{f("submit=",l=>{l.preventDefault(),r=a.value,s()}),U({bind:f.ref(a,"value")}),B({layout:"spaced",attrs:"align-self:flex-end",content:()=>{A({text:"Cancel",attrs:".neutral .outlined",type:"button",click:s}),A({text:"OK",type:"submit"})}})})},...n,onClose:()=>{o(r),n.onClose?.()}})})}import k from"aberdeen";k.insertGlobalCss({".s-select_wrap":{"&":"position:relative display:block",select:"w:100% cursor:pointer padding-right:2.2em; appearance:none","&::after":"content: '\u25BE'; position:absolute right:0.7em top:50%; transform: translateY(-50%); pointer-events:none fg:$s-fg-muted font-size:0.85em"}});function ge(e){L(e,(t,n)=>{k("div.s-select_wrap",e.inputAttrs,()=>{k("select.s-input",()=>{I(e,t,n),k("change=",o=>{e.bind&&(e.bind.value=o.target.value)}),k(()=>{let o=typeof e.options=="function"?e.options():e.options,r=e.bind?.value??"";e.placeholder!=null&&k("option",()=>{k("value= disabled=true hidden=true"),r||k("selected=true"),k("#",e.placeholder)});for(let s of o){let a=typeof s=="string"?{value:s,label:s}:{value:s.value,label:s.label??s.value};k("option",()=>{k("value=",a.value),a.value===r&&k("selected=true"),k("#",a.label)})}})})})})}import $ from"aberdeen";$.insertGlobalCss({".s-tabs":{"&":"display:flex flex-direction:column gap:$3",".s-tablist":"display:flex gap:$1 align-items:stretch overflow-x:auto scrollbar-width:none border-bottom: 1px solid $s-border;",".s-tablist::-webkit-scrollbar":"display:none",".s-tab":"display:inline-flex align-items:center gap:$2 cursor:pointer background:transparent border:0 color: $s-fg-muted; font-weight:600 padding: 0.6em 0.9em; border-bottom: 3px solid transparent; margin-bottom:-1px transition: color 0.15s, background 0.15s, border-color 0.15s;",".s-tab:hover:not(:disabled), .s-tab[aria-selected=true]":"color: $s-fg;",".s-tab:disabled":"opacity:0.5 cursor:not-allowed",".s-tab:focus-visible":"outline:none box-shadow: 0 0 0 3px $s-focus; r: $s-radius;",".s-tab[aria-selected=true]":"border-image: $s-gradient 1;",".s-tabpanel":"display:block"}});function he(e){let t=S("tabs"),n=(s,a)=>s.id??String(a),o=e.bind??$.proxy(n(e.tabs[0]??{label:""},0)),r=(s,a)=>{s.disabled||(o.value=n(s,a))};$("div.s-tabs",e.attrs,()=>{$("div.s-tablist role=tablist",()=>{e.tabs.forEach((s,a)=>{let l=n(s,a);$("button.s-tab type=button role=tab",()=>{$(`id=${t}-tab-${l} aria-controls=${t}-panel-${l}`),$(()=>{let p=o.value===l;$("aria-selected=",p?"true":"false"),$("tabindex=",p?"0":"-1")}),s.disabled&&$("disabled=true"),$("click=",()=>r(s,a)),$("keydown=",p=>ze(p,e.tabs,a,r)),u(s.icon),u(s.label)})})}),$("div.s-tabpanel role=tabpanel",e.contentAttrs,()=>{$(()=>{let s=o.value,a=e.tabs.findIndex((p,V)=>n(p,V)===s),l=e.tabs[a]??e.tabs[0];l&&($(`id=${t}-panel-${n(l,a)} aria-labelledby=${t}-tab-${n(l,a)}`),l.content?.())})})})}function ze(e,t,n,o){let r=n;if(e.key==="ArrowRight"||e.key==="ArrowDown")r=(n+1)%t.length;else if(e.key==="ArrowLeft"||e.key==="ArrowUp")r=(n-1+t.length)%t.length;else if(e.key==="Home")r=0;else if(e.key==="End")r=t.length-1;else return;e.preventDefault();let s=r>=n?1:-1;for(let a=0;a<t.length;a++){let l=t[r];if(l&&!l.disabled){o(l,r),e.currentTarget?.parentElement?.children[r]?.focus();return}r=(r+s+t.length)%t.length}}import E from"aberdeen";E.insertGlobalCss({"textarea.s-input":"resize:vertical min-height:3em line-height:1.45","textarea.s-input.s-autoGrow":"resize:none min-height:2.5em overflow-y:hidden"});function ve(e={}){let t=e.autoGrow!==!1;L(e,(n,o)=>{let r=E("textarea.s-input",e.inputAttrs,()=>{t?(E(".s-autoGrow"),E("input=",s=>{xe(s.currentTarget),e.input&&e.input(s)})):(E("rows=",e.rows??4),E("resize:",e.resize??"vertical"),e.input&&E("input=",e.input)),e.placeholder!=null&&E("placeholder=",e.placeholder),e.value!=null&&!e.bind&&E("value=",e.value),e.change&&E("change=",e.change),I(e,n,o,e.bind)});t&&requestAnimationFrame(()=>xe(r))})}function xe(e){e.style.height="auto",e.style.height=`${e.scrollHeight}px`}import w from"aberdeen";import{grow as Fe,shrink as De}from"aberdeen/transitions";w.insertGlobalCss({".s-toasts":"position:fixed bottom:$3 right:$3 z-index:400 display:flex flex-direction:column gap:$2 pointer-events:none max-width:min(90vw,24rem) w:24rem",".s-toast":{"&":"display:flex align-items:flex-start gap:$2 padding: $3; border: 1px solid $s-border; r:$s-radius box-shadow:$s-shadow pointer-events:auto",".s-toast-body":"display:flex flex-direction:column gap:$1 flex:1 min-width:0",".s-toast-title":"font-weight:700 line-height:1.3",".s-toast-msg":"font-size:0.9em fg:$s-fg-muted line-height:1.4",".s-toast-close":"cursor:pointer border:0 background:transparent fg:$s-fg-muted font-size:1.1em line-height:1 padding: 0 0.15em; r:4px flex-shrink:0 align-self:flex-start",".s-toast-close:hover":"fg:$s-fg",".s-toast-close:focus-visible":"outline:none box-shadow: 0 0 0 3px $s-focus; fg:$s-fg"}});var Ge=0,te=w.proxy({});w.mount(document.body,()=>{w("div.s-toasts aria-live=polite aria-atomic=false",()=>{w.onEach(te,e=>{let{opts:t}=e,n=t.type==="danger"||t.type==="warning"?"alert":"status",o=t.type??"neutral";w(`div.s-toast.s-s.${o} role=${n}`,"create=",Fe,"destroy=",De,t.attrs,()=>{w("div.s-toast-body",()=>{w(()=>{t.title!=null&&w("div.s-toast-title",()=>u(t.title))}),w("div.s-toast-msg",()=>u(t.message))}),w(()=>{t.dismissible!==!1&&w("button.s-toast-close type=button aria-label=Dismiss",()=>{w("#\xD7"),w("click=",()=>ee(e.id))})})})})})});function ee(e){delete te[e]}function ye(e){let t=++Ge;te[t]={id:t,opts:e};let n=e.duration??4e3,o;return n>0&&(o=setTimeout(()=>ee(t),n)),()=>{o!=null&&clearTimeout(o),ee(t)}}import O from"aberdeen";O.insertGlobalCss({".s-tt-tip":{"&":"position:fixed z-index:500 max-width:20rem w:max-content bg:$s-raised fg:$s-fg border: 1px solid $s-border-strong; r:$s-radius box-shadow:$s-shadow padding: 0.3em 0.65em; font-size:0.85em line-height:1.4 pointer-events:none"}});var R=O.proxy(void 0),T=null;typeof window<"u"&&window.addEventListener("scroll",()=>{R.value=void 0},{capture:!0,passive:!0});function Ie(e,t,n,o){let s=window.innerWidth,a=window.innerHeight,l=0,p=0;return o==="bottom"?(l=e.left+(e.width-t)/2,p=e.bottom+7,p+n>a-8&&(p=e.top-n-7)):o==="left"?(l=e.left-t-7,p=e.top+(e.height-n)/2,l<8&&(l=e.right+7)):o==="right"?(l=e.right+7,p=e.top+(e.height-n)/2,l+t>s-8&&(l=e.left-t-7)):(l=e.left+(e.width-t)/2,p=e.top-n-7,p<8&&(p=e.bottom+7)),{x:Math.max(8,Math.min(l,s-t-8)),y:Math.max(8,Math.min(p,a-n-8))}}function ne(){T&&clearTimeout(T),T=setTimeout(()=>{R.value=void 0,T=null},100)}O.mount(document.body,()=>{let e=R.value;if(!e)return;let{opts:t,anchor:n}=e,o=t.placement??"top",r=O("div.s-tt-tip role=tooltip visibility:hidden",t.attrs,()=>{O("mouseenter=",()=>{T&&(clearTimeout(T),T=null)}),O("mouseleave=",ne),u(t.tip)});requestAnimationFrame(()=>{if(!document.body.contains(r))return;let{x:s,y:a}=Ie(n.getBoundingClientRect(),r.offsetWidth,r.offsetHeight,o);r.style.left=s+"px",r.style.top=a+"px",r.style.visibility=""})});function $e(e){let t=n=>{T&&(clearTimeout(T),T=null),R.value={opts:e,anchor:n.currentTarget}};O("mouseenter=",t),O("mouseleave=",ne),O("focusin=",t),O("focusout=",ne),O.clean(()=>{R.value?.opts===e&&(R.value=void 0)})}var je={main:pe,box:se,dialog:K,alert:fe,confirm:me,prompt:be,form:ce,menuButton:Y,showFloatingMenu:X,textline:U,textarea:ve,checkbox:de,tabs:he,button:A,buttonChooser:le,buttonGroup:B,autocomplete:ie,select:ge,toast:ye,addTooltip:$e,setDarkMode:J,getDarkMode:P},pn=je;export{je as S,pn as default,W as drawMenu,u as drawSlot,P as getDarkMode,J as setDarkMode,S as uniqueId};

package/dist/theme.d.ts

@@ -2,7 +2,7 @@
  * The named accent roles for interactive elements (buttons, tabs, badges, …).
  * Each maps to a `.s-s.<role>` class that sets `--s-a` (ink) and `--s-b` (fill).
  */
-export type SurfaceRole = "primary" | "neutral" | "danger" | "success" | "warning";
+export type SurfaceRole = "primary" | "secondary" | "gradient" | "neutral" | "danger" | "success" | "warning";
 /** How a surface's two colours are rendered. `filled` is the default. */
 export type Variant = "filled" | "tonal" | "outlined";
 /**

package/dist/theme.js

@@ -14,7 +14,8 @@ import A from "aberdeen";
  *
  * set by a **level** modifier — `.base` (the page), `.panel` (the default card),
  * `.raised` (elevated chrome) — or an **accent role** modifier — `.primary`,
- * `.neutral`, `.danger`, `.success`, `.warning`.
+ * `.secondary`, `.gradient` (the brand sweep), `.neutral`, `.danger`,
+ * `.success`, `.warning`.
  *
  * A **variant** modifier — `.filled` (the default), `.tonal` or `.outlined` —
  * decides how `--s-a`/`--s-b` map onto the tokens widgets read
@@ -37,6 +38,8 @@ import A from "aberdeen";
  * | `--s-fg-faint`   | placeholders, disabled                    |
  * | `--s-border` / `--s-border-strong` | borders                 |
  * | `--s-accent`     | brand "pop" colour (active indicators, etc.) |
+ * | `--s-gradient`   | primary→secondary brand sweep (mark, primary buttons, active nav) |
+ * | `--s-glow`       | soft coloured shadow for lit brand elements |
  * | `--s-link` / `--s-focus` | link & focus-ring colours         |
  * | `--s-radius` / `--s-radius-lg` / `--s-shadow` | shape tokens      |
  *
@@ -48,7 +51,8 @@ import A from "aberdeen";
  *
  * All colours come from a small set of named **palette** tokens on `:root`, set
  * per mode — the only place colours live, and the single place to re-skin:
- * `--s-primary`, `--s-danger`, `--s-success`, `--s-warning` (accent fills, which
+ * `--s-primary`, `--s-secondary` (the two ends of `--s-gradient`), `--s-danger`,
+ * `--s-success`, `--s-warning` (accent fills, which
  * double as semantic *ink* on neutral surfaces), `--s-neutral`, `--s-page`,
  * `--s-panel`, `--s-raised` (neutral fills), `--s-ink` (text on neutral) and
  * `--s-on-accent` (text on accent fills), plus `--s-link`/`--s-focus` and the
@@ -133,20 +137,20 @@ export function getDarkMode(allowAuto = false) {
 A(() => {
     if (getDarkMode()) {
         A.insertGlobalCss({
-            ":root": "--s-primary:#8b7bff --s-danger:#ff6b6b --s-success:#46d39a --s-warning:#fbbf24 " +
+            ":root": "--s-primary:#8b7bff --s-secondary:#ef7fd0 --s-danger:#ff6b6b --s-success:#46d39a --s-warning:#fbbf24 " +
                 "--s-neutral:#3c4352 --s-page:#0e1015 --s-panel:#181b22 --s-raised:#222632 " +
                 "--s-ink:#e8eaf0 --s-on-accent:#0c0a14 --s-focus:rgba(139,123,255,0.45) " +
-                "--s-radius:10px --s-radius-lg:16px --s-shadow: 0 8px 30px rgba(0,0,0,0.45);",
+                "--s-radius:12px --s-radius-lg:18px --s-shadow: 0 10px 34px rgba(0,0,0,0.5);",
             // Contextual link, restored across the neutral group (see static block).
             ":root, .s-s.base, .s-s.panel, .s-s.raised, .s-s.neutral": "--s-link:#6db3ff",
         });
     }
     else {
         A.insertGlobalCss({
-            ":root": "--s-primary:#6c5ce7 --s-danger:#e23b3b --s-success:#1f9d6b --s-warning:#d97706 " +
+            ":root": "--s-primary:#6c5ce7 --s-secondary:#d6459e --s-danger:#e23b3b --s-success:#1f9d6b --s-warning:#d97706 " +
                 "--s-neutral:#c7ccda --s-page:#f3f4f8 --s-panel:#ffffff --s-raised:#eceef4 " +
-                "--s-ink:#1b1e27 --s-on-accent:#ffffff --s-focus:rgba(108,92,231,0.35) " +
-                "--s-radius:10px --s-radius-lg:16px --s-shadow: 0 6px 24px rgba(20,24,40,0.12);",
+                "--s-ink:#1b1e27 --s-on-accent:#0c0a14 --s-focus:rgba(108,92,231,0.35) " +
+                "--s-radius:12px --s-radius-lg:18px --s-shadow: 0 10px 30px rgba(20,24,40,0.13);",
             ":root, .s-s.base, .s-s.panel, .s-s.raised, .s-s.neutral": "--s-link:#2563eb",
         });
     }
@@ -168,16 +172,34 @@ A(() => {
 // ---------------------------------------------------------------------------
 A.setSpacingCssVars();
 A.insertGlobalCss({
+    // Derived brand tokens. These only reference the per-mode palette colours, so
+    // they're defined once here and track the active mode (and any re-skin):
+    // `--s-gradient` is the primary→secondary brand sweep used for the headline
+    // mark, primary buttons and the active nav pill; `--s-glow` is a soft coloured
+    // shadow that makes those same elements feel lit; `--s-page-bg` is a faint
+    // twin-corner aurora wash painted on the page surface.
+    ":root": "--s-gradient: linear-gradient(135deg, $s-primary, $s-secondary); " +
+        "--s-glow: 0 8px 24px color-mix(in srgb, $s-primary 32%, transparent); " +
+        "--s-page-bg: radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, $s-secondary, transparent 86%), transparent 56%), radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, $s-primary, transparent 87%), transparent 56%), $s-page;",
     // Level/role modifier → anchors. Levels (neutral elevations) use the shared
-    // ink; accent roles use the on-accent ink over their named fill.
+    // ink; accent roles use the on-accent ink over their named fill. The page
+    // (`.base`) additionally paints the aurora wash; `--s-b` keeps the solid
+    // fallback so every derived token stays sensible.
     ":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",
+    // `.gradient` is an accent role whose fill is the brand sweep. Its `--s-b`
+    // anchor stays the solid `--s-primary` so the derived tokens (muted ink,
+    // border, …) remain sensible; the gradient itself is painted further down,
+    // only in the filled context (tonal/outlined read the solid fallback instead).
+    ".s-s.gradient": "--s-a:$s-on-accent --s-b:$s-primary",
     // Filled default (bare `.s-s` and `:root`): map the anchors to fg/bg, derive
     // the secondary tokens from that pair, then paint. var() resolves at use time,
     // so the tonal/outlined remaps below feed back into the derived tokens.
@@ -186,7 +208,18 @@ A.insertGlobalCss({
         "--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%); " +
+        // Themed scrollbars (standard properties, honoured by Firefox and modern
+        // 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",
+    // 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.
+    ".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",
     // 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);",
     // Outlined: the fill colour is the ink; --s-bg *inherits* the parent's bg (the
@@ -198,6 +231,10 @@ A.insertGlobalCss({
     // overrides a component's default `.tonal`/`.outlined` (resetting both the
     // anchors and the painted background).
     ".s-s.filled": "--s-fg:$s-a --s-bg:$s-b background:$s-bg;",
+    // Paint the brand sweep for a filled `.gradient` surface. Sits after the
+    // variant rules and is keyed on `:not(.tonal):not(.outlined)`, so those
+    // variants keep their solid-primary tint/edge.
+    ".s-s.gradient:not(.tonal):not(.outlined)": "background: $s-gradient;",
     // Contextual accent: the brand pop colour on neutral surfaces. Declared on the
     // whole neutral group so re-entering a neutral surface under a coloured one
     // restores it. (--s-link gets the same treatment in the reactive block, where
@@ -207,16 +244,16 @@ A.insertGlobalCss({
     // On a bright coloured surface those wouldn't be legible, so they fall back to
     // 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.danger, .s-s.success, .s-s.warning": "--s-accent:$s-fg --s-link:$s-fg",
+    ".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",
 });
 // 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. It
-// does NOT strip margins from headings/paragraphs/lists.
+// rich content (e.g. markdown-to-HTML) adapts to whatever surface holds it. The
+// vertical rhythm / typography of block elements is handled separately, below.
 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",
+    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;",
@@ -224,8 +261,72 @@ A.insertGlobalCss({
     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; margin: $3 0;",
+    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",
+    // Respect users who prefer less motion: keep transitions essentially instant.
+    "@media (prefers-reduced-motion: reduce)": {
+        "*, *::before, *::after": "transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important;",
+    },
+});
+// ── Suppress transitions during the initial load ─────────────────────────────
+// Buttons (and links) transition their colours, so a light↔dark switch animates
+// smoothly. On a *cold* load that's a liability: elements mount and paint in the
+// active theme in one pass, but a transitioning element animates from its
+// default (unstyled) colours into the theme — so a fresh button visibly slides
+// from light to dark while the rest of the page is already correct. Tag <html>
+// until the first frame has painted and hard-disable transitions under that tag,
+// so the initial render snaps straight to the right colours. Two rAFs: the first
+// runs before the paint that shows the themed UI, the second clears the tag just
+// after it — later theme switches then animate as normal.
+A.insertGlobalCss({
+    ".s-preload, .s-preload *, .s-preload *::before, .s-preload *::after": "transition: none !important; animation: none !important;",
+});
+if (typeof document !== "undefined" && typeof requestAnimationFrame === "function") {
+    const root = document.documentElement;
+    root.classList.add("s-preload");
+    requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove("s-preload")));
+}
+// ── 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
+// give every block a *top* margin only when it isn't its parent's first child.
+// Content sits flush against its container's edges, and space appears solely
+// *between* siblings. These are intentionally low-specificity defaults — a
+// component or utility that sets its own margin (or an inline `mt:` shortcut)
+// always wins, so a class only ever changes what it actually names.
+const BLOCK = "p, ul, ol, dl, blockquote, pre, table, figure, hr, h1, h2, h3, h4, h5, h6";
+A.insertGlobalCss({
+    [`${BLOCK}`]: {
+        "&": "margin:0",
+        "&:not(:first-child)": "margin-top:$3",
+    },
+    // Headings: bold, tight, balanced. Big levels get slightly negative tracking,
+    // small levels become spaced "labels" — so adjacent levels stay distinct. The
+    // em-based top margin gives larger headings a little more room above.
+    "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",
+    // Lists: markers, a sensible indent, gently spaced items, tight nesting.
+    "ul, ol": {
+        "&": "padding-left:1.5em",
+        "> li:not(:first-child), li > &:not(:first-child)": "margin-top:$1",
+    },
+    // Blockquote, tables, definition lists, figure captions.
+    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",
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "staffa",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "An opinionated component library for the Aberdeen reactive UI library.",
   "license": "ISC",
   "author": "",
@@ -12,6 +12,10 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./icons.js": {
+      "types": "./dist/icons.d.ts",
+      "default": "./dist/icons.js"
+    },
     "./all.js": "./dist/staffa.esm.js"
   },
   "files": [
@@ -19,18 +23,20 @@
     "src"
   ],
   "scripts": {
-    "build": "tsc && tsc -p demo && esbuild src/index.ts --bundle --external:aberdeen --minify --format=esm --outfile=dist/staffa.esm.js",
+    "build:icons": "node scripts/generate-icons.mjs",
+    "build": "npm run build:icons && tsc && tsc -p demo && esbuild src/index.ts --bundle --external:aberdeen --minify --format=esm --outfile=dist/staffa.esm.js",
     "typecheck": "tsc --noEmit && tsc -p demo --noEmit",
     "smoke": "tsc && node smoke.mjs",
     "prepublish": "npm run build"
   },
   "peerDependencies": {
-    "aberdeen": "^1.15.0"
+    "aberdeen": "^1.17.1"
   },
   "devDependencies": {
-    "aberdeen": "^1.15.0",
+    "aberdeen": "^1.17.1",
     "esbuild": "^0.28.0",
     "jsdom": "^29.1.1",
+    "lucide-static": "^1.17.0",
     "typescript": "^5.9.3"
   }
 }

package/src/components/autocomplete.ts

@@ -44,8 +44,9 @@ A.insertGlobalCss({
 		".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-option": "padding: 0.45em 0.6em; r:6px cursor:pointer",
-		".s-option[aria-selected=true]": "background:$s-raised",
+		"> .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",
 	},

package/src/components/box.ts

@@ -21,10 +21,10 @@ export interface BoxOptions extends ContentOptions {
 // it's nested in.
 A.insertGlobalCss({
 	".s-box": {
-		"&": "display:flex flex-direction:column border: 1px solid $s-border; r: $s-radius; overflow:hidden",
+		"&": "display:flex flex-direction:column border: 1px solid $s-border; r: $s-radius-lg; overflow:hidden box-shadow: $s-shadow;",
+		"&:not(:first-child)": "margin-top: $3",
 		"> header": "display:flex align-items:center gap:$2 padding: $2 $3; border-bottom: 1px solid $s-border; font-weight:600",
 		"> footer": "display:flex align-items:center gap:$2 padding: $2 $3; border-top: 1px solid $s-border;",
-		// The body is the only plain <div> child; give it the default padding+gap.
 		"> div": "p:$3 gap:$3",
 	},
 });