@usememos/ui 26.10.5 → 26.11.0

package/README.md

@@ -3,7 +3,7 @@
 The Memos UI design system: tokens, foundation styles and React components for memos, the website, the web clipper and future usememos projects.
 
 - Calm, dense and tactile: pure grays, ink for emphasis, and a little depth that shows what holds a value and what you can press.
-- Light, Dark and High contrast themes, all from CSS custom properties.
+- Light and Dark themes, all from CSS custom properties. Apps can add their own.
 - One package, `@usememos/ui`. ESM only, for React 18 or later, with behavior from [Base UI](https://base-ui.com).
 
 The package ships the tokens, the foundation styles and 28 components, each with a page in [docs/components](docs/components/README.md). Versions follow memos' CalVer (`26.10.0`, `26.10.1`) and do not signal breaking changes, so pin an exact version. [docs/](docs/README.md) is the design system and the source of truth for the package.
@@ -79,7 +79,7 @@ The package ships `llms.txt`, an index of the docs, and `llms-full.txt`, every d
 
 ### Themes
 
-Set `data-theme="light"`, `"dark"` or `"contrast"` on the root element, or on any element to theme its subtree. Without the attribute the tokens are Light. The package does not read `prefers-color-scheme`; the app does, so a saved preference can win over the system setting.
+Set `data-theme="light"` or `"dark"` on the root element, or on any element to theme its subtree. Without the attribute the tokens are Light. The package does not read `prefers-color-scheme`; the app does, so a saved preference can win over the system setting.
 
 An app can add its own themes and fonts by setting the color, shadow and font tokens; every other token is internal. See [What an app can change](docs/color.md#what-an-app-can-change).
 

package/dist/styles.css

@@ -1 +1 @@
-@layer mu{.mu-s-xs{--mu-row-height: var(--mu-control-xs);--mu-row-padding: 6px;--mu-row-padding-icon: var(--mu-space-1);--mu-row-font-size: 12px;--mu-row-line-height: 16px;--mu-row-radius: var(--mu-radius-sm);--mu-row-gap: var(--mu-space-1);--mu-row-icon: var(--mu-icon-xs);--mu-row-icon-stroke: 1.25px;--mu-row-check-box: 14px}.mu-s-sm{--mu-row-height: var(--mu-control-sm);--mu-row-padding: var(--mu-space-2);--mu-row-padding-icon: 6px;--mu-row-font-size: 13px;--mu-row-line-height: 18px;--mu-row-radius: var(--mu-radius-sm);--mu-row-gap: var(--mu-space-1);--mu-row-icon: var(--mu-icon-sm);--mu-row-icon-stroke: 1.25px;--mu-row-check-box: 16px}.mu-s-md{--mu-row-height: var(--mu-control-md);--mu-row-padding: var(--mu-space-3);--mu-row-padding-icon: 10px;--mu-row-font-size: 14px;--mu-row-line-height: 20px;--mu-row-radius: var(--mu-radius-md);--mu-row-gap: 6px;--mu-row-icon: var(--mu-icon-md);--mu-row-icon-stroke: 1.5px;--mu-row-check-box: 18px}.mu-recessed{background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-raised{background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),rgba(255,255,255,0) 60%);box-shadow:var(--mu-shadow-raised)}.mu-key{background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),rgba(255,255,255,0) 60%);box-shadow:var(--mu-shadow-key)}.mu-popup{background:var(--mu-surface);box-shadow:var(--mu-shadow-pop);border-radius:var(--mu-radius-xl)}.mu-positioner{z-index:var(--mu-layer-popup);outline:0}.mu-popup-motion{transition:opacity var(--mu-duration-fade) var(--mu-ease-out),translate var(--mu-duration-fade) var(--mu-ease-out)}.mu-popup-motion[data-starting-style],.mu-popup-motion[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}.mu-popup-motion[data-instant]{transition:none}@media(prefers-reduced-motion:reduce){.mu-popup-motion[data-starting-style],.mu-popup-motion[data-ending-style]{translate:none}}.mu-base{font-family:var(--mu-font-sans);font-size:var(--mu-row-font-size, 14px);line-height:var(--mu-row-line-height, 20px);font-weight:500;letter-spacing:0;color:var(--mu-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}.mu-base ::selection,.mu-base::selection{background:var(--mu-selection)}.mu-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.mu-focus:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-hit{position:relative}@media(pointer:coarse){.mu-hit:after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--mu-hit-area));height:max(100%,var(--mu-hit-area));transform:translate(-50%,-50%)}}.mu-icon,.mu-base svg.lucide,.mu-prose svg.lucide{width:var(--mu-row-icon, 16px);height:var(--mu-row-icon, 16px);flex:none;display:block;stroke-width:var(--mu-row-icon-stroke, 1.5px)}.mu-icon *,.mu-base svg.lucide *,.mu-prose svg.lucide *{vector-effect:non-scaling-stroke}.mu-label-xs{font-family:var(--mu-font-sans);font-size:12px;line-height:16px;font-weight:500}.mu-caption{font-family:var(--mu-font-sans);font-size:13px;line-height:18px;font-weight:400}.mu-label-sm{font-family:var(--mu-font-sans);font-size:13px;line-height:18px;font-weight:500}.mu-body{font-family:var(--mu-font-sans);font-size:14px;line-height:20px;font-weight:400}.mu-label{font-family:var(--mu-font-sans);font-size:14px;line-height:20px;font-weight:500}.mu-title{font-family:var(--mu-font-display);font-size:16px;line-height:24px;font-weight:500}.mu-heading{font-family:var(--mu-font-display);font-size:20px;line-height:28px;font-weight:500}.mu-display{font-family:var(--mu-font-display);font-size:32px;line-height:40px;font-weight:500;letter-spacing:-.02em}.mu-prose{--prose-fs: 16px;--prose-lh: 24px;--prose-h1: 20px;--prose-h1-lh: 28px;--prose-h2: 16px;--prose-h2-lh: 24px;--prose-head: 13px;--prose-head-lh: 18px}.mu-prose-sm{--prose-fs: 14px;--prose-lh: 22px}}@layer mu{.mu-spinner{display:inline-block;flex:none;box-sizing:border-box;width:var(--mu-row-icon);height:var(--mu-row-icon);border:var(--mu-row-icon-stroke) solid currentColor;border-top-color:transparent;border-radius:var(--mu-radius-full);animation:mu-spin var(--mu-duration-spin) linear infinite}@keyframes mu-spin{to{rotate:1turn}}}@layer mu{.mu-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;height:var(--mu-row-height);margin:0;padding:0 var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-ink);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-raised);white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;transition-property:background-color,box-shadow,color,translate;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-button:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-button.mu-button-icon{width:var(--mu-row-height);padding:0}.mu-button-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@media(hover:hover){.mu-button:hover:not([data-disabled]){background-color:var(--mu-key-hover)}.mu-button-primary:hover:not([data-disabled]){background-color:var(--mu-primary-hover)}.mu-button-danger:hover:not([data-disabled]){background-color:var(--mu-danger-key);filter:brightness(1.08)}.mu-button-ghost:hover:not([data-disabled]){background-color:var(--mu-hover);color:var(--mu-ink)}}.mu-button:active:not([data-disabled]){translate:0 .5px;box-shadow:var(--mu-shadow-pressed)}.mu-button-primary{color:var(--mu-on-primary);background-color:var(--mu-primary)}.mu-button-danger{color:var(--mu-on-danger);background-color:var(--mu-danger-key)}.mu-button-ghost{color:var(--mu-ink-muted);background-color:transparent;background-image:none;box-shadow:none}.mu-button-ghost[data-popup-open]{background-color:var(--mu-hover);color:var(--mu-ink)}.mu-button-ghost:active:not([data-disabled]){translate:none;background-color:var(--mu-well);box-shadow:var(--mu-shadow-track)}.mu-button[data-disabled]:not([data-loading]){opacity:.45;cursor:not-allowed}.mu-button[data-loading]{cursor:progress}.mu-button[data-loading]>:not(.mu-spinner){opacity:0}.mu-button>.mu-spinner{position:absolute;inset:0;margin:auto}@media(prefers-reduced-motion:reduce){.mu-button:active:not([data-disabled]){translate:none}}}@layer mu{.mu-kbd{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:var(--mu-control-xs);height:var(--mu-control-xs);padding:0 var(--mu-space-1);border-radius:var(--mu-radius-sm);color:var(--mu-ink-muted);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-raised);white-space:nowrap}}@layer mu{.mu-separator{flex:none;align-self:stretch;margin:0;border:0;background-color:var(--mu-line)}.mu-separator[data-orientation=horizontal]{height:1px}.mu-separator[data-orientation=vertical]{width:1px}}@layer mu{.mu-badge{display:inline-flex;align-items:center;gap:var(--mu-space-1);box-sizing:border-box;height:var(--mu-control-xs);padding:0 var(--mu-row-padding);border-radius:var(--mu-radius-sm);white-space:nowrap;vertical-align:middle}.mu-badge-neutral{color:var(--mu-ink);background-color:var(--mu-well)}.mu-badge-outline{color:var(--mu-ink-muted);box-shadow:inset 0 0 0 1px var(--mu-edge)}.mu-badge-success{color:var(--mu-success);background-color:var(--mu-success-soft)}.mu-badge-warning{color:var(--mu-warning);background-color:var(--mu-warning-soft)}.mu-badge-danger{color:var(--mu-danger);background-color:var(--mu-danger-soft)}}@layer mu{.mu-avatar-root{display:inline-flex;flex:none;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;width:var(--mu-row-height);height:var(--mu-row-height);border-radius:var(--mu-radius-full);color:var(--mu-ink-muted);background-color:var(--mu-well);vertical-align:middle;user-select:none}.mu-avatar-image{width:100%;height:100%;object-fit:cover}.mu-avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%}}@layer mu{.mu-link{color:var(--mu-accent);text-decoration:none;text-underline-offset:.2em;border-radius:var(--mu-radius-xs);cursor:pointer}.mu-link:hover,.mu-link:focus-visible,.mu-link-underline{text-decoration:underline}[data-theme=contrast] .mu-link{text-decoration:underline}.mu-link-muted{color:var(--mu-ink-muted)}.mu-link-muted:hover{color:var(--mu-ink)}.mu-link>.mu-icon{display:inline-block;width:.85em;height:.85em;margin-inline-start:.1em;vertical-align:-.05em}}@layer mu{.mu-skeleton{box-sizing:border-box;width:100%;height:var(--mu-row-line-height);border-radius:var(--mu-radius-sm);background-color:var(--mu-well);background-image:linear-gradient(90deg,transparent 0%,var(--mu-hover) 50%,transparent 100%);background-size:200% 100%;background-repeat:no-repeat;animation:mu-shimmer var(--mu-duration-shimmer) ease-in-out infinite}.mu-skeleton-round{width:var(--mu-row-height);height:var(--mu-row-height);border-radius:var(--mu-radius-full)}@keyframes mu-shimmer{0%{background-position:150% 0}to{background-position:-50% 0}}@media(prefers-reduced-motion:reduce){.mu-skeleton{animation:none;background-image:none}}}@layer mu{.mu-field-root{display:flex;flex-direction:column;gap:var(--mu-space-1);min-width:0}.mu-field-label{color:var(--mu-ink)}.mu-field-item{display:flex}.mu-field-label:where(:has(>.mu-checkbox,>.mu-switch,>.mu-radio)){display:inline-flex;align-items:center;gap:var(--mu-space-2);font-weight:400;cursor:pointer}.mu-field-label[data-disabled]{opacity:.45;cursor:not-allowed}.mu-field-description{margin:0;color:var(--mu-ink-muted)}.mu-field-root[data-invalid]>.mu-field-description{display:none}.mu-field-error{display:flex;align-items:flex-start;gap:var(--mu-space-1);color:var(--mu-danger)}.mu-field-error>.mu-icon{--mu-row-icon: var(--mu-icon-sm);margin-block:calc((1lh - var(--mu-icon-sm)) / 2)}.mu-fieldset-root{display:flex;flex-direction:column;gap:var(--mu-space-3);min-width:0;margin:0;padding:0;border:0}.mu-fieldset-legend{margin-bottom:var(--mu-space-1);padding:0;color:var(--mu-ink)}}@layer mu{.mu-input-root{display:flex;align-items:center;gap:var(--mu-row-gap);box-sizing:border-box;width:100%;min-width:0;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:var(--mu-row-radius);color:var(--mu-ink);background-color:var(--mu-surface);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:text;transition:box-shadow var(--mu-duration-fade) var(--mu-ease-out)}.mu-input-root:where(:has(>.mu-input-prefix)){padding-inline-start:var(--mu-row-padding-icon)}.mu-input-root:where(:has(>.mu-input-suffix)){padding-inline-end:var(--mu-row-padding-icon)}@media(hover:hover){.mu-input-root:hover:not([data-disabled],[aria-disabled=true],:has(>[data-disabled])){box-shadow:inset 0 0 0 1px var(--mu-ink-muted),var(--mu-shadow-track)}}.mu-input-root:where(:has(>.mu-input:focus)),.mu-input-root:where(:not(:has(>.mu-input))):focus-within{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-input-root:is([data-invalid],[aria-invalid=true],:has(>[data-invalid])){box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-input-root:is([data-disabled],[aria-disabled=true],:has(>[data-disabled])){opacity:.45;cursor:not-allowed}.mu-input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;outline:none;color:inherit;background:none;font:inherit;font-weight:400}.mu-input::placeholder{color:var(--mu-ink-muted);opacity:1}.mu-input[data-disabled]{cursor:not-allowed}.mu-input-prefix,.mu-input-suffix{display:flex;flex:none;align-items:center;gap:var(--mu-space-1);color:var(--mu-ink-muted)}}@layer mu{.mu-textarea{display:block;box-sizing:border-box;width:100%;min-height:var(--mu-row-height);margin:0;padding:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2) var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-ink);background-color:var(--mu-surface);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);font-weight:400;resize:vertical;transition:box-shadow var(--mu-duration-fade) var(--mu-ease-out)}.mu-textarea::placeholder{color:var(--mu-ink-muted);opacity:1}@media(hover:hover){.mu-textarea:hover:not([data-disabled],[aria-disabled=true]){box-shadow:inset 0 0 0 1px var(--mu-ink-muted),var(--mu-shadow-track)}}.mu-textarea:focus{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-textarea:is([data-invalid],[aria-invalid=true]){box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-textarea:is([data-disabled],[aria-disabled=true]){opacity:.45;cursor:not-allowed}}@layer mu{.mu-checkbox{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--mu-row-check-box);height:var(--mu-row-check-box);border-radius:var(--mu-radius-sm);color:var(--mu-on-primary);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition-property:background-color,box-shadow,scale;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-checkbox[data-checked],.mu-checkbox[data-indeterminate]{background-color:var(--mu-primary);box-shadow:none}.mu-checkbox[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-checkbox:active:not([data-disabled],[data-readonly]){scale:.94}.mu-checkbox[data-disabled]{opacity:.45;cursor:not-allowed}.mu-checkbox-indicator{display:flex;transition:opacity var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press),scale var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press)}.mu-checkbox-indicator[data-starting-style],.mu-checkbox-indicator[data-ending-style]{opacity:0;scale:.6}.mu-checkbox-indicator>svg{width:calc(var(--mu-row-check-box) - 2 * var(--mu-inset));height:calc(var(--mu-row-check-box) - 2 * var(--mu-inset));stroke-width:2}.mu-checkbox-indicator>svg *{vector-effect:non-scaling-stroke}@media(prefers-reduced-motion:reduce){.mu-checkbox:active:not([data-disabled],[data-readonly]){scale:none}.mu-checkbox-indicator[data-starting-style],.mu-checkbox-indicator[data-ending-style]{scale:none}}}@layer mu{.mu-switch{--switch-h: calc(var(--mu-row-check-box) + var(--mu-inset));--switch-w: calc(var(--switch-h) * 1.7);--knob: calc(var(--switch-h) - 2 * var(--mu-inset));position:relative;display:inline-flex;flex:none;align-items:center;box-sizing:border-box;width:var(--switch-w);height:var(--switch-h);padding:var(--mu-inset);border-radius:var(--mu-radius-full);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition:background-color var(--mu-duration-settle) var(--mu-ease-settle),box-shadow var(--mu-duration-settle) var(--mu-ease-settle)}.mu-switch[data-checked]{background-color:var(--mu-primary);box-shadow:inset 0 0 0 1px var(--mu-primary)}.mu-switch[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-switch[data-disabled]{opacity:.45;cursor:not-allowed}.mu-switch-thumb{display:block;width:var(--knob);height:var(--knob);border-radius:var(--mu-radius-full);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-key);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),scale var(--mu-duration-press) var(--mu-ease-out),background-color var(--mu-duration-settle) var(--mu-ease-settle)}.mu-switch-thumb[data-checked]{translate:calc(var(--switch-w) - var(--switch-h)) 0;background-color:var(--mu-on-primary)}.mu-switch:active:not([data-disabled],[data-readonly])>.mu-switch-thumb{scale:1.1}@media(prefers-reduced-motion:reduce){.mu-switch-thumb{transition-property:background-color}.mu-switch:active:not([data-disabled],[data-readonly])>.mu-switch-thumb{scale:none}}}@layer mu{.mu-radio-group{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mu-space-3)}.mu-radio-group[data-orientation=horizontal]{flex-direction:row;flex-wrap:wrap;gap:var(--mu-space-3) var(--mu-space-4)}.mu-radio-group[data-orientation=horizontal]>.mu-fieldset-legend{flex-basis:100%}.mu-radio{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--mu-row-check-box);height:var(--mu-row-check-box);border-radius:var(--mu-radius-full);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition-property:background-color,box-shadow,scale;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-radio[data-checked]{background-color:var(--mu-primary);box-shadow:none}.mu-radio[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-radio:active:not([data-disabled],[data-readonly]){scale:.94}.mu-radio[data-disabled]{opacity:.45;cursor:not-allowed}.mu-radio-indicator{width:calc(var(--mu-row-check-box) / 2.5);height:calc(var(--mu-row-check-box) / 2.5);border-radius:var(--mu-radius-full);background-color:var(--mu-on-primary);transition:opacity var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press),scale var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press)}.mu-radio-indicator[data-starting-style],.mu-radio-indicator[data-ending-style]{opacity:0;scale:.4}@media(prefers-reduced-motion:reduce){.mu-radio:active:not([data-disabled],[data-readonly]){scale:none}.mu-radio-indicator[data-starting-style],.mu-radio-indicator[data-ending-style]{scale:none}}}@layer mu{.mu-toggle{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;height:var(--mu-row-height);margin:0;padding:0 var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-ink-muted);background-color:transparent;white-space:nowrap;cursor:pointer;user-select:none;transition-property:background-color,box-shadow,color;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-toggle:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-toggle.mu-toggle-icon{width:var(--mu-row-height);padding:0}@media(hover:hover){.mu-toggle:hover:not([data-disabled]){color:var(--mu-ink);background-color:var(--mu-hover)}}.mu-toggle[data-pressed],.mu-toggle:active:not([data-disabled]){color:var(--mu-ink);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-toggle[data-disabled]{opacity:.45;cursor:not-allowed}}@layer mu{.mu-segmented{position:relative;display:inline-flex;align-items:stretch;gap:0;box-sizing:border-box;height:var(--mu-row-height);padding:var(--mu-inset);border-radius:var(--mu-row-radius);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-segmented-key{position:absolute;top:var(--mu-inset);left:0;width:var(--key-width);height:calc(var(--mu-row-height) - 2 * var(--mu-inset));translate:var(--key-left) 0;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-key);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),width var(--mu-duration-settle) var(--mu-ease-settle)}.mu-toggle-group.mu-segmented:not([data-keyed])>.mu-segmented-key{display:none}.mu-tabs-indicator{--key-left: var(--active-tab-left);--key-width: var(--active-tab-width)}.mu-segmented-item,.mu-segmented>.mu-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;height:100%;margin:0;padding:0 calc(var(--mu-row-padding) - var(--mu-inset));border:0;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));color:var(--mu-ink-muted);background:none;box-shadow:none;font:inherit;white-space:nowrap;cursor:pointer;user-select:none;transition:color var(--mu-duration-fade) var(--mu-ease-out)}.mu-segmented>.mu-toggle.mu-toggle-icon{width:calc(var(--mu-row-height) - 2 * var(--mu-inset));padding:0}@media(hover:hover){.mu-segmented-item:hover:not([data-disabled]),.mu-segmented>.mu-toggle:hover:not([data-disabled]){color:var(--mu-ink);background:none}}.mu-segmented-item[data-active],.mu-segmented>.mu-toggle[data-pressed],.mu-segmented>.mu-toggle:active:not([data-disabled]){color:var(--mu-ink);background:none;box-shadow:none}.mu-segmented-item[data-disabled]{opacity:.45;cursor:not-allowed}.mu-tabs-root{display:flex;flex-direction:column;gap:var(--mu-space-4)}.mu-tabs-list{align-self:flex-start}.mu-tabs-panel{border-radius:var(--mu-radius-sm)}@media(prefers-reduced-motion:reduce){.mu-segmented-key{transition:none}}}@layer mu{.mu-toggle-group{display:inline-flex;align-items:center;gap:var(--mu-inset)}.mu-toggle-group>.mu-separator{align-self:center;height:max(var(--mu-space-2),calc(var(--mu-row-height) - 2 * var(--mu-space-2)));margin-inline:var(--mu-space-1)}}@layer mu{.mu-tooltip-popup{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;max-width:var(--mu-tooltip-width);padding:var(--mu-space-1) var(--mu-space-2);border-radius:var(--mu-radius-md);color:var(--mu-on-primary);background-color:var(--mu-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mu-tooltip-shortcut{opacity:.65}}@layer mu{.mu-popover-popup{display:flex;flex-direction:column;gap:var(--mu-space-3);box-sizing:border-box;width:var(--mu-popover-width);max-width:var(--available-width);padding:var(--mu-space-4);outline:0}.mu-popover-title{margin:0;color:var(--mu-ink)}.mu-popover-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-ink-muted)}}@layer mu{.mu-menu-popup{box-sizing:border-box;min-width:var(--mu-menu-width);max-height:var(--available-height);overflow-y:auto;padding:var(--mu-space-1);outline:0}.mu-menu-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-menu-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-menu-item>svg{color:var(--mu-ink-muted)}.mu-menu-item[data-highlighted],.mu-menu-submenu-trigger[data-popup-open]{background-color:var(--mu-hover)}.mu-menu-item[data-disabled]{opacity:.45}.mu-menu-item-danger,.mu-menu-item-danger>svg{color:var(--mu-danger)}.mu-menu-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-menu-shortcut{margin-inline-start:var(--mu-space-4);color:var(--mu-ink-muted)}.mu-menu-indicator{display:grid;flex:none;place-items:center;width:var(--mu-row-icon);height:var(--mu-row-icon);margin-inline-start:var(--mu-space-2)}.mu-menu-indicator>svg{color:var(--mu-ink)}.mu-menu-chevron{margin-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-row-padding));color:var(--mu-ink-muted)}.mu-menu-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-menu-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}}@layer mu{.mu-select-trigger{justify-content:space-between;min-width:0;padding-inline-end:var(--mu-row-padding-icon);text-align:start}.mu-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mu-select-value[data-placeholder]{color:var(--mu-ink-muted);font-weight:400}.mu-select-icon{display:flex;flex:none;color:var(--mu-ink-muted)}.mu-select-trigger[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-key)}.mu-select-positioner{outline:0}.mu-select-popup{box-sizing:border-box;min-width:max(var(--mu-menu-width),var(--anchor-width));max-height:var(--available-height);padding:var(--mu-space-1);outline:0}.mu-select-list{overflow-y:auto;max-height:var(--available-height);scroll-padding-block:var(--mu-space-1);outline:0}.mu-select-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-select-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-select-item>svg{color:var(--mu-ink-muted)}.mu-select-item[data-highlighted]{background-color:var(--mu-hover)}.mu-select-item[data-disabled]{opacity:.45}.mu-select-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-select-indicator{display:grid;flex:none;place-items:center;width:var(--mu-row-icon);height:var(--mu-row-icon);margin-inline-start:var(--mu-space-2);color:var(--mu-ink)}.mu-select-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-select-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}.mu-select-scroll-arrow{display:grid;place-items:center;height:var(--mu-space-4);color:var(--mu-ink-muted)}}@layer mu{.mu-dialog-backdrop{position:fixed;inset:0;z-index:var(--mu-layer-overlay);background-color:var(--mu-overlay);transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-dialog-backdrop[data-starting-style],.mu-dialog-backdrop[data-ending-style]{opacity:0}.mu-dialog-viewport{position:fixed;inset:0;z-index:var(--mu-layer-overlay);display:grid;place-items:safe center;box-sizing:border-box;padding:var(--mu-space-6) var(--mu-space-4);overflow-y:auto}.mu-dialog-popup{position:relative;display:flex;flex-direction:column;gap:var(--mu-space-4);box-sizing:border-box;width:var(--mu-dialog-width);max-width:100%;padding:var(--mu-space-5);border-radius:var(--mu-radius-2xl);outline:0;transition:opacity var(--mu-duration-settle) var(--mu-ease-out),translate var(--mu-duration-settle) var(--mu-ease-out)}.mu-dialog-popup[data-starting-style],.mu-dialog-popup[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}.mu-dialog-popup:where(:has(>.mu-dialog-x))>.mu-dialog-title{padding-inline-end:var(--mu-space-6)}.mu-dialog-title{margin:0;color:var(--mu-ink)}.mu-dialog-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-ink-muted)}.mu-dialog-x{position:absolute;top:var(--mu-space-4);right:var(--mu-space-4)}.mu-dialog-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mu-space-2);margin-top:var(--mu-space-2)}@media(max-width:639.98px){.mu-dialog-sheet{place-items:end stretch;padding:var(--mu-space-6) 0 0}.mu-dialog-sheet>.mu-dialog-popup{width:100%;padding-bottom:max(var(--mu-space-5),env(safe-area-inset-bottom));border-end-start-radius:0;border-end-end-radius:0}.mu-dialog-sheet>.mu-dialog-popup[data-starting-style],.mu-dialog-sheet>.mu-dialog-popup[data-ending-style]{translate:0 var(--mu-space-6)}.mu-dialog-sheet .mu-dialog-footer{flex-direction:column-reverse}.mu-dialog-sheet .mu-dialog-footer>*{width:100%}}@media(prefers-reduced-motion:reduce){.mu-dialog-popup[data-starting-style],.mu-dialog-popup[data-ending-style],.mu-dialog-sheet>.mu-dialog-popup[data-starting-style],.mu-dialog-sheet>.mu-dialog-popup[data-ending-style]{translate:none}}}@layer mu{.mu-toast-viewport{position:fixed;right:var(--mu-space-6);bottom:var(--mu-space-6);z-index:var(--mu-layer-toast);width:var(--mu-toast-width);outline:0}@media(max-width:639.98px){.mu-toast-viewport{right:var(--mu-space-4);bottom:var(--mu-space-4);left:var(--mu-space-4);width:auto}}.mu-toast{--mu-row-gap: var(--mu-space-3);--peek: var(--mu-space-2);--scale: max(0, 1 - var(--toast-index) * .05);--shrink: calc(1 - var(--scale));--height: var(--toast-frontmost-height, var(--toast-height));--offset-y: calc(var(--toast-offset-y) * -1 - var(--toast-index) * var(--mu-row-gap) + var(--toast-swipe-movement-y));position:absolute;right:0;bottom:0;z-index:calc(var(--mu-layer-toast) - var(--toast-index));box-sizing:border-box;width:100%;height:var(--height);transform-origin:bottom center;translate:var(--toast-swipe-movement-x) calc(var(--toast-swipe-movement-y) - var(--toast-index) * var(--peek) - var(--shrink) * var(--height));scale:var(--scale);user-select:none;outline:0;transition:translate var(--mu-duration-settle) var(--mu-ease-settle),scale var(--mu-duration-settle) var(--mu-ease-settle),opacity var(--mu-duration-settle) var(--mu-ease-out),height var(--mu-duration-fade) var(--mu-ease-out)}.mu-toast[data-expanded]{height:var(--toast-height);translate:var(--toast-swipe-movement-x) var(--offset-y);scale:1}.mu-toast[data-starting-style],.mu-toast[data-ending-style]{translate:0 150%}.mu-toast[data-ending-style]{opacity:0}.mu-toast[data-ending-style][data-swipe-direction=up]{translate:0 calc(var(--toast-swipe-movement-y) - 150%)}.mu-toast[data-ending-style][data-swipe-direction=down]{translate:0 calc(var(--toast-swipe-movement-y) + 150%)}.mu-toast[data-ending-style][data-swipe-direction=left]{translate:calc(var(--toast-swipe-movement-x) - 150%) var(--offset-y)}.mu-toast[data-ending-style][data-swipe-direction=right]{translate:calc(var(--toast-swipe-movement-x) + 150%) var(--offset-y)}.mu-toast[data-limited]{opacity:0}.mu-toast:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-toast:after{content:"";position:absolute;top:100%;left:0;width:100%;height:calc(var(--mu-row-gap) + 1px)}.mu-toast-content{display:flex;align-items:flex-start;gap:var(--mu-space-3);box-sizing:border-box;height:100%;padding:var(--mu-space-3) var(--mu-space-3) var(--mu-space-3) var(--mu-space-4);overflow:hidden;transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-toast-content[data-behind]{opacity:0}.mu-toast-content[data-expanded]{opacity:1}.mu-toast-icon{margin-block:calc((var(--mu-row-height) - var(--mu-row-icon)) / 2);color:var(--mu-ink-muted)}.mu-toast-success .mu-toast-icon{color:var(--mu-success)}.mu-toast-warning .mu-toast-icon{color:var(--mu-warning)}.mu-toast-danger .mu-toast-icon{color:var(--mu-danger)}.mu-toast-text{display:flex;flex:1;flex-direction:column;min-width:0;padding-block:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2)}.mu-toast-title{margin:0;color:var(--mu-ink)}.mu-toast-description{margin:0;color:var(--mu-ink-muted)}.mu-toast-action,.mu-toast-close{margin-block:calc((var(--mu-control-md) - var(--mu-control-sm)) / 2)}@media(prefers-reduced-motion:reduce){.mu-toast{transition-property:opacity,height}.mu-toast[data-starting-style],.mu-toast[data-ending-style]{translate:var(--toast-swipe-movement-x) var(--offset-y)}}}@layer mu{.mu-input-root.mu-combobox-input-root{padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-space-1))}.mu-combobox-trigger{display:grid;place-items:center;width:calc(var(--mu-row-icon) + var(--mu-space-2));height:calc(var(--mu-row-icon) + var(--mu-space-2));margin:0;padding:0;border:0;border-radius:var(--mu-radius-sm);color:var(--mu-ink-muted);background:none;cursor:pointer}.mu-combobox-trigger:hover:not([data-disabled]){color:var(--mu-ink)}.mu-combobox-trigger[data-disabled]{cursor:not-allowed}.mu-combobox-popup{box-sizing:border-box;width:var(--anchor-width);min-width:var(--mu-menu-width);max-width:var(--available-width);outline:0}.mu-combobox-list{box-sizing:border-box;max-height:min(var(--mu-list-height),var(--available-height));overflow-y:auto;overscroll-behavior:contain;padding:var(--mu-space-1);scroll-padding-block:var(--mu-space-1);outline:0}.mu-combobox-list[data-empty]{padding:0}.mu-combobox-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-combobox-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-combobox-item>svg{color:var(--mu-ink-muted)}.mu-combobox-item[data-highlighted]{background-color:var(--mu-hover)}.mu-combobox-item[data-disabled]{opacity:.45}.mu-combobox-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-combobox-indicator{display:grid;flex:none;place-items:center;width:var(--mu-row-icon);height:var(--mu-row-icon);margin-inline-start:var(--mu-space-2);color:var(--mu-ink)}.mu-combobox-empty:not(:empty){padding:var(--mu-space-3) var(--mu-space-4);color:var(--mu-ink-muted)}.mu-combobox-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-combobox-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}}@layer mu{.mu-button.mu-collapsible-trigger{margin-inline-start:calc(-1 * var(--mu-row-padding));padding-inline-end:var(--mu-row-padding-icon)}.mu-collapsible-chevron{color:var(--mu-ink-muted);transition:rotate var(--mu-duration-settle) var(--mu-ease-settle)}.mu-collapsible-trigger[data-panel-open]>.mu-collapsible-chevron{rotate:180deg}.mu-collapsible-panel{transition:opacity var(--mu-duration-fade) var(--mu-ease-out),translate var(--mu-duration-fade) var(--mu-ease-out)}.mu-collapsible-panel[data-starting-style],.mu-collapsible-panel[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}@media(prefers-reduced-motion:reduce){.mu-collapsible-chevron{transition:none}.mu-collapsible-panel[data-starting-style],.mu-collapsible-panel[data-ending-style]{translate:none}}}@layer mu{.mu-table-scroll{overflow-x:auto;max-width:100%}.mu-table{width:100%;border-collapse:collapse;color:var(--mu-ink);font-variant-numeric:tabular-nums;text-align:start}.mu-table-head,.mu-table-cell{padding:0 var(--mu-row-padding);text-align:start;vertical-align:middle}.mu-table-head{height:var(--mu-row-height);color:var(--mu-ink-muted);white-space:nowrap;border-bottom:1px solid var(--mu-line)}.mu-table-cell{padding-block:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2 + var(--mu-space-1))}.mu-table-body>.mu-table-row+.mu-table-row>.mu-table-cell{border-top:1px solid var(--mu-line)}.mu-table-body>.mu-table-row:hover>.mu-table-cell{background-color:var(--mu-hover)}.mu-table-cell>.mu-button{margin-block:calc((var(--mu-row-line-height) - var(--mu-row-height)) / 2);vertical-align:top}.mu-table-num{text-align:end}.mu-table-muted{color:var(--mu-ink-muted)}.mu-table-caption{caption-side:bottom;padding:var(--mu-space-2) var(--mu-row-padding) 0;color:var(--mu-ink-muted);text-align:start}}@layer mu{.mu-prose{color:var(--mu-ink);font-family:var(--mu-font-sans);font-size:var(--prose-fs);line-height:var(--prose-lh);font-weight:400;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mu-prose ::selection{background:var(--mu-selection)}.mu-prose :where(p,ul,ol,pre,blockquote,table,figure,img,video,hr){margin:0 0 var(--mu-space-3)}.mu-prose :where(h1,h2,h3,h4,h5,h6){margin:var(--mu-space-5) 0 var(--mu-space-2);font-family:var(--mu-font-display);font-weight:600;letter-spacing:0}.mu-prose>:first-child{margin-top:0}.mu-prose>:last-child{margin-bottom:0}.mu-prose h1{font-size:var(--prose-h1);line-height:var(--prose-h1-lh)}.mu-prose :where(h2,h3,h4,h5,h6){font-size:var(--prose-h2);line-height:var(--prose-h2-lh)}.mu-prose :where(strong,b){font-weight:600}.mu-prose del{color:var(--mu-ink-muted)}.mu-prose a{color:var(--mu-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;border-radius:var(--mu-radius-xs)}.mu-prose a:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-prose :where(ul,ol){padding-inline-start:var(--mu-space-6)}.mu-prose li+li{margin-top:var(--mu-space-1)}.mu-prose li>:where(ul,ol){margin:var(--mu-space-1) 0 0}.mu-prose li>p{margin:0}.mu-prose li::marker{color:var(--mu-ink-muted)}.mu-prose li:where(:has(>input[type=checkbox]:first-child)){position:relative;list-style:none}.mu-prose li>input[type=checkbox]:first-child{appearance:none;position:absolute;inset-inline-start:calc(-1 * (var(--mu-space-4) + var(--mu-space-2)));top:calc((var(--prose-lh) - var(--mu-space-4)) / 2);box-sizing:border-box;width:var(--mu-space-4);height:var(--mu-space-4);margin:0;border-radius:var(--mu-radius-sm);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer}.mu-prose li>input[type=checkbox]:first-child:disabled{cursor:default}.mu-prose li>input[type=checkbox]:first-child:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-width)}.mu-prose li>input[type=checkbox]:first-child:checked{background-color:var(--mu-primary);box-shadow:none}.mu-prose li>input[type=checkbox]:first-child:checked:after{content:"";position:absolute;inset:var(--mu-inset);background-color:var(--mu-on-primary);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat}.mu-prose li:where(:has(>input[type=checkbox]:first-child:checked)){color:var(--mu-ink-muted);text-decoration:line-through}.mu-prose :where(code,kbd,samp,pre){font-family:var(--mu-font-mono);font-size:.875em}.mu-prose :not(pre)>code{padding:.1em .3em;border-radius:var(--mu-radius-xs);background-color:var(--mu-well)}.mu-prose pre{overflow-x:auto;padding:var(--mu-space-3) var(--mu-space-4);border-radius:var(--mu-radius-md);background-color:var(--mu-well);line-height:1.6}.mu-prose pre>code{font-size:inherit}.mu-prose blockquote{margin-inline:0;padding-inline-start:var(--mu-space-4);border-inline-start:var(--mu-inset) solid var(--mu-edge);color:var(--mu-ink-muted)}.mu-prose hr{height:1px;margin-block:var(--mu-space-5);border:0;background-color:var(--mu-line)}.mu-prose :where(img,video){display:block;max-width:100%;height:auto;border-radius:var(--mu-radius-lg)}.mu-prose table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse;font-variant-numeric:tabular-nums}.mu-prose :where(th,td){padding:var(--mu-space-2) var(--mu-space-3);text-align:start;vertical-align:top}.mu-prose th{color:var(--mu-ink-muted);font-size:var(--prose-head);line-height:var(--prose-head-lh);font-weight:500;white-space:nowrap;border-bottom:1px solid var(--mu-line)}.mu-prose tr+tr>td{border-top:1px solid var(--mu-line)}.mu-prose-tag{padding:0 .25em;border-radius:var(--mu-radius-xs);color:var(--mu-ink-muted);background-color:var(--mu-well)}}
+@layer mu{.mu-s-xs{--mu-row-height: var(--mu-control-xs);--mu-row-padding: 6px;--mu-row-padding-icon: var(--mu-space-1);--mu-row-font-size: 12px;--mu-row-line-height: 16px;--mu-row-radius: var(--mu-radius-sm);--mu-row-gap: var(--mu-space-1);--mu-row-icon: var(--mu-icon-xs);--mu-row-icon-stroke: 1.25px;--mu-row-check-box: 14px}.mu-s-sm{--mu-row-height: var(--mu-control-sm);--mu-row-padding: var(--mu-space-2);--mu-row-padding-icon: 6px;--mu-row-font-size: 13px;--mu-row-line-height: 18px;--mu-row-radius: var(--mu-radius-sm);--mu-row-gap: var(--mu-space-1);--mu-row-icon: var(--mu-icon-sm);--mu-row-icon-stroke: 1.25px;--mu-row-check-box: 16px}.mu-s-md{--mu-row-height: var(--mu-control-md);--mu-row-padding: var(--mu-space-3);--mu-row-padding-icon: 10px;--mu-row-font-size: 14px;--mu-row-line-height: 20px;--mu-row-radius: var(--mu-radius-md);--mu-row-gap: 6px;--mu-row-icon: var(--mu-icon-md);--mu-row-icon-stroke: 1.5px;--mu-row-check-box: 18px}.mu-recessed{background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-raised{background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),rgba(255,255,255,0) 60%);box-shadow:var(--mu-shadow-raised)}.mu-key{background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),rgba(255,255,255,0) 60%);box-shadow:var(--mu-shadow-key)}.mu-popup{background:var(--mu-surface);box-shadow:var(--mu-shadow-pop);border-radius:var(--mu-radius-xl)}.mu-positioner{z-index:var(--mu-layer-popup);outline:0}.mu-popup-motion{transition:opacity var(--mu-duration-fade) var(--mu-ease-out),translate var(--mu-duration-fade) var(--mu-ease-out)}.mu-popup-motion[data-starting-style],.mu-popup-motion[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}.mu-popup-motion[data-instant]{transition:none}@media(prefers-reduced-motion:reduce){.mu-popup-motion[data-starting-style],.mu-popup-motion[data-ending-style]{translate:none}}.mu-base{font-family:var(--mu-font-sans);font-size:var(--mu-row-font-size, 14px);line-height:var(--mu-row-line-height, 20px);font-weight:500;letter-spacing:0;color:var(--mu-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}.mu-base ::selection,.mu-base::selection{background:var(--mu-selection)}.mu-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.mu-focus:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-offset)}.mu-hit{position:relative}@media(pointer:coarse){.mu-hit:after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--mu-hit-area));height:max(100%,var(--mu-hit-area));transform:translate(-50%,-50%)}}.mu-icon,.mu-base svg.lucide,.mu-prose svg.lucide{width:var(--mu-row-icon, 16px);height:var(--mu-row-icon, 16px);flex:none;display:block;stroke-width:var(--mu-row-icon-stroke, 1.5px)}.mu-icon *,.mu-base svg.lucide *,.mu-prose svg.lucide *{vector-effect:non-scaling-stroke}.mu-label-xs{font-family:var(--mu-font-sans);font-size:12px;line-height:16px;font-weight:500}.mu-caption{font-family:var(--mu-font-sans);font-size:13px;line-height:18px;font-weight:400}.mu-label-sm{font-family:var(--mu-font-sans);font-size:13px;line-height:18px;font-weight:500}.mu-body{font-family:var(--mu-font-sans);font-size:14px;line-height:20px;font-weight:400}.mu-label{font-family:var(--mu-font-sans);font-size:14px;line-height:20px;font-weight:500}.mu-title{font-family:var(--mu-font-display);font-size:16px;line-height:24px;font-weight:500}.mu-heading{font-family:var(--mu-font-display);font-size:20px;line-height:28px;font-weight:500}.mu-display{font-family:var(--mu-font-display);font-size:32px;line-height:40px;font-weight:500;letter-spacing:-.02em}.mu-prose{--prose-fs: 16px;--prose-lh: 24px;--prose-h1: 20px;--prose-h1-lh: 28px;--prose-h2: 16px;--prose-h2-lh: 24px;--prose-head: 13px;--prose-head-lh: 18px}.mu-prose-sm{--prose-fs: 14px;--prose-lh: 22px}}@layer mu{.mu-spinner{display:inline-block;flex:none;box-sizing:border-box;width:var(--mu-row-icon);height:var(--mu-row-icon);border:var(--mu-row-icon-stroke) solid currentColor;border-top-color:transparent;border-radius:var(--mu-radius-full);animation:mu-spin var(--mu-duration-spin) linear infinite}@keyframes mu-spin{to{rotate:1turn}}}@layer mu{.mu-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;height:var(--mu-row-height);margin:0;padding:0 var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-ink);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-raised);white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;transition-property:background-color,box-shadow,color,translate;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-button:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-button.mu-button-icon{width:var(--mu-row-height);padding:0}.mu-button-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@media(hover:hover){.mu-button:hover:not([data-disabled]){background-color:var(--mu-key-hover)}.mu-button-primary:hover:not([data-disabled]){background-color:var(--mu-primary-hover)}.mu-button-danger:hover:not([data-disabled]){background-color:var(--mu-danger-key);filter:brightness(1.08)}.mu-button-ghost:hover:not([data-disabled]){background-color:var(--mu-hover);color:var(--mu-ink)}}.mu-button:active:not([data-disabled]){translate:0 .5px;box-shadow:var(--mu-shadow-pressed)}.mu-button-primary{color:var(--mu-on-primary);background-color:var(--mu-primary)}.mu-button-danger{color:var(--mu-on-danger);background-color:var(--mu-danger-key)}.mu-button-ghost{color:var(--mu-ink-muted);background-color:transparent;background-image:none;box-shadow:none}.mu-button-ghost[data-popup-open]{background-color:var(--mu-hover);color:var(--mu-ink)}.mu-button-ghost:active:not([data-disabled]){translate:none;background-color:var(--mu-well);box-shadow:var(--mu-shadow-track)}.mu-button[data-disabled]:not([data-loading]){opacity:.45;cursor:not-allowed}.mu-button[data-loading]{cursor:progress}.mu-button[data-loading]>:not(.mu-spinner){opacity:0}.mu-button>.mu-spinner{position:absolute;inset:0;margin:auto}@media(prefers-reduced-motion:reduce){.mu-button:active:not([data-disabled]){translate:none}}}@layer mu{.mu-kbd{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:var(--mu-control-xs);height:var(--mu-control-xs);padding:0 var(--mu-space-1);border-radius:var(--mu-radius-sm);color:var(--mu-ink-muted);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-raised);white-space:nowrap}}@layer mu{.mu-separator{flex:none;align-self:stretch;margin:0;border:0;background-color:var(--mu-line)}.mu-separator[data-orientation=horizontal]{height:1px}.mu-separator[data-orientation=vertical]{width:1px}}@layer mu{.mu-badge{display:inline-flex;align-items:center;gap:var(--mu-space-1);box-sizing:border-box;height:var(--mu-control-xs);padding:0 var(--mu-row-padding);border-radius:var(--mu-radius-sm);white-space:nowrap;vertical-align:middle}.mu-badge-neutral{color:var(--mu-ink);background-color:var(--mu-well)}.mu-badge-outline{color:var(--mu-ink-muted);box-shadow:inset 0 0 0 1px var(--mu-edge)}.mu-badge-success{color:var(--mu-success);background-color:var(--mu-success-soft)}.mu-badge-warning{color:var(--mu-warning);background-color:var(--mu-warning-soft)}.mu-badge-danger{color:var(--mu-danger);background-color:var(--mu-danger-soft)}}@layer mu{.mu-avatar-root{display:inline-flex;flex:none;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;width:var(--mu-row-height);height:var(--mu-row-height);border-radius:var(--mu-radius-full);color:var(--mu-ink-muted);background-color:var(--mu-well);vertical-align:middle;user-select:none}.mu-avatar-image{width:100%;height:100%;object-fit:cover}.mu-avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%}}@layer mu{.mu-link{color:var(--mu-accent);text-decoration:none;text-underline-offset:.2em;border-radius:var(--mu-radius-xs);cursor:pointer}.mu-link:hover,.mu-link:focus-visible,.mu-link-underline{text-decoration:underline}.mu-link-muted{color:var(--mu-ink-muted)}.mu-link-muted:hover{color:var(--mu-ink)}.mu-link>.mu-icon{display:inline-block;width:.85em;height:.85em;margin-inline-start:.1em;vertical-align:-.05em}}@layer mu{.mu-skeleton{box-sizing:border-box;width:100%;height:var(--mu-row-line-height);border-radius:var(--mu-radius-sm);background-color:var(--mu-well);background-image:linear-gradient(90deg,transparent 0%,var(--mu-hover) 50%,transparent 100%);background-size:200% 100%;background-repeat:no-repeat;animation:mu-shimmer var(--mu-duration-shimmer) ease-in-out infinite}.mu-skeleton-round{width:var(--mu-row-height);height:var(--mu-row-height);border-radius:var(--mu-radius-full)}@keyframes mu-shimmer{0%{background-position:150% 0}to{background-position:-50% 0}}@media(prefers-reduced-motion:reduce){.mu-skeleton{animation:none;background-image:none}}}@layer mu{.mu-field-root{display:flex;flex-direction:column;gap:var(--mu-space-1);min-width:0}.mu-field-label{color:var(--mu-ink)}.mu-field-item{display:flex}.mu-field-label:where(:has(>.mu-checkbox,>.mu-switch,>.mu-radio)){display:inline-flex;align-items:center;gap:var(--mu-space-2);font-weight:400;cursor:pointer}.mu-field-label[data-disabled]{opacity:.45;cursor:not-allowed}.mu-field-description{margin:0;color:var(--mu-ink-muted)}.mu-field-root[data-invalid]>.mu-field-description{display:none}.mu-field-error{display:flex;align-items:flex-start;gap:var(--mu-space-1);color:var(--mu-danger)}.mu-field-error>.mu-icon{--mu-row-icon: var(--mu-icon-sm);margin-block:calc((1lh - var(--mu-icon-sm)) / 2)}.mu-fieldset-root{display:flex;flex-direction:column;gap:var(--mu-space-3);min-width:0;margin:0;padding:0;border:0}.mu-fieldset-legend{margin-bottom:var(--mu-space-1);padding:0;color:var(--mu-ink)}}@layer mu{.mu-input-root{display:flex;align-items:center;gap:var(--mu-row-gap);box-sizing:border-box;width:100%;min-width:0;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:var(--mu-row-radius);color:var(--mu-ink);background-color:var(--mu-surface);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:text;transition:box-shadow var(--mu-duration-fade) var(--mu-ease-out)}.mu-input-root:where(:has(>.mu-input-prefix)){padding-inline-start:var(--mu-row-padding-icon)}.mu-input-root:where(:has(>.mu-input-suffix)){padding-inline-end:var(--mu-row-padding-icon)}@media(hover:hover){.mu-input-root:hover:not([data-disabled],[aria-disabled=true],:has(>[data-disabled]),:focus-within){box-shadow:inset 0 0 0 1px var(--mu-ink-muted),var(--mu-shadow-track)}}.mu-input-root:where(:has(>.mu-input:focus)),.mu-input-root:where(:not(:has(>.mu-input))):focus-within{box-shadow:inset 0 0 0 var(--mu-focus-edge-width) var(--mu-focus-edge),var(--mu-shadow-track);outline:var(--mu-focus-width) solid transparent;outline-offset:calc(-1 * var(--mu-focus-width))}.mu-input-root:is([data-invalid],[aria-invalid=true],:has(>[data-invalid])){box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-input-root:is([data-invalid],[aria-invalid=true],:has(>[data-invalid])):where(:has(>.mu-input:focus),:not(:has(>.mu-input)):focus-within){box-shadow:inset 0 0 0 var(--mu-focus-edge-width) var(--mu-danger),var(--mu-shadow-track)}.mu-input-root:is([data-disabled],[aria-disabled=true],:has(>[data-disabled])){opacity:.45;cursor:not-allowed}.mu-input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;outline:none;color:inherit;background:none;font:inherit;font-weight:400}.mu-input::placeholder{color:var(--mu-ink-muted);opacity:1}.mu-input[data-disabled]{cursor:not-allowed}.mu-input-prefix,.mu-input-suffix{display:flex;flex:none;align-items:center;gap:var(--mu-space-1);color:var(--mu-ink-muted)}}@layer mu{.mu-textarea{display:block;box-sizing:border-box;width:100%;min-height:var(--mu-row-height);margin:0;padding:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2) var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-ink);background-color:var(--mu-surface);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);font-weight:400;resize:vertical;transition:box-shadow var(--mu-duration-fade) var(--mu-ease-out)}.mu-textarea::placeholder{color:var(--mu-ink-muted);opacity:1}@media(hover:hover){.mu-textarea:hover:not([data-disabled],[aria-disabled=true],:focus-within){box-shadow:inset 0 0 0 1px var(--mu-ink-muted),var(--mu-shadow-track)}}.mu-textarea:focus-within{box-shadow:inset 0 0 0 var(--mu-focus-edge-width) var(--mu-focus-edge),var(--mu-shadow-track);outline:var(--mu-focus-width) solid transparent;outline-offset:calc(-1 * var(--mu-focus-width))}.mu-textarea:is([data-invalid],[aria-invalid=true]){box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-textarea:is([data-invalid],[aria-invalid=true]):focus-within{box-shadow:inset 0 0 0 var(--mu-focus-edge-width) var(--mu-danger),var(--mu-shadow-track)}.mu-textarea:is([data-disabled],[aria-disabled=true]){opacity:.45;cursor:not-allowed}}@layer mu{.mu-checkbox{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--mu-row-check-box);height:var(--mu-row-check-box);border-radius:var(--mu-radius-sm);color:var(--mu-on-primary);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition-property:background-color,box-shadow,scale;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-checkbox[data-checked],.mu-checkbox[data-indeterminate]{background-color:var(--mu-primary);box-shadow:none}.mu-checkbox[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-checkbox:active:not([data-disabled],[data-readonly]){scale:.94}.mu-checkbox[data-disabled]{opacity:.45;cursor:not-allowed}.mu-checkbox-indicator{display:flex;transition:opacity var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press),scale var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press)}.mu-checkbox-indicator[data-starting-style],.mu-checkbox-indicator[data-ending-style]{opacity:0;scale:.6}.mu-checkbox-indicator>svg{width:calc(var(--mu-row-check-box) - 2 * var(--mu-inset));height:calc(var(--mu-row-check-box) - 2 * var(--mu-inset));stroke-width:2}.mu-checkbox-indicator>svg *{vector-effect:non-scaling-stroke}@media(prefers-reduced-motion:reduce){.mu-checkbox:active:not([data-disabled],[data-readonly]){scale:none}.mu-checkbox-indicator[data-starting-style],.mu-checkbox-indicator[data-ending-style]{scale:none}}}@layer mu{.mu-switch{--switch-h: calc(var(--mu-row-check-box) + var(--mu-inset));--switch-w: calc(var(--switch-h) * 1.7);--knob: calc(var(--switch-h) - 2 * var(--mu-inset));position:relative;display:inline-flex;flex:none;align-items:center;box-sizing:border-box;width:var(--switch-w);height:var(--switch-h);padding:var(--mu-inset);border-radius:var(--mu-radius-full);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition:background-color var(--mu-duration-settle) var(--mu-ease-settle),box-shadow var(--mu-duration-settle) var(--mu-ease-settle)}.mu-switch[data-checked]{background-color:var(--mu-primary);box-shadow:inset 0 0 0 1px var(--mu-primary)}.mu-switch[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-switch[data-disabled]{opacity:.45;cursor:not-allowed}.mu-switch-thumb{display:block;width:var(--knob);height:var(--knob);border-radius:var(--mu-radius-full);background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-key);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),scale var(--mu-duration-press) var(--mu-ease-out),background-color var(--mu-duration-settle) var(--mu-ease-settle)}.mu-switch-thumb[data-checked]{translate:calc(var(--switch-w) - var(--switch-h)) 0;background-color:var(--mu-on-primary)}.mu-switch:active:not([data-disabled],[data-readonly])>.mu-switch-thumb{scale:1.1}@media(prefers-reduced-motion:reduce){.mu-switch-thumb{transition-property:background-color}.mu-switch:active:not([data-disabled],[data-readonly])>.mu-switch-thumb{scale:none}}}@layer mu{.mu-radio-group{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mu-space-3)}.mu-radio-group[data-orientation=horizontal]{flex-direction:row;flex-wrap:wrap;gap:var(--mu-space-3) var(--mu-space-4)}.mu-radio-group[data-orientation=horizontal]>.mu-fieldset-legend{flex-basis:100%}.mu-radio{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:var(--mu-row-check-box);height:var(--mu-row-check-box);border-radius:var(--mu-radius-full);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer;transition-property:background-color,box-shadow,scale;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-radio[data-checked]{background-color:var(--mu-primary);box-shadow:none}.mu-radio[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-track)}.mu-radio:active:not([data-disabled],[data-readonly]){scale:.94}.mu-radio[data-disabled]{opacity:.45;cursor:not-allowed}.mu-radio-indicator{width:calc(var(--mu-row-check-box) / 2.5);height:calc(var(--mu-row-check-box) / 2.5);border-radius:var(--mu-radius-full);background-color:var(--mu-on-primary);transition:opacity var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press),scale var(--mu-duration-fade) var(--mu-ease-out) var(--mu-duration-press)}.mu-radio-indicator[data-starting-style],.mu-radio-indicator[data-ending-style]{opacity:0;scale:.4}@media(prefers-reduced-motion:reduce){.mu-radio:active:not([data-disabled],[data-readonly]){scale:none}.mu-radio-indicator[data-starting-style],.mu-radio-indicator[data-ending-style]{scale:none}}}@layer mu{.mu-toggle{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;height:var(--mu-row-height);margin:0;padding:0 var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-ink-muted);background-color:transparent;white-space:nowrap;cursor:pointer;user-select:none;transition-property:background-color,box-shadow,color;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-toggle:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-toggle.mu-toggle-icon{width:var(--mu-row-height);padding:0}@media(hover:hover){.mu-toggle:hover:not([data-disabled]){color:var(--mu-ink);background-color:var(--mu-hover)}}.mu-toggle[data-pressed],.mu-toggle:active:not([data-disabled]){color:var(--mu-ink);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-toggle[data-disabled]{opacity:.45;cursor:not-allowed}}@layer mu{.mu-segmented{position:relative;display:inline-flex;align-items:stretch;gap:0;box-sizing:border-box;height:var(--mu-row-height);padding:var(--mu-inset);border-radius:var(--mu-row-radius);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track)}.mu-segmented-key{position:absolute;top:var(--mu-inset);left:0;width:var(--key-width);height:calc(var(--mu-row-height) - 2 * var(--mu-inset));translate:var(--key-left) 0;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));background-color:var(--mu-key);background-image:linear-gradient(180deg,var(--mu-key-sheen),transparent 60%);box-shadow:var(--mu-shadow-key);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),width var(--mu-duration-settle) var(--mu-ease-settle)}.mu-toggle-group.mu-segmented:not([data-keyed])>.mu-segmented-key{display:none}.mu-tabs-indicator{--key-left: var(--active-tab-left);--key-width: var(--active-tab-width)}.mu-segmented-item,.mu-segmented>.mu-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;height:100%;margin:0;padding:0 calc(var(--mu-row-padding) - var(--mu-inset));border:0;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));color:var(--mu-ink-muted);background:none;box-shadow:none;font:inherit;white-space:nowrap;cursor:pointer;user-select:none;transition:color var(--mu-duration-fade) var(--mu-ease-out)}.mu-segmented>.mu-toggle.mu-toggle-icon{width:calc(var(--mu-row-height) - 2 * var(--mu-inset));padding:0}@media(hover:hover){.mu-segmented-item:hover:not([data-disabled]),.mu-segmented>.mu-toggle:hover:not([data-disabled]){color:var(--mu-ink);background:none}}.mu-segmented-item[data-active],.mu-segmented>.mu-toggle[data-pressed],.mu-segmented>.mu-toggle:active:not([data-disabled]){color:var(--mu-ink);background:none;box-shadow:none}.mu-segmented-item[data-disabled]{opacity:.45;cursor:not-allowed}.mu-tabs-root{display:flex;flex-direction:column;gap:var(--mu-space-4)}.mu-tabs-list{align-self:flex-start}.mu-tabs-panel{border-radius:var(--mu-radius-sm)}@media(prefers-reduced-motion:reduce){.mu-segmented-key{transition:none}}}@layer mu{.mu-toggle-group{display:inline-flex;align-items:center;gap:var(--mu-inset)}.mu-toggle-group>.mu-separator{align-self:center;height:max(var(--mu-space-2),calc(var(--mu-row-height) - 2 * var(--mu-space-2)));margin-inline:var(--mu-space-1)}}@layer mu{.mu-tooltip-popup{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;max-width:var(--mu-tooltip-width);padding:var(--mu-space-1) var(--mu-space-2);border-radius:var(--mu-radius-md);color:var(--mu-on-primary);background-color:var(--mu-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mu-tooltip-shortcut{opacity:.65}}@layer mu{.mu-popover-popup{display:flex;flex-direction:column;gap:var(--mu-space-3);box-sizing:border-box;width:var(--mu-popover-width);max-width:var(--available-width);padding:var(--mu-space-4);outline:0}.mu-popover-title{margin:0;color:var(--mu-ink)}.mu-popover-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-ink-muted)}}@layer mu{.mu-menu-popup{box-sizing:border-box;min-width:var(--mu-menu-width);max-height:var(--available-height);overflow-y:auto;padding:var(--mu-space-1);outline:0}.mu-menu-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-menu-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-menu-item>svg{color:var(--mu-ink-muted)}.mu-menu-item[data-highlighted],.mu-menu-submenu-trigger[data-popup-open]{background-color:var(--mu-hover)}.mu-menu-item[data-disabled]{opacity:.45}.mu-menu-item-danger,.mu-menu-item-danger>svg{color:var(--mu-danger)}.mu-menu-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-menu-shortcut{margin-inline-start:var(--mu-space-4);color:var(--mu-ink-muted)}.mu-menu-indicator{display:grid;flex:none;place-items:center;width:var(--mu-row-icon);height:var(--mu-row-icon);margin-inline-start:var(--mu-space-2)}.mu-menu-indicator>svg{color:var(--mu-ink)}.mu-menu-chevron{margin-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-row-padding));color:var(--mu-ink-muted)}.mu-menu-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-menu-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}}@layer mu{.mu-select-trigger{justify-content:space-between;min-width:0;padding-inline-end:var(--mu-row-padding-icon);text-align:start}.mu-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mu-select-value[data-placeholder]{color:var(--mu-ink-muted);font-weight:400}.mu-select-icon{display:flex;flex:none;color:var(--mu-ink-muted)}.mu-select-trigger[data-invalid]{box-shadow:inset 0 0 0 1px var(--mu-danger),var(--mu-shadow-key)}.mu-select-positioner{outline:0}.mu-select-popup{box-sizing:border-box;min-width:max(var(--mu-menu-width),var(--anchor-width));max-height:var(--available-height);padding:var(--mu-space-1);outline:0}.mu-select-list{overflow-y:auto;max-height:var(--available-height);scroll-padding-block:var(--mu-space-1);outline:0}.mu-select-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-select-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-select-item>svg{color:var(--mu-ink-muted)}.mu-select-item[data-highlighted]{background-color:var(--mu-hover)}.mu-select-item[data-disabled]{opacity:.45}.mu-select-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-select-indicator{display:grid;flex:none;place-items:center;width:var(--mu-row-icon);height:var(--mu-row-icon);margin-inline-start:var(--mu-space-2);color:var(--mu-ink)}.mu-select-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-select-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}.mu-select-scroll-arrow{display:grid;place-items:center;height:var(--mu-space-4);color:var(--mu-ink-muted)}}@layer mu{.mu-dialog-backdrop{position:fixed;inset:0;z-index:var(--mu-layer-overlay);background-color:var(--mu-overlay);transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-dialog-backdrop[data-starting-style],.mu-dialog-backdrop[data-ending-style]{opacity:0}.mu-dialog-viewport{position:fixed;inset:0;z-index:var(--mu-layer-overlay);display:grid;place-items:safe center;box-sizing:border-box;padding:var(--mu-space-6) var(--mu-space-4);overflow-y:auto}.mu-dialog-popup{position:relative;display:flex;flex-direction:column;gap:var(--mu-space-4);box-sizing:border-box;width:var(--mu-dialog-width);max-width:100%;padding:var(--mu-space-5);border-radius:var(--mu-radius-2xl);outline:0;transition:opacity var(--mu-duration-settle) var(--mu-ease-out),translate var(--mu-duration-settle) var(--mu-ease-out)}.mu-dialog-popup[data-starting-style],.mu-dialog-popup[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}.mu-dialog-popup:where(:has(>.mu-dialog-x))>.mu-dialog-title{padding-inline-end:var(--mu-space-6)}.mu-dialog-title{margin:0;color:var(--mu-ink)}.mu-dialog-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-ink-muted)}.mu-dialog-x{position:absolute;top:var(--mu-space-4);right:var(--mu-space-4)}.mu-dialog-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mu-space-2);margin-top:var(--mu-space-2)}@media(max-width:639.98px){.mu-dialog-sheet{place-items:end stretch;padding:var(--mu-space-6) 0 0}.mu-dialog-sheet>.mu-dialog-popup{width:100%;padding-bottom:max(var(--mu-space-5),env(safe-area-inset-bottom));border-end-start-radius:0;border-end-end-radius:0}.mu-dialog-sheet>.mu-dialog-popup[data-starting-style],.mu-dialog-sheet>.mu-dialog-popup[data-ending-style]{translate:0 var(--mu-space-6)}.mu-dialog-sheet .mu-dialog-footer{flex-direction:column-reverse}.mu-dialog-sheet .mu-dialog-footer>*{width:100%}}@media(prefers-reduced-motion:reduce){.mu-dialog-popup[data-starting-style],.mu-dialog-popup[data-ending-style],.mu-dialog-sheet>.mu-dialog-popup[data-starting-style],.mu-dialog-sheet>.mu-dialog-popup[data-ending-style]{translate:none}}}@layer mu{.mu-toast-viewport{position:fixed;right:var(--mu-space-6);bottom:var(--mu-space-6);z-index:var(--mu-layer-toast);width:var(--mu-toast-width);outline:0}@media(max-width:639.98px){.mu-toast-viewport{right:var(--mu-space-4);bottom:var(--mu-space-4);left:var(--mu-space-4);width:auto}}.mu-toast{--mu-row-gap: var(--mu-space-3);--peek: var(--mu-space-2);--scale: max(0, 1 - var(--toast-index) * .05);--shrink: calc(1 - var(--scale));--height: var(--toast-frontmost-height, var(--toast-height));--offset-y: calc(var(--toast-offset-y) * -1 - var(--toast-index) * var(--mu-row-gap) + var(--toast-swipe-movement-y));position:absolute;right:0;bottom:0;z-index:calc(var(--mu-layer-toast) - var(--toast-index));box-sizing:border-box;width:100%;height:var(--height);transform-origin:bottom center;translate:var(--toast-swipe-movement-x) calc(var(--toast-swipe-movement-y) - var(--toast-index) * var(--peek) - var(--shrink) * var(--height));scale:var(--scale);user-select:none;outline:0;transition:translate var(--mu-duration-settle) var(--mu-ease-settle),scale var(--mu-duration-settle) var(--mu-ease-settle),opacity var(--mu-duration-settle) var(--mu-ease-out),height var(--mu-duration-fade) var(--mu-ease-out)}.mu-toast[data-expanded]{height:var(--toast-height);translate:var(--toast-swipe-movement-x) var(--offset-y);scale:1}.mu-toast[data-starting-style],.mu-toast[data-ending-style]{translate:0 150%}.mu-toast[data-ending-style]{opacity:0}.mu-toast[data-ending-style][data-swipe-direction=up]{translate:0 calc(var(--toast-swipe-movement-y) - 150%)}.mu-toast[data-ending-style][data-swipe-direction=down]{translate:0 calc(var(--toast-swipe-movement-y) + 150%)}.mu-toast[data-ending-style][data-swipe-direction=left]{translate:calc(var(--toast-swipe-movement-x) - 150%) var(--offset-y)}.mu-toast[data-ending-style][data-swipe-direction=right]{translate:calc(var(--toast-swipe-movement-x) + 150%) var(--offset-y)}.mu-toast[data-limited]{opacity:0}.mu-toast:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-offset)}.mu-toast:after{content:"";position:absolute;top:100%;left:0;width:100%;height:calc(var(--mu-row-gap) + 1px)}.mu-toast-content{display:flex;align-items:flex-start;gap:var(--mu-space-3);box-sizing:border-box;height:100%;padding:var(--mu-space-3) var(--mu-space-3) var(--mu-space-3) var(--mu-space-4);overflow:hidden;transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-toast-content[data-behind]{opacity:0}.mu-toast-content[data-expanded]{opacity:1}.mu-toast-icon{margin-block:calc((var(--mu-row-height) - var(--mu-row-icon)) / 2);color:var(--mu-ink-muted)}.mu-toast-success .mu-toast-icon{color:var(--mu-success)}.mu-toast-warning .mu-toast-icon{color:var(--mu-warning)}.mu-toast-danger .mu-toast-icon{color:var(--mu-danger)}.mu-toast-text{display:flex;flex:1;flex-direction:column;min-width:0;padding-block:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2)}.mu-toast-title{margin:0;color:var(--mu-ink)}.mu-toast-description{margin:0;color:var(--mu-ink-muted)}.mu-toast-action,.mu-toast-close{margin-block:calc((var(--mu-control-md) - var(--mu-control-sm)) / 2)}@media(prefers-reduced-motion:reduce){.mu-toast{transition-property:opacity,height}.mu-toast[data-starting-style],.mu-toast[data-ending-style]{translate:var(--toast-swipe-movement-x) var(--offset-y)}}}@layer mu{.mu-input-root.mu-combobox-input-root{padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-space-1))}.mu-combobox-trigger{display:grid;place-items:center;width:calc(var(--mu-row-icon) + var(--mu-space-2));height:calc(var(--mu-row-icon) + var(--mu-space-2));margin:0;padding:0;border:0;border-radius:var(--mu-radius-sm);color:var(--mu-ink-muted);background:none;cursor:pointer}.mu-combobox-trigger:hover:not([data-disabled]){color:var(--mu-ink)}.mu-combobox-trigger[data-disabled]{cursor:not-allowed}.mu-combobox-popup{box-sizing:border-box;width:var(--anchor-width);min-width:var(--mu-menu-width);max-width:var(--available-width);outline:0}.mu-combobox-list{box-sizing:border-box;max-height:min(var(--mu-list-height),var(--available-height));overflow-y:auto;overscroll-behavior:contain;padding:var(--mu-space-1);scroll-padding-block:var(--mu-space-1);outline:0}.mu-combobox-list[data-empty]{padding:0}.mu-combobox-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;height:var(--mu-row-height);padding:0 var(--mu-row-padding);border-radius:calc(var(--mu-radius-xl) - var(--mu-space-1));color:var(--mu-ink);font-weight:400;white-space:nowrap;cursor:default;user-select:none;outline:0}.mu-combobox-item:where(:has(>svg:first-child)){padding-inline-start:var(--mu-row-padding-icon)}.mu-combobox-item>svg{color:var(--mu-ink-muted)}.mu-combobox-item[data-highlighted]{background-color:var(--mu-hover)}.mu-combobox-item[data-disabled]{opacity:.45}.mu-combobox-item-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-combobox-indicator{display:grid;flex:none;place-items:center;width:var(--mu-row-icon);height:var(--mu-row-icon);margin-inline-start:var(--mu-space-2);color:var(--mu-ink)}.mu-combobox-empty:not(:empty){padding:var(--mu-space-3) var(--mu-space-4);color:var(--mu-ink-muted)}.mu-combobox-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-ink-muted)}.mu-combobox-separator{height:1px;margin:var(--mu-space-1) calc(-1 * var(--mu-space-1));background-color:var(--mu-line)}}@layer mu{.mu-button.mu-collapsible-trigger{margin-inline-start:calc(-1 * var(--mu-row-padding));padding-inline-end:var(--mu-row-padding-icon)}.mu-collapsible-chevron{color:var(--mu-ink-muted);transition:rotate var(--mu-duration-settle) var(--mu-ease-settle)}.mu-collapsible-trigger[data-panel-open]>.mu-collapsible-chevron{rotate:180deg}.mu-collapsible-panel{transition:opacity var(--mu-duration-fade) var(--mu-ease-out),translate var(--mu-duration-fade) var(--mu-ease-out)}.mu-collapsible-panel[data-starting-style],.mu-collapsible-panel[data-ending-style]{opacity:0;translate:0 var(--mu-space-1)}@media(prefers-reduced-motion:reduce){.mu-collapsible-chevron{transition:none}.mu-collapsible-panel[data-starting-style],.mu-collapsible-panel[data-ending-style]{translate:none}}}@layer mu{.mu-table-scroll{overflow-x:auto;max-width:100%}.mu-table{width:100%;border-collapse:collapse;color:var(--mu-ink);font-variant-numeric:tabular-nums;text-align:start}.mu-table-head,.mu-table-cell{padding:0 var(--mu-row-padding);text-align:start;vertical-align:middle}.mu-table-head{height:var(--mu-row-height);color:var(--mu-ink-muted);white-space:nowrap;border-bottom:1px solid var(--mu-line)}.mu-table-cell{padding-block:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2 + var(--mu-space-1))}.mu-table-body>.mu-table-row+.mu-table-row>.mu-table-cell{border-top:1px solid var(--mu-line)}.mu-table-body>.mu-table-row:hover>.mu-table-cell{background-color:var(--mu-hover)}.mu-table-cell>.mu-button{margin-block:calc((var(--mu-row-line-height) - var(--mu-row-height)) / 2);vertical-align:top}.mu-table-num{text-align:end}.mu-table-muted{color:var(--mu-ink-muted)}.mu-table-caption{caption-side:bottom;padding:var(--mu-space-2) var(--mu-row-padding) 0;color:var(--mu-ink-muted);text-align:start}}@layer mu{.mu-prose{color:var(--mu-ink);font-family:var(--mu-font-sans);font-size:var(--prose-fs);line-height:var(--prose-lh);font-weight:400;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mu-prose ::selection{background:var(--mu-selection)}.mu-prose :where(p,ul,ol,pre,blockquote,table,figure,img,video,hr){margin:0 0 var(--mu-space-3)}.mu-prose :where(h1,h2,h3,h4,h5,h6){margin:var(--mu-space-5) 0 var(--mu-space-2);font-family:var(--mu-font-display);font-weight:600;letter-spacing:0}.mu-prose>:first-child{margin-top:0}.mu-prose>:last-child{margin-bottom:0}.mu-prose h1{font-size:var(--prose-h1);line-height:var(--prose-h1-lh)}.mu-prose :where(h2,h3,h4,h5,h6){font-size:var(--prose-h2);line-height:var(--prose-h2-lh)}.mu-prose :where(strong,b){font-weight:600}.mu-prose del{color:var(--mu-ink-muted)}.mu-prose a{color:var(--mu-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;border-radius:var(--mu-radius-xs)}.mu-prose a:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-offset)}.mu-prose :where(ul,ol){padding-inline-start:var(--mu-space-6)}.mu-prose li+li{margin-top:var(--mu-space-1)}.mu-prose li>:where(ul,ol){margin:var(--mu-space-1) 0 0}.mu-prose li>p{margin:0}.mu-prose li::marker{color:var(--mu-ink-muted)}.mu-prose li:where(:has(>input[type=checkbox]:first-child)){position:relative;list-style:none}.mu-prose li>input[type=checkbox]:first-child{appearance:none;position:absolute;inset-inline-start:calc(-1 * (var(--mu-space-4) + var(--mu-space-2)));top:calc((var(--prose-lh) - var(--mu-space-4)) / 2);box-sizing:border-box;width:var(--mu-space-4);height:var(--mu-space-4);margin:0;border-radius:var(--mu-radius-sm);background-color:var(--mu-well);box-shadow:inset 0 0 0 1px var(--mu-edge),var(--mu-shadow-track);cursor:pointer}.mu-prose li>input[type=checkbox]:first-child:disabled{cursor:default}.mu-prose li>input[type=checkbox]:first-child:focus-visible{outline:var(--mu-focus-width) solid var(--mu-focus);outline-offset:var(--mu-focus-offset)}.mu-prose li>input[type=checkbox]:first-child:checked{background-color:var(--mu-primary);box-shadow:none}.mu-prose li>input[type=checkbox]:first-child:checked:after{content:"";position:absolute;inset:var(--mu-inset);background-color:var(--mu-on-primary);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat}.mu-prose li:where(:has(>input[type=checkbox]:first-child:checked)){color:var(--mu-ink-muted);text-decoration:line-through}.mu-prose :where(code,kbd,samp,pre){font-family:var(--mu-font-mono);font-size:.875em}.mu-prose :not(pre)>code{padding:.1em .3em;border-radius:var(--mu-radius-xs);background-color:var(--mu-well)}.mu-prose pre{overflow-x:auto;padding:var(--mu-space-3) var(--mu-space-4);border-radius:var(--mu-radius-md);background-color:var(--mu-well);line-height:1.6}.mu-prose pre>code{font-size:inherit}.mu-prose blockquote{margin-inline:0;padding-inline-start:var(--mu-space-4);border-inline-start:var(--mu-inset) solid var(--mu-edge);color:var(--mu-ink-muted)}.mu-prose hr{height:1px;margin-block:var(--mu-space-5);border:0;background-color:var(--mu-line)}.mu-prose :where(img,video){display:block;max-width:100%;height:auto;border-radius:var(--mu-radius-lg)}.mu-prose table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse;font-variant-numeric:tabular-nums}.mu-prose :where(th,td){padding:var(--mu-space-2) var(--mu-space-3);text-align:start;vertical-align:top}.mu-prose th{color:var(--mu-ink-muted);font-size:var(--prose-head);line-height:var(--prose-head-lh);font-weight:500;white-space:nowrap;border-bottom:1px solid var(--mu-line)}.mu-prose tr+tr>td{border-top:1px solid var(--mu-line)}.mu-prose-tag{padding:0 .25em;border-radius:var(--mu-radius-xs);color:var(--mu-ink-muted);background-color:var(--mu-well)}}

package/dist/tailwind.css

@@ -34,6 +34,7 @@
   --color-mu-accent: var(--mu-accent);
   --color-mu-selection: var(--mu-selection);
   --color-mu-focus: var(--mu-focus);
+  --color-mu-focus-edge: var(--mu-focus-edge);
   --color-mu-success: var(--mu-success);
   --color-mu-success-soft: var(--mu-success-soft);
   --color-mu-warning: var(--mu-warning);

package/dist/theme-tokens.js

@@ -1,3 +1,3 @@
 'use client';
-var m=["--mu-canvas","--mu-surface","--mu-well","--mu-hover","--mu-key","--mu-key-hover","--mu-key-sheen","--mu-edge","--mu-line","--mu-overlay","--mu-ink","--mu-ink-muted","--mu-primary","--mu-primary-hover","--mu-on-primary","--mu-accent","--mu-selection","--mu-focus","--mu-success","--mu-success-soft","--mu-warning","--mu-warning-soft","--mu-danger","--mu-danger-key","--mu-danger-soft","--mu-on-danger","--mu-shadow-track","--mu-shadow-key","--mu-shadow-raised","--mu-shadow-pressed","--mu-shadow-pop"];export{m as themeTokens};
+var u=["--mu-canvas","--mu-surface","--mu-well","--mu-hover","--mu-key","--mu-key-hover","--mu-key-sheen","--mu-edge","--mu-line","--mu-overlay","--mu-ink","--mu-ink-muted","--mu-primary","--mu-primary-hover","--mu-on-primary","--mu-accent","--mu-selection","--mu-focus","--mu-focus-edge","--mu-success","--mu-success-soft","--mu-warning","--mu-warning-soft","--mu-danger","--mu-danger-key","--mu-danger-soft","--mu-on-danger","--mu-shadow-track","--mu-shadow-key","--mu-shadow-raised","--mu-shadow-pressed","--mu-shadow-pop"];export{u as themeTokens};
 //# sourceMappingURL=theme-tokens.js.map

package/dist/theme-tokens.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/theme-tokens.ts"],
-  "sourcesContent": ["/**\n * The custom properties an app theme sets: the 26 color tokens in\n * docs/color.md and the five shadow tokens in docs/depth.md. A token a theme\n * leaves out keeps its Light value, so an app's tests can check its theme\n * against this list. See docs/color.md#app-themes.\n */\nexport const themeTokens = [\n  '--mu-canvas',\n  '--mu-surface',\n  '--mu-well',\n  '--mu-hover',\n  '--mu-key',\n  '--mu-key-hover',\n  '--mu-key-sheen',\n  '--mu-edge',\n  '--mu-line',\n  '--mu-overlay',\n  '--mu-ink',\n  '--mu-ink-muted',\n  '--mu-primary',\n  '--mu-primary-hover',\n  '--mu-on-primary',\n  '--mu-accent',\n  '--mu-selection',\n  '--mu-focus',\n  '--mu-success',\n  '--mu-success-soft',\n  '--mu-warning',\n  '--mu-warning-soft',\n  '--mu-danger',\n  '--mu-danger-key',\n  '--mu-danger-soft',\n  '--mu-on-danger',\n  '--mu-shadow-track',\n  '--mu-shadow-key',\n  '--mu-shadow-raised',\n  '--mu-shadow-pressed',\n  '--mu-shadow-pop',\n] as const;\n"],
-  "mappings": ";AAMO,IAAMA,EAAc,CACzB,cACA,eACA,YACA,aACA,WACA,iBACA,iBACA,YACA,YACA,eACA,WACA,iBACA,eACA,qBACA,kBACA,cACA,iBACA,aACA,eACA,oBACA,eACA,oBACA,cACA,kBACA,mBACA,iBACA,oBACA,kBACA,qBACA,sBACA,iBACF",
+  "sourcesContent": ["/**\n * The custom properties an app theme sets: the 26 color tokens in\n * docs/color.md and the five shadow tokens in docs/depth.md. A token a theme\n * leaves out keeps its Light value, so an app's tests can check its theme\n * against this list. See docs/color.md#app-themes.\n */\nexport const themeTokens = [\n  '--mu-canvas',\n  '--mu-surface',\n  '--mu-well',\n  '--mu-hover',\n  '--mu-key',\n  '--mu-key-hover',\n  '--mu-key-sheen',\n  '--mu-edge',\n  '--mu-line',\n  '--mu-overlay',\n  '--mu-ink',\n  '--mu-ink-muted',\n  '--mu-primary',\n  '--mu-primary-hover',\n  '--mu-on-primary',\n  '--mu-accent',\n  '--mu-selection',\n  '--mu-focus',\n  '--mu-focus-edge',\n  '--mu-success',\n  '--mu-success-soft',\n  '--mu-warning',\n  '--mu-warning-soft',\n  '--mu-danger',\n  '--mu-danger-key',\n  '--mu-danger-soft',\n  '--mu-on-danger',\n  '--mu-shadow-track',\n  '--mu-shadow-key',\n  '--mu-shadow-raised',\n  '--mu-shadow-pressed',\n  '--mu-shadow-pop',\n] as const;\n"],
+  "mappings": ";AAMO,IAAMA,EAAc,CACzB,cACA,eACA,YACA,aACA,WACA,iBACA,iBACA,YACA,YACA,eACA,WACA,iBACA,eACA,qBACA,kBACA,cACA,iBACA,aACA,kBACA,eACA,oBACA,eACA,oBACA,cACA,kBACA,mBACA,iBACA,oBACA,kBACA,qBACA,sBACA,iBACF",
   "names": ["themeTokens"]
 }

package/dist/tokens.css

@@ -1 +1 @@
-@layer mu{:where(:root,:host,.mu-root:not([data-theme] *)),[data-theme=light]{color-scheme:light;--mu-canvas: #f9f9f9;--mu-surface: #ffffff;--mu-well: #e4e4e4;--mu-hover: #ededed;--mu-key: #ffffff;--mu-key-hover: #fbfbfb;--mu-key-sheen: rgba(255,255,255,.18);--mu-edge: #d0d0d0;--mu-line: #e0e0e0;--mu-overlay: rgba(0,0,0,.32);--mu-ink: #1a1a1a;--mu-ink-muted: #5e5e5e;--mu-primary: #1f1f1f;--mu-primary-hover: #333333;--mu-on-primary: #ffffff;--mu-accent: oklch(.5 .13 255);--mu-selection: rgba(40,99,171,.18);--mu-success: oklch(.52 .13 150);--mu-success-soft: #e9f4ec;--mu-warning: oklch(.5 .11 70);--mu-warning-soft: #fbf1df;--mu-danger: oklch(.53 .19 27);--mu-danger-key: oklch(.53 .19 27);--mu-danger-soft: #fbeaea;--mu-on-danger: #ffffff;--mu-focus: var(--mu-accent);--mu-shadow-track: inset 0 1px 2px rgba(0,0,0,.1);--mu-shadow-key: 0 1px 2px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.05);--mu-shadow-raised: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.12);--mu-shadow-pressed: inset 0 1px 3px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.12);--mu-shadow-pop: 0 8px 24px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8)}[data-theme=dark]{--mu-canvas: #0f0f0f;--mu-surface: #1a1a1a;--mu-well: #262626;--mu-hover: #242424;--mu-key: #343434;--mu-key-hover: #3c3c3c;--mu-key-sheen: rgba(255,255,255,.08);--mu-edge: #353535;--mu-line: #262626;--mu-overlay: rgba(0,0,0,.6);--mu-ink: #ededed;--mu-ink-muted: #adadad;--mu-primary: #e6e6e6;--mu-primary-hover: #f5f5f5;--mu-on-primary: #111111;--mu-accent: oklch(.78 .11 255);--mu-selection: rgba(135,186,253,.28);--mu-success: oklch(.78 .14 150);--mu-success-soft: #14261a;--mu-warning: oklch(.8 .13 75);--mu-warning-soft: #2a2112;--mu-danger: oklch(.72 .16 25);--mu-danger-key: oklch(.55 .17 25);--mu-danger-soft: #2c1616;--mu-on-danger: #ffffff;--mu-focus: var(--mu-accent);--mu-shadow-track: inset 0 1px 2px rgba(0,0,0,.55), inset 0 -.5px 0 rgba(255,255,255,.06);--mu-shadow-key: 0 1px 2px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);--mu-shadow-raised: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);--mu-shadow-pressed: inset 0 1px 3px rgba(0,0,0,.6), 0 0 0 .5px rgba(0,0,0,.6);--mu-shadow-pop: 0 8px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.06);color-scheme:dark}[data-theme=contrast]{color-scheme:light;--mu-canvas: #ffffff;--mu-surface: #ffffff;--mu-well: #e6e6e6;--mu-hover: #d9d9d9;--mu-key: #ffffff;--mu-key-hover: #f2f2f2;--mu-key-sheen: #ffffff00;--mu-edge: #6b6b6b;--mu-line: #6b6b6b;--mu-overlay: rgba(0,0,0,.6);--mu-ink: #000000;--mu-ink-muted: #333333;--mu-primary: #000000;--mu-primary-hover: #262626;--mu-on-primary: #ffffff;--mu-accent: oklch(.42 .14 255);--mu-selection: rgba(0,75,151,.25);--mu-success: oklch(.42 .12 150);--mu-success-soft: #e9f4ec;--mu-warning: oklch(.45 .11 70);--mu-warning-soft: #fbf1df;--mu-danger: oklch(.45 .18 27);--mu-danger-key: oklch(.45 .18 27);--mu-danger-soft: #fbeaea;--mu-on-danger: #ffffff;--mu-focus: var(--mu-accent);--mu-shadow-track: 0 0 0 0 rgba(0,0,0,0);--mu-shadow-key: 0 0 0 1px #6b6b6b;--mu-shadow-raised: 0 0 0 1px #000000;--mu-shadow-pressed: inset 0 0 0 2px #000000;--mu-shadow-pop: 0 0 0 1px #000000}:where(:root,:host,.mu-root){--mu-space-1: 4px;--mu-space-2: 8px;--mu-space-3: 12px;--mu-space-4: 16px;--mu-space-5: 20px;--mu-space-6: 24px;--mu-space-8: 32px;--mu-space-12: 48px;--mu-space-16: 64px;--mu-radius-xs: 2px;--mu-radius-sm: 4px;--mu-radius-md: 6px;--mu-radius-lg: 8px;--mu-radius-xl: 12px;--mu-radius-2xl: 16px;--mu-radius-full: 9999px;--mu-control-xs: 20px;--mu-control-sm: 24px;--mu-control-md: 32px;--mu-inset: 2px;--mu-hit-area: 44px;--mu-focus-width: 2px;--mu-icon-xs: 12px;--mu-icon-sm: 14px;--mu-icon-md: 16px;--mu-content-width: 720px;--mu-sidebar-width: 240px;--mu-menu-width: 200px;--mu-list-height: 240px;--mu-popover-width: 280px;--mu-tooltip-width: 240px;--mu-toast-width: 360px;--mu-dialog-width: 440px;--mu-layer-popup: 50;--mu-layer-overlay: 50;--mu-layer-toast: 60;--mu-duration-press: 80ms;--mu-duration-settle: .15s;--mu-duration-fade: .1s;--mu-duration-spin: .8s;--mu-duration-shimmer: 1.4s;--mu-ease-settle: cubic-bezier(.2, .9, .3, 1);--mu-ease-out: cubic-bezier(.2, 0, 0, 1);--mu-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace}}
+@layer mu{:where(:root,:host,.mu-root:not([data-theme] *)),[data-theme=light]{color-scheme:light;--mu-canvas: #fafafa;--mu-surface: #ffffff;--mu-well: #e4e4e4;--mu-hover: #ececec;--mu-key: #ffffff;--mu-key-hover: #fafafa;--mu-key-sheen: rgba(255,255,255,.18);--mu-edge: #d0d0d0;--mu-line: #dedede;--mu-overlay: rgba(0,0,0,.32);--mu-ink: #1a1a1a;--mu-ink-muted: #5e5e5e;--mu-primary: #1a1a1a;--mu-primary-hover: #333333;--mu-on-primary: #ffffff;--mu-accent: oklch(.5 .13 255);--mu-selection: rgba(40,99,171,.18);--mu-success: oklch(.52 .13 150);--mu-success-soft: #e9f4ec;--mu-warning: oklch(.5 .11 70);--mu-warning-soft: #fbf1df;--mu-danger: oklch(.53 .19 27);--mu-danger-key: oklch(.53 .19 27);--mu-danger-soft: #fbeaea;--mu-on-danger: #ffffff;--mu-focus: var(--mu-primary);--mu-focus-edge: var(--mu-ink);--mu-shadow-track: inset 0 1px 2px rgba(0,0,0,.1);--mu-shadow-key: 0 1px 2px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.05);--mu-shadow-raised: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.12);--mu-shadow-pressed: inset 0 1px 3px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.12);--mu-shadow-pop: 0 8px 24px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.08), 0 0 0 .5px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8)}[data-theme=dark]{--mu-canvas: #0f0f0f;--mu-surface: #1a1a1a;--mu-well: #252525;--mu-hover: #252525;--mu-key: #343434;--mu-key-hover: #3c3c3c;--mu-key-sheen: rgba(255,255,255,.08);--mu-edge: #343434;--mu-line: #252525;--mu-overlay: rgba(0,0,0,.6);--mu-ink: #ededed;--mu-ink-muted: #adadad;--mu-primary: #e6e6e6;--mu-primary-hover: #ffffff;--mu-on-primary: #0f0f0f;--mu-accent: oklch(.78 .11 255);--mu-selection: rgba(135,186,253,.28);--mu-success: oklch(.78 .14 150);--mu-success-soft: #14261a;--mu-warning: oklch(.8 .13 75);--mu-warning-soft: #2a2112;--mu-danger: oklch(.72 .16 25);--mu-danger-key: oklch(.55 .17 25);--mu-danger-soft: #2c1616;--mu-on-danger: #ffffff;--mu-focus: var(--mu-primary);--mu-focus-edge: var(--mu-ink);--mu-shadow-track: inset 0 1px 2px rgba(0,0,0,.55), inset 0 -.5px 0 rgba(255,255,255,.06);--mu-shadow-key: 0 1px 2px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);--mu-shadow-raised: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.5);--mu-shadow-pressed: inset 0 1px 3px rgba(0,0,0,.6), 0 0 0 .5px rgba(0,0,0,.6);--mu-shadow-pop: 0 8px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.06);color-scheme:dark}:where(:root,:host,.mu-root){--mu-space-1: 4px;--mu-space-2: 8px;--mu-space-3: 12px;--mu-space-4: 16px;--mu-space-5: 20px;--mu-space-6: 24px;--mu-space-8: 32px;--mu-space-12: 48px;--mu-space-16: 64px;--mu-radius-xs: 2px;--mu-radius-sm: 4px;--mu-radius-md: 6px;--mu-radius-lg: 8px;--mu-radius-xl: 12px;--mu-radius-2xl: 16px;--mu-radius-full: 9999px;--mu-control-xs: 20px;--mu-control-sm: 24px;--mu-control-md: 32px;--mu-inset: 2px;--mu-hit-area: 44px;--mu-focus-width: 2px;--mu-focus-offset: 1px;--mu-focus-edge-width: 1.5px;--mu-icon-xs: 12px;--mu-icon-sm: 14px;--mu-icon-md: 16px;--mu-content-width: 720px;--mu-sidebar-width: 240px;--mu-menu-width: 200px;--mu-list-height: 240px;--mu-popover-width: 280px;--mu-tooltip-width: 240px;--mu-toast-width: 360px;--mu-dialog-width: 440px;--mu-layer-popup: 50;--mu-layer-overlay: 50;--mu-layer-toast: 60;--mu-duration-press: 80ms;--mu-duration-settle: .15s;--mu-duration-fade: .1s;--mu-duration-spin: .8s;--mu-duration-shimmer: 1.4s;--mu-ease-settle: cubic-bezier(.2, .9, .3, 1);--mu-ease-out: cubic-bezier(.2, 0, 0, 1);--mu-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace}}

package/dist/types/theme-tokens.d.ts

@@ -4,4 +4,4 @@
  * leaves out keeps its Light value, so an app's tests can check its theme
  * against this list. See docs/color.md#app-themes.
  */
-export declare const themeTokens: readonly ["--mu-canvas", "--mu-surface", "--mu-well", "--mu-hover", "--mu-key", "--mu-key-hover", "--mu-key-sheen", "--mu-edge", "--mu-line", "--mu-overlay", "--mu-ink", "--mu-ink-muted", "--mu-primary", "--mu-primary-hover", "--mu-on-primary", "--mu-accent", "--mu-selection", "--mu-focus", "--mu-success", "--mu-success-soft", "--mu-warning", "--mu-warning-soft", "--mu-danger", "--mu-danger-key", "--mu-danger-soft", "--mu-on-danger", "--mu-shadow-track", "--mu-shadow-key", "--mu-shadow-raised", "--mu-shadow-pressed", "--mu-shadow-pop"];
+export declare const themeTokens: readonly ["--mu-canvas", "--mu-surface", "--mu-well", "--mu-hover", "--mu-key", "--mu-key-hover", "--mu-key-sheen", "--mu-edge", "--mu-line", "--mu-overlay", "--mu-ink", "--mu-ink-muted", "--mu-primary", "--mu-primary-hover", "--mu-on-primary", "--mu-accent", "--mu-selection", "--mu-focus", "--mu-focus-edge", "--mu-success", "--mu-success-soft", "--mu-warning", "--mu-warning-soft", "--mu-danger", "--mu-danger-key", "--mu-danger-soft", "--mu-on-danger", "--mu-shadow-track", "--mu-shadow-key", "--mu-shadow-raised", "--mu-shadow-pressed", "--mu-shadow-pop"];

package/llms-full.txt

@@ -18,7 +18,7 @@ It is not a general-purpose UI library for outside developers. Components are ge
 | Doc | What it covers |
 | --- | --- |
 | [Principles and voice](principles.md) | The taste in six rules, and how interface text is written |
-| [Color](color.md) | Color roles, every color token in Light, Dark and High contrast, and how themes are chosen |
+| [Color](color.md) | Color roles, every color token in Light and Dark, and how themes are chosen |
 | [Depth](depth.md) | The tactile model: recessed, key, raised, popup and flat; shadow tokens |
 | [Typography](typography.md) | The system font, the type scale and text rules |
 | [Size, spacing and layout](layout.md) | Control sizes, the 4px scale, radius, layout widths, breakpoints and layers |
@@ -34,9 +34,9 @@ It is not a general-purpose UI library for outside developers. Components are ge
 
 - **Behavior from Base UI.** Focus management, keyboard support, ARIA, portals and positioning come from [Base UI](https://base-ui.com). Styling, tokens and the component API are our own.
 - **No shadcn.** No shadcn dependency, no copied shadcn code, and no shadcn-compatible component or token names (`card`, `muted`, `destructive`, `foreground` and so on are not used).
-- **Light, tactile by default.** Restrained depth that shows behavior. Light is the default theme; Dark and High contrast ship with it.
+- **Light, tactile by default.** Restrained depth that shows behavior. Light is the default theme; Dark ships with it.
 - **Ink is the accent.** The primary action and every on state use `primary`: near-black in Light, near-white in Dark.
-- **One quiet hue.** `accent` is a quiet blue used only for focus rings, links and text selection, never as a fill.
+- **One quiet hue.** `accent` is a quiet blue used only for links and text selection, never as a fill. Focus is ink.
 - **Status colors only for status.** Green means success, amber means warning, red means danger or error. None of them is used for emphasis.
 - **Lucide icons** at a fixed screen-pixel stroke: 1.5px at md, 1.25px at xs, sm and in badges.
 - **The system UI font** for all text. The package ships no font files.
@@ -79,7 +79,7 @@ It is not a general-purpose UI library for outside developers. Components are ge
 
 # Color
 
-Memos UI is ink on paper: pure-gray neutrals, `primary` ink for emphasis, one quiet blue for focus, links and selection, and status colors only when there is a status.
+Memos UI is ink on paper: pure-gray neutrals, `primary` ink for emphasis, one quiet blue for links and selection, and status colors only when there is a status.
 
 ## Roles
 
@@ -89,16 +89,17 @@ Memos UI is ink on paper: pure-gray neutrals, `primary` ink for emphasis, one qu
 | Wells | `well`, `edge` | Switch, tab, checkbox and radio wells, pressed toggles, inline code. `edge` is the 1px border of wells and inputs |
 | Hover | `hover` | Rows, ghost buttons, the highlighted menu row. About 4% ink over surface |
 | Keys | `key`, `key-hover`, `key-sheen` | Neutral buttons, select triggers, the selected tab, switch knobs, kbd |
-| Text | `ink`, `ink-muted` | Primary and secondary text. Both pass 4.5:1 on every surface, well and key in every theme |
+| Text | `ink`, `ink-muted` | Primary and secondary text. Both pass 4.5:1 on every surface, well and key in both themes |
 | Emphasis | `primary`, `primary-hover`, `on-primary` | Primary button, checked checkbox and radio, switch when on, tooltip |
-| Meta | `accent`, `selection`, `focus` | Links, focus ring, text selection. Never a fill |
+| Meta | `accent`, `selection`, `focus`, `focus-edge` | Links and text selection (`accent`); the keyboard focus ring and the focused field edge (`focus`, `focus-edge`, both ink). Never a fill |
 | Status | `success`, `warning`, `danger` and their `-soft` pairs; `danger-key`, `on-danger` | Toasts, badges, field errors, danger buttons |
 | Lines | `line` | Separators, table rules, menu dividers |
 
 ## Rules
 
 - Neutrals are pure gray, never tinted.
-- `accent` is a quiet blue used only for links, focus and selection. If a screen has blue on it at rest, apart from links, something is wrong.
+- `accent` is a quiet blue used only for links and selection. If a screen has blue on it at rest, apart from links, something is wrong.
+- Focus is ink, not blue. A focused field darkens its own edge to `focus-edge`; a control reached by keyboard gets a 2px `focus` ring 1px outside its edge. See [States](states.md).
 - Status colors appear only when there is a status. Red is for destructive actions and errors, never for emphasis.
 - `danger` is tuned for text. `danger-key` is the danger button's fill; it is darker in Dark so the button is not the loudest thing on screen.
 - Always pair a status color with a word or an icon.
@@ -106,15 +107,15 @@ Memos UI is ink on paper: pure-gray neutrals, `primary` ink for emphasis, one qu
 
 ## Themes
 
-There are three themes: **Light** (the default), **Dark** and **High contrast**.
+There are two themes: **Light** (the default) and **Dark**.
 
 - Each theme sets every color token and every shadow token to an explicit value. Nothing is derived at runtime. The package's tests check the values against the tables on this page and in [Depth](depth.md), and check the contrast promised here.
 - Dark keeps the same depth model. Wells go darker than `canvas`, keys go lighter, `key-sheen` drops to 8%, and `primary` flips to near-white with a dark `on-primary`.
-- Non-text contrast: `edge` is about 1.5:1 in Light and Dark. That is the soft border people expect from a calm interface, and it is below WCAG's 3:1 for control boundaries. High contrast raises `edge` to 5.3:1 and outlines every key. Offer High contrast wherever the theme is chosen.
+- Non-text contrast: `edge` is about 1.5:1 in Light and Dark. That is the soft border people expect from a calm interface, and it is below WCAG's 3:1 for control boundaries. An app that needs 3:1 boundaries defines its own [app theme](#app-themes) with a darker `edge` and outlined keys.
 
 ### Choosing a theme
 
-Set `data-theme="light" | "dark" | "contrast"` on the root element, or on any `.mu-root` element. Without the attribute the tokens are Light.
+Set `data-theme="light" | "dark"` on the root element, or on any `.mu-root` element. Without the attribute the tokens are Light.
 
 The package does not read `prefers-color-scheme` itself. The app does, so that a saved preference wins over the system setting. Dark sets `color-scheme: dark`, so native scrollbars and form controls follow.
 
@@ -122,7 +123,7 @@ The package does not read `prefers-color-scheme` itself. The app does, so that a
 
 An app sets only these tokens:
 
-- the 26 color tokens in the [table below](#color-tokens),
+- the 27 color tokens in the [table below](#color-tokens),
 - the five shadow tokens in [Depth](depth.md#shadow-tokens),
 - the three font tokens in [Typography](typography.md#fonts): `font-sans`, `font-display` and `font-mono`.
 
@@ -132,7 +133,7 @@ Internal rules are not private classes. An app applies the [public classes](cust
 
 ### App themes
 
-An app can offer more themes than the three the package ships, such as a warm Paper theme in memos. An app theme is a rule that sets the color and shadow tokens under its own `data-theme` value:
+An app can offer more themes than the two the package ships, such as a warm Paper theme in memos. An app theme is a rule that sets the color and shadow tokens under its own `data-theme` value:
 
 ```css
 [data-theme="paper"] {
@@ -144,7 +145,7 @@ An app can offer more themes than the three the package ships, such as a warm Pa
 ```
 
 - Set every color token in the table below and the five shadow tokens in [Depth](depth.md). A token the theme leaves out keeps its Light value, so a partial theme mixes two palettes.
-- The package exports `themeTokens`, the custom property names of those 31 tokens (`--mu-canvas` to `--mu-shadow-pop`). Check in the app's tests that its theme sets each one:
+- The package exports `themeTokens`, the custom property names of those 32 tokens (`--mu-canvas` to `--mu-shadow-pop`). Check in the app's tests that its theme sets each one:
 
   ```ts
   import { themeTokens } from "@usememos/ui";
@@ -154,43 +155,44 @@ An app can offer more themes than the three the package ships, such as a warm Pa
     expect(themeTokens.filter((name) => !paper.includes(`${name}:`))).toEqual([]);
   });
   ```
-- Keep the rules on this page: `primary` stays ink, not a brand hue; `accent` is only for focus, links and selection; status colors only for status.
-- The app owns the theme's contrast. Check in the app's own tests that every text and background pair named in the Usage column below keeps 4.5:1 or more. The package's tests and screenshots cover only Light, Dark and High contrast.
+- Keep the rules on this page: `primary` stays ink, not a brand hue; `accent` is only for links and selection; focus is ink; status colors only for status.
+- The app owns the theme's contrast. Check in the app's own tests that every text and background pair named in the Usage column below keeps 4.5:1 or more. The package's tests and screenshots cover only Light and Dark.
 - The tokens sit in the `mu` [cascade layer](building.md#cascade-layer), so an unlayered app theme wins over them at any specificity.
 - An app theme is a choice the user makes. It is not a way to restyle the package per product: an app's default theme is Light or Dark.
 
 ## Color tokens
 
-| Token | Light | Dark | High contrast | Usage |
-| --- | --- | --- | --- | --- |
-| `canvas` | `#f9f9f9` | `#0f0f0f` | `#ffffff` | Page background |
-| `surface` | `#ffffff` | `#1a1a1a` | `#ffffff` | One lightness step above canvas: inputs, menus, popovers, dialogs, toasts, table headers |
-| `well` | `#e4e4e4` | `#262626` | `#e6e6e6` | Recessed parts that hold a state: switch, tab, checkbox and radio wells, pressed toggles, inline code. Paired with `edge` and `shadow-track`. Not for text entry |
-| `hover` | `#ededed` | `#242424` | `#d9d9d9` | Hover on rows, ghost buttons and wells; the highlighted row in menus and selects |
-| `key` | `#ffffff` | `#343434` | `#ffffff` | Raised parts you press: neutral buttons, select triggers, the selected tab, switch knobs, kbd. Paired with `shadow-key` or `shadow-raised` |
-| `key-hover` | `#fbfbfb` | `#3c3c3c` | `#f2f2f2` | Hover on a neutral key |
-| `key-sheen` | `rgba(255,255,255,0.18)` | `rgba(255,255,255,0.08)` | `#ffffff00` | Top light on keys: a gradient from `key-sheen` at the top edge to clear at 60% of the height |
-| `edge` | `#d0d0d0` | `#353535` | `#6b6b6b` | 1px border of inputs and wells. About 1.5:1 on canvas in Light and Dark; 5.3:1 in High contrast, where it also outlines keys |
-| `line` | `#e0e0e0` | `#262626` | `#6b6b6b` | Separators, table rules and menu dividers. 1.25:1 in Light, so structural lines also need spacing or a heading |
-| `overlay` | `rgba(0,0,0,0.32)` | `rgba(0,0,0,0.6)` | `rgba(0,0,0,0.6)` | Backdrop behind dialogs and sheets |
-| `ink` | `#1a1a1a` | `#ededed` | `#000000` | Primary text and icons on canvas, surface, well and key (13:1 or more in every theme) |
-| `ink-muted` | `#5e5e5e` | `#adadad` | `#333333` | Secondary text: descriptions, placeholders, unselected tabs and toggles, shortcuts, timestamps (4.9:1 or more on every surface) |
-| `primary` | `#1f1f1f` | `#e6e6e6` | `#000000` | The one emphasized action and every on state: primary buttons, checked boxes and radios, switches when on, tooltips. Ink, not a hue |
-| `primary-hover` | `#333333` | `#f5f5f5` | `#262626` | Hover on a primary key |
-| `on-primary` | `#ffffff` | `#111111` | `#ffffff` | Text, icons and the switch knob on `primary` (16:1 Light, 15:1 Dark) |
-| `accent` | `oklch(0.5 0.13 255)` | `oklch(0.78 0.11 255)` | `oklch(0.42 0.14 255)` | The only hue at rest: focus rings, links, the text cursor and selection. 5.8:1 on canvas in Light. Never a fill |
-| `selection` | `rgba(40,99,171,0.18)` | `rgba(135,186,253,0.28)` | `rgba(0,75,151,0.25)` | Text selection and the selected range in an editor |
-| `focus` | `var(--mu-accent)` | `var(--mu-accent)` | `var(--mu-accent)` | Focus ring: 2px outline, 2px offset, on `:focus-visible` only |
-| `success` | `oklch(0.52 0.13 150)` | `oklch(0.78 0.14 150)` | `oklch(0.42 0.12 150)` | Success text and icons on `surface` or `success-soft` (4.6:1 or more). Always with a word or icon |
-| `success-soft` | `#e9f4ec` | `#14261a` | `#e9f4ec` | Background of success badges and toasts |
-| `warning` | `oklch(0.5 0.11 70)` | `oklch(0.8 0.13 75)` | `oklch(0.45 0.11 70)` | Warning text and icons on `surface` or `warning-soft` (5.5:1 or more) |
-| `warning-soft` | `#fbf1df` | `#2a2112` | `#fbf1df` | Background of warning badges and toasts |
-| `danger` | `oklch(0.53 0.19 27)` | `oklch(0.72 0.16 25)` | `oklch(0.45 0.18 27)` | Danger text and icons: field errors, delete menu items, danger badges (5.0:1 or more on `surface` and `danger-soft`) |
-| `danger-key` | `oklch(0.53 0.19 27)` | `oklch(0.55 0.17 25)` | `oklch(0.45 0.18 27)` | Fill of a danger button. 5.3:1 or more with `on-danger` |
-| `danger-soft` | `#fbeaea` | `#2c1616` | `#fbeaea` | Background of danger badges and error toasts |
-| `on-danger` | `#ffffff` | `#ffffff` | `#ffffff` | Text on a danger key |
-
-Every text and background pair in this table keeps at least 4.5:1 in every theme. Depth (see [Depth](depth.md)) is added on top and never lowers contrast.
+| Token | Light | Dark | Usage |
+| --- | --- | --- | --- |
+| `canvas` | `#fafafa` | `#0f0f0f` | Page background |
+| `surface` | `#ffffff` | `#1a1a1a` | One lightness step above canvas: inputs, menus, popovers, dialogs, toasts, table headers |
+| `well` | `#e4e4e4` | `#252525` | Recessed parts that hold a state: switch, tab, checkbox and radio wells, pressed toggles, inline code. Paired with `edge` and `shadow-track`. Not for text entry |
+| `hover` | `#ececec` | `#252525` | Hover on rows, ghost buttons and wells; the highlighted row in menus and selects |
+| `key` | `#ffffff` | `#343434` | Raised parts you press: neutral buttons, select triggers, the selected tab, switch knobs, kbd. Paired with `shadow-key` or `shadow-raised` |
+| `key-hover` | `#fafafa` | `#3c3c3c` | Hover on a neutral key |
+| `key-sheen` | `rgba(255,255,255,0.18)` | `rgba(255,255,255,0.08)` | Top light on keys: a gradient from `key-sheen` at the top edge to clear at 60% of the height |
+| `edge` | `#d0d0d0` | `#343434` | 1px border of inputs and wells. About 1.5:1 on canvas |
+| `line` | `#dedede` | `#252525` | Separators, table rules and menu dividers. 1.25:1 in Light, so structural lines also need spacing or a heading |
+| `overlay` | `rgba(0,0,0,0.32)` | `rgba(0,0,0,0.6)` | Backdrop behind dialogs and sheets |
+| `ink` | `#1a1a1a` | `#ededed` | Primary text and icons on canvas, surface, well and key (13:1 or more in both themes) |
+| `ink-muted` | `#5e5e5e` | `#adadad` | Secondary text: descriptions, placeholders, unselected tabs and toggles, shortcuts, timestamps (4.9:1 or more on every surface) |
+| `primary` | `#1a1a1a` | `#e6e6e6` | The one emphasized action and every on state: primary buttons, checked boxes and radios, switches when on, tooltips. Ink, not a hue |
+| `primary-hover` | `#333333` | `#ffffff` | Hover on a primary key |
+| `on-primary` | `#ffffff` | `#0f0f0f` | Text, icons and the switch knob on `primary` (16:1 Light, 15:1 Dark) |
+| `accent` | `oklch(0.5 0.13 255)` | `oklch(0.78 0.11 255)` | The only hue at rest: links, the text cursor and selection. 5.8:1 on canvas in Light. Never a fill |
+| `selection` | `rgba(40,99,171,0.18)` | `rgba(135,186,253,0.28)` | Text selection and the selected range in an editor |
+| `focus` | `var(--mu-primary)` | `var(--mu-primary)` | Keyboard focus ring: 2px outline, 1px offset, on `:focus-visible` only |
+| `focus-edge` | `var(--mu-ink)` | `var(--mu-ink)` | Edge of a focused field (Input, Textarea, Combobox): 1.5px on any focus, in place of the 1px `edge` |
+| `success` | `oklch(0.52 0.13 150)` | `oklch(0.78 0.14 150)` | Success text and icons on `surface` or `success-soft` (4.6:1 or more). Always with a word or icon |
+| `success-soft` | `#e9f4ec` | `#14261a` | Background of success badges and toasts |
+| `warning` | `oklch(0.5 0.11 70)` | `oklch(0.8 0.13 75)` | Warning text and icons on `surface` or `warning-soft` (5.5:1 or more) |
+| `warning-soft` | `#fbf1df` | `#2a2112` | Background of warning badges and toasts |
+| `danger` | `oklch(0.53 0.19 27)` | `oklch(0.72 0.16 25)` | Danger text and icons: field errors, delete menu items, danger badges (5.0:1 or more on `surface` and `danger-soft`) |
+| `danger-key` | `oklch(0.53 0.19 27)` | `oklch(0.55 0.17 25)` | Fill of a danger button. 5.3:1 or more with `on-danger` |
+| `danger-soft` | `#fbeaea` | `#2c1616` | Background of danger badges and error toasts |
+| `on-danger` | `#ffffff` | `#ffffff` | Text on a danger key |
+
+Every text and background pair in this table keeps at least 4.5:1 in both themes. Depth (see [Depth](depth.md)) is added on top and never lowers contrast.
 
 <!-- docs/depth.md -->
 
@@ -225,7 +227,6 @@ Each depth class applies a whole role in one class. Use them for new parts befor
 - **One rule for "selected".** A single choice among peers (tabs, a segmented filter) is a raised key sliding in a well. An on/off state (a toolbar toggle) is pressed into a well. Never mix the two in one row.
 - Content areas are flat. There is no card component: group content with spacing, a heading and a `Separator`.
 - No textures, no glass or blur behind text, and no neumorphism. Every fill and text pair keeps its contrast, and depth is added on top.
-- In High contrast, depth turns into outlines on every well and key, and `shadow-pressed` becomes an inner ring.
 
 ## Shadow tokens
 
@@ -257,16 +258,6 @@ Each depth class applies a whole role in one class. Use them for new parts befor
 --mu-shadow-pop: 0 8px 24px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.06);
 ```
 
-### High contrast
-
-```css
---mu-shadow-track: 0 0 0 0 rgba(0,0,0,0);
---mu-shadow-key: 0 0 0 1px #6b6b6b;
---mu-shadow-raised: 0 0 0 1px #000000;
---mu-shadow-pressed: inset 0 0 0 2px #000000;
---mu-shadow-pop: 0 0 0 1px #000000;
-```
-
 <!-- docs/typography.md -->
 
 # Typography
@@ -406,7 +397,9 @@ Buttons, inputs and badges are never pills.
 | `control-md` | 32px | Default control height |
 | `inset` | 2px | Well-to-key inset at every size |
 | `hit-area` | 44px | Minimum touch target on `pointer: coarse`, added invisibly around a control |
-| `focus-width` | 2px | Width and offset of the focus ring |
+| `focus-width` | 2px | Width of the keyboard focus ring |
+| `focus-offset` | 1px | Gap between a control's edge and its focus ring, so the ring stays visible on ink fills |
+| `focus-edge-width` | 1.5px | Edge width of a focused field |
 | `icon-xs` | 12px | Icons in xs controls and badges |
 | `icon-sm` | 14px | Icons in sm controls |
 | `icon-md` | 16px | Icons in md controls and nav rows |
@@ -495,13 +488,18 @@ Every interactive component handles these states the same way.
 | Loading | The control keeps its size, hides its label and shows a Spinner. It is inert while loading |
 | Disabled | 45% opacity, `cursor: not-allowed`, and no hover or press response |
 | Invalid | A `danger` edge on the field, plus an error line with an icon under it |
-| Focus | A 2px `focus` outline with a 2px offset, on `:focus-visible` only |
+| Focus (field) | The edge darkens from 1px `edge` to 1.5px `focus-edge` (ink), on click and keyboard alike. No ring around it. An invalid field's `danger` edge thickens the same way |
+| Focus (everything else) | A 2px ink `focus` ring 1px outside the edge, on `:focus-visible` (keyboard) only |
+| Focus (inside a widget) | Menu items and options take the `hover` fill. No ring |
 
 ## Rules
 
 - Hover never changes size, weight or layout.
 - An input never changes its background on hover or focus, so it never looks disabled.
-- Focus rings show for keyboard focus only (`:focus-visible`), never on mouse click.
+- Focus rings show for keyboard focus only (`:focus-visible`), never on mouse click. Fields are the exception: a clicked field is focused for typing, so its edge darkens, but it still gets no ring.
+- Focus is ink, never blue, and never a ring floating away from the control.
+- Popups, dialogs and panels never show a focus ring when they open and take focus.
+- Every focus style survives forced-colors mode: rings are outlines, and fields add a transparent outline that the system paints.
 - Disabled controls stay in place. Prefer explaining why something is unavailable over hiding it.
 - Loading never shows a spinner for less than about 300ms; short waits pass silently.
 
@@ -887,7 +885,6 @@ Provide `href` and `children`.
 ## Style
 
 - `accent` text that underlines on hover: the one place the hue appears at rest. `muted` uses `ink-muted`.
-- High contrast underlines every link.
 
 <!-- docs/components/field.md -->
 
@@ -993,13 +990,13 @@ Wraps Base UI's [Input](https://base-ui.com/react/components/input), so inside a
 - Provide a `Field.Label` or `aria-label`. Never a placeholder alone.
 - `prefix` and `suffix` hold an icon, a short word or a small ghost Button.
 - `sm` for filters inside panels, `md` everywhere else.
-- An app's own one-line field, such as a tag input around a native `<input>`, takes `inputClasses()` on its box: focus anywhere inside shows the ring, and `aria-invalid="true"` or `aria-disabled="true"` on the box show those states. See [Class functions](../custom-components.md#class-functions).
+- An app's own one-line field, such as a tag input around a native `<input>`, takes `inputClasses()` on its box: focus anywhere inside darkens the edge, and `aria-invalid="true"` or `aria-disabled="true"` on the box show those states. See [Class functions](../custom-components.md#class-functions).
 
 ## Style
 
 - Flat `surface` with a 1px `edge` and a faint inner shadow from the top. Never a gray well, so it never reads as disabled.
 - Typed text weight 400; placeholder `ink-muted`.
-- Hover darkens the edge to `ink-muted`; focus adds the ring. The background never changes.
+- Hover darkens the edge to `ink-muted`; focus turns it into a 1.5px `focus-edge` (ink), on click and keyboard alike. There is no ring around the field. The background never changes.
 - The side with a prefix or suffix has 2px less padding.
 
 <!-- docs/components/textarea.md -->
@@ -1036,7 +1033,7 @@ Base UI has no textarea part, so this renders Base UI's `Field.Control` as a `<t
 
 - Provide a `Field.Label` or `aria-label`.
 - Rich content is not a textarea: use the editor (`@usememos/editor`) with [Prose](prose.md).
-- An app's own multi-line field, such as a content-editable editor, takes `textareaClasses()`: focus shows the ring, and `aria-invalid="true"` or `aria-disabled="true"` show those states. See [Class functions](../custom-components.md#class-functions).
+- An app's own multi-line field, such as a content-editable editor, takes `textareaClasses()`: focus darkens the edge, and `aria-invalid="true"` or `aria-disabled="true"` show those states. See [Class functions](../custom-components.md#class-functions).
 
 ## Style
 
@@ -1193,7 +1190,7 @@ Base UI's props pass through: `items`, `value`, `defaultValue`, `onValueChange`,
 
 ## Style
 
-- The box is an [Input](input.md): flat `surface`, `edge`, focus ring on the box. The search icon and chevron are `ink-muted`; the chevron turns `ink` on hover.
+- The box is an [Input](input.md): flat `surface`, `edge`, and the focused edge on the box. The search icon and chevron are `ink-muted`; the chevron turns `ink` on hover.
 - List: `mu-popup`, `space-1` padding, as wide as the input and at least `menu-width`, at most `list-height` (240px) tall, then it scrolls.
 - Rows are a control height, text weight 400; the highlighted row uses `hover`; the chosen row has a check at the end.
 - Empty text: `body` in `ink-muted`, `space-3` by `space-4` padding.
@@ -2173,7 +2170,7 @@ Inside another page (the web clipper, an embed), mount the UI under a `.mu-root`
 
 ## Choosing a theme
 
-Set `data-theme="light" | "dark" | "contrast"` on the root element or on any `.mu-root`. Without the attribute the tokens are Light. The app, not the package, reads `prefers-color-scheme` and the user's saved choice. See [Color](color.md#themes). An app can add its own themes on top of these three; see [App themes](color.md#app-themes).
+Set `data-theme="light" | "dark"` on the root element or on any `.mu-root`. Without the attribute the tokens are Light. The app, not the package, reads `prefers-color-scheme` and the user's saved choice. See [Color](color.md#themes). An app can add its own themes on top of these two; see [App themes](color.md#app-themes).
 
 An app changes only the color, shadow and font tokens. Every other token and every `mu-*` class rule is internal. See [What an app can change](color.md#what-an-app-can-change).
 
@@ -2266,7 +2263,7 @@ toast.add({ title: "Note archived", type: "success" });
 1. A reason: a screen in a product needs it, and no existing component or pattern covers it.
 2. A generic name and API that would make sense in any of our products.
 3. Tokens only: no raw colors, sizes or shadows.
-4. Both sizes, all [states](states.md), all three themes, and reduced motion.
+4. Both sizes, all [states](states.md), both themes, and reduced motion.
 5. Keyboard and screen reader behavior from Base UI.
 6. A page in `docs/components/` and an entry in the [inventory](components/README.md).
 
@@ -2284,7 +2281,7 @@ An app always has parts the package doesn't ship and shouldn't: product parts (a
 2. **Behavior from Base UI.** Build anything with focus, keyboard, an open state or a popup on [`@base-ui/react`](https://base-ui.com), as the package does. It is a peer dependency of the package at one exact version, so the app's components and the package's share one copy. Upgrade it only with the package.
 3. **Looks from a class function** when the part should look like a component: an anchor that looks like a Button, an editor that looks like a Textarea, a suggestion list that looks like a Menu. See [Class functions](#class-functions).
 4. **Otherwise, from the public classes and tokens.** Size the part with a size row class and read the [row variables](#row-variables); give it depth with a [depth class](depth.md); set text with a [type class](typography.md); color it with `var(--mu-<token>)` or the [Tailwind utilities](#tailwind-css).
-5. **Check it like a component.** It works in Light, Dark and High contrast and under reduced motion; text keeps 4.5:1 contrast; focus shows on `:focus-visible` (`mu-focus`); touch targets reach 44px (`mu-hit`); icon-only controls have an `aria-label` and a [Tooltip](components/tooltip.md).
+5. **Check it like a component.** It works in Light and Dark and under reduced motion; text keeps 4.5:1 contrast; focus shows on `:focus-visible` (`mu-focus`); touch targets reach 44px (`mu-hit`); icon-only controls have an `aria-label` and a [Tooltip](components/tooltip.md).
 
 ## Class functions
 
@@ -2301,7 +2298,7 @@ A class function returns the classes that make any element look like a component
 
 State is set with attributes, never with extra classes:
 
-- A field shows the focus ring when it or anything inside it has focus. `aria-invalid="true"` shows the error edge, and `aria-disabled="true"` dims it.
+- A field darkens its edge to `focus-edge` when it or anything inside it has focus. `aria-invalid="true"` shows the error edge, and `aria-disabled="true"` dims it.
 - A menu row is highlighted while it has `data-highlighted`, and dimmed with `data-disabled`. Base UI sets both; a list the app drives itself sets them on the active row.
 - A popup fades in with `data-starting-style` and out with `data-ending-style`, which Base UI's popups set.
 
@@ -2341,7 +2338,7 @@ Apply these classes to an app's own elements. Don't override their rules: the pr
 | `mu-popup` | `surface`, `shadow-pop` and `radius-xl` | A part that floats |
 | `mu-popup-motion` | The popup fade and rise, none under reduced motion | A popup Base UI opens |
 | `mu-positioner` | The popup layer | A popup's positioner |
-| `mu-focus` | The focus ring on `:focus-visible` | Anything focusable |
+| `mu-focus` | The ink focus ring on `:focus-visible`, 1px outside the edge | Anything focusable |
 | `mu-hit` | An invisible 44px touch target on `pointer: coarse` | Anything pressable smaller than 44px |
 | `mu-icon` | Icon size and stroke | A Lucide icon outside a control |
 | `mu-visually-hidden` | Hidden on screen, read by screen readers | Text for screen readers only |
@@ -2393,7 +2390,7 @@ An app on Tailwind CSS v4 loads `tailwind.css` after the package's other stylesh
 @import "@usememos/ui/tailwind.css";
 ```
 
-It maps the 26 color tokens, five shadow tokens, seven radius tokens and three font tokens to utilities with an `mu-` prefix, so they never clash with an app's own colors:
+It maps the 27 color tokens, five shadow tokens, seven radius tokens and three font tokens to utilities with an `mu-` prefix, so they never clash with an app's own colors:
 
 | Token | Utility |
 | --- | --- |

package/llms.txt

@@ -2,12 +2,12 @@
 
 > Memos UI is one calm, dense and tactile system for every product we build: memos (the app), the website, the web clipper and whatever comes next. It reads like ink on paper: pure grays, black ink for the one thing that matters, and no brand color competing with what people write. Controls have a little physical depth, so you can tell at a glance what holds a value and what you can press.
 
-React components on Base UI, CSS tokens and foundation styles. Load `@usememos/ui/tokens.css`, then `@usememos/ui/styles.css`; set `data-theme` to `light`, `dark` or `contrast` on the root element. Components are compound parts named after Base UI's anatomy (`Menu.Root`, `Menu.Trigger`, `Menu.Popup`, `Menu.Item`); icons are Lucide elements. Every docs page is in llms-full.txt next to this file.
+React components on Base UI, CSS tokens and foundation styles. Load `@usememos/ui/tokens.css`, then `@usememos/ui/styles.css`; set `data-theme` to `light` or `dark` on the root element. Components are compound parts named after Base UI's anatomy (`Menu.Root`, `Menu.Trigger`, `Menu.Popup`, `Menu.Item`); icons are Lucide elements. Every docs page is in llms-full.txt next to this file.
 
 ## Docs
 
 - [Principles and voice](https://github.com/usememos/ui/blob/main/docs/principles.md): The taste in six rules, and how interface text is written
-- [Color](https://github.com/usememos/ui/blob/main/docs/color.md): Color roles, every color token in Light, Dark and High contrast, and how themes are chosen
+- [Color](https://github.com/usememos/ui/blob/main/docs/color.md): Color roles, every color token in Light and Dark, and how themes are chosen
 - [Depth](https://github.com/usememos/ui/blob/main/docs/depth.md): The tactile model: recessed, key, raised, popup and flat; shadow tokens
 - [Typography](https://github.com/usememos/ui/blob/main/docs/typography.md): The system font, the type scale and text rules
 - [Size, spacing and layout](https://github.com/usememos/ui/blob/main/docs/layout.md): Control sizes, the 4px scale, radius, layout widths, breakpoints and layers

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usememos/ui",
-  "version": "26.10.5",
+  "version": "26.11.0",
   "description": "The Memos UI design system: tokens, foundation styles and React components for usememos products.",
   "keywords": [
     "react",