@usememos/ui 26.11.15 → 26.11.17

package/README.md

@@ -2,7 +2,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 flat: pure grays, ink for emphasis, and clear fills and borders for controls and state.
+- Calm, dense and flat: a warm-gray paper canvas in Light, ink for emphasis, and clear fills and borders for controls and state.
 - 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).
 

package/dist/components/collapsible/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collapsible/index.tsx"],
-  "sourcesContent": ["import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';\nimport { ChevronDown } from 'lucide-react';\nimport { forwardRef } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { SizeContext, useRowSize } from '../../internal/size';\nimport type { Size } from '../../types';\nimport { buttonClasses } from '../button';\n\nexport interface RootProps extends BaseCollapsible.Root.Props {\n  size?: Exclude<Size, 'xs'>;\n}\n\n/** Hides content behind one trigger until people ask for it. Holds a Trigger and a Panel. */\nexport const Root = forwardRef<HTMLDivElement, RootProps>(function CollapsibleRoot({ size, className, ...props }, ref) {\n  const resolved = useRowSize(size);\n  return (\n    <SizeContext.Provider value={resolved}>\n      <BaseCollapsible.Root ref={ref} {...props} className={withClass('mu-collapsible', className)} />\n    </SizeContext.Provider>\n  );\n});\n\nexport interface TriggerProps extends BaseCollapsible.Trigger.Props {}\n\n/** A ghost key with a chevron at the end that turns while the panel is open. */\nexport const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function CollapsibleTrigger({ className, children, ...props }, ref) {\n  const size = useRowSize();\n  return (\n    <BaseCollapsible.Trigger ref={ref} {...props} className={withClass(`mu-collapsible-trigger ${buttonClasses({ variant: 'ghost', size })}`, className)}>\n      <span className=\"mu-button-label\">{children}</span>\n      <ChevronDown className=\"mu-collapsible-chevron\" aria-hidden />\n    </BaseCollapsible.Trigger>\n  );\n});\n\nexport interface PanelProps extends BaseCollapsible.Panel.Props {}\n\n/** The hidden content. It fades and rises in; its height does not animate. */\nexport const Panel = forwardRef<HTMLDivElement, PanelProps>(function CollapsiblePanel({ className, ...props }, ref) {\n  return <BaseCollapsible.Panel ref={ref} {...props} className={withClass('mu-collapsible-panel', className)} />;\n});\n"],
+  "sourcesContent": ["import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';\nimport { ChevronDown } from 'lucide-react';\nimport { forwardRef } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { SizeContext, useRowSize } from '../../internal/size';\nimport type { Size } from '../../types';\nimport { buttonClasses } from '../button';\n\nexport interface RootProps extends BaseCollapsible.Root.Props {\n  size?: Exclude<Size, 'xs'>;\n}\n\n/** Hides content behind one trigger until people ask for it. Holds a Trigger and a Panel. */\nexport const Root = forwardRef<HTMLDivElement, RootProps>(function CollapsibleRoot({ size, className, ...props }, ref) {\n  const resolved = useRowSize(size);\n  return (\n    <SizeContext.Provider value={resolved}>\n      <BaseCollapsible.Root ref={ref} {...props} className={withClass('mu-collapsible', className)} />\n    </SizeContext.Provider>\n  );\n});\n\nexport interface TriggerProps extends BaseCollapsible.Trigger.Props {}\n\n/** A ghost key with a chevron at the end that points up while the panel is open. */\nexport const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function CollapsibleTrigger({ className, children, ...props }, ref) {\n  const size = useRowSize();\n  return (\n    <BaseCollapsible.Trigger ref={ref} {...props} className={withClass(`mu-collapsible-trigger ${buttonClasses({ variant: 'ghost', size })}`, className)}>\n      <span className=\"mu-button-label\">{children}</span>\n      <ChevronDown className=\"mu-collapsible-chevron\" aria-hidden />\n    </BaseCollapsible.Trigger>\n  );\n});\n\nexport interface PanelProps extends BaseCollapsible.Panel.Props {}\n\n/** The hidden content. It fades and rises in; its height does not animate. */\nexport const Panel = forwardRef<HTMLDivElement, PanelProps>(function CollapsiblePanel({ className, ...props }, ref) {\n  return <BaseCollapsible.Panel ref={ref} {...props} className={withClass('mu-collapsible-panel', className)} />;\n});\n"],
   "mappings": ";AAAA,OAAS,eAAeA,MAAuB,6BAC/C,OAAS,eAAAC,MAAmB,eAC5B,OAAS,cAAAC,MAAkB,QAC3B,OAAS,aAAAC,MAAiB,+BAC1B,OAAS,eAAAC,EAAa,cAAAC,MAAkB,yBAExC,OAAS,iBAAAC,MAAqB,qBAWxB,cAAAC,EAWF,QAAAC,MAXE,oBAJC,IAAMC,EAAOP,EAAsC,SAAyB,CAAE,KAAAQ,EAAM,UAAAC,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACrH,IAAMC,EAAWT,EAAWK,CAAI,EAChC,OACEH,EAACH,EAAY,SAAZ,CAAqB,MAAOU,EAC3B,SAAAP,EAACP,EAAgB,KAAhB,CAAqB,IAAKa,EAAM,GAAGD,EAAO,UAAWT,EAAU,iBAAkBQ,CAAS,EAAG,EAChG,CAEJ,CAAC,EAKYI,EAAUb,EAA4C,SAA4B,CAAE,UAAAS,EAAW,SAAAK,EAAU,GAAGJ,CAAM,EAAGC,EAAK,CACrI,IAAMH,EAAOL,EAAW,EACxB,OACEG,EAACR,EAAgB,QAAhB,CAAwB,IAAKa,EAAM,GAAGD,EAAO,UAAWT,EAAU,0BAA0BG,EAAc,CAAE,QAAS,QAAS,KAAAI,CAAK,CAAC,CAAC,GAAIC,CAAS,EACjJ,UAAAJ,EAAC,QAAK,UAAU,kBAAmB,SAAAS,EAAS,EAC5CT,EAACN,EAAA,CAAY,UAAU,yBAAyB,cAAW,GAAC,GAC9D,CAEJ,CAAC,EAKYgB,EAAQf,EAAuC,SAA0B,CAAE,UAAAS,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAClH,OAAON,EAACP,EAAgB,MAAhB,CAAsB,IAAKa,EAAM,GAAGD,EAAO,UAAWT,EAAU,uBAAwBQ,CAAS,EAAG,CAC9G,CAAC",
   "names": ["BaseCollapsible", "ChevronDown", "forwardRef", "withClass", "SizeContext", "useRowSize", "buttonClasses", "jsx", "jsxs", "Root", "size", "className", "props", "ref", "resolved", "Trigger", "children", "Panel"]
 }

package/dist/components/select/index.js

@@ -1,3 +1,3 @@
 'use client';
-import{Select as t}from"@base-ui/react/select";import{Check as f,ChevronDown as x,ChevronsUpDown as g,ChevronUp as B}from"lucide-react";import{forwardRef as l}from"react";import{withClass as n}from"../../internal/class-name.js";import{splitPositioner as v}from"../../internal/popup.js";import{SizeContext as I,useRowSize as m}from"../../internal/size.js";import{buttonClasses as T}from"../button/index.js";import{jsx as e,jsxs as P}from"react/jsx-runtime";function E({size:a,...o}){let r=m(a);return e(I.Provider,{value:r,children:e(t.Root,{...o})})}var V=l(function({variant:o="neutral",className:r,children:s,...i},p){let c=m();return P(t.Trigger,{ref:p,...i,className:n(`mu-select-trigger ${T({variant:o,size:c})}`,r),children:[s,e(t.Icon,{className:"mu-select-icon",children:e(g,{"aria-hidden":!0})})]})}),R=l(function({className:o,...r},s){return e(t.Value,{ref:s,...r,className:n("mu-select-value",o)})}),z=l(function({container:o,className:r,children:s,...i},p){let c=m(),[d,S]=v(i);return e(t.Portal,{container:o,children:e(t.Positioner,{sideOffset:4,...d,className:"mu-positioner mu-select-positioner",children:P(t.Popup,{ref:p,...S,className:n(`mu-select-popup mu-popup mu-popup-motion mu-base mu-s-${c}`,r),children:[e(t.ScrollUpArrow,{className:"mu-select-scroll-arrow",render:u=>e("div",{...u,children:e(B,{"aria-hidden":!0})})}),e(t.List,{className:"mu-select-list",children:s}),e(t.ScrollDownArrow,{className:"mu-select-scroll-arrow",render:u=>e("div",{...u,children:e(x,{"aria-hidden":!0})})})]})})})}),C=l(function({icon:o,className:r,children:s,...i},p){return P(t.Item,{ref:p,...i,className:n("mu-select-item",r),children:[o,e(t.ItemText,{className:"mu-select-item-text",children:s}),e("span",{className:"mu-select-indicator",children:e(t.ItemIndicator,{render:e(f,{"aria-hidden":!0}),children:null})})]})}),D=l(function({className:o,...r},s){return e(t.Group,{ref:s,...r,className:n("mu-select-group",o)})}),y=l(function({className:o,...r},s){return e(t.GroupLabel,{ref:s,...r,className:n("mu-select-group-label mu-label-sm",o)})}),H=l(function({className:o,...r},s){return e(t.Separator,{ref:s,...r,className:n("mu-select-separator",o)})});export{D as Group,y as GroupLabel,C as Item,z as Popup,E as Root,H as Separator,V as Trigger,R as Value};
+import{Select as t}from"@base-ui/react/select";import{Check as x,ChevronDown as d,ChevronUp as g}from"lucide-react";import{forwardRef as l}from"react";import{withClass as n}from"../../internal/class-name.js";import{splitPositioner as B}from"../../internal/popup.js";import{SizeContext as I,useRowSize as m}from"../../internal/size.js";import{buttonClasses as T}from"../button/index.js";import{jsx as e,jsxs as P}from"react/jsx-runtime";function E({size:a,...r}){let o=m(a);return e(I.Provider,{value:o,children:e(t.Root,{...r})})}var V=l(function({variant:r="neutral",className:o,children:s,...i},p){let c=m();return P(t.Trigger,{ref:p,...i,className:n(`mu-select-trigger ${T({variant:r,size:c})}`,o),children:[s,e(t.Icon,{className:"mu-select-icon",children:e(d,{"aria-hidden":!0})})]})}),w=l(function({className:r,...o},s){return e(t.Value,{ref:s,...o,className:n("mu-select-value",r)})}),R=l(function({container:r,className:o,children:s,...i},p){let c=m(),[S,f]=B(i);return e(t.Portal,{container:r,children:e(t.Positioner,{sideOffset:4,align:"start",alignItemWithTrigger:!1,...S,className:"mu-positioner mu-select-positioner",children:P(t.Popup,{ref:p,...f,className:n(`mu-select-popup mu-popup mu-popup-motion mu-base mu-s-${c}`,o),children:[e(t.ScrollUpArrow,{className:"mu-select-scroll-arrow",render:u=>e("div",{...u,children:e(g,{"aria-hidden":!0})})}),e(t.List,{className:"mu-select-list",children:s}),e(t.ScrollDownArrow,{className:"mu-select-scroll-arrow",render:u=>e("div",{...u,children:e(d,{"aria-hidden":!0})})})]})})})}),z=l(function({icon:r,className:o,children:s,...i},p){return P(t.Item,{ref:p,...i,className:n("mu-select-item",o),children:[r,e(t.ItemText,{className:"mu-select-item-text",children:s}),e("span",{className:"mu-select-indicator",children:e(t.ItemIndicator,{render:e(x,{"aria-hidden":!0}),children:null})})]})}),y=l(function({className:r,...o},s){return e(t.Group,{ref:s,...o,className:n("mu-select-group",r)})}),C=l(function({className:r,...o},s){return e(t.GroupLabel,{ref:s,...o,className:n("mu-select-group-label mu-label-sm",r)})}),D=l(function({className:r,...o},s){return e(t.Separator,{ref:s,...o,className:n("mu-select-separator",r)})});export{y as Group,C as GroupLabel,z as Item,R as Popup,E as Root,D as Separator,V as Trigger,w as Value};
 //# sourceMappingURL=index.js.map

package/dist/components/select/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/select/index.tsx"],
-  "sourcesContent": ["import { Select as BaseSelect } from '@base-ui/react/select';\nimport { Check, ChevronDown, ChevronsUpDown, ChevronUp } from 'lucide-react';\nimport { forwardRef, type ReactNode } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { splitPositioner } from '../../internal/popup';\nimport { SizeContext, useRowSize } from '../../internal/size';\nimport type { IconElement, Size } from '../../types';\nimport { buttonClasses } from '../button';\n\nexport type RootProps<Value, Multiple extends boolean | undefined = false> = BaseSelect.Root.Props<Value, Multiple> & {\n  size?: Exclude<Size, 'xs'>;\n};\n\n/** Groups the trigger and the list, and holds the value. Pass `items` so `Value` shows labels, not raw values. */\nexport function Root<Value, Multiple extends boolean | undefined = false>({ size, ...props }: RootProps<Value, Multiple>) {\n  const resolved = useRowSize(size);\n  return (\n    <SizeContext.Provider value={resolved}>\n      <BaseSelect.Root {...props} />\n    </SizeContext.Provider>\n  );\n}\n\nexport interface TriggerProps extends BaseSelect.Trigger.Props {\n  /**\n   * `neutral` (default) is a flat key, for a value in a form. `ghost` is a\n   * flat row that fills with `hover`, for a switcher in a sidebar or toolbar.\n   */\n  variant?: 'neutral' | 'ghost';\n}\n\n/** A neutral key that shows the value, with a chevron at the end. Holds `Value`. */\nexport const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function SelectTrigger({ variant = 'neutral', className, children, ...props }, ref) {\n  const size = useRowSize();\n  return (\n    <BaseSelect.Trigger ref={ref} {...props} className={withClass(`mu-select-trigger ${buttonClasses({ variant, size })}`, className)}>\n      {children}\n      <BaseSelect.Icon className=\"mu-select-icon\">\n        <ChevronsUpDown aria-hidden />\n      </BaseSelect.Icon>\n    </BaseSelect.Trigger>\n  );\n});\n\nexport interface ValueProps extends BaseSelect.Value.Props {}\n\n/** The chosen item's label, or `placeholder` in `text-secondary`. */\nexport const Value = forwardRef<HTMLSpanElement, ValueProps>(function SelectValue({ className, ...props }, ref) {\n  return <BaseSelect.Value ref={ref} {...props} className={withClass('mu-select-value', className)} />;\n});\n\ntype PositionerProps = Pick<\n  BaseSelect.Positioner.Props,\n  | 'side'\n  | 'align'\n  | 'collisionAvoidance'\n  | 'collisionBoundary'\n  | 'sticky'\n  | 'anchor'\n  | 'positionMethod'\n  | 'disableAnchorTracking'\n  | 'alignItemWithTrigger'\n>;\n\nexport interface PopupProps extends BaseSelect.Popup.Props, PositionerProps {\n  /** Where the list is portaled to. Default `document.body`. */\n  container?: BaseSelect.Portal.Props['container'];\n}\n\n/**\n * The list of items. By default it opens over the trigger with the chosen\n * item on top of the value; `alignItemWithTrigger={false}` opens it below.\n */\nexport const Popup = forwardRef<HTMLDivElement, PopupProps>(function SelectPopup({ container, className, children, ...props }, ref) {\n  const size = useRowSize();\n  const [positioner, rest] = splitPositioner(props);\n  return (\n    <BaseSelect.Portal container={container}>\n      <BaseSelect.Positioner sideOffset={4} {...positioner} className=\"mu-positioner mu-select-positioner\">\n        <BaseSelect.Popup ref={ref} {...rest} className={withClass(`mu-select-popup mu-popup mu-popup-motion mu-base mu-s-${size}`, className)}>\n          <BaseSelect.ScrollUpArrow className=\"mu-select-scroll-arrow\" render={(arrowProps) => <div {...arrowProps}><ChevronUp aria-hidden /></div>} />\n          <BaseSelect.List className=\"mu-select-list\">{children}</BaseSelect.List>\n          <BaseSelect.ScrollDownArrow className=\"mu-select-scroll-arrow\" render={(arrowProps) => <div {...arrowProps}><ChevronDown aria-hidden /></div>} />\n        </BaseSelect.Popup>\n      </BaseSelect.Positioner>\n    </BaseSelect.Portal>\n  );\n});\n\nexport interface ItemProps extends BaseSelect.Item.Props {\n  /** A Lucide element before the label. */\n  icon?: IconElement;\n  children?: ReactNode;\n}\n\n/** One option, with a check at the end when chosen. */\nexport const Item = forwardRef<HTMLDivElement, ItemProps>(function SelectItem({ icon, className, children, ...props }, ref) {\n  return (\n    <BaseSelect.Item ref={ref} {...props} className={withClass('mu-select-item', className)}>\n      {icon}\n      <BaseSelect.ItemText className=\"mu-select-item-text\">{children}</BaseSelect.ItemText>\n      <span className=\"mu-select-indicator\">\n        {/* The empty children replace Base UI's default \"\u2714\uFE0F\" text inside the svg. */}\n        <BaseSelect.ItemIndicator render={<Check aria-hidden />}>{null}</BaseSelect.ItemIndicator>\n      </span>\n    </BaseSelect.Item>\n  );\n});\n\nexport interface GroupProps extends BaseSelect.Group.Props {}\n\n/** A labeled set of items. */\nexport const Group = forwardRef<HTMLDivElement, GroupProps>(function SelectGroup({ className, ...props }, ref) {\n  return <BaseSelect.Group ref={ref} {...props} className={withClass('mu-select-group', className)} />;\n});\n\nexport interface GroupLabelProps extends BaseSelect.GroupLabel.Props {}\n\n/** The name of a Group. */\nexport const GroupLabel = forwardRef<HTMLDivElement, GroupLabelProps>(function SelectGroupLabel({ className, ...props }, ref) {\n  return <BaseSelect.GroupLabel ref={ref} {...props} className={withClass('mu-select-group-label mu-label-sm', className)} />;\n});\n\nexport interface SeparatorProps extends BaseSelect.Separator.Props {}\n\n/** A line between groups of items. */\nexport const Separator = forwardRef<HTMLDivElement, SeparatorProps>(function SelectSeparator({ className, ...props }, ref) {\n  return <BaseSelect.Separator ref={ref} {...props} className={withClass('mu-select-separator', className)} />;\n});\n"],
-  "mappings": ";AAAA,OAAS,UAAUA,MAAkB,wBACrC,OAAS,SAAAC,EAAO,eAAAC,EAAa,kBAAAC,EAAgB,aAAAC,MAAiB,eAC9D,OAAS,cAAAC,MAAkC,QAC3C,OAAS,aAAAC,MAAiB,+BAC1B,OAAS,mBAAAC,MAAuB,0BAChC,OAAS,eAAAC,EAAa,cAAAC,MAAkB,yBAExC,OAAS,iBAAAC,MAAqB,qBAWxB,cAAAC,EAiBF,QAAAC,MAjBE,oBAJC,SAASC,EAA0D,CAAE,KAAAC,EAAM,GAAGC,CAAM,EAA+B,CACxH,IAAMC,EAAWP,EAAWK,CAAI,EAChC,OACEH,EAACH,EAAY,SAAZ,CAAqB,MAAOQ,EAC3B,SAAAL,EAACX,EAAW,KAAX,CAAiB,GAAGe,EAAO,EAC9B,CAEJ,CAWO,IAAME,EAAUZ,EAA4C,SAAuB,CAAE,QAAAa,EAAU,UAAW,UAAAC,EAAW,SAAAC,EAAU,GAAGL,CAAM,EAAGM,EAAK,CACrJ,IAAMP,EAAOL,EAAW,EACxB,OACEG,EAACZ,EAAW,QAAX,CAAmB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAU,qBAAqBI,EAAc,CAAE,QAAAQ,EAAS,KAAAJ,CAAK,CAAC,CAAC,GAAIK,CAAS,EAC7H,UAAAC,EACDT,EAACX,EAAW,KAAX,CAAgB,UAAU,iBACzB,SAAAW,EAACR,EAAA,CAAe,cAAW,GAAC,EAC9B,GACF,CAEJ,CAAC,EAKYmB,EAAQjB,EAAwC,SAAqB,CAAE,UAAAc,EAAW,GAAGJ,CAAM,EAAGM,EAAK,CAC9G,OAAOV,EAACX,EAAW,MAAX,CAAiB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAU,kBAAmBa,CAAS,EAAG,CACpG,CAAC,EAwBYI,EAAQlB,EAAuC,SAAqB,CAAE,UAAAmB,EAAW,UAAAL,EAAW,SAAAC,EAAU,GAAGL,CAAM,EAAGM,EAAK,CAClI,IAAMP,EAAOL,EAAW,EAClB,CAACgB,EAAYC,CAAI,EAAInB,EAAgBQ,CAAK,EAChD,OACEJ,EAACX,EAAW,OAAX,CAAkB,UAAWwB,EAC5B,SAAAb,EAACX,EAAW,WAAX,CAAsB,WAAY,EAAI,GAAGyB,EAAY,UAAU,qCAC9D,SAAAb,EAACZ,EAAW,MAAX,CAAiB,IAAKqB,EAAM,GAAGK,EAAM,UAAWpB,EAAU,yDAAyDQ,CAAI,GAAIK,CAAS,EACnI,UAAAR,EAACX,EAAW,cAAX,CAAyB,UAAU,yBAAyB,OAAS2B,GAAehB,EAAC,OAAK,GAAGgB,EAAY,SAAAhB,EAACP,EAAA,CAAU,cAAW,GAAC,EAAE,EAAQ,EAC3IO,EAACX,EAAW,KAAX,CAAgB,UAAU,iBAAkB,SAAAoB,EAAS,EACtDT,EAACX,EAAW,gBAAX,CAA2B,UAAU,yBAAyB,OAAS2B,GAAehB,EAAC,OAAK,GAAGgB,EAAY,SAAAhB,EAACT,EAAA,CAAY,cAAW,GAAC,EAAE,EAAQ,GACjJ,EACF,EACF,CAEJ,CAAC,EASY0B,EAAOvB,EAAsC,SAAoB,CAAE,KAAAwB,EAAM,UAAAV,EAAW,SAAAC,EAAU,GAAGL,CAAM,EAAGM,EAAK,CAC1H,OACET,EAACZ,EAAW,KAAX,CAAgB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAU,iBAAkBa,CAAS,EACnF,UAAAU,EACDlB,EAACX,EAAW,SAAX,CAAoB,UAAU,sBAAuB,SAAAoB,EAAS,EAC/DT,EAAC,QAAK,UAAU,sBAEd,SAAAA,EAACX,EAAW,cAAX,CAAyB,OAAQW,EAACV,EAAA,CAAM,cAAW,GAAC,EAAK,cAAK,EACjE,GACF,CAEJ,CAAC,EAKY6B,EAAQzB,EAAuC,SAAqB,CAAE,UAAAc,EAAW,GAAGJ,CAAM,EAAGM,EAAK,CAC7G,OAAOV,EAACX,EAAW,MAAX,CAAiB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAU,kBAAmBa,CAAS,EAAG,CACpG,CAAC,EAKYY,EAAa1B,EAA4C,SAA0B,CAAE,UAAAc,EAAW,GAAGJ,CAAM,EAAGM,EAAK,CAC5H,OAAOV,EAACX,EAAW,WAAX,CAAsB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAU,oCAAqCa,CAAS,EAAG,CAC3H,CAAC,EAKYa,EAAY3B,EAA2C,SAAyB,CAAE,UAAAc,EAAW,GAAGJ,CAAM,EAAGM,EAAK,CACzH,OAAOV,EAACX,EAAW,UAAX,CAAqB,IAAKqB,EAAM,GAAGN,EAAO,UAAWT,EAAU,sBAAuBa,CAAS,EAAG,CAC5G,CAAC",
-  "names": ["BaseSelect", "Check", "ChevronDown", "ChevronsUpDown", "ChevronUp", "forwardRef", "withClass", "splitPositioner", "SizeContext", "useRowSize", "buttonClasses", "jsx", "jsxs", "Root", "size", "props", "resolved", "Trigger", "variant", "className", "children", "ref", "Value", "Popup", "container", "positioner", "rest", "arrowProps", "Item", "icon", "Group", "GroupLabel", "Separator"]
+  "sourcesContent": ["import { Select as BaseSelect } from '@base-ui/react/select';\nimport { Check, ChevronDown, ChevronUp } from 'lucide-react';\nimport { forwardRef, type ReactNode } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { splitPositioner } from '../../internal/popup';\nimport { SizeContext, useRowSize } from '../../internal/size';\nimport type { IconElement, Size } from '../../types';\nimport { buttonClasses } from '../button';\n\nexport type RootProps<Value, Multiple extends boolean | undefined = false> = BaseSelect.Root.Props<Value, Multiple> & {\n  size?: Exclude<Size, 'xs'>;\n};\n\n/** Groups the trigger and the list, and holds the value. Pass `items` so `Value` shows labels, not raw values. */\nexport function Root<Value, Multiple extends boolean | undefined = false>({ size, ...props }: RootProps<Value, Multiple>) {\n  const resolved = useRowSize(size);\n  return (\n    <SizeContext.Provider value={resolved}>\n      <BaseSelect.Root {...props} />\n    </SizeContext.Provider>\n  );\n}\n\nexport interface TriggerProps extends BaseSelect.Trigger.Props {\n  /**\n   * `neutral` (default) is a flat key, for a value in a form. `ghost` is a\n   * flat row that fills with `hover`, for a switcher in a sidebar or toolbar.\n   */\n  variant?: 'neutral' | 'ghost';\n}\n\n/** A neutral key that shows the value, with a chevron at the end. Holds `Value`. */\nexport const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function SelectTrigger({ variant = 'neutral', className, children, ...props }, ref) {\n  const size = useRowSize();\n  return (\n    <BaseSelect.Trigger ref={ref} {...props} className={withClass(`mu-select-trigger ${buttonClasses({ variant, size })}`, className)}>\n      {children}\n      <BaseSelect.Icon className=\"mu-select-icon\">\n        <ChevronDown aria-hidden />\n      </BaseSelect.Icon>\n    </BaseSelect.Trigger>\n  );\n});\n\nexport interface ValueProps extends BaseSelect.Value.Props {}\n\n/** The chosen item's label, or `placeholder` in `text-secondary`. */\nexport const Value = forwardRef<HTMLSpanElement, ValueProps>(function SelectValue({ className, ...props }, ref) {\n  return <BaseSelect.Value ref={ref} {...props} className={withClass('mu-select-value', className)} />;\n});\n\ntype PositionerProps = Pick<\n  BaseSelect.Positioner.Props,\n  | 'side'\n  | 'align'\n  | 'collisionAvoidance'\n  | 'collisionBoundary'\n  | 'sticky'\n  | 'anchor'\n  | 'positionMethod'\n  | 'disableAnchorTracking'\n  | 'alignItemWithTrigger'\n>;\n\nexport interface PopupProps extends BaseSelect.Popup.Props, PositionerProps {\n  /** Where the list is portaled to. Default `document.body`. */\n  container?: BaseSelect.Portal.Props['container'];\n}\n\n/**\n * The list of items. By default it opens below the trigger, aligned to its\n * start edge. `alignItemWithTrigger` can opt into value-aligned positioning.\n */\nexport const Popup = forwardRef<HTMLDivElement, PopupProps>(function SelectPopup({ container, className, children, ...props }, ref) {\n  const size = useRowSize();\n  const [positioner, rest] = splitPositioner(props);\n  return (\n    <BaseSelect.Portal container={container}>\n      <BaseSelect.Positioner sideOffset={4} align=\"start\" alignItemWithTrigger={false} {...positioner} className=\"mu-positioner mu-select-positioner\">\n        <BaseSelect.Popup ref={ref} {...rest} className={withClass(`mu-select-popup mu-popup mu-popup-motion mu-base mu-s-${size}`, className)}>\n          <BaseSelect.ScrollUpArrow className=\"mu-select-scroll-arrow\" render={(arrowProps) => <div {...arrowProps}><ChevronUp aria-hidden /></div>} />\n          <BaseSelect.List className=\"mu-select-list\">{children}</BaseSelect.List>\n          <BaseSelect.ScrollDownArrow className=\"mu-select-scroll-arrow\" render={(arrowProps) => <div {...arrowProps}><ChevronDown aria-hidden /></div>} />\n        </BaseSelect.Popup>\n      </BaseSelect.Positioner>\n    </BaseSelect.Portal>\n  );\n});\n\nexport interface ItemProps extends BaseSelect.Item.Props {\n  /** A Lucide element before the label. */\n  icon?: IconElement;\n  children?: ReactNode;\n}\n\n/** One option, with a check at the end when chosen. */\nexport const Item = forwardRef<HTMLDivElement, ItemProps>(function SelectItem({ icon, className, children, ...props }, ref) {\n  return (\n    <BaseSelect.Item ref={ref} {...props} className={withClass('mu-select-item', className)}>\n      {icon}\n      <BaseSelect.ItemText className=\"mu-select-item-text\">{children}</BaseSelect.ItemText>\n      <span className=\"mu-select-indicator\">\n        {/* The empty children replace Base UI's default \"\u2714\uFE0F\" text inside the svg. */}\n        <BaseSelect.ItemIndicator render={<Check aria-hidden />}>{null}</BaseSelect.ItemIndicator>\n      </span>\n    </BaseSelect.Item>\n  );\n});\n\nexport interface GroupProps extends BaseSelect.Group.Props {}\n\n/** A labeled set of items. */\nexport const Group = forwardRef<HTMLDivElement, GroupProps>(function SelectGroup({ className, ...props }, ref) {\n  return <BaseSelect.Group ref={ref} {...props} className={withClass('mu-select-group', className)} />;\n});\n\nexport interface GroupLabelProps extends BaseSelect.GroupLabel.Props {}\n\n/** The name of a Group. */\nexport const GroupLabel = forwardRef<HTMLDivElement, GroupLabelProps>(function SelectGroupLabel({ className, ...props }, ref) {\n  return <BaseSelect.GroupLabel ref={ref} {...props} className={withClass('mu-select-group-label mu-label-sm', className)} />;\n});\n\nexport interface SeparatorProps extends BaseSelect.Separator.Props {}\n\n/** A line between groups of items. */\nexport const Separator = forwardRef<HTMLDivElement, SeparatorProps>(function SelectSeparator({ className, ...props }, ref) {\n  return <BaseSelect.Separator ref={ref} {...props} className={withClass('mu-select-separator', className)} />;\n});\n"],
+  "mappings": ";AAAA,OAAS,UAAUA,MAAkB,wBACrC,OAAS,SAAAC,EAAO,eAAAC,EAAa,aAAAC,MAAiB,eAC9C,OAAS,cAAAC,MAAkC,QAC3C,OAAS,aAAAC,MAAiB,+BAC1B,OAAS,mBAAAC,MAAuB,0BAChC,OAAS,eAAAC,EAAa,cAAAC,MAAkB,yBAExC,OAAS,iBAAAC,MAAqB,qBAWxB,cAAAC,EAiBF,QAAAC,MAjBE,oBAJC,SAASC,EAA0D,CAAE,KAAAC,EAAM,GAAGC,CAAM,EAA+B,CACxH,IAAMC,EAAWP,EAAWK,CAAI,EAChC,OACEH,EAACH,EAAY,SAAZ,CAAqB,MAAOQ,EAC3B,SAAAL,EAACV,EAAW,KAAX,CAAiB,GAAGc,EAAO,EAC9B,CAEJ,CAWO,IAAME,EAAUZ,EAA4C,SAAuB,CAAE,QAAAa,EAAU,UAAW,UAAAC,EAAW,SAAAC,EAAU,GAAGL,CAAM,EAAGM,EAAK,CACrJ,IAAMP,EAAOL,EAAW,EACxB,OACEG,EAACX,EAAW,QAAX,CAAmB,IAAKoB,EAAM,GAAGN,EAAO,UAAWT,EAAU,qBAAqBI,EAAc,CAAE,QAAAQ,EAAS,KAAAJ,CAAK,CAAC,CAAC,GAAIK,CAAS,EAC7H,UAAAC,EACDT,EAACV,EAAW,KAAX,CAAgB,UAAU,iBACzB,SAAAU,EAACR,EAAA,CAAY,cAAW,GAAC,EAC3B,GACF,CAEJ,CAAC,EAKYmB,EAAQjB,EAAwC,SAAqB,CAAE,UAAAc,EAAW,GAAGJ,CAAM,EAAGM,EAAK,CAC9G,OAAOV,EAACV,EAAW,MAAX,CAAiB,IAAKoB,EAAM,GAAGN,EAAO,UAAWT,EAAU,kBAAmBa,CAAS,EAAG,CACpG,CAAC,EAwBYI,EAAQlB,EAAuC,SAAqB,CAAE,UAAAmB,EAAW,UAAAL,EAAW,SAAAC,EAAU,GAAGL,CAAM,EAAGM,EAAK,CAClI,IAAMP,EAAOL,EAAW,EAClB,CAACgB,EAAYC,CAAI,EAAInB,EAAgBQ,CAAK,EAChD,OACEJ,EAACV,EAAW,OAAX,CAAkB,UAAWuB,EAC5B,SAAAb,EAACV,EAAW,WAAX,CAAsB,WAAY,EAAG,MAAM,QAAQ,qBAAsB,GAAQ,GAAGwB,EAAY,UAAU,qCACzG,SAAAb,EAACX,EAAW,MAAX,CAAiB,IAAKoB,EAAM,GAAGK,EAAM,UAAWpB,EAAU,yDAAyDQ,CAAI,GAAIK,CAAS,EACnI,UAAAR,EAACV,EAAW,cAAX,CAAyB,UAAU,yBAAyB,OAAS0B,GAAehB,EAAC,OAAK,GAAGgB,EAAY,SAAAhB,EAACP,EAAA,CAAU,cAAW,GAAC,EAAE,EAAQ,EAC3IO,EAACV,EAAW,KAAX,CAAgB,UAAU,iBAAkB,SAAAmB,EAAS,EACtDT,EAACV,EAAW,gBAAX,CAA2B,UAAU,yBAAyB,OAAS0B,GAAehB,EAAC,OAAK,GAAGgB,EAAY,SAAAhB,EAACR,EAAA,CAAY,cAAW,GAAC,EAAE,EAAQ,GACjJ,EACF,EACF,CAEJ,CAAC,EASYyB,EAAOvB,EAAsC,SAAoB,CAAE,KAAAwB,EAAM,UAAAV,EAAW,SAAAC,EAAU,GAAGL,CAAM,EAAGM,EAAK,CAC1H,OACET,EAACX,EAAW,KAAX,CAAgB,IAAKoB,EAAM,GAAGN,EAAO,UAAWT,EAAU,iBAAkBa,CAAS,EACnF,UAAAU,EACDlB,EAACV,EAAW,SAAX,CAAoB,UAAU,sBAAuB,SAAAmB,EAAS,EAC/DT,EAAC,QAAK,UAAU,sBAEd,SAAAA,EAACV,EAAW,cAAX,CAAyB,OAAQU,EAACT,EAAA,CAAM,cAAW,GAAC,EAAK,cAAK,EACjE,GACF,CAEJ,CAAC,EAKY4B,EAAQzB,EAAuC,SAAqB,CAAE,UAAAc,EAAW,GAAGJ,CAAM,EAAGM,EAAK,CAC7G,OAAOV,EAACV,EAAW,MAAX,CAAiB,IAAKoB,EAAM,GAAGN,EAAO,UAAWT,EAAU,kBAAmBa,CAAS,EAAG,CACpG,CAAC,EAKYY,EAAa1B,EAA4C,SAA0B,CAAE,UAAAc,EAAW,GAAGJ,CAAM,EAAGM,EAAK,CAC5H,OAAOV,EAACV,EAAW,WAAX,CAAsB,IAAKoB,EAAM,GAAGN,EAAO,UAAWT,EAAU,oCAAqCa,CAAS,EAAG,CAC3H,CAAC,EAKYa,EAAY3B,EAA2C,SAAyB,CAAE,UAAAc,EAAW,GAAGJ,CAAM,EAAGM,EAAK,CACzH,OAAOV,EAACV,EAAW,UAAX,CAAqB,IAAKoB,EAAM,GAAGN,EAAO,UAAWT,EAAU,sBAAuBa,CAAS,EAAG,CAC5G,CAAC",
+  "names": ["BaseSelect", "Check", "ChevronDown", "ChevronUp", "forwardRef", "withClass", "splitPositioner", "SizeContext", "useRowSize", "buttonClasses", "jsx", "jsxs", "Root", "size", "props", "resolved", "Trigger", "variant", "className", "children", "ref", "Value", "Popup", "container", "positioner", "rest", "arrowProps", "Item", "icon", "Group", "GroupLabel", "Separator"]
 }

package/dist/components/tabs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/tabs/index.tsx"],
-  "sourcesContent": ["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { forwardRef, type ReactNode } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { SizeContext, useRowSize } from '../../internal/size';\nimport type { IconElement, Size } from '../../types';\n\nexport interface RootProps extends BaseTabs.Root.Props {\n  size?: Exclude<Size, 'xs'>;\n}\n\n/** Switches between sections of the same page. Holds a List and one Panel per tab. */\nexport const Root = forwardRef<HTMLDivElement, RootProps>(function TabsRoot({ size, className, ...props }, ref) {\n  const resolved = useRowSize(size);\n  return (\n    <SizeContext.Provider value={resolved}>\n      <BaseTabs.Root ref={ref} {...props} className={withClass('mu-tabs-root', className)} />\n    </SizeContext.Provider>\n  );\n});\n\nexport interface ListProps extends BaseTabs.List.Props {}\n\n/** The well that holds the tabs, with the sliding key built in. */\nexport const List = forwardRef<HTMLDivElement, ListProps>(function TabsList({ className, children, ...props }, ref) {\n  const size = useRowSize();\n  return (\n    <BaseTabs.List ref={ref} {...props} className={withClass(`mu-tabs-list mu-segmented mu-base mu-s-${size}`, className)}>\n      <BaseTabs.Indicator className=\"mu-tabs-indicator mu-segmented-key\" />\n      {children}\n    </BaseTabs.List>\n  );\n});\n\nexport interface TabProps extends BaseTabs.Tab.Props {\n  icon?: IconElement;\n  children?: ReactNode;\n}\n\n/** One tab. Its `value` matches a Panel's. */\nexport const Tab = forwardRef<HTMLElement, TabProps>(function TabsTab({ icon, className, children, ...props }, ref) {\n  return (\n    <BaseTabs.Tab ref={ref} {...props} className={withClass('mu-tabs-tab mu-segmented-item mu-focus', className)}>\n      {icon}\n      {children}\n    </BaseTabs.Tab>\n  );\n});\n\nexport interface PanelProps extends BaseTabs.Panel.Props {}\n\n/** The content of one tab. */\nexport const Panel = forwardRef<HTMLDivElement, PanelProps>(function TabsPanel({ className, ...props }, ref) {\n  return <BaseTabs.Panel ref={ref} {...props} className={withClass('mu-tabs-panel mu-focus', className)} />;\n});\n"],
+  "sourcesContent": ["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { forwardRef, type ReactNode } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { SizeContext, useRowSize } from '../../internal/size';\nimport type { IconElement, Size } from '../../types';\n\nexport interface RootProps extends BaseTabs.Root.Props {\n  size?: Exclude<Size, 'xs'>;\n}\n\n/** Switches between sections of the same page. Holds a List and one Panel per tab. */\nexport const Root = forwardRef<HTMLDivElement, RootProps>(function TabsRoot({ size, className, ...props }, ref) {\n  const resolved = useRowSize(size);\n  return (\n    <SizeContext.Provider value={resolved}>\n      <BaseTabs.Root ref={ref} {...props} className={withClass('mu-tabs-root', className)} />\n    </SizeContext.Provider>\n  );\n});\n\nexport interface ListProps extends BaseTabs.List.Props {}\n\n/** The well that holds the tabs, with the selected key built in. */\nexport const List = forwardRef<HTMLDivElement, ListProps>(function TabsList({ className, children, ...props }, ref) {\n  const size = useRowSize();\n  return (\n    <BaseTabs.List ref={ref} {...props} className={withClass(`mu-tabs-list mu-segmented mu-base mu-s-${size}`, className)}>\n      <BaseTabs.Indicator className=\"mu-tabs-indicator mu-segmented-key\" />\n      {children}\n    </BaseTabs.List>\n  );\n});\n\nexport interface TabProps extends BaseTabs.Tab.Props {\n  icon?: IconElement;\n  children?: ReactNode;\n}\n\n/** One tab. Its `value` matches a Panel's. */\nexport const Tab = forwardRef<HTMLElement, TabProps>(function TabsTab({ icon, className, children, ...props }, ref) {\n  return (\n    <BaseTabs.Tab ref={ref} {...props} className={withClass('mu-tabs-tab mu-segmented-item mu-focus', className)}>\n      {icon}\n      {children}\n    </BaseTabs.Tab>\n  );\n});\n\nexport interface PanelProps extends BaseTabs.Panel.Props {}\n\n/** The content of one tab. */\nexport const Panel = forwardRef<HTMLDivElement, PanelProps>(function TabsPanel({ className, ...props }, ref) {\n  return <BaseTabs.Panel ref={ref} {...props} className={withClass('mu-tabs-panel mu-focus', className)} />;\n});\n"],
   "mappings": ";AAAA,OAAS,QAAQA,MAAgB,sBACjC,OAAS,cAAAC,MAAkC,QAC3C,OAAS,aAAAC,MAAiB,+BAC1B,OAAS,eAAAC,EAAa,cAAAC,MAAkB,yBAYlC,cAAAC,EAWF,QAAAC,MAXE,oBAJC,IAAMC,EAAON,EAAsC,SAAkB,CAAE,KAAAO,EAAM,UAAAC,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAC9G,IAAMC,EAAWR,EAAWI,CAAI,EAChC,OACEH,EAACF,EAAY,SAAZ,CAAqB,MAAOS,EAC3B,SAAAP,EAACL,EAAS,KAAT,CAAc,IAAKW,EAAM,GAAGD,EAAO,UAAWR,EAAU,eAAgBO,CAAS,EAAG,EACvF,CAEJ,CAAC,EAKYI,EAAOZ,EAAsC,SAAkB,CAAE,UAAAQ,EAAW,SAAAK,EAAU,GAAGJ,CAAM,EAAGC,EAAK,CAClH,IAAMH,EAAOJ,EAAW,EACxB,OACEE,EAACN,EAAS,KAAT,CAAc,IAAKW,EAAM,GAAGD,EAAO,UAAWR,EAAU,0CAA0CM,CAAI,GAAIC,CAAS,EAClH,UAAAJ,EAACL,EAAS,UAAT,CAAmB,UAAU,qCAAqC,EAClEc,GACH,CAEJ,CAAC,EAQYC,EAAMd,EAAkC,SAAiB,CAAE,KAAAe,EAAM,UAAAP,EAAW,SAAAK,EAAU,GAAGJ,CAAM,EAAGC,EAAK,CAClH,OACEL,EAACN,EAAS,IAAT,CAAa,IAAKW,EAAM,GAAGD,EAAO,UAAWR,EAAU,yCAA0CO,CAAS,EACxG,UAAAO,EACAF,GACH,CAEJ,CAAC,EAKYG,EAAQhB,EAAuC,SAAmB,CAAE,UAAAQ,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAC3G,OAAON,EAACL,EAAS,MAAT,CAAe,IAAKW,EAAM,GAAGD,EAAO,UAAWR,EAAU,yBAA0BO,CAAS,EAAG,CACzG,CAAC",
   "names": ["BaseTabs", "forwardRef", "withClass", "SizeContext", "useRowSize", "jsx", "jsxs", "Root", "size", "className", "props", "ref", "resolved", "List", "children", "Tab", "icon", "Panel"]
 }

package/dist/components/toggle-group/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/toggle-group/index.tsx"],
-  "sourcesContent": ["import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';\nimport { forwardRef, useCallback, useLayoutEffect, useRef, type ReactNode } from 'react';\nimport { cx, withClass } from '../../internal/class-name';\nimport { SizeContext, useSize } from '../../internal/size';\nimport type { Size } from '../../types';\n\nexport interface ToggleGroupProps extends BaseToggleGroup.Props {\n  size?: Size;\n  /** Fills its container's width and gives every Toggle an equal share. Icon-only Toggles keep their size. */\n  fullWidth?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * A row of Toggles. With `multiple` it is a toolbar of independent on/off\n * toggles. Without it, one choice among peers: a well with one sliding key,\n * the same control as Tabs.\n */\nexport const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(function ToggleGroup({ size, multiple = false, fullWidth = false, className, children, ...props }, forwardedRef) {\n  const resolved = useSize(size);\n  const root = useRef<HTMLDivElement | null>(null);\n  const setRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      root.current = node;\n      if (typeof forwardedRef === 'function') forwardedRef(node);\n      else if (forwardedRef) forwardedRef.current = node;\n    },\n    [forwardedRef],\n  );\n  useSlidingKey(root, !multiple);\n  return (\n    <SizeContext.Provider value={resolved}>\n      <BaseToggleGroup\n        ref={setRef}\n        multiple={multiple}\n        {...props}\n        className={withClass(\n          cx(multiple ? `mu-toggle-group mu-s-${resolved}` : `mu-toggle-group mu-segmented mu-base mu-s-${resolved}`, fullWidth && 'mu-toggle-group-full'),\n          className,\n        )}\n      >\n        {multiple ? null : <span className=\"mu-segmented-key\" aria-hidden />}\n        {children}\n      </BaseToggleGroup>\n    </SizeContext.Provider>\n  );\n});\n\n/** Measures the pressed toggle and moves the key under it, as Base UI's Tabs.Indicator does for tabs. */\nfunction useSlidingKey(root: { current: HTMLDivElement | null }, enabled: boolean) {\n  useLayoutEffect(() => {\n    const element = root.current;\n    if (!enabled || !element) return;\n    const place = () => {\n      const pressed = element.querySelector<HTMLElement>(':scope > .mu-toggle[data-pressed]');\n      if (pressed) {\n        element.style.setProperty('--key-left', `${pressed.offsetLeft}px`);\n        element.style.setProperty('--key-width', `${pressed.offsetWidth}px`);\n        element.dataset.keyed = '';\n      } else {\n        delete element.dataset.keyed;\n      }\n    };\n    place();\n    const mutations = new MutationObserver(place);\n    mutations.observe(element, { subtree: true, attributes: true, attributeFilter: ['data-pressed'], childList: true });\n    const resizes = new ResizeObserver(place);\n    resizes.observe(element);\n    for (const child of element.children) resizes.observe(child);\n    return () => {\n      mutations.disconnect();\n      resizes.disconnect();\n    };\n  }, [root, enabled]);\n}\n"],
+  "sourcesContent": ["import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';\nimport { forwardRef, useCallback, useLayoutEffect, useRef, type ReactNode } from 'react';\nimport { cx, withClass } from '../../internal/class-name';\nimport { SizeContext, useSize } from '../../internal/size';\nimport type { Size } from '../../types';\n\nexport interface ToggleGroupProps extends BaseToggleGroup.Props {\n  size?: Size;\n  /** Fills its container's width and gives every Toggle an equal share. Icon-only Toggles keep their size. */\n  fullWidth?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * A row of Toggles. With `multiple` it is a toolbar of independent on/off\n * toggles. Without it, one choice among peers: a well with one selected key,\n * the same control as Tabs.\n */\nexport const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(function ToggleGroup({ size, multiple = false, fullWidth = false, className, children, ...props }, forwardedRef) {\n  const resolved = useSize(size);\n  const root = useRef<HTMLDivElement | null>(null);\n  const setRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      root.current = node;\n      if (typeof forwardedRef === 'function') forwardedRef(node);\n      else if (forwardedRef) forwardedRef.current = node;\n    },\n    [forwardedRef],\n  );\n  useSlidingKey(root, !multiple);\n  return (\n    <SizeContext.Provider value={resolved}>\n      <BaseToggleGroup\n        ref={setRef}\n        multiple={multiple}\n        {...props}\n        className={withClass(\n          cx(multiple ? `mu-toggle-group mu-s-${resolved}` : `mu-toggle-group mu-segmented mu-base mu-s-${resolved}`, fullWidth && 'mu-toggle-group-full'),\n          className,\n        )}\n      >\n        {multiple ? null : <span className=\"mu-segmented-key\" aria-hidden />}\n        {children}\n      </BaseToggleGroup>\n    </SizeContext.Provider>\n  );\n});\n\n/** Measures the pressed toggle and moves the key under it, as Base UI's Tabs.Indicator does for tabs. */\nfunction useSlidingKey(root: { current: HTMLDivElement | null }, enabled: boolean) {\n  useLayoutEffect(() => {\n    const element = root.current;\n    if (!enabled || !element) return;\n    const place = () => {\n      const pressed = element.querySelector<HTMLElement>(':scope > .mu-toggle[data-pressed]');\n      if (pressed) {\n        element.style.setProperty('--key-left', `${pressed.offsetLeft}px`);\n        element.style.setProperty('--key-width', `${pressed.offsetWidth}px`);\n        element.dataset.keyed = '';\n      } else {\n        delete element.dataset.keyed;\n      }\n    };\n    place();\n    const mutations = new MutationObserver(place);\n    mutations.observe(element, { subtree: true, attributes: true, attributeFilter: ['data-pressed'], childList: true });\n    const resizes = new ResizeObserver(place);\n    resizes.observe(element);\n    for (const child of element.children) resizes.observe(child);\n    return () => {\n      mutations.disconnect();\n      resizes.disconnect();\n    };\n  }, [root, enabled]);\n}\n"],
   "mappings": ";AAAA,OAAS,eAAeA,MAAuB,8BAC/C,OAAS,cAAAC,EAAY,eAAAC,EAAa,mBAAAC,EAAiB,UAAAC,MAA8B,QACjF,OAAS,MAAAC,EAAI,aAAAC,MAAiB,+BAC9B,OAAS,eAAAC,EAAa,WAAAC,MAAe,yBA6B/B,OASqB,OAAAC,EATrB,QAAAC,MAAA,oBAdC,IAAMC,EAAcV,EAA6C,SAAqB,CAAE,KAAAW,EAAM,SAAAC,EAAW,GAAO,UAAAC,EAAY,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAM,EAAGC,EAAc,CACvL,IAAMC,EAAWX,EAAQI,CAAI,EACvBQ,EAAOhB,EAA8B,IAAI,EACzCiB,EAASnB,EACZoB,GAAgC,CAC/BF,EAAK,QAAUE,EACX,OAAOJ,GAAiB,WAAYA,EAAaI,CAAI,EAChDJ,IAAcA,EAAa,QAAUI,EAChD,EACA,CAACJ,CAAY,CACf,EACA,OAAAK,EAAcH,EAAM,CAACP,CAAQ,EAE3BJ,EAACF,EAAY,SAAZ,CAAqB,MAAOY,EAC3B,SAAAT,EAACV,EAAA,CACC,IAAKqB,EACL,SAAUR,EACT,GAAGI,EACJ,UAAWX,EACTD,EAAGQ,EAAW,wBAAwBM,CAAQ,GAAK,6CAA6CA,CAAQ,GAAIL,GAAa,sBAAsB,EAC/IC,CACF,EAEC,UAAAF,EAAW,KAAOJ,EAAC,QAAK,UAAU,mBAAmB,cAAW,GAAC,EACjEO,GACH,EACF,CAEJ,CAAC,EAGD,SAASO,EAAcH,EAA0CI,EAAkB,CACjFrB,EAAgB,IAAM,CACpB,IAAMsB,EAAUL,EAAK,QACrB,GAAI,CAACI,GAAW,CAACC,EAAS,OAC1B,IAAMC,EAAQ,IAAM,CAClB,IAAMC,EAAUF,EAAQ,cAA2B,mCAAmC,EAClFE,GACFF,EAAQ,MAAM,YAAY,aAAc,GAAGE,EAAQ,UAAU,IAAI,EACjEF,EAAQ,MAAM,YAAY,cAAe,GAAGE,EAAQ,WAAW,IAAI,EACnEF,EAAQ,QAAQ,MAAQ,IAExB,OAAOA,EAAQ,QAAQ,KAE3B,EACAC,EAAM,EACN,IAAME,EAAY,IAAI,iBAAiBF,CAAK,EAC5CE,EAAU,QAAQH,EAAS,CAAE,QAAS,GAAM,WAAY,GAAM,gBAAiB,CAAC,cAAc,EAAG,UAAW,EAAK,CAAC,EAClH,IAAMI,EAAU,IAAI,eAAeH,CAAK,EACxCG,EAAQ,QAAQJ,CAAO,EACvB,QAAWK,KAASL,EAAQ,SAAUI,EAAQ,QAAQC,CAAK,EAC3D,MAAO,IAAM,CACXF,EAAU,WAAW,EACrBC,EAAQ,WAAW,CACrB,CACF,EAAG,CAACT,EAAMI,CAAO,CAAC,CACpB",
   "names": ["BaseToggleGroup", "forwardRef", "useCallback", "useLayoutEffect", "useRef", "cx", "withClass", "SizeContext", "useSize", "jsx", "jsxs", "ToggleGroup", "size", "multiple", "fullWidth", "className", "children", "props", "forwardedRef", "resolved", "root", "setRef", "node", "useSlidingKey", "enabled", "element", "place", "pressed", "mutations", "resizes", "child"]
 }

package/dist/styles.css

@@ -1 +1 @@
-@layer mu{@font-face{font-family:"Segoe UI (mu)";font-weight:400;src:local("Segoe UI"),local("SegoeUI")}@font-face{font-family:"Segoe UI (mu)";font-weight:400;font-style:italic;src:local("Segoe UI Italic"),local("SegoeUI-Italic")}@font-face{font-family:"Segoe UI (mu)";font-weight:500 600;src:local("Segoe UI Semibold"),local("SegoeUI-Semibold")}@font-face{font-family:"Segoe UI (mu)";font-weight:500 600;font-style:italic;src:local("Segoe UI Semibold Italic"),local("SegoeUI-SemiboldItalic")}@font-face{font-family:"Segoe UI (mu)";font-weight:700;src:local("Segoe UI Bold"),local("SegoeUI-Bold")}@font-face{font-family:"Segoe UI (mu)";font-weight:700;font-style:italic;src:local("Segoe UI Bold Italic"),local("SegoeUI-BoldItalic")}.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: 11px;--mu-row-line-height: 16px;--mu-row-field-font-size: 11px;--mu-row-field-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: var(--mu-icon-stroke);--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-field-font-size: 13px;--mu-row-field-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: var(--mu-icon-stroke);--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-field-font-size: 14px;--mu-row-field-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: var(--mu-icon-stroke);--mu-row-check-box: 18px}@media(pointer:coarse){.mu-s-xs,.mu-s-sm,.mu-s-md{--mu-row-field-font-size: 16px;--mu-row-field-line-height: 20px}}.mu-compact{--mu-control-md: var(--mu-control-compact)}.mu-well{box-sizing:border-box;background-color:var(--mu-well);border:var(--mu-control-border-width, 1px) solid var(--mu-edge)}.mu-key{box-sizing:border-box;background-color:var(--mu-key);border:var(--mu-control-border-width, 1px) solid var(--mu-edge)}.mu-key:where([data-selected],[data-pressed],[aria-selected=true],[aria-pressed=true]){border-color:var(--mu-text-secondary)}.mu-popup{background:var(--mu-surface);border:1px solid var(--mu-edge);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-text);-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{--mu-control-border-width: 1px;outline:none}.mu-hit{position:relative}@media(pointer:coarse){.mu-hit{min-width:var(--mu-hit-area);min-height:var(--mu-hit-area)}.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-icon-xs,.mu-icon-sm,.mu-icon-md,.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, var(--mu-icon-stroke))}.mu-icon *,.mu-icon-xs *,.mu-icon-sm *,.mu-icon-md *,.mu-base svg.lucide *,.mu-prose svg.lucide *{vector-effect:non-scaling-stroke}.mu-icon-xs{--mu-row-icon: var(--mu-icon-xs);--mu-row-icon-stroke: var(--mu-icon-stroke)}.mu-icon-sm{--mu-row-icon: var(--mu-icon-sm);--mu-row-icon-stroke: var(--mu-icon-stroke)}.mu-icon-md{--mu-row-icon: var(--mu-icon-md);--mu-row-icon-stroke: var(--mu-icon-stroke)}.mu-label-xs{font-family:var(--mu-font-sans);font-size:11px;line-height:16px;font-weight:500}.mu-caption-xs{font-family:var(--mu-font-sans);font-size:11px;line-height:16px;font-weight:400}.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;text-wrap:balance}.mu-heading{font-family:var(--mu-font-display);font-size:20px;line-height:28px;font-weight:500;text-wrap:balance}.mu-display{font-family:var(--mu-font-display);font-size:32px;line-height:40px;font-weight:500;text-wrap:balance}.mu-prose{--prose-fs: 16px;--prose-lh: 24px;--prose-h1: 24px;--prose-h1-lh: 32px;--prose-h2: 20px;--prose-h2-lh: 28px;--prose-h3: 16px;--prose-h3-lh: 24px;--prose-head: 13px;--prose-head-lh: 18px}.mu-prose-sm{--prose-fs: 14px;--prose-lh: 22px;--prose-h1: 16px;--prose-h1-lh: 24px;--prose-h2: 14px;--prose-h2-lh: 22px;--prose-h3: 14px;--prose-h3-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 calc(var(--mu-row-padding) - var(--mu-control-border-width));border:var(--mu-control-border-width) solid var(--mu-edge);border-radius:var(--mu-row-radius);color:var(--mu-text);background-color:var(--mu-key);white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;transition-property:background-color,border-color,color;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-button:where(:has(>svg:first-child)){padding-inline-start:calc(var(--mu-row-padding-icon) - var(--mu-control-border-width))}.mu-button:where(:has(>.mu-button-label+svg)){padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-control-border-width))}.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-neutral:hover:where(:not([data-disabled])){border-color:var(--mu-control-edge)}.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)}.mu-button-ghost:hover:not([data-disabled]){background-color:var(--mu-hover);color:var(--mu-text)}}.mu-button:active:not([data-disabled]){background-color:var(--mu-well)}.mu-button-primary{--mu-control-focus: var(--mu-on-primary);border-color:transparent;color:var(--mu-on-primary);background-color:var(--mu-primary)}.mu-button-danger{--mu-control-focus: var(--mu-on-danger);border-color:transparent;color:var(--mu-on-danger);background-color:var(--mu-danger-key)}.mu-button-primary:active:not([data-disabled]){background-color:var(--mu-primary-hover);border-color:var(--mu-on-primary)}.mu-button-danger:active:not([data-disabled]){background-color:var(--mu-danger-key);border-color:var(--mu-on-danger)}.mu-button-ghost{border-color:transparent;color:var(--mu-text-secondary);background-color:transparent}.mu-button-ghost[data-popup-open]{background-color:var(--mu-hover);color:var(--mu-text)}.mu-button-ghost:active:not([data-disabled]){background-color:var(--mu-well)}.mu-button[data-disabled]:not([data-loading]){--mu-control-focus: var(--mu-focus);background-color:var(--mu-well);border-color:var(--mu-edge);color:var(--mu-text-disabled);cursor:not-allowed}.mu-button[data-loading]{cursor:progress}.mu-button[data-loading-visible]>:not(.mu-spinner){opacity:0}.mu-button>.mu-spinner{position:absolute;inset:0;margin:auto}@media(pointer:coarse){.mu-button{min-width:var(--mu-hit-area);min-height:var(--mu-hit-area)}}}@layer mu{.mu-kbd{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--mu-edge);min-width:var(--mu-control-xs);height:var(--mu-control-xs);padding:0 calc(var(--mu-space-1) - 1px);border-radius:var(--mu-radius-sm);color:var(--mu-text-secondary);background-color:var(--mu-key);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;border:1px solid transparent;max-width:100%;height:var(--mu-control-xs);padding:0 calc(var(--mu-row-padding) + var(--mu-space-1) / 2 - 1px);border-radius:var(--mu-radius-full);white-space:nowrap;vertical-align:middle}.mu-badge-label{min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-badge-neutral{--mu-badge-tint: oklch(from var(--mu-badge-color) clamp(.5, l, .75) c h / 18%);color:var(--mu-text);background-color:var(--mu-badge-tint, var(--mu-well))}@supports not (color: oklch(from red l c h)){.mu-badge-neutral{--mu-badge-tint: color-mix(in srgb, var(--mu-badge-color) 18%, transparent)}}.mu-badge-primary{color:var(--mu-on-primary);background-color:var(--mu-primary)}.mu-badge-outline{color:var(--mu-text-secondary);border-color: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-text-secondary);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-text-secondary)}.mu-link-muted:hover{color:var(--mu-text)}.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-text)}.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]{color:var(--mu-text-disabled);cursor:not-allowed}.mu-field-description{margin:0;color:var(--mu-text-secondary)}.mu-field-root[data-invalid]>.mu-field-description{display:none}.mu-field-horizontal{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--mu-space-4);row-gap:0}.mu-field-horizontal>*{grid-column:2;grid-row:1;justify-self:end}.mu-field-horizontal:where(:has(>.mu-field-description))>*{grid-row:1 / span 2}.mu-field-horizontal>.mu-field-label{grid-column:1;grid-row:1;justify-self:stretch;font-weight:400}.mu-field-horizontal>.mu-field-description{grid-column:1;grid-row:2;justify-self:stretch;margin-top:var(--mu-space-1)}.mu-field-horizontal>.mu-field-error{grid-column:1 / -1;grid-row:3;justify-self:stretch;margin-top:var(--mu-space-1)}.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:calc(-1 * var(--mu-space-1));padding:0;color:var(--mu-text)}}@layer mu{.mu-input-root{--mu-field-edge: 1px;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 calc(var(--mu-row-padding) - var(--mu-field-edge));border-radius:var(--mu-row-radius);color:var(--mu-text);background-color:var(--mu-surface);border:var(--mu-field-edge) solid var(--mu-edge);cursor:text;transition:border-color var(--mu-duration-fade) var(--mu-ease-out)}.mu-input-root:where(:has(>.mu-input-prefix)){padding-inline-start:calc(var(--mu-row-padding-icon) - var(--mu-field-edge))}.mu-input-root:where(:has(>.mu-input-suffix)){padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-field-edge))}@media(hover:hover){.mu-input-root:hover:where(:not([data-disabled],[aria-disabled=true],:has(>[data-disabled]),:focus-within)){border-color:var(--mu-control-edge)}}.mu-input-root:where(:has(>.mu-input:focus)),.mu-input-root:where(:not(:has(>.mu-input))):focus-within{--mu-field-edge: var(--mu-focus-edge-width);border-color:var(--mu-focus-edge);outline:none}.mu-input-root:is([data-invalid],[aria-invalid=true],:has(>[data-invalid])){border-color:var(--mu-danger)}.mu-input-root:is([data-disabled],[aria-disabled=true],:has(>[data-disabled])){color:var(--mu-text-disabled);background-color:var(--mu-well);border-color:var(--mu-edge);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-size:var(--mu-row-field-font-size);font-weight:400}.mu-input-root:where(:not(:has(>.mu-input))) :where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]),textarea){font-size:var(--mu-row-field-font-size)}.mu-input::placeholder{color:var(--mu-text-secondary);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-text-secondary)}.mu-input-root:where([data-disabled],[aria-disabled=true],:has(>[data-disabled])) :where(.mu-input,.mu-input-prefix,.mu-input-suffix){color:var(--mu-text-disabled)}.mu-input-root:where([data-disabled],[aria-disabled=true],:has(>[data-disabled])) .mu-input::placeholder{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-input-root{min-height:var(--mu-hit-area)}}}@layer mu{.mu-textarea{--mu-field-edge: 1px;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-field-line-height)) / 2 - var(--mu-field-edge)) calc(var(--mu-row-padding) - var(--mu-field-edge));border:var(--mu-field-edge) solid var(--mu-edge);outline:none;border-radius:var(--mu-row-radius);color:var(--mu-text);background-color:var(--mu-surface);font-size:var(--mu-row-field-font-size);line-height:var(--mu-row-field-line-height);font-weight:400;resize:vertical;transition:border-color var(--mu-duration-fade) var(--mu-ease-out)}.mu-textarea::placeholder{color:var(--mu-text-secondary);opacity:1}@media(hover:hover){.mu-textarea:hover:where(:not([data-disabled],[aria-disabled=true],:focus-within)){border-color:var(--mu-control-edge)}}.mu-textarea:focus-within{--mu-field-edge: var(--mu-focus-edge-width);border-color:var(--mu-focus-edge)}.mu-textarea:is([data-invalid],[aria-invalid=true]){border-color:var(--mu-danger)}.mu-textarea:is([data-disabled],[aria-disabled=true]){color:var(--mu-text-disabled);background-color:var(--mu-well);border-color:var(--mu-edge);cursor:not-allowed}.mu-textarea:where([data-disabled],[aria-disabled=true])::placeholder{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-textarea{min-height:var(--mu-hit-area)}}}@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);border:var(--mu-control-border-width) solid var(--mu-control-edge);cursor:pointer}.mu-checkbox[data-checked],.mu-checkbox[data-indeterminate]{--mu-control-focus: var(--mu-on-primary);background-color:var(--mu-primary);border-color:transparent}.mu-checkbox[data-invalid]{border-color:var(--mu-danger)}.mu-checkbox[data-disabled]{--mu-control-focus: var(--mu-focus);background-color:var(--mu-well);border-color:var(--mu-edge);color:var(--mu-text-disabled);cursor:not-allowed}.mu-checkbox-indicator{display:flex}.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(pointer:coarse){.mu-checkbox{min-width:0;min-height:0;margin:calc((var(--mu-hit-area) - var(--mu-row-check-box)) / 2)}}}@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:calc(var(--mu-inset) - var(--mu-control-border-width));border-radius:var(--mu-radius-full);background-color:var(--mu-well);border:var(--mu-control-border-width) solid var(--mu-edge);cursor:pointer;transition:background-color var(--mu-duration-settle) var(--mu-ease-settle),border-color var(--mu-duration-settle) var(--mu-ease-settle)}.mu-switch[data-checked]{--mu-control-focus: var(--mu-on-primary);background-color:var(--mu-primary);border-color:transparent}.mu-switch[data-invalid]{border-color:var(--mu-danger)}.mu-switch[data-disabled]{--mu-control-focus: var(--mu-focus);background-color:var(--mu-well);border-color:var(--mu-edge);color:var(--mu-text-disabled);cursor:not-allowed}.mu-switch-thumb{display:block;width:var(--knob);height:var(--knob);border-radius:var(--mu-radius-full);background-color:var(--mu-text);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),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[data-disabled]>.mu-switch-thumb{background-color:var(--mu-text-disabled)}@media(hover:hover){.mu-switch:hover:where(:not([data-checked],[data-disabled],[data-invalid])){border-color:var(--mu-control-edge)}}@media(pointer:coarse){.mu-switch{min-width:0;min-height:0;margin-block:calc((var(--mu-hit-area) - var(--switch-h)) / 2);margin-inline:calc((var(--mu-hit-area) - var(--switch-w)) / 2)}}@media(prefers-reduced-motion:reduce){.mu-switch-thumb{transition-property:background-color}}}@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);border:var(--mu-control-border-width) solid var(--mu-control-edge);cursor:pointer}.mu-radio[data-checked]{--mu-control-focus: var(--mu-on-primary);background-color:var(--mu-primary);border-color:transparent}.mu-radio[data-invalid]{border-color:var(--mu-danger)}.mu-radio[data-disabled]{--mu-control-focus: var(--mu-focus);--mu-on-primary: var(--mu-text-disabled);background-color:var(--mu-well);border-color:var(--mu-edge);color:var(--mu-text-disabled);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)}@media(pointer:coarse){.mu-radio{min-width:0;min-height:0;margin:calc((var(--mu-hit-area) - var(--mu-row-check-box)) / 2)}}}@layer mu{.mu-toggle{position:relative;display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;min-width:0;min-height:var(--mu-row-height);margin:0;padding:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2 - var(--mu-control-border-width)) calc(var(--mu-row-padding) - var(--mu-control-border-width));border:var(--mu-control-border-width) solid transparent;border-radius:var(--mu-row-radius);color:var(--mu-text-secondary);background-color:transparent;white-space:normal;cursor:pointer;user-select:none;transition-property:background-color,border-color,color;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-toggle:where(:has(>svg:first-child)){padding-inline-start:calc(var(--mu-row-padding-icon) - var(--mu-control-border-width))}.mu-toggle.mu-toggle-icon{flex:none;width:var(--mu-row-height);padding:0}.mu-toggle-label{min-width:0;overflow-wrap:break-word}.mu-toggle>svg{flex:none}@media(hover:hover){.mu-toggle:hover:not([data-disabled]){color:var(--mu-text);background-color:var(--mu-hover)}}.mu-toggle[data-pressed]{color:var(--mu-text);background-color:var(--mu-well);border-color:var(--mu-control-edge)}.mu-toggle[data-disabled]{color:var(--mu-text-disabled);cursor:not-allowed}.mu-toggle[data-disabled]:where([data-pressed]){border-color:var(--mu-edge)}@media(pointer:coarse){.mu-toggle{min-width:var(--mu-hit-area);min-height:var(--mu-hit-area)}}}@layer mu{.mu-segmented{position:relative;display:inline-flex;align-items:stretch;gap:0;box-sizing:border-box;min-height:var(--mu-row-height);padding:calc(var(--mu-inset) - 1px);border-radius:var(--mu-row-radius);background-color:var(--mu-well);border:1px solid transparent}.mu-segmented-key{position:absolute;top:calc(var(--mu-inset) - 1px);left:0;width:var(--key-width);bottom:calc(var(--mu-inset) - 1px);translate:var(--key-left) 0;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));box-sizing:border-box;border:1px solid transparent;background-color:var(--mu-key);pointer-events:none;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{--segment-line: min(var(--mu-row-line-height), calc(var(--mu-row-height) - 2 * var(--mu-inset) - 2 * var(--mu-focus-edge-width)));position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;min-width:0;min-height:calc(var(--mu-row-height) - 2 * var(--mu-inset));margin:0;padding:calc((var(--mu-row-height) - 2 * var(--mu-inset) - var(--segment-line)) / 2 - var(--mu-control-border-width)) calc(var(--mu-row-padding) - var(--mu-inset) - var(--mu-control-border-width));border:var(--mu-control-border-width) solid transparent;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));color:var(--mu-text-secondary);background:none;font:inherit;line-height:var(--segment-line);white-space:normal;overflow-wrap:anywhere;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:where(:not([data-disabled])),.mu-segmented>.mu-toggle:hover:where(:not([data-disabled])){color:var(--mu-text);background:none}}.mu-segmented-item[data-active],.mu-segmented>.mu-toggle[data-pressed]{color:var(--mu-text);background:none}.mu-segmented-item[data-disabled],.mu-segmented>.mu-toggle[data-disabled]{color:var(--mu-text-disabled);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:var(--mu-focus-edge-width) solid transparent;border-radius:var(--mu-radius-sm)}@media(pointer:coarse){.mu-segmented-item,.mu-segmented>.mu-toggle{min-width:var(--mu-hit-area);min-height:var(--mu-hit-area)}}@media(forced-colors:active){.mu-segmented{--mu-text: var(--mu-key);--mu-text-secondary: var(--mu-key)}.mu-segmented-item,.mu-segmented>.mu-toggle{forced-color-adjust:none;background:none}.mu-segmented-key{forced-color-adjust:none;background-color:transparent;border-color:var(--mu-key)}}@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);box-sizing:border-box;min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}.mu-toggle-group.mu-segmented{align-items:stretch;gap:0}.mu-toggle-group>.mu-toggle:not(.mu-toggle-icon){min-width:min-content}.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)}.mu-toggle-group.mu-toggle-group-full{display:flex;width:100%}.mu-toggle-group-full>.mu-toggle:not(.mu-toggle-icon){flex:1 1 auto}}@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:calc(var(--mu-space-4) - 1px);outline:0}.mu-popover-title{margin:0;color:var(--mu-text)}.mu-popover-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-text-secondary)}.mu-popover-list{gap:0;padding:calc(var(--mu-radius-xl) - var(--mu-radius-md) - 1px)}.mu-popover-list>.mu-popover-title{padding:var(--mu-space-2) var(--mu-row-padding) 0}.mu-popover-list>.mu-popover-description{margin:0;padding:0 var(--mu-row-padding) var(--mu-space-2)}}@layer mu{.mu-menu-popup{box-sizing:border-box;min-width:min(var(--mu-menu-width),var(--available-width, 100vw));max-width:min(var(--mu-menu-max-width),var(--available-width, 100vw));max-height:var(--available-height);overflow-y:auto;padding:calc(var(--mu-radius-xl) - var(--mu-radius-md) - 1px);outline:0}.mu-menu-popup.mu-s-sm{--mu-row-height: var(--mu-control-compact)}.mu-menu-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;width:100%;height:var(--mu-row-height);margin:0;padding:0 var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-text);background-color:transparent;font:inherit;font-weight:400;text-align:start;text-decoration:none;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-text-secondary)}.mu-menu-item[data-highlighted],.mu-menu-item[data-popup-open]{background-color:var(--mu-hover)}.mu-menu-item:focus-visible:not([data-disabled]){background-color:var(--mu-hover)}.mu-menu-item[data-disabled]{color:var(--mu-text-disabled)}.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-item:where(:has(>.mu-menu-text)){align-items:flex-start;height:auto;min-height:var(--mu-row-height);padding-block:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2)}.mu-menu-item:where(:has(>.mu-menu-text))>svg,.mu-menu-item:where(:has(>.mu-menu-text))>.mu-menu-indicator{margin-block:calc((var(--mu-row-line-height) - var(--mu-row-icon)) / 2)}.mu-menu-text{display:flex;flex:1;flex-direction:column;min-width:0}.mu-menu-text>.mu-menu-label{flex:none}.mu-menu-description{color:var(--mu-text-secondary);white-space:normal}.mu-menu-shortcut{margin-inline-start:var(--mu-space-4);color:var(--mu-text-secondary)}.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-text)}.mu-menu-chevron{margin-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-row-padding));color:var(--mu-text-secondary)}.mu-menu-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-text-secondary)}.mu-menu-separator{height:1px;margin:calc(var(--mu-radius-xl) - var(--mu-radius-md)) calc(var(--mu-radius-md) - var(--mu-radius-xl));background-color:var(--mu-line)}.mu-menu-item[data-disabled]>svg{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-menu-item{min-height:var(--mu-hit-area)}.mu-menu-item:where(:has(>.mu-menu-text)){min-height:var(--mu-hit-area)}}}@layer mu{.mu-select-trigger{justify-content:space-between;min-width:0;padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-control-border-width));text-align:start}.mu-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}.mu-select-value[data-placeholder]{color:var(--mu-text-secondary)}.mu-select-icon{display:flex;flex:none;color:var(--mu-text-secondary)}.mu-select-trigger.mu-button-ghost:not([data-disabled]){color:var(--mu-text)}.mu-select-trigger[data-invalid]{border-color:var(--mu-danger)}.mu-select-positioner{outline:0}.mu-select-popup{box-sizing:border-box;min-width:min(max(var(--mu-menu-width),var(--anchor-width)),var(--available-width));max-width:min(max(var(--mu-menu-max-width),var(--anchor-width)),var(--available-width));max-height:var(--available-height);padding:calc(var(--mu-radius-xl) - var(--mu-radius-md) - 1px);outline:0}.mu-select-popup.mu-s-sm{--mu-row-height: var(--mu-control-compact)}.mu-select-list{overflow-y:auto;max-height:var(--available-height);scroll-padding-block:calc(var(--mu-radius-xl) - var(--mu-radius-md));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:var(--mu-row-radius);color:var(--mu-text);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-text-secondary)}.mu-select-item[data-highlighted]{background-color:var(--mu-hover)}.mu-select-item[data-disabled]{color:var(--mu-text-disabled)}.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-text)}.mu-select-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-text-secondary)}.mu-select-separator{height:1px;margin:calc(var(--mu-radius-xl) - var(--mu-radius-md)) calc(var(--mu-radius-md) - var(--mu-radius-xl));background-color:var(--mu-line)}.mu-select-scroll-arrow{display:grid;place-items:center;height:var(--mu-space-4);color:var(--mu-text-secondary)}.mu-select-trigger[data-disabled] :where(.mu-select-value,.mu-select-icon),.mu-select-item[data-disabled]>svg{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-select-trigger{min-width:var(--mu-hit-area)}.mu-select-item{min-height:var(--mu-hit-area)}}}@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:calc(var(--mu-space-5) - 1px);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-popup.mu-dialog-bare{gap:0;padding:0;overflow:hidden}.mu-dialog-full{place-items:stretch;padding:0}.mu-dialog-full>.mu-dialog-popup{width:100%;height:100%;border:0;border-radius:0}.mu-dialog-title{margin:0;color:var(--mu-text)}.mu-dialog-description{margin:calc(-1 * var(--mu-space-3)) 0 0;color:var(--mu-text-secondary)}.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:calc(max(var(--mu-space-5),env(safe-area-inset-bottom)) - 1px);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-popup.mu-dialog-bare{padding-bottom:env(safe-area-inset-bottom)}.mu-dialog-sheet .mu-dialog-footer{flex-direction:column-reverse}.mu-dialog-sheet .mu-dialog-footer>*{width:100%}}@media(pointer:coarse){.mu-dialog-popup:where(:has(>.mu-dialog-x))>.mu-dialog-title{padding-inline-end:var(--mu-hit-area)}}@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-drawer-backdrop{position:fixed;inset:0;z-index:var(--mu-layer-overlay);background-color:var(--mu-overlay);opacity:calc(1 - var(--drawer-swipe-progress, 0));transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-drawer-backdrop[data-starting-style],.mu-drawer-backdrop[data-ending-style]{opacity:0}.mu-drawer-viewport{position:fixed;inset:0;z-index:var(--mu-layer-overlay);display:flex}.mu-drawer-left{justify-content:flex-start}.mu-drawer-right{justify-content:flex-end}.mu-drawer-bottom{align-items:flex-end}.mu-drawer-popup{--drawer-hidden: 0 0;position:relative;box-sizing:border-box;width:var(--mu-drawer-width);max-width:calc(100% - var(--mu-space-12));height:100%;overflow-y:auto;overscroll-behavior:contain;background-color:var(--mu-surface);outline:0;translate:var(--drawer-swipe-movement-x, 0) var(--drawer-swipe-movement-y, 0);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-drawer-bottom>.mu-drawer-popup{width:100%;max-width:none;height:auto;max-height:calc(100% - var(--mu-space-6));padding-bottom:env(safe-area-inset-bottom);border-start-start-radius:var(--mu-radius-2xl);border-start-end-radius:var(--mu-radius-2xl)}.mu-drawer-left>.mu-drawer-popup{--drawer-hidden: -100% 0;border-right:1px solid var(--mu-line)}.mu-drawer-right>.mu-drawer-popup{--drawer-hidden: 100% 0;border-left:1px solid var(--mu-line)}.mu-drawer-bottom>.mu-drawer-popup{--drawer-hidden: 0 100%;border-top:1px solid var(--mu-edge)}.mu-drawer-popup[data-starting-style],.mu-drawer-popup[data-ending-style]{translate:var(--drawer-hidden)}.mu-drawer-popup[data-swiping]{transition:none;user-select:none}.mu-drawer-content{display:flex;flex-direction:column;gap:var(--mu-space-4);box-sizing:border-box;min-height:100%;padding:var(--mu-space-5)}.mu-drawer-bare>.mu-drawer-content{gap:0;height:100%;min-height:0;padding:0}.mu-drawer-popup:where(:has(>.mu-drawer-x))>.mu-drawer-content>.mu-drawer-title{padding-inline-end:var(--mu-space-6)}.mu-drawer-title{margin:0;color:var(--mu-text)}.mu-drawer-description{margin:calc(-1 * var(--mu-space-3)) 0 0;color:var(--mu-text-secondary)}.mu-drawer-x{position:absolute;top:var(--mu-space-4);inset-inline-end:var(--mu-space-4)}@media(pointer:coarse){.mu-drawer-popup:where(:has(>.mu-drawer-x))>.mu-drawer-content>.mu-drawer-title{padding-inline-end:var(--mu-hit-area)}}@media(prefers-reduced-motion:reduce){.mu-drawer-popup[data-starting-style],.mu-drawer-popup[data-ending-style]{translate:none;opacity:0}}}@layer mu{.mu-toast-viewport{position:fixed;top:var(--mu-space-6);right: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{top:max(var(--mu-space-4),env(safe-area-inset-top));right:var(--mu-space-4);left:var(--mu-space-4);width:auto}}.mu-toast{--mu-control-border-width: 1px;border-width:var(--mu-control-border-width);--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) + var(--toast-index) * var(--mu-row-gap) + var(--toast-swipe-movement-y));position:absolute;top:0;right:0;z-index:calc(var(--mu-layer-toast) - var(--toast-index));box-sizing:border-box;width:100%;height:var(--height);transform-origin:top 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:after{content:"";position:absolute;bottom: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:calc(var(--mu-space-3) - var(--mu-control-border-width)) calc(var(--mu-space-3) - var(--mu-control-border-width)) calc(var(--mu-space-3) - var(--mu-control-border-width)) calc(var(--mu-space-4) - var(--mu-control-border-width));overflow:hidden;border-radius:inherit;transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-toast-content[data-behind]{opacity:0;transition:none}.mu-toast-content[data-expanded]{opacity:1;transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-toast-icon{margin-block:calc((var(--mu-row-height) - var(--mu-row-icon)) / 2);color:var(--mu-text-secondary)}.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-text)}.mu-toast-description{margin:0;color:var(--mu-text-secondary)}.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) - var(--mu-field-edge))}.mu-combobox-trigger{box-sizing:border-box;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:var(--mu-control-border-width) solid transparent;border-radius:var(--mu-radius-sm);color:var(--mu-text-secondary);background:none;cursor:pointer}.mu-combobox-trigger:hover:not([data-disabled]){color:var(--mu-text)}.mu-combobox-trigger[data-disabled]{color:var(--mu-text-disabled);cursor:not-allowed}.mu-combobox-popup{box-sizing:border-box;width:var(--anchor-width);min-width:min(var(--mu-menu-width),var(--available-width));max-width:var(--available-width);outline:0}.mu-combobox-list{box-sizing:border-box;max-height:min(calc(var(--mu-list-height) - var(--mu-inset)),calc(var(--available-height) - var(--mu-inset)));overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--mu-radius-xl) - var(--mu-radius-md) - 1px);scroll-padding-block:calc(var(--mu-radius-xl) - var(--mu-radius-md));outline:0}.mu-combobox-list[data-empty]{padding:0}.mu-combobox-popup.mu-s-sm .mu-combobox-list{--mu-row-height: var(--mu-control-compact)}.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:var(--mu-row-radius);color:var(--mu-text);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-text-secondary)}.mu-combobox-item[data-highlighted]{background-color:var(--mu-hover)}.mu-combobox-item[data-disabled]{color:var(--mu-text-disabled)}.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-text)}.mu-combobox-row{display:flex;gap:var(--mu-inset)}.mu-combobox-row+.mu-combobox-row{margin-top:var(--mu-inset)}.mu-combobox-row>.mu-combobox-item{flex:none;justify-content:center;width:var(--mu-row-height);padding:0;border:1px solid transparent;border-radius:var(--mu-row-radius)}.mu-combobox-row>.mu-combobox-item>.mu-combobox-item-text{flex:none;overflow:visible}.mu-combobox-row>.mu-combobox-item>.mu-combobox-indicator{display:none}.mu-combobox-row>.mu-combobox-item[data-selected]{background-color:var(--mu-well);border-color:var(--mu-edge)}.mu-combobox-empty:not(:empty){padding:var(--mu-space-3) var(--mu-space-4);color:var(--mu-text-secondary)}.mu-combobox-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-text-secondary)}.mu-combobox-separator{height:1px;margin:calc(var(--mu-radius-xl) - var(--mu-radius-md)) calc(var(--mu-radius-md) - var(--mu-radius-xl));background-color:var(--mu-line)}.mu-combobox-item[data-disabled]>svg{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-combobox-item{min-height:var(--mu-hit-area)}.mu-combobox-row>.mu-combobox-item{width:var(--mu-hit-area)}.mu-combobox-trigger{width:var(--mu-hit-area);min-height:var(--mu-hit-area)}}}@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-text-secondary);transition:rotate var(--mu-duration-settle) var(--mu-ease-settle)}.mu-collapsible-trigger[data-panel-open]>.mu-collapsible-chevron{rotate:180deg}.mu-collapsible-trigger[data-disabled]>.mu-collapsible-chevron{color:var(--mu-text-disabled)}.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-bordered{box-sizing:border-box;border:1px solid var(--mu-line);border-radius:var(--mu-radius-lg);background-color:var(--mu-surface)}.mu-table{width:100%;border-collapse:collapse;color:var(--mu-text);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-text-secondary);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-actions{display:inline-flex;align-items:center;gap:var(--mu-space-1);vertical-align:top}.mu-table-cell>:is(.mu-button,.mu-table-actions){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-text-secondary)}.mu-table-caption{caption-side:bottom;padding:var(--mu-space-2) var(--mu-row-padding) 0;color:var(--mu-text-secondary);text-align:start}.mu-table-bordered .mu-table-caption{padding-bottom:var(--mu-space-2);border-top:1px solid var(--mu-line)}.mu-table-bordered .mu-table-head{background-color:var(--mu-canvas)}.mu-table-bordered :is(.mu-table-head,.mu-table-cell):first-child,.mu-table-bordered .mu-table-caption{padding-inline-start:calc(var(--mu-row-padding) + var(--mu-space-1))}.mu-table-bordered :is(.mu-table-head,.mu-table-cell):last-child{padding-inline-end:calc(var(--mu-row-padding) + var(--mu-space-1))}}@layer mu{.mu-list{box-sizing:border-box;margin:0;padding:0;border:1px solid var(--mu-line);border-radius:var(--mu-radius-lg);color:var(--mu-text);background-color:var(--mu-surface);list-style:none}.mu-list{--list-pad-block: var(--mu-space-3);--list-pad-inline: var(--mu-space-4)}.mu-list.mu-s-sm{--list-pad-block: var(--mu-space-2);--list-pad-inline: var(--mu-space-3)}.mu-list-item{box-sizing:border-box;min-width:0;padding:var(--list-pad-block) var(--list-pad-inline)}.mu-list-item+.mu-list-item{border-top:1px solid var(--mu-line)}.mu-list-item-button{display:flex;align-items:center;gap:var(--mu-space-3);box-sizing:border-box;width:calc(100% + 2 * var(--list-pad-inline));margin:calc(-1 * var(--list-pad-block)) calc(-1 * var(--list-pad-inline));padding:calc(var(--list-pad-block) - var(--mu-control-border-width)) calc(var(--list-pad-inline) - var(--mu-control-border-width));border:var(--mu-control-border-width) solid transparent;border-radius:0;color:inherit;background-color:transparent;font:inherit;text-align:start;text-decoration:none;cursor:pointer;transition:background-color var(--mu-duration-press) var(--mu-ease-out)}.mu-list-item:first-child>.mu-list-item-button{border-start-start-radius:calc(var(--mu-radius-lg) - 1px);border-start-end-radius:calc(var(--mu-radius-lg) - 1px)}.mu-list-item:last-child>.mu-list-item-button{border-end-start-radius:calc(var(--mu-radius-lg) - 1px);border-end-end-radius:calc(var(--mu-radius-lg) - 1px)}@media(hover:hover){.mu-list-item-button:hover:not(:disabled){background-color:var(--mu-hover)}}.mu-list-item-button:disabled{color:var(--mu-text-disabled);cursor:not-allowed}@media(pointer:coarse){.mu-list-item-button{min-height:var(--mu-hit-area)}}@media(prefers-reduced-motion:reduce){.mu-list-item-button{transition:none}}}@layer mu{.mu-form{display:flex;flex-direction:column;gap:var(--mu-space-4);box-sizing:border-box;min-width:0;margin:0;color:var(--mu-text)}.mu-form-title{margin:0;color:var(--mu-text)}.mu-form-description{margin:calc(-1 * var(--mu-space-3)) 0 0;color:var(--mu-text-secondary)}.mu-form-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mu-space-2)}.mu-form-bordered{padding:var(--mu-space-4);border:1px solid var(--mu-line);border-radius:var(--mu-radius-lg);background-color:var(--mu-surface)}.mu-form-bordered>.mu-form-footer{margin:0 calc(-1 * var(--mu-space-4)) calc(-1 * var(--mu-space-4));padding:var(--mu-space-3) var(--mu-space-4);border-top:1px solid var(--mu-line);border-end-start-radius:calc(var(--mu-radius-lg) - 1px);border-end-end-radius:calc(var(--mu-radius-lg) - 1px);background-color:var(--mu-canvas)}}@layer mu{.mu-prose{color:var(--mu-text);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;text-wrap:balance}.mu-prose :where(p,li){text-wrap:pretty}.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 h2{font-size:var(--prose-h2);line-height:var(--prose-h2-lh)}.mu-prose :where(h3,h4,h5,h6){font-size:var(--prose-h3);line-height:var(--prose-h3-lh)}.mu-prose :where(strong,b){font-weight:600}.mu-prose del{color:var(--mu-text-secondary)}.mu-prose a{color:var(--mu-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;border-radius:var(--mu-radius-xs);outline:none}.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-text-secondary)}.mu-prose li:where(:has(>input[type=checkbox]:first-child)){position:relative;list-style:none}.mu-prose li>input[type=checkbox]:first-child{--mu-control-border-width: 1px;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:0;background:none;outline:none;cursor:pointer}.mu-prose li>input[type=checkbox]:first-child:disabled{cursor:default}.mu-prose li>input[type=checkbox]:first-child:before{content:"";position:absolute;inset:0;box-sizing:border-box;border-radius:var(--mu-radius-sm);background-color:var(--mu-well);border:var(--mu-control-border-width) solid var(--mu-control-edge)}.mu-prose li>input[type=checkbox]:first-child:checked:before{background-color:var(--mu-primary);border-color:transparent}.mu-prose li>input[type=checkbox]:first-child:checked:after{content:"";position:absolute;inset:calc(var(--mu-inset) + 1px);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-text-secondary);text-decoration:line-through}@media(pointer:coarse){.mu-prose li:where(:has(>input[type=checkbox]:first-child)){padding-inline-start:calc(var(--mu-hit-area) - var(--mu-space-6))}.mu-prose li>input[type=checkbox]:first-child:disabled{inset-inline-start:calc(-1 * var(--mu-space-6) + (var(--mu-hit-area) - var(--mu-space-4)) / 2)}.mu-prose li:where(:has(>input[type=checkbox]:first-child:not(:disabled))){box-sizing:border-box;min-height:var(--mu-hit-area);padding-block:calc((var(--mu-hit-area) - var(--prose-lh)) / 2)}.mu-prose li>input[type=checkbox]:first-child:not(:disabled){top:0;width:var(--mu-hit-area);height:var(--mu-hit-area)}.mu-prose li>input[type=checkbox]:first-child:not(:disabled):before{inset:calc((var(--mu-hit-area) - var(--mu-space-4)) / 2)}.mu-prose li>input[type=checkbox]:first-child:not(:disabled):checked:after{inset:calc((var(--mu-hit-area) - var(--mu-space-4)) / 2 + var(--mu-inset) + 1px)}}.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-text-secondary)}.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-text-secondary);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-text-secondary);background-color:var(--mu-well)}}@layer mu{.mu-focus:focus-visible,.mu-toast:focus-visible{--mu-control-border-width: var(--mu-focus-edge-width);border-color:var(--mu-control-focus, var(--mu-focus))}.mu-link:focus-visible,.mu-prose a:focus-visible{text-decoration:underline;text-decoration-style:double}.mu-prose li>input[type=checkbox]:first-child:focus-visible{--mu-control-border-width: var(--mu-focus-edge-width)}.mu-prose li>input[type=checkbox]:first-child:focus-visible:before{border-color:var(--mu-focus)}.mu-prose li>input[type=checkbox]:first-child:checked:focus-visible:before{border-color:var(--mu-on-primary)}@media(forced-colors:active){.mu-focus:focus-visible,.mu-toast:focus-visible,.mu-prose li>input[type=checkbox]:first-child:focus-visible:before{border-color:var(--mu-focus)}.mu-input-root:focus-within,.mu-textarea:focus-within{border-color:var(--mu-focus)}.mu-switch-thumb{forced-color-adjust:none;background-color:var(--mu-key)}.mu-switch-thumb[data-checked]{background-color:var(--mu-on-primary)}}}
+@layer mu{@font-face{font-family:"Segoe UI (mu)";font-weight:400;src:local("Segoe UI"),local("SegoeUI")}@font-face{font-family:"Segoe UI (mu)";font-weight:400;font-style:italic;src:local("Segoe UI Italic"),local("SegoeUI-Italic")}@font-face{font-family:"Segoe UI (mu)";font-weight:500 600;src:local("Segoe UI Semibold"),local("SegoeUI-Semibold")}@font-face{font-family:"Segoe UI (mu)";font-weight:500 600;font-style:italic;src:local("Segoe UI Semibold Italic"),local("SegoeUI-SemiboldItalic")}@font-face{font-family:"Segoe UI (mu)";font-weight:700;src:local("Segoe UI Bold"),local("SegoeUI-Bold")}@font-face{font-family:"Segoe UI (mu)";font-weight:700;font-style:italic;src:local("Segoe UI Bold Italic"),local("SegoeUI-BoldItalic")}.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: 11px;--mu-row-line-height: 16px;--mu-row-field-font-size: 11px;--mu-row-field-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: var(--mu-icon-stroke);--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-field-font-size: 13px;--mu-row-field-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: var(--mu-icon-stroke);--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-field-font-size: 14px;--mu-row-field-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: var(--mu-icon-stroke);--mu-row-check-box: 18px}@media(pointer:coarse){.mu-s-xs,.mu-s-sm,.mu-s-md{--mu-row-field-font-size: 16px;--mu-row-field-line-height: 20px}}.mu-compact{--mu-control-md: var(--mu-control-compact)}.mu-well{box-sizing:border-box;background-color:var(--mu-well);border:var(--mu-control-border-width, 1px) solid var(--mu-edge)}.mu-key{box-sizing:border-box;background-color:var(--mu-key);border:var(--mu-control-border-width, 1px) solid var(--mu-edge)}.mu-popup{background:var(--mu-surface);border:1px solid var(--mu-edge);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:where([data-instant=group],[data-instant=delay],[data-instant=trigger-change]){transition:none}@media(prefers-reduced-motion:reduce){.mu-popup-motion{transition:none}.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-text);-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{--mu-control-border-width: 1px;outline:none}.mu-hit{position:relative}@media(pointer:coarse){.mu-hit{min-width:var(--mu-hit-area);min-height:var(--mu-hit-area)}.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-icon-xs,.mu-icon-sm,.mu-icon-md,.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, var(--mu-icon-stroke))}.mu-icon *,.mu-icon-xs *,.mu-icon-sm *,.mu-icon-md *,.mu-base svg.lucide *,.mu-prose svg.lucide *{vector-effect:non-scaling-stroke}.mu-icon-xs{--mu-row-icon: var(--mu-icon-xs);--mu-row-icon-stroke: var(--mu-icon-stroke)}.mu-icon-sm{--mu-row-icon: var(--mu-icon-sm);--mu-row-icon-stroke: var(--mu-icon-stroke)}.mu-icon-md{--mu-row-icon: var(--mu-icon-md);--mu-row-icon-stroke: var(--mu-icon-stroke)}.mu-label-xs{font-family:var(--mu-font-sans);font-size:11px;line-height:16px;font-weight:500}.mu-caption-xs{font-family:var(--mu-font-sans);font-size:11px;line-height:16px;font-weight:400}.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;text-wrap:balance}.mu-heading{font-family:var(--mu-font-display);font-size:20px;line-height:28px;font-weight:500;text-wrap:balance}.mu-display{font-family:var(--mu-font-display);font-size:32px;line-height:40px;font-weight:500;text-wrap:balance}.mu-prose{--prose-fs: 16px;--prose-lh: 24px;--prose-h1: 24px;--prose-h1-lh: 32px;--prose-h2: 20px;--prose-h2-lh: 28px;--prose-h3: 16px;--prose-h3-lh: 24px;--prose-head: 13px;--prose-head-lh: 18px}.mu-prose-sm{--prose-fs: 14px;--prose-lh: 22px;--prose-h1: 16px;--prose-h1-lh: 24px;--prose-h2: 14px;--prose-h2-lh: 22px;--prose-h3: 14px;--prose-h3-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 calc(var(--mu-row-padding) - var(--mu-control-border-width));border:var(--mu-control-border-width) solid var(--mu-edge);border-radius:var(--mu-row-radius);color:var(--mu-text);background-color:var(--mu-key);white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;transition-property:background-color,border-color,color;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-button:where(:has(>svg:first-child)){padding-inline-start:calc(var(--mu-row-padding-icon) - var(--mu-control-border-width))}.mu-button:where(:has(>.mu-button-label+svg)){padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-control-border-width))}.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)}.mu-button-ghost:hover:not([data-disabled]){background-color:var(--mu-hover);color:var(--mu-text)}}.mu-button:active:not([data-disabled]){background-color:var(--mu-key-hover)}.mu-button-primary{--mu-control-focus: var(--mu-on-primary);border-color:transparent;color:var(--mu-on-primary);background-color:var(--mu-primary)}.mu-button-danger{--mu-control-focus: var(--mu-on-danger);border-color:transparent;color:var(--mu-on-danger);background-color:var(--mu-danger-key)}.mu-button-primary:active:not([data-disabled]){background-color:var(--mu-primary-hover)}.mu-button-danger:active:not([data-disabled]){background-color:var(--mu-danger-key)}.mu-button-ghost{border-color:transparent;color:var(--mu-text-secondary);background-color:transparent}.mu-button-ghost[data-popup-open]{background-color:var(--mu-hover);color:var(--mu-text)}.mu-button-ghost:active:not([data-disabled]){background-color:var(--mu-hover)}.mu-button[data-disabled]:not([data-loading]){--mu-control-focus: var(--mu-focus);background-color:var(--mu-well);border-color:var(--mu-edge);color:var(--mu-text-disabled);cursor:not-allowed}.mu-button[data-loading]{cursor:progress}.mu-button[data-loading-visible]>:not(.mu-spinner){opacity:0}.mu-button>.mu-spinner{position:absolute;inset:0;margin:auto}@media(pointer:coarse){.mu-button{min-width:var(--mu-hit-area);min-height:var(--mu-hit-area)}}}@layer mu{.mu-kbd{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--mu-edge);min-width:var(--mu-control-xs);height:var(--mu-control-xs);padding:0 calc(var(--mu-space-1) - 1px);border-radius:var(--mu-radius-sm);color:var(--mu-text-secondary);background-color:var(--mu-key);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;border:1px solid transparent;max-width:100%;height:var(--mu-control-xs);padding:0 calc(var(--mu-row-padding) + var(--mu-space-1) / 2 - 1px);border-radius:var(--mu-radius-full);white-space:nowrap;vertical-align:middle}.mu-badge-label{min-width:0;overflow:hidden;text-overflow:ellipsis}.mu-badge-neutral{--mu-badge-tint: oklch(from var(--mu-badge-color) clamp(.5, l, .75) c h / 18%);color:var(--mu-text);background-color:var(--mu-badge-tint, var(--mu-well))}@supports not (color: oklch(from red l c h)){.mu-badge-neutral{--mu-badge-tint: color-mix(in srgb, var(--mu-badge-color) 18%, transparent)}}.mu-badge-primary{color:var(--mu-on-primary);background-color:var(--mu-primary)}.mu-badge-outline{color:var(--mu-text-secondary);border-color: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-text-secondary);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-text-secondary)}.mu-link-muted:hover{color:var(--mu-text)}.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-text)}.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]{color:var(--mu-text-disabled);cursor:not-allowed}.mu-field-description{margin:0;color:var(--mu-text-secondary)}.mu-field-root[data-invalid]>.mu-field-description{display:none}.mu-field-horizontal{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--mu-space-4);row-gap:0}.mu-field-horizontal>*{grid-column:2;grid-row:1;justify-self:end}.mu-field-horizontal:where(:has(>.mu-field-description))>*{grid-row:1 / span 2}.mu-field-horizontal>.mu-field-label{grid-column:1;grid-row:1;justify-self:stretch;font-weight:400}.mu-field-horizontal>.mu-field-description{grid-column:1;grid-row:2;justify-self:stretch;margin-top:var(--mu-space-1)}.mu-field-horizontal>.mu-field-error{grid-column:1 / -1;grid-row:3;justify-self:stretch;margin-top:var(--mu-space-1)}.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:calc(-1 * var(--mu-space-1));padding:0;color:var(--mu-text)}}@layer mu{.mu-input-root{--mu-field-edge: 1px;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 calc(var(--mu-row-padding) - var(--mu-field-edge));border-radius:var(--mu-row-radius);color:var(--mu-text);background-color:var(--mu-surface);border:var(--mu-field-edge) solid var(--mu-edge);outline:none;cursor:text}.mu-input-root:where(:has(>.mu-input-prefix)){padding-inline-start:calc(var(--mu-row-padding-icon) - var(--mu-field-edge))}.mu-input-root:where(:has(>.mu-input-suffix)){padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-field-edge))}.mu-input-root:is([data-invalid],[aria-invalid=true],:has(>[data-invalid])){border-color:var(--mu-danger)}.mu-input-root:is([data-disabled],[aria-disabled=true],:has(>[data-disabled])){color:var(--mu-text-disabled);background-color:var(--mu-well);border-color:var(--mu-edge);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-size:var(--mu-row-field-font-size);font-weight:400}.mu-input-root:where(:not(:has(>.mu-input))) :where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]),textarea){font-size:var(--mu-row-field-font-size)}.mu-input::placeholder{color:var(--mu-text-secondary);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-text-secondary)}.mu-input-root:where([data-disabled],[aria-disabled=true],:has(>[data-disabled])) :where(.mu-input,.mu-input-prefix,.mu-input-suffix){color:var(--mu-text-disabled)}.mu-input-root:where([data-disabled],[aria-disabled=true],:has(>[data-disabled])) .mu-input::placeholder{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-input-root{min-height:var(--mu-hit-area)}}}@layer mu{.mu-textarea{--mu-field-edge: 1px;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-field-line-height)) / 2 - var(--mu-field-edge)) calc(var(--mu-row-padding) - var(--mu-field-edge));border:var(--mu-field-edge) solid var(--mu-edge);outline:none;border-radius:var(--mu-row-radius);color:var(--mu-text);background-color:var(--mu-surface);font-size:var(--mu-row-field-font-size);line-height:var(--mu-row-field-line-height);font-weight:400;resize:vertical}.mu-textarea::placeholder{color:var(--mu-text-secondary);opacity:1}.mu-textarea:is([data-invalid],[aria-invalid=true]){border-color:var(--mu-danger)}.mu-textarea:is([data-disabled],[aria-disabled=true]){color:var(--mu-text-disabled);background-color:var(--mu-well);border-color:var(--mu-edge);cursor:not-allowed}.mu-textarea:where([data-disabled],[aria-disabled=true])::placeholder{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-textarea{min-height:var(--mu-hit-area)}}}@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);border:var(--mu-control-border-width) solid var(--mu-control-edge);cursor:pointer}.mu-checkbox[data-checked],.mu-checkbox[data-indeterminate]{--mu-control-focus: var(--mu-on-primary);background-color:var(--mu-primary);border-color:transparent}.mu-checkbox[data-invalid]{border-color:var(--mu-danger)}.mu-checkbox[data-disabled]{--mu-control-focus: var(--mu-focus);background-color:var(--mu-well);border-color:var(--mu-edge);color:var(--mu-text-disabled);cursor:not-allowed}.mu-checkbox-indicator{display:flex}.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(pointer:coarse){.mu-checkbox{min-width:0;min-height:0;margin:calc((var(--mu-hit-area) - var(--mu-row-check-box)) / 2)}}}@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:calc(var(--mu-inset) - var(--mu-control-border-width));border-radius:var(--mu-radius-full);background-color:var(--mu-well);border:var(--mu-control-border-width) solid var(--mu-edge);cursor:pointer}.mu-switch[data-checked]{--mu-control-focus: var(--mu-on-primary);background-color:var(--mu-primary);border-color:transparent}.mu-switch[data-invalid]{border-color:var(--mu-danger)}.mu-switch[data-disabled]{--mu-control-focus: var(--mu-focus);background-color:var(--mu-well);border-color:var(--mu-edge);color:var(--mu-text-disabled);cursor:not-allowed}.mu-switch-thumb{display:block;width:var(--knob);height:var(--knob);border-radius:var(--mu-radius-full);background-color:var(--mu-text);transition:translate 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[data-disabled]>.mu-switch-thumb{background-color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-switch{min-width:0;min-height:0;margin-block:calc((var(--mu-hit-area) - var(--switch-h)) / 2);margin-inline:calc((var(--mu-hit-area) - var(--switch-w)) / 2)}}@media(prefers-reduced-motion:reduce){.mu-switch-thumb{transition: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);border:var(--mu-control-border-width) solid var(--mu-control-edge);cursor:pointer}.mu-radio[data-checked]{--mu-control-focus: var(--mu-on-primary);background-color:var(--mu-primary);border-color:transparent}.mu-radio[data-invalid]{border-color:var(--mu-danger)}.mu-radio[data-disabled]{--mu-control-focus: var(--mu-focus);--mu-on-primary: var(--mu-text-disabled);background-color:var(--mu-well);border-color:var(--mu-edge);color:var(--mu-text-disabled);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)}@media(pointer:coarse){.mu-radio{min-width:0;min-height:0;margin:calc((var(--mu-hit-area) - var(--mu-row-check-box)) / 2)}}}@layer mu{.mu-toggle{position:relative;display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;min-width:0;min-height:var(--mu-row-height);margin:0;padding:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2 - var(--mu-control-border-width)) calc(var(--mu-row-padding) - var(--mu-control-border-width));border:var(--mu-control-border-width) solid transparent;border-radius:var(--mu-row-radius);color:var(--mu-text-secondary);background-color:transparent;white-space:normal;cursor:pointer;user-select:none;transition-property:background-color,border-color,color;transition-duration:var(--mu-duration-press);transition-timing-function:var(--mu-ease-out)}.mu-toggle:where(:has(>svg:first-child)){padding-inline-start:calc(var(--mu-row-padding-icon) - var(--mu-control-border-width))}.mu-toggle.mu-toggle-icon{flex:none;width:var(--mu-row-height);padding:0}.mu-toggle-label{min-width:0;overflow-wrap:break-word}.mu-toggle>svg{flex:none}@media(hover:hover){.mu-toggle:hover:where(:not([data-disabled])){color:var(--mu-text);background-color:var(--mu-hover)}}.mu-toggle[data-pressed]{color:var(--mu-text);background-color:var(--mu-well)}.mu-toggle[data-disabled]{color:var(--mu-text-disabled);cursor:not-allowed}@media(pointer:coarse){.mu-toggle{min-width:var(--mu-hit-area);min-height:var(--mu-hit-area)}}@media(forced-colors:active){.mu-toggle{forced-color-adjust:none;--mu-text: var(--mu-key);--mu-text-secondary: var(--mu-key);--mu-hover: transparent;--mu-well: transparent}.mu-toggle:where([data-pressed]){border-color:var(--mu-key)}.mu-toggle:where([data-pressed])[data-disabled]{border-color:var(--mu-text-disabled)}}}@layer mu{.mu-segmented{position:relative;display:inline-flex;align-items:stretch;gap:0;box-sizing:border-box;min-height:var(--mu-row-height);padding:calc(var(--mu-inset) - 1px);border-radius:var(--mu-row-radius);background-color:var(--mu-well);border:1px solid transparent}.mu-segmented-key{position:absolute;top:calc(var(--mu-inset) - 1px);left:0;width:var(--key-width);bottom:calc(var(--mu-inset) - 1px);translate:var(--key-left) 0;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));box-sizing:border-box;border:1px solid transparent;background-color:var(--mu-key);pointer-events:none}.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{--segment-line: min(var(--mu-row-line-height), calc(var(--mu-row-height) - 2 * var(--mu-inset) - 2 * var(--mu-focus-edge-width)));position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mu-row-gap);box-sizing:border-box;min-width:0;min-height:calc(var(--mu-row-height) - 2 * var(--mu-inset));margin:0;padding:calc((var(--mu-row-height) - 2 * var(--mu-inset) - var(--segment-line)) / 2 - var(--mu-control-border-width)) calc(var(--mu-row-padding) - var(--mu-inset) - var(--mu-control-border-width));border:var(--mu-control-border-width) solid transparent;border-radius:calc(var(--mu-row-radius) - var(--mu-inset));color:var(--mu-text-secondary);background:none;font:inherit;line-height:var(--segment-line);white-space:normal;overflow-wrap:anywhere;cursor:pointer;user-select:none}.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:where(:not([data-disabled])),.mu-segmented>.mu-toggle:hover:where(:not([data-disabled])){color:var(--mu-text);background:none}}.mu-segmented-item[data-active],.mu-segmented>.mu-toggle[data-pressed]{color:var(--mu-text);background:none}.mu-segmented-item[data-disabled],.mu-segmented>.mu-toggle[data-disabled]{color:var(--mu-text-disabled);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:var(--mu-focus-edge-width) solid transparent;border-radius:var(--mu-radius-sm)}@media(pointer:coarse){.mu-segmented-item,.mu-segmented>.mu-toggle{min-width:var(--mu-hit-area);min-height:var(--mu-hit-area)}}@media(forced-colors:active){.mu-segmented{--mu-text: var(--mu-key);--mu-text-secondary: var(--mu-key)}.mu-segmented-item,.mu-segmented>.mu-toggle{forced-color-adjust:none;background:none;border-color:transparent}.mu-segmented-key{forced-color-adjust:none;background-color:transparent;border-color:var(--mu-key)}}}@layer mu{.mu-toggle-group{display:inline-flex;align-items:center;gap:var(--mu-inset);box-sizing:border-box;min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}.mu-toggle-group.mu-segmented{align-items:stretch;gap:0}.mu-toggle-group>.mu-toggle:not(.mu-toggle-icon){min-width:min-content}.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)}.mu-toggle-group.mu-toggle-group-full{display:flex;width:100%}.mu-toggle-group-full>.mu-toggle:not(.mu-toggle-icon){flex:1 1 auto}}@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:calc(var(--mu-space-4) - 1px);outline:0}.mu-popover-title{margin:0;color:var(--mu-text)}.mu-popover-description{margin:calc(-1 * var(--mu-space-2)) 0 0;color:var(--mu-text-secondary)}.mu-popover-list{gap:0;padding:calc(var(--mu-radius-xl) - var(--mu-radius-md) - 1px)}.mu-popover-list>.mu-popover-title{padding:var(--mu-space-2) var(--mu-row-padding) 0}.mu-popover-list>.mu-popover-description{margin:0;padding:0 var(--mu-row-padding) var(--mu-space-2)}}@layer mu{.mu-menu-popup{box-sizing:border-box;min-width:min(var(--mu-menu-width),var(--available-width, 100vw));max-width:min(var(--mu-menu-max-width),var(--available-width, 100vw));max-height:var(--available-height);overflow-y:auto;padding:calc(var(--mu-radius-xl) - var(--mu-radius-md) - 1px);outline:0}.mu-menu-popup.mu-s-sm{--mu-row-height: var(--mu-control-compact)}.mu-menu-item{display:flex;align-items:center;gap:var(--mu-space-2);box-sizing:border-box;width:100%;height:var(--mu-row-height);margin:0;padding:0 var(--mu-row-padding);border:0;border-radius:var(--mu-row-radius);color:var(--mu-text);background-color:transparent;font:inherit;font-weight:400;text-align:start;text-decoration:none;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-text-secondary)}.mu-menu-item[data-highlighted],.mu-menu-item[data-popup-open]{background-color:var(--mu-hover)}.mu-menu-item:focus-visible:not([data-disabled]){background-color:var(--mu-hover)}.mu-menu-item[data-disabled]{color:var(--mu-text-disabled)}.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-item:where(:has(>.mu-menu-text)){align-items:flex-start;height:auto;min-height:var(--mu-row-height);padding-block:calc((var(--mu-row-height) - var(--mu-row-line-height)) / 2)}.mu-menu-item:where(:has(>.mu-menu-text))>svg,.mu-menu-item:where(:has(>.mu-menu-text))>.mu-menu-indicator{margin-block:calc((var(--mu-row-line-height) - var(--mu-row-icon)) / 2)}.mu-menu-text{display:flex;flex:1;flex-direction:column;min-width:0}.mu-menu-text>.mu-menu-label{flex:none}.mu-menu-description{color:var(--mu-text-secondary);white-space:normal}.mu-menu-shortcut{margin-inline-start:var(--mu-space-4);color:var(--mu-text-secondary)}.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-text)}.mu-menu-chevron{margin-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-row-padding));color:var(--mu-text-secondary)}.mu-menu-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-text-secondary)}.mu-menu-separator{height:1px;margin:calc(var(--mu-radius-xl) - var(--mu-radius-md)) calc(var(--mu-radius-md) - var(--mu-radius-xl));background-color:var(--mu-line)}.mu-menu-item[data-disabled]>svg{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-menu-item{min-height:var(--mu-hit-area)}.mu-menu-item:where(:has(>.mu-menu-text)){min-height:var(--mu-hit-area)}}}@layer mu{.mu-select-trigger{justify-content:space-between;min-width:0;padding-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-control-border-width));text-align:start}.mu-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}.mu-select-value[data-placeholder]{color:var(--mu-text-secondary)}.mu-select-icon{display:flex;flex:none;color:var(--mu-text-secondary)}.mu-select-trigger.mu-button-ghost:not([data-disabled]){color:var(--mu-text)}.mu-select-trigger[data-invalid]{border-color:var(--mu-danger)}.mu-select-positioner{outline:0}.mu-select-popup{box-sizing:border-box;min-width:min(max(var(--mu-menu-width),var(--anchor-width)),var(--available-width));max-width:min(max(var(--mu-menu-max-width),var(--anchor-width)),var(--available-width));max-height:var(--available-height);padding:calc(var(--mu-radius-xl) - var(--mu-radius-md) - 1px);outline:0}.mu-select-popup.mu-s-sm{--mu-row-height: var(--mu-control-compact)}.mu-select-list{overflow-y:auto;max-height:var(--available-height);scroll-padding-block:calc(var(--mu-radius-xl) - var(--mu-radius-md));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:var(--mu-row-radius);color:var(--mu-text);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-text-secondary)}.mu-select-item[data-highlighted]{background-color:var(--mu-hover)}.mu-select-item[data-disabled]{color:var(--mu-text-disabled)}.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-text)}.mu-select-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-text-secondary)}.mu-select-separator{height:1px;margin:calc(var(--mu-radius-xl) - var(--mu-radius-md)) calc(var(--mu-radius-md) - var(--mu-radius-xl));background-color:var(--mu-line)}.mu-select-scroll-arrow{display:grid;place-items:center;height:var(--mu-space-4);color:var(--mu-text-secondary)}.mu-select-trigger[data-disabled] :where(.mu-select-value,.mu-select-icon),.mu-select-item[data-disabled]>svg{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-select-trigger{min-width:var(--mu-hit-area)}.mu-select-item{min-height:var(--mu-hit-area)}}}@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:calc(var(--mu-space-5) - 1px);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-popup.mu-dialog-bare{gap:0;padding:0;overflow:hidden}.mu-dialog-full{place-items:stretch;padding:0}.mu-dialog-full>.mu-dialog-popup{width:100%;height:100%;border:0;border-radius:0}.mu-dialog-title{margin:0;color:var(--mu-text)}.mu-dialog-description{margin:calc(-1 * var(--mu-space-3)) 0 0;color:var(--mu-text-secondary)}.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:calc(max(var(--mu-space-5),env(safe-area-inset-bottom)) - 1px);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-popup.mu-dialog-bare{padding-bottom:env(safe-area-inset-bottom)}.mu-dialog-sheet .mu-dialog-footer{flex-direction:column-reverse}.mu-dialog-sheet .mu-dialog-footer>*{width:100%}}@media(pointer:coarse){.mu-dialog-popup:where(:has(>.mu-dialog-x))>.mu-dialog-title{padding-inline-end:var(--mu-hit-area)}}@media(prefers-reduced-motion:reduce){.mu-dialog-popup,.mu-dialog-backdrop{transition:none}.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-drawer-backdrop{position:fixed;inset:0;z-index:var(--mu-layer-overlay);background-color:var(--mu-overlay);opacity:calc(1 - var(--drawer-swipe-progress, 0));transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-drawer-backdrop[data-starting-style],.mu-drawer-backdrop[data-ending-style]{opacity:0}.mu-drawer-viewport{position:fixed;inset:0;z-index:var(--mu-layer-overlay);display:flex}.mu-drawer-left{justify-content:flex-start}.mu-drawer-right{justify-content:flex-end}.mu-drawer-bottom{align-items:flex-end}.mu-drawer-popup{--drawer-hidden: 0 0;position:relative;box-sizing:border-box;width:var(--mu-drawer-width);max-width:calc(100% - var(--mu-space-12));height:100%;overflow-y:auto;overscroll-behavior:contain;background-color:var(--mu-surface);outline:0;translate:var(--drawer-swipe-movement-x, 0) var(--drawer-swipe-movement-y, 0);transition:translate var(--mu-duration-settle) var(--mu-ease-settle),opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-drawer-bottom>.mu-drawer-popup{width:100%;max-width:none;height:auto;max-height:calc(100% - var(--mu-space-6));padding-bottom:env(safe-area-inset-bottom);border-start-start-radius:var(--mu-radius-2xl);border-start-end-radius:var(--mu-radius-2xl)}.mu-drawer-left>.mu-drawer-popup{--drawer-hidden: -100% 0;border-right:1px solid var(--mu-line)}.mu-drawer-right>.mu-drawer-popup{--drawer-hidden: 100% 0;border-left:1px solid var(--mu-line)}.mu-drawer-bottom>.mu-drawer-popup{--drawer-hidden: 0 100%;border-top:1px solid var(--mu-edge)}.mu-drawer-popup[data-starting-style],.mu-drawer-popup[data-ending-style]{translate:var(--drawer-hidden)}.mu-drawer-popup[data-swiping]{transition:none;user-select:none}.mu-drawer-content{display:flex;flex-direction:column;gap:var(--mu-space-4);box-sizing:border-box;min-height:100%;padding:var(--mu-space-5)}.mu-drawer-bare>.mu-drawer-content{gap:0;height:100%;min-height:0;padding:0}.mu-drawer-popup:where(:has(>.mu-drawer-x))>.mu-drawer-content>.mu-drawer-title{padding-inline-end:var(--mu-space-6)}.mu-drawer-title{margin:0;color:var(--mu-text)}.mu-drawer-description{margin:calc(-1 * var(--mu-space-3)) 0 0;color:var(--mu-text-secondary)}.mu-drawer-x{position:absolute;top:var(--mu-space-4);inset-inline-end:var(--mu-space-4)}@media(pointer:coarse){.mu-drawer-popup:where(:has(>.mu-drawer-x))>.mu-drawer-content>.mu-drawer-title{padding-inline-end:var(--mu-hit-area)}}@media(prefers-reduced-motion:reduce){.mu-drawer-popup,.mu-drawer-backdrop{transition:none}.mu-drawer-popup[data-starting-style],.mu-drawer-popup[data-ending-style]{translate:none;opacity:0}}}@layer mu{.mu-toast-viewport{position:fixed;top:var(--mu-space-6);right: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{top:max(var(--mu-space-4),env(safe-area-inset-top));right:var(--mu-space-4);left:var(--mu-space-4);width:auto}}.mu-toast{--mu-control-border-width: 1px;border-width:var(--mu-control-border-width);--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) + var(--toast-index) * var(--mu-row-gap) + var(--toast-swipe-movement-y));position:absolute;top:0;right:0;z-index:calc(var(--mu-layer-toast) - var(--toast-index));box-sizing:border-box;width:100%;height:var(--height);transform-origin:top 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:after{content:"";position:absolute;bottom: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:calc(var(--mu-space-3) - var(--mu-control-border-width)) calc(var(--mu-space-3) - var(--mu-control-border-width)) calc(var(--mu-space-3) - var(--mu-control-border-width)) calc(var(--mu-space-4) - var(--mu-control-border-width));overflow:hidden;border-radius:inherit;transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-toast-content[data-behind]{opacity:0;transition:none}.mu-toast-content[data-expanded]{opacity:1;transition:opacity var(--mu-duration-settle) var(--mu-ease-out)}.mu-toast-icon{margin-block:calc((var(--mu-row-height) - var(--mu-row-icon)) / 2);color:var(--mu-text-secondary)}.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-text)}.mu-toast-description{margin:0;color:var(--mu-text-secondary)}.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,.mu-toast-content,.mu-toast-content[data-expanded]{transition:none}.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) - var(--mu-field-edge))}.mu-combobox-trigger{box-sizing:border-box;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:var(--mu-control-border-width) solid transparent;border-radius:var(--mu-radius-sm);color:var(--mu-text-secondary);background:none;cursor:pointer}.mu-combobox-trigger:hover:not([data-disabled]){color:var(--mu-text)}.mu-combobox-trigger[data-disabled]{color:var(--mu-text-disabled);cursor:not-allowed}.mu-combobox-popup{box-sizing:border-box;width:var(--anchor-width);min-width:min(var(--mu-menu-width),var(--available-width));max-width:var(--available-width);outline:0}.mu-combobox-list{box-sizing:border-box;max-height:min(calc(var(--mu-list-height) - var(--mu-inset)),calc(var(--available-height) - var(--mu-inset)));overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--mu-radius-xl) - var(--mu-radius-md) - 1px);scroll-padding-block:calc(var(--mu-radius-xl) - var(--mu-radius-md));outline:0}.mu-combobox-list[data-empty]{padding:0}.mu-combobox-popup.mu-s-sm .mu-combobox-list{--mu-row-height: var(--mu-control-compact)}.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:var(--mu-row-radius);color:var(--mu-text);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-text-secondary)}.mu-combobox-item[data-highlighted]{background-color:var(--mu-hover)}.mu-combobox-item[data-disabled]{color:var(--mu-text-disabled)}.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-text)}.mu-combobox-row{display:flex;gap:var(--mu-inset)}.mu-combobox-row+.mu-combobox-row{margin-top:var(--mu-inset)}.mu-combobox-row>.mu-combobox-item{flex:none;justify-content:center;width:var(--mu-row-height);padding:0;border:1px solid transparent;border-radius:var(--mu-row-radius)}.mu-combobox-row>.mu-combobox-item>.mu-combobox-item-text{flex:none;overflow:visible}.mu-combobox-row>.mu-combobox-item>.mu-combobox-indicator{display:none}.mu-combobox-row>.mu-combobox-item[data-selected]{background-color:var(--mu-well);border-color:var(--mu-edge)}.mu-combobox-empty:not(:empty){padding:var(--mu-space-3) var(--mu-space-4);color:var(--mu-text-secondary)}.mu-combobox-group-label{padding:var(--mu-space-2) var(--mu-row-padding) var(--mu-space-1);color:var(--mu-text-secondary)}.mu-combobox-separator{height:1px;margin:calc(var(--mu-radius-xl) - var(--mu-radius-md)) calc(var(--mu-radius-md) - var(--mu-radius-xl));background-color:var(--mu-line)}.mu-combobox-item[data-disabled]>svg{color:var(--mu-text-disabled)}@media(pointer:coarse){.mu-combobox-item{min-height:var(--mu-hit-area)}.mu-combobox-row>.mu-combobox-item{width:var(--mu-hit-area)}.mu-combobox-trigger{width:var(--mu-hit-area);min-height:var(--mu-hit-area)}}}@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-text-secondary)}.mu-collapsible-trigger[data-panel-open]>.mu-collapsible-chevron{rotate:180deg}.mu-collapsible-trigger[data-disabled]>.mu-collapsible-chevron{color:var(--mu-text-disabled)}.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-panel{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-bordered{box-sizing:border-box;border:1px solid var(--mu-line);border-radius:var(--mu-radius-lg);background-color:var(--mu-surface)}.mu-table{width:100%;border-collapse:collapse;color:var(--mu-text);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-text-secondary);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-actions{display:inline-flex;align-items:center;gap:var(--mu-space-1);vertical-align:top}.mu-table-cell>:is(.mu-button,.mu-table-actions){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-text-secondary)}.mu-table-caption{caption-side:bottom;padding:var(--mu-space-2) var(--mu-row-padding) 0;color:var(--mu-text-secondary);text-align:start}.mu-table-bordered .mu-table-caption{padding-bottom:var(--mu-space-2);border-top:1px solid var(--mu-line)}.mu-table-bordered .mu-table-head{background-color:var(--mu-canvas)}.mu-table-bordered :is(.mu-table-head,.mu-table-cell):first-child,.mu-table-bordered .mu-table-caption{padding-inline-start:calc(var(--mu-row-padding) + var(--mu-space-1))}.mu-table-bordered :is(.mu-table-head,.mu-table-cell):last-child{padding-inline-end:calc(var(--mu-row-padding) + var(--mu-space-1))}}@layer mu{.mu-list{box-sizing:border-box;margin:0;padding:0;border:1px solid var(--mu-line);border-radius:var(--mu-radius-lg);color:var(--mu-text);background-color:var(--mu-surface);list-style:none}.mu-list{--list-pad-block: var(--mu-space-3);--list-pad-inline: var(--mu-space-4)}.mu-list.mu-s-sm{--list-pad-block: var(--mu-space-2);--list-pad-inline: var(--mu-space-3)}.mu-list-item{box-sizing:border-box;min-width:0;padding:var(--list-pad-block) var(--list-pad-inline)}.mu-list-item+.mu-list-item{border-top:1px solid var(--mu-line)}.mu-list-item-button{display:flex;align-items:center;gap:var(--mu-space-3);box-sizing:border-box;width:calc(100% + 2 * var(--list-pad-inline));margin:calc(-1 * var(--list-pad-block)) calc(-1 * var(--list-pad-inline));padding:calc(var(--list-pad-block) - var(--mu-control-border-width)) calc(var(--list-pad-inline) - var(--mu-control-border-width));border:var(--mu-control-border-width) solid transparent;border-radius:0;color:inherit;background-color:transparent;font:inherit;text-align:start;text-decoration:none;cursor:pointer;transition:background-color var(--mu-duration-press) var(--mu-ease-out)}.mu-list-item:first-child>.mu-list-item-button{border-start-start-radius:calc(var(--mu-radius-lg) - 1px);border-start-end-radius:calc(var(--mu-radius-lg) - 1px)}.mu-list-item:last-child>.mu-list-item-button{border-end-start-radius:calc(var(--mu-radius-lg) - 1px);border-end-end-radius:calc(var(--mu-radius-lg) - 1px)}@media(hover:hover){.mu-list-item-button:hover:not(:disabled){background-color:var(--mu-hover)}}.mu-list-item-button:active:not(:disabled){background-color:var(--mu-hover)}.mu-list-item-button:disabled{color:var(--mu-text-disabled);cursor:not-allowed}@media(pointer:coarse){.mu-list-item-button{min-height:var(--mu-hit-area)}}@media(prefers-reduced-motion:reduce){.mu-list-item-button{transition:none}}}@layer mu{.mu-form{display:flex;flex-direction:column;gap:var(--mu-space-4);box-sizing:border-box;min-width:0;margin:0;color:var(--mu-text)}.mu-form-title{margin:0;color:var(--mu-text)}.mu-form-description{margin:calc(-1 * var(--mu-space-3)) 0 0;color:var(--mu-text-secondary)}.mu-form-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mu-space-2)}.mu-form-bordered{padding:var(--mu-space-4);border:1px solid var(--mu-line);border-radius:var(--mu-radius-lg);background-color:var(--mu-surface)}.mu-form-bordered>.mu-form-footer{margin:0 calc(-1 * var(--mu-space-4)) calc(-1 * var(--mu-space-4));padding:var(--mu-space-3) var(--mu-space-4);border-top:1px solid var(--mu-line);border-end-start-radius:calc(var(--mu-radius-lg) - 1px);border-end-end-radius:calc(var(--mu-radius-lg) - 1px);background-color:var(--mu-canvas)}}@layer mu{.mu-prose{color:var(--mu-text);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;text-wrap:balance}.mu-prose :where(p,li){text-wrap:pretty}.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 h2{font-size:var(--prose-h2);line-height:var(--prose-h2-lh)}.mu-prose :where(h3,h4,h5,h6){font-size:var(--prose-h3);line-height:var(--prose-h3-lh)}.mu-prose :where(strong,b){font-weight:600}.mu-prose del{color:var(--mu-text-secondary)}.mu-prose a{color:var(--mu-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;border-radius:var(--mu-radius-xs);outline:none}.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-text-secondary)}.mu-prose li:where(:has(>input[type=checkbox]:first-child)){position:relative;list-style:none}.mu-prose li>input[type=checkbox]:first-child{--mu-control-border-width: 1px;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:0;background:none;outline:none;cursor:pointer}.mu-prose li>input[type=checkbox]:first-child:disabled{cursor:default}.mu-prose li>input[type=checkbox]:first-child:before{content:"";position:absolute;inset:0;box-sizing:border-box;border-radius:var(--mu-radius-sm);background-color:var(--mu-well);border:var(--mu-control-border-width) solid var(--mu-control-edge)}.mu-prose li>input[type=checkbox]:first-child:checked:before{background-color:var(--mu-primary);border-color:transparent}.mu-prose li>input[type=checkbox]:first-child:checked:after{content:"";position:absolute;inset:calc(var(--mu-inset) + 1px);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-text-secondary);text-decoration:line-through}@media(pointer:coarse){.mu-prose li:where(:has(>input[type=checkbox]:first-child)){padding-inline-start:calc(var(--mu-hit-area) - var(--mu-space-6))}.mu-prose li>input[type=checkbox]:first-child:disabled{inset-inline-start:calc(-1 * var(--mu-space-6) + (var(--mu-hit-area) - var(--mu-space-4)) / 2)}.mu-prose li:where(:has(>input[type=checkbox]:first-child:not(:disabled))){box-sizing:border-box;min-height:var(--mu-hit-area);padding-block:calc((var(--mu-hit-area) - var(--prose-lh)) / 2)}.mu-prose li>input[type=checkbox]:first-child:not(:disabled){top:0;width:var(--mu-hit-area);height:var(--mu-hit-area)}.mu-prose li>input[type=checkbox]:first-child:not(:disabled):before{inset:calc((var(--mu-hit-area) - var(--mu-space-4)) / 2)}.mu-prose li>input[type=checkbox]:first-child:not(:disabled):checked:after{inset:calc((var(--mu-hit-area) - var(--mu-space-4)) / 2 + var(--mu-inset) + 1px)}}.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-text-secondary)}.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-text-secondary);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-text-secondary);background-color:var(--mu-well)}}@layer mu{.mu-focus:focus-visible,.mu-toast:focus-visible{--mu-control-border-width: var(--mu-focus-edge-width);border-color:var(--mu-control-focus, var(--mu-focus))}.mu-link:focus-visible,.mu-prose a:focus-visible{text-decoration:underline;text-decoration-style:double}.mu-prose li>input[type=checkbox]:first-child:focus-visible{--mu-control-border-width: var(--mu-focus-edge-width)}.mu-prose li>input[type=checkbox]:first-child:focus-visible:before{border-color:var(--mu-focus)}.mu-prose li>input[type=checkbox]:first-child:checked:focus-visible:before{border-color:var(--mu-on-primary)}@media(forced-colors:active){.mu-focus:focus-visible,.mu-toast:focus-visible,.mu-prose li>input[type=checkbox]:first-child:focus-visible:before{border-color:var(--mu-focus)}.mu-input-root:focus-within,.mu-textarea:focus-within{--mu-field-edge: var(--mu-focus-edge-width);border-color:var(--mu-focus-edge)}.mu-switch-thumb{forced-color-adjust:none;background-color:var(--mu-key)}.mu-switch-thumb[data-checked]{background-color:var(--mu-on-primary)}}}

package/dist/tokens.css

@@ -1 +1 @@
-@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-edge: #d0d0d0;--mu-control-edge: #909090;--mu-line: #dedede;--mu-overlay: rgba(0,0,0,.32);--mu-text: #1a1a1a;--mu-text-secondary: #5e5e5e;--mu-text-disabled: #666666;--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-text)}[data-theme=dark]{--mu-canvas: #0f0f0f;--mu-surface: #1a1a1a;--mu-well: #252525;--mu-hover: #252525;--mu-key: #343434;--mu-key-hover: #3c3c3c;--mu-edge: #343434;--mu-control-edge: #777777;--mu-line: #252525;--mu-overlay: rgba(0,0,0,.6);--mu-text: #ededed;--mu-text-secondary: #adadad;--mu-text-disabled: #9e9e9e;--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-text);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-control-compact: 28px;--mu-inset: 2px;--mu-hit-area: 44px;--mu-focus-edge-width: 1px;--mu-icon-xs: 12px;--mu-icon-sm: 14px;--mu-icon-md: 16px;--mu-icon-stroke: 1.25px;--mu-content-width: 720px;--mu-sidebar-width: 240px;--mu-menu-width: 160px;--mu-menu-max-width: 280px;--mu-list-height: 240px;--mu-popover-width: 280px;--mu-tooltip-width: 240px;--mu-toast-width: 360px;--mu-dialog-width: 440px;--mu-drawer-width: 320px;--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: -apple-system, BlinkMacSystemFont, "Segoe UI (mu)", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI (mu)", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace}@media(forced-colors:active){:where(:root,:host,.mu-root),[data-theme]{--mu-focus-edge-width: 2px;--mu-control-edge: ButtonText;--mu-text-disabled: GrayText;--mu-focus: Highlight;--mu-focus-edge: Highlight;--mu-on-primary: Highlight;--mu-on-danger: Highlight;--mu-key: ButtonText}}}
+@layer mu{:where(:root,:host,.mu-root:not([data-theme] *)),[data-theme=light]{color-scheme:light;--mu-canvas: oklch(.982 .004 95);--mu-surface: #ffffff;--mu-well: oklch(.934 .008 95);--mu-hover: oklch(.95 .006 95);--mu-key: #ffffff;--mu-key-hover: oklch(.982 .004 95);--mu-edge: oklch(.858 .006 95);--mu-control-edge: #909090;--mu-line: oklch(.919 .004 95);--mu-overlay: rgba(0,0,0,.32);--mu-text: #1a1a1a;--mu-text-secondary: #5e5e5e;--mu-text-disabled: #666666;--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-edge)}[data-theme=dark]{--mu-canvas: #0f0f0f;--mu-surface: #1a1a1a;--mu-well: #252525;--mu-hover: #252525;--mu-key: #343434;--mu-key-hover: #3c3c3c;--mu-edge: #343434;--mu-control-edge: #777777;--mu-line: #252525;--mu-overlay: rgba(0,0,0,.6);--mu-text: #ededed;--mu-text-secondary: #adadad;--mu-text-disabled: #9e9e9e;--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-edge);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-control-compact: 28px;--mu-inset: 2px;--mu-hit-area: 44px;--mu-focus-edge-width: 1px;--mu-icon-xs: 12px;--mu-icon-sm: 14px;--mu-icon-md: 16px;--mu-icon-stroke: 1.25px;--mu-content-width: 720px;--mu-sidebar-width: 240px;--mu-menu-width: 160px;--mu-menu-max-width: 280px;--mu-list-height: 240px;--mu-popover-width: 280px;--mu-tooltip-width: 240px;--mu-toast-width: 360px;--mu-dialog-width: 440px;--mu-drawer-width: 320px;--mu-layer-popup: 50;--mu-layer-overlay: 50;--mu-layer-toast: 60;--mu-duration-press: 0ms;--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: -apple-system, BlinkMacSystemFont, "Segoe UI (mu)", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI (mu)", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mu-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace}@media(forced-colors:active){:where(:root,:host,.mu-root),[data-theme]{--mu-focus-edge-width: 2px;--mu-control-edge: ButtonText;--mu-text-disabled: GrayText;--mu-focus: Highlight;--mu-focus-edge: Highlight;--mu-on-primary: Highlight;--mu-on-danger: Highlight;--mu-key: ButtonText}}}

package/dist/types/components/collapsible/index.d.ts

@@ -7,7 +7,7 @@ export interface RootProps extends BaseCollapsible.Root.Props {
 export declare const Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export interface TriggerProps extends BaseCollapsible.Trigger.Props {
 }
-/** A ghost key with a chevron at the end that turns while the panel is open. */
+/** A ghost key with a chevron at the end that points up while the panel is open. */
 export declare const Trigger: import("react").ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export interface PanelProps extends BaseCollapsible.Panel.Props {
 }

package/dist/types/components/select/index.d.ts

@@ -25,8 +25,8 @@ export interface PopupProps extends BaseSelect.Popup.Props, PositionerProps {
     container?: BaseSelect.Portal.Props['container'];
 }
 /**
- * The list of items. By default it opens over the trigger with the chosen
- * item on top of the value; `alignItemWithTrigger={false}` opens it below.
+ * The list of items. By default it opens below the trigger, aligned to its
+ * start edge. `alignItemWithTrigger` can opt into value-aligned positioning.
  */
 export declare const Popup: import("react").ForwardRefExoticComponent<Omit<PopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export interface ItemProps extends BaseSelect.Item.Props {

package/dist/types/components/tabs/index.d.ts

@@ -8,7 +8,7 @@ export interface RootProps extends BaseTabs.Root.Props {
 export declare const Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export interface ListProps extends BaseTabs.List.Props {
 }
-/** The well that holds the tabs, with the sliding key built in. */
+/** The well that holds the tabs, with the selected key built in. */
 export declare const List: import("react").ForwardRefExoticComponent<Omit<ListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export interface TabProps extends BaseTabs.Tab.Props {
     icon?: IconElement;

package/dist/types/components/toggle-group/index.d.ts

@@ -9,7 +9,7 @@ export interface ToggleGroupProps extends BaseToggleGroup.Props {
 }
 /**
  * A row of Toggles. With `multiple` it is a toolbar of independent on/off
- * toggles. Without it, one choice among peers: a well with one sliding key,
+ * toggles. Without it, one choice among peers: a well with one selected key,
  * the same control as Tabs.
  */
 export declare const ToggleGroup: import("react").ForwardRefExoticComponent<Omit<ToggleGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/llms-full.txt

@@ -2,7 +2,7 @@
 
 # Memos UI design system
 
-Memos UI is one calm, dense and flat system for every product we build: memos (the app), the website, the web clipper and whatever comes next. Pure grays and ink emphasis keep attention on people's content. Hierarchy comes from type, spacing and fills. Components reuse a few shared state treatments; pointer events do not add decorative motion or effects.
+Memos UI is one calm, dense and flat system for every product we build: memos (the app), the website, the web clipper and whatever comes next. Quiet neutrals, a warm Light canvas and ink emphasis keep attention on people's content. Hierarchy comes from type, spacing and fills. Components reuse a few shared state treatments; pointer events do not add decorative motion or effects.
 
 These docs describe the target system. They are the source of truth for `@usememos/ui`. Where the code in `packages/` differs from them, the code is out of date and should move toward the docs.
 
@@ -17,12 +17,13 @@ It is not a general-purpose UI library for outside developers. Components are ge
 
 | Doc | What it covers |
 | --- | --- |
+| [Design reference: Linear](design-reference.md) | Official source evidence and how we apply it to Memos UI |
 | [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 and Dark, and how themes are chosen |
 | [Depth](depth.md) | Flat surface roles, borders and focus without shadows or outlines |
 | [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 |
-| [Motion](motion.md) | Press, settle and fade timing, and reduced motion |
+| [Motion](motion.md) | Immediate feedback, minimal opening and closing, and reduced motion |
 | [States](states.md) | Hover, pressed, loading, disabled, invalid and focus |
 | [Icons](icons.md) | Lucide, sizes, the fixed stroke and accessibility |
 | [Components](components/README.md) | The 31 components, what was left out, and one page per component |
@@ -36,26 +37,61 @@ 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).
 - **Flat and calm by default.** Fills identify controls and state. Reuse shared interaction treatments without press movement, scaling or brightness filters. 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 links and text selection, never as a fill. Focus is ink.
+- **Ink is the accent.** The primary action and checked marks use `primary`: near-black in Light, near-white in Dark. Toggles and single choices use quiet saved-state fills.
+- **One quiet hue.** `accent` is a quiet blue used only for links and text selection, never as a fill. Non-text keyboard focus is ink; text-entry focus uses its caret or selection.
 - **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 one fixed screen-pixel stroke, 1.25px, at every size.
 - **The system UI font** for all text. The package ships no font files.
 - **Few sizes, two weights.** App UI uses 13, 14, 16 and 20px text at weights 400 and 500. 20px is for the page title only.
 - **Dense, on a 4px grid.** Controls are 32px tall by default.
 
+<!-- docs/design-reference.md -->
+
+# Design reference: Linear
+
+Linear's product interface is the reference for our hierarchy, restraint and interaction judgment. Our rules below turn that direction into a contract for Memos UI.
+
+## What the sources establish
+
+- The [March 2026 refresh](https://linear.app/now/behind-the-latest-design-refresh) reduces competing chrome, unnecessary icons and dividing lines. Its neutrals move toward a warmer, less saturated gray while content stays clear.
+- The [2024 redesign](https://linear.app/now/how-we-redesigned-the-linear-ui) treats alignment, density and hierarchy as one system, tested across views, platforms and themes.
+- The [August 2026 styling account](https://linear.app/now/styling-linear-for-the-future-stylex) describes explicit component contracts and shared interaction styling, including a highlight treatment for pointer hover and touch press. It also says Linear does not have a formal design system; these articles are not a complete public component specification.
+- The [contextual-menu account](https://linear.app/now/invisible-details) improves the pointer's path into a submenu. Craft includes reducing effort even when no visible effect is added.
+- Emil Kowalski's [animation guidance](https://emilkowal.ski/ui/you-dont-need-animations), with examples from his work at Linear, distinguishes purposeful motion from repeated effects that slow work. It supports short content transitions and immediate keyboard navigation; it does not prescribe one timing for every Linear component.
+
+## How we apply this
+
+These are Memos UI decisions informed by those sources and product review, not claims about Linear's private CSS, tokens or animation timings. A screenshot of a focused composer does not establish how all of Linear's inputs or keyboard paths behave.
+
+| Before | After | Why |
+| --- | --- | --- |
+| Every interaction event calls for a distinct appearance | Implement every behavioral state; add a visible change only when it conveys useful information | Events are not visual variants |
+| A text field emphasizes its entire boundary on focus | Keep border and surface stable; use its caret or text selection | Content and editing stay primary |
+| Holding an action adds a new fill or contrasting border | Reuse one immediate highlight for hover and press; keyboard focus stays independent | Fewer transient treatments |
+| Tabs and single-choice groups animate each selection | Update the selected key immediately | Frequent navigation does not wait for decoration |
+| Select has a separate opening treatment over its chosen value | Open an anchored list with the shared short fade and small offset; keep one chevron and one selected check | Content appears smoothly without extra choreography |
+| Simplifying event feedback also removes opening and closing animations | Retain minimal content transitions; keep hover, focus, press and row navigation immediate | Content visibility and repeated control feedback have different purposes |
+| A switch fades its track, border and knob colors | Update colors immediately; only the knob moves briefly | Motion explains a saved position |
+| Screens restyle controls to solve local taste problems | Fix shared roles and components, then test the contract | Products stay consistent |
+
+## Boundaries
+
+Keep Memos' warm Light canvas, bright surfaces, ink emphasis, text contrast, system fonts and existing size rows. Base UI owns behavior. These remain our tokens and APIs; adopting this reference does not require another styling framework or Linear's branding.
+
+State feedback is immediate. Motion is reserved for spatial changes, appearing or disappearing content, and progress. See [States](states.md), [Motion](motion.md) and [Surfaces and boundaries](depth.md) for the executable rules.
+
 <!-- docs/principles.md -->
 
 # Principles and voice
 
 ## Principles
 
-1. **Content first.** The interface stays gray, so people's words, tags and images are the color on the page.
-2. **Ink is the emphasis.** The primary action, a checked box and a switch that is on use `primary` (near-black in Light, near-white in Dark). There is no brand hue in controls.
-3. **Flat surfaces, clear states.** Fills show controls and state; borders separate surfaces. No shadows, sheen, focus rings or visible outlines. Content stays unboxed. See [Surfaces and boundaries](depth.md).
-4. **Calm by default.** Hierarchy comes from text color, lightness steps and spacing, not from weight, size or extra color. Interaction uses a few shared treatments, not a separate effect for every event. Controls stay still while pressed; passive content does not highlight on hover. Few sizes and two weights: see [Typography](typography.md).
-5. **Dense, not cramped.** Controls are 32px tall by default, and every gap comes from the 4px scale. See [Size, spacing and layout](layout.md).
-6. **One system, many products.** Components are generic. A product's screens are built from them and from the [patterns](patterns.md); nothing in the package knows what a note or a memo is.
+1. **Work first.** Content and editing get attention; supporting navigation and controls recede. Light uses a pale warm-gray canvas with bright surfaces. A control should not become more prominent merely because the pointer crosses it.
+2. **Hierarchy before decoration.** Use alignment, spacing, text contrast and surface lightness before adding boundaries or icons. Ink emphasizes the primary action and saved on states. Brand hues do not fill controls.
+3. **One shared vocabulary.** Components and public classes carry the same roles across products. Solve visual problems in that contract instead of accumulating local overrides. Our [Linear reference](design-reference.md) explains the evidence and the choices we make from it.
+4. **Complete behavior, few visual treatments.** An interaction event is not a visual variant. Text entry stays stable through hover, focus and press; the caret or selection shows typing focus. Actions reuse one highlight, persistent choices retain a selected fill or mark, and errors, unavailable controls and waiting remain understandable.
+5. **Immediate feedback, minimal opening and closing.** Hover, press, focus and frequent selection update immediately. Tabs do not animate every navigation step. Keep short shared transitions when popups, dialogs and panels appear or disappear. Motion explains content visibility, useful position changes or progress. No press movement, scaling, brightness filters or decorative event fades. See [Motion](motion.md) for the shared timings and reduced-motion rules.
+6. **Dense and predictable.** Use the documented size rows, type scale, spacing ladder and icon system: controls default to 32px, on a 4px spacing scale. Components stay generic; products compose their screens from them and the shared patterns.
 
 ## Voice and interface text
 
@@ -80,7 +116,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 links and selection, and status colors only when there is a status.
+Memos UI is ink on paper: a light warm-gray canvas, bright surfaces, `primary` ink for emphasis, one quiet blue for links and selection, and status colors only when there is a status.
 
 ## Roles
 
@@ -88,19 +124,19 @@ Memos UI is ink on paper: pure-gray neutrals, `primary` ink for emphasis, one qu
 | --- | --- | --- |
 | Surfaces | `canvas`, `surface`, `overlay` | The page; then inputs, menus, dialogs and toasts one step up. `overlay` dims the page behind dialogs |
 | Wells | `well` | Switch tracks, segmented groups, unchecked boxes and radios, pressed toggles, inline code |
-| Hover | `hover` | Rows, ghost buttons, the highlighted menu row. About 4% ink over surface |
+| Hover | `hover` | Rows, ghost buttons, the highlighted menu row |
 | Keys | `key`, `key-hover` | Neutral buttons, select triggers, the selected tab, kbd |
 | Text | `text`, `text-secondary`, `text-disabled` | Primary, secondary and disabled text. Each keeps 4.5:1 on the backgrounds named in the token table below |
 | Emphasis | `primary`, `primary-hover`, `on-primary` | Primary button, checked checkbox and radio, switch when on, tooltip |
-| Meta | `accent`, `selection`, `focus`, `focus-edge` | Links and text selection (`accent`); the keyboard focus edge and the focused field edge (`focus`, `focus-edge`, both ink). Never a fill |
+| Meta | `accent`, `selection`, `focus`, `focus-edge` | Links and text selection (`accent`); the control keyboard focus edge and the forced-colors field focus edge (`focus`, `focus-edge`). Never a fill |
 | Status | `success`, `warning`, `danger` and their `-soft` pairs; `danger-key`, `on-danger` | Toasts, badges, field errors, danger buttons |
-| Lines | `edge`, `control-edge`, `line` | Quiet resting borders on fields, neutral buttons, switch tracks and surfaces; stronger hover boundaries and small checkbox/radio markers; separators and table rules |
+| Lines | `edge`, `control-edge`, `line` | Quiet resting borders on fields, neutral buttons, switch tracks and surfaces; small checkbox/radio markers; separators and table rules |
 
 ## Rules
 
-- Neutrals are pure gray, never tinted.
+- Light uses near-neutral warm grays for its canvas, wells, hover fills and quiet boundaries: one OKLCH hue (95), with chroma at most 0.008. Surfaces and keys stay white. Text, ink emphasis and stronger control boundaries stay pure gray; Dark keeps its pure-gray neutrals.
 - `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`; controls reuse the existing 1px focus border. On primary and checked fills, the border uses `on-primary`; danger buttons use `on-danger`. Only forced-colors mode uses a 2px system focus edge. See [States](states.md).
+- Text entry uses its visible caret or text selection to indicate focus. Hover, focus and press keep the same field edge and surface in normal colors. Other controls reuse the existing 1px ink `focus` border. On primary and checked fills, the border uses `on-primary`; danger buttons use `on-danger`. Only forced-colors mode uses a 2px system focus 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.
@@ -113,8 +149,9 @@ There are two themes: **Light** (the default) and **Dark**.
 
 - `text`, `text-secondary` and `text-disabled` name content roles for text and icons, not fixed colors. App themes can set each one; they are not derived from `primary`.
 - Each theme sets every color token explicitly. The package's tests check the values against the table on this page and check the contrast promised here.
+- Light starts with a pale warm-gray paper canvas. White surfaces and keys remain brighter; wells and hover fills are darker steps in the same warm-gray family. This is a flat color treatment, with no texture.
 - Dark keeps the same flat surface roles. Wells and keys are distinct gray fills, and `primary` flips to near-white with a dark `on-primary`.
-- Text fields use the quiet `edge` at rest, `control-edge` on hover and 1px ink on focus. Their resting boundary is below 3:1 in both built-in themes; see [boundary contrast](depth.md#rules). Neutral buttons, Select triggers, switch tracks and the public well/key surfaces also use quiet `edge` at rest. Neutral buttons, Selects and off switch tracks strengthen to `control-edge` on hover. Unchecked checkbox/radio markers and pressed toggles retain `control-edge`, at least 3:1 against `canvas` and `surface` in both themes. An off switch has a `text` knob. Segmented groups use a quiet well and a contrasting selected `key` fill without visible borders in normal colors; hover only changes label and icon contrast. Focus reuses the shared ink edge. Forced colors adds a text-colored border to the selected key; `line` separates content.
+- `edge` separates bounded surfaces and stays quiet at rest, on hover and under selected/pressed attributes. Text fields keep it during typing focus too; neutral buttons, Selects and off switch tracks do not strengthen it on hover. `control-edge` is reserved for small unchecked Checkbox, Radio and Prose task marks, at least 3:1 against `canvas` and `surface` in both themes. On toggles use a `well` fill with `text`, without a visible border; segmented choices use a contrasting `key` fill in a quiet well. Text tokens never become persistent borders. Non-text controls retain their focus treatment; invalid fields retain their error edge. Forced colors adds system-colored selection boundaries when fills disappear; `line` separates content. The quiet resting field boundary remains below 3:1; see [boundary contrast](depth.md#rules).
 
 ### Choosing a theme
 
@@ -157,7 +194,7 @@ An app can offer more themes than the two the package ships, such as a warm Pape
     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 links and selection; focus is ink; status colors only for status.
+- Keep the rules on this page: `primary` stays ink, not a brand hue; `accent` is only for links and selection; control focus stays ink; text-entry focus does not change its normal border; 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.
@@ -166,15 +203,15 @@ An app can offer more themes than the two the package ships, such as a warm Pape
 
 | Token | Light | Dark | Usage |
 | --- | --- | --- | --- |
-| `canvas` | `#fafafa` | `#0f0f0f` | Page background |
+| `canvas` | `oklch(0.982 0.004 95)` | `#0f0f0f` | Page background |
 | `surface` | `#ffffff` | `#1a1a1a` | One lightness step above canvas: inputs, menus, popovers, dialogs, toasts, table headers |
-| `well` | `#e4e4e4` | `#252525` | Flat parts that hold a state: switch, tab, checkbox and radio wells, pressed toggles, inline code. A boundary is added only where the component needs one. Not for enabled text entry |
-| `hover` | `#ececec` | `#252525` | Hover on rows, ghost buttons and wells; the highlighted row in menus and selects |
+| `well` | `oklch(0.934 0.008 95)` | `#252525` | Flat parts that hold a state: switch, tab, checkbox and radio wells, pressed toggles, inline code. A boundary is added only where the component needs one. Not for enabled text entry |
+| `hover` | `oklch(0.95 0.006 95)` | `#252525` | Hover on rows, ghost buttons and wells; the highlighted row in menus and selects |
 | `key` | `#ffffff` | `#343434` | Controls and selected parts: neutral buttons, select triggers, the selected tab, kbd. Flat: neutral buttons and selects use `edge`; selected segments use fill without a visible border in normal colors |
-| `key-hover` | `#fafafa` | `#3c3c3c` | Hover on a neutral key |
-| `edge` | `#d0d0d0` | `#343434` | Quiet resting borders of fields, neutral buttons, switch tracks, well/key surfaces, popups, badges, selects and disabled controls |
-| `control-edge` | `#909090` | `#777777` | Hover boundaries on fields, neutral buttons, selects and off switch tracks; unchecked checkbox/radio markers and pressed toggles; at least 3:1 on `canvas` and `surface` |
-| `line` | `#dedede` | `#252525` | Separators, table rules and menu dividers. 1.25:1 in Light, so structural lines also need spacing or a heading |
+| `key-hover` | `oklch(0.982 0.004 95)` | `#3c3c3c` | Hover on a neutral key |
+| `edge` | `oklch(0.858 0.006 95)` | `#343434` | Quiet resting borders of fields, neutral buttons, switch tracks, well/key surfaces, popups, badges, selects and disabled controls |
+| `control-edge` | `#909090` | `#777777` | Small unchecked Checkbox, Radio and Prose task markers only; never a full-control hover or selected boundary; at least 3:1 on `canvas` and `surface` |
+| `line` | `oklch(0.919 0.004 95)` | `#252525` | Separators, table rules and menu dividers. About 1.2:1 against canvas 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 |
 | `text` | `#1a1a1a` | `#ededed` | Primary text and icons on canvas, surface, well and key (13:1 or more in both themes) |
 | `text-secondary` | `#5e5e5e` | `#adadad` | Secondary text: descriptions, placeholders, unselected tabs and toggles, shortcuts, timestamps (4.9:1 or more on every surface) |
@@ -182,10 +219,10 @@ An app can offer more themes than the two the package ships, such as a warm Pape
 | `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 |
+| `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.7: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)` | 1px keyboard focus border, on `:focus-visible` only; contrasting text color on filled controls |
-| `focus-edge` | `var(--mu-text)` | `var(--mu-text)` | Edge of a focused field (Input, Textarea, Combobox): 1px on any focus, recoloring the quiet `edge` |
+| `focus-edge` | `var(--mu-edge)` | `var(--mu-edge)` | Field focus edge in forced colors, where it becomes system `Highlight`. Normal Input, Textarea and Combobox keep `edge` and show typing focus with the caret or selection |
 | `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) |
@@ -218,11 +255,11 @@ Use these classes before writing new surface styles. `mu-key` covers both a cont
 
 - No `box-shadow`, `text-shadow`, sheen gradients, focus rings or visible `outline`. `outline: none` or `0` only suppresses a browser outline when another visible focus treatment exists.
 - Text entry keeps its `surface` fill on hover and focus. Enabled fields never use a gray well; disabled fields use `well` with `text-disabled` text.
-- Boundary strength follows its job. Text entry starts with a quiet 1px `edge`, uses `control-edge` on hover, and takes a 1px ink edge on focus. A resting text field does not need the same visual weight as a checkbox or switch's state marker. The quiet field boundary is below 3:1 in the built-in themes; this treatment does not guarantee WCAG 1.4.11 for text entry.
+- Boundary strength follows its job. Resting, hovered and persistently selected surfaces never borrow text or focus colors for their borders. Text entry keeps its quiet 1px `edge` under hover, focus and press. A resting text field does not need the same visual weight as a checkbox or switch's state marker. The quiet field boundary is below 3:1 in the built-in themes; this treatment does not guarantee WCAG 1.4.11 for text entry.
 - A checked checkbox or radio uses `primary` with an `on-primary` mark. A switch also moves its knob.
-- Neutral buttons, Select triggers and switch tracks use a quiet `edge` at rest, and `control-edge` on hover. A switch keeps its contrasting `text` knob when off, so state remains visible without a heavy track. Focus uses a fine contrasting border. Checkbox and Radio keep `control-edge` around their small unchecked marks; a pressed Toggle keeps its strong state boundary.
-- A single choice among peers uses a contrasting `key` fill in a quiet well, with `text` for the selected label and icon. The group and selected key have no visible border in normal colors. Hover only increases label and icon contrast; focus reuses `mu-focus`. Borders reserve space, so geometry stays fixed. In forced colors the selected key gains a text-colored border. An independent on/off toggle uses `well` and `control-edge` when on.
-- Surface classes start with a quiet resting boundary. `mu-key` uses a contrasting `text-secondary` edge with Base UI's `data-selected` / `data-pressed`, or `aria-selected="true"` / `aria-pressed="true"`; a pressed Toggle has its own strong boundary. Do not darken every resting surface to make one selected item visible.
+- Neutral buttons, Select triggers and switch tracks keep the quiet `edge` on hover. Button and Select fills provide hover feedback; fields and switches keep their fill. A switch keeps its contrasting `text` knob when off. Checkbox, Radio and Prose task checkboxes alone use `control-edge` around their small unchecked marks. Do not reuse that marker color around a toolbar item or a full control.
+- A single choice among peers uses a contrasting `key` fill in a quiet well, with `text` for the selected label and icon. The group and selected key have no visible border in normal colors. Hover only increases label and icon contrast; focus reuses `mu-focus`. Borders reserve space, so geometry stays fixed. In forced colors the selected key gains a text-colored border. An independent on/off toggle uses `well` and `text` when on, with a transparent reserved border. Disabled on toggles keep that fill and use `text-disabled`. In forced colors an on toggle gets a system-colored boundary because its fill may disappear.
+- Surface classes describe a surface, not an interaction state. `mu-key` keeps its `key` fill and quiet `edge` even with selected or pressed attributes. Use Toggle for a persistent on/off fill, or a key inside a well for one selected choice. Never turn a text token into a persistent border. Non-text focus and invalid fields are the explicit exceptions to quiet control boundaries.
 - Floating surfaces have a border so they remain distinct over the same surface color. Modal backdrops still use `overlay`.
 - Content is grouped by spacing, headings and separators. The boxed exceptions are List, bordered Table and bordered Form.
 - Borders count toward the documented padding. Reserve their space and compensate inner padding so states never move text or change a control's size.
@@ -231,7 +268,7 @@ Use these classes before writing new surface styles. `mu-key` covers both a cont
 
 - `mu-focus` recolors the existing 1px border on `:focus-visible`. The fine edge keeps compact controls calm while contrasting with the fill. It provides the internal `--mu-control-border-width` variable. A custom control reads that variable for its border and subtracts it from its padding, so its text and size stay fixed. Text-only links use an underline instead.
 - The edge uses `focus` ink. On primary and checked fills it uses `on-primary`; danger buttons use `on-danger`, so the edge contrasts with the fill.
-- Fields darken their existing 1px `edge` to ink on any focus. Invalid text fields keep `danger` on hover and focus; their caret also identifies the typing focus.
+- Input, Textarea and Combobox input boxes keep their border, surface and geometry under hover, focus and press. The visible caret or text selection indicates typing focus; do not recolor the box or animate it. Invalid fields keep `danger`. In forced colors, focused fields use the shared 2px system `focus-edge`. The caret/selection approach follows the text-field examples in [WCAG Focus Visible](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html).
 - Invalid non-text controls reuse the shared 1px focus edge. Their error message continues to identify the error; do not add a thicker focus variant for validation.
 - Text links use a double underline on keyboard focus, including links already underlined at rest.
 - Menu items and options use their highlighted fill. Opening a popup never draws a focus boundary around the popup.
@@ -476,63 +513,75 @@ Use these tokens for every `z-index`. Don't invent new layers in product code.
 
 # Motion
 
-Motion explains state and position: knobs and selections settle, and popups appear or disappear. Controls stay still under the pointer. Motion is quick and never added just to decorate an event.
+Keep opening and closing animations. They explain when content appears, where it belongs and when it leaves. Hover, press, focus and frequent selection feedback remain immediate. Controls stay still under the pointer.
+
+Our [Linear reference](design-reference.md) informs this restraint. The timings below are Memos UI decisions, not Linear's published animation specification.
 
 ## Rules
 
-- **Press.** Buttons use shared fill and border color changes over `duration-press` (80ms). No press translation, scaling or brightness filters. Switch knobs, checkboxes and radios do not resize while held.
-- **Selection.** Knobs and the segment key slide over `duration-settle` (150ms) with `ease-settle`. Checkbox and Radio marks appear immediately with their state, without a delayed fade or scale animation.
-- **Popups.** Menus, popovers and collapsible content fade in and rise 4px over `duration-fade` (100ms). Dialogs do the same over `duration-settle`. Sheets slide up 24px.
-- **Tooltips** wait 400ms on hover before they open, and open at once on keyboard focus.
-- **Collapsible content** fades and rises in. There is no height animation, so long content never stutters.
+- **Text entry.** Input, Textarea and Combobox input boxes have no hover, focus or press animation. Typing focus uses the caret or selection without a border change. Validation recolors the existing edge immediately; the surface and geometry stay fixed. Do not add a treatment just because an event occurs.
+
+- **Frequent feedback.** Hover, press, keyboard focus and label changes have no color or border animation. Actions reuse one highlight rather than adding a held-state edge. `duration-press` is 0ms for these shared treatments. No press translation, scaling or brightness filters.
+- **Selection.** Tabs and single-choice ToggleGroups update their selected key immediately, including its position and size. Checkbox and Radio marks also update immediately. Only the Switch knob uses a short positional slide over `duration-settle` (150ms); track, border and knob colors change immediately.
+- **One popup treatment.** Select, Menu, Combobox, Popover and Tooltip share a short fade and `space-1` (4px) vertical offset over `duration-fade` (100ms), using `ease-out`. Opening settles to full opacity and no offset; closing returns to the same hidden frame. No scale, bounce, blur, stagger or animated trigger chevron. Select opens below the trigger by default; it has no separate motion variant.
+- **Dialogs and drawers.** Dialogs use the same fade and `space-1` offset over `duration-settle` (150ms). A Dialog sheet uses `space-6` (24px) from the bottom. Drawers slide from their attached edge over `duration-settle`, using `ease-settle`, and follow the finger during a swipe. Their backdrops fade with the same duration; no delayed or staged entrance.
+- **Tooltips** wait 400ms on hover before opening; keyboard focus has no opening delay. This delay is separate from the short opening transition. Moving between tooltips in a group skips the delay and replayed entrance.
+- **Collapsible content** uses the shared 100ms fade and 4px offset for opening and closing. Its height never animates. A chevron may change orientation immediately to identify the open state; it does not rotate through a transition.
+- **Toasts** retain their short entrance, exit and stack behavior over `duration-settle`. Do not add bounce, stagger or an extra entrance for their content. See [Toast](components/toast.md) for stack and dismissal behavior.
+- **Keep behavior immediate.** Focus management, keyboard navigation, selection and dismissal do not wait for an animation. Opening by keyboard uses the same short content transition; moving focus or the highlighted row inside the open widget never animates. Rapid open/close changes retarget from the current frame instead of queuing or replaying an entrance. Opening and closing share the same short timing; never add a longer exit.
+- **Implementation.** Use the existing CSS transitions and Base UI lifecycle attributes. Animate only opacity and translation for opening and closing; keep size, padding, borders and colors fixed. Do not add an animation library or animate content that is already present on initial render.
 - **Spinners** turn once every 0.8s. **Skeletons** shimmer once every 1.4s.
-- **Reduced motion.** Under `prefers-reduced-motion`, keep color and opacity changes, and drop slides, scaling and shimmer.
+- **Reduced motion.** Under `prefers-reduced-motion: reduce`, opening, closing and Switch position changes are immediate: no translation or opacity transition, including backdrops. Remove shimmer and continuous decorative motion. Keep the visible loading state and all interaction behavior.
 
 ## Tokens
 
 | Token | Value | Usage |
 | --- | --- | --- |
-| `duration-press` | 80ms | Short control fill and border changes |
-| `duration-settle` | 150ms | Knobs and keys slide on release; dialogs open |
-| `duration-fade` | 100ms | Popups open; content inside a control fades in after the key stops |
+| `duration-press` | 0ms | Immediate shared hover, press and focus feedback |
+| `duration-settle` | 150ms | Switch knob position; Dialog and Drawer opening and closing |
+| `duration-fade` | 100ms | Shared popup and Collapsible opening and closing |
 | `duration-spin` | 800ms | One turn of a Spinner |
 | `duration-shimmer` | 1400ms | One pass of a Skeleton's shimmer |
-| `ease-settle` | `cubic-bezier(0.2, 0.9, 0.3, 1)` | Slides: hard deceleration at the end, like a light spring |
-| `ease-out` | `cubic-bezier(0.2, 0, 0, 1)` | Press and fades |
+| `ease-settle` | `cubic-bezier(0.2, 0.9, 0.3, 1)` | Switch and Drawer position changes; no bounce |
+| `ease-out` | `cubic-bezier(0.2, 0, 0, 1)` | Popup and Dialog opening and closing; backdrop fades |
 
 <!-- docs/states.md -->
 
 # States
 
-Every interactive component handles these states the same way.
+Behavioral states are complete, but they do not each require a different appearance. Reuse the smallest treatment that communicates the action or saved state. See the [Linear reference](design-reference.md) for the basis of this contract.
 
 | State | Looks like |
 | --- | --- |
-| Hover | Interactive keys go to `key-hover`; actionable rows and ghost buttons use `hover`. Passive content and ordinary table rows do not highlight. A text field's edge goes from quiet `edge` to `control-edge`; invalid fields keep `danger`. Muted labels go to `text`. Primary keys go to `primary-hover`. Neutral button and Select borders strengthen to `control-edge`, as do enabled off switch tracks |
-| Pressed (while held) | Buttons keep their geometry: neutral and ghost use `well`, primary uses `primary-hover`, danger retains `danger-key`. Filled primary and danger actions use their contrasting text color on the existing edge. Toggles do not imitate a selected state before activation |
-| Pressed toggle (on) | Uses `well` with `control-edge` and the `text` color |
-| Selected (one of several) | A flat `key` fill in a quiet well that slides to the chosen item, with `text` for its label and icon; no visible group or selected-key border in normal colors. Hover only changes label and icon contrast; focus reuses `mu-focus` |
+| Hover | Interactive keys go to `key-hover`; actionable rows and ghost buttons use `hover`. Passive content and ordinary table rows do not highlight. Bounded controls keep their quiet `edge`; fields and switches keep their fill. Invalid fields keep `danger`. Muted labels go to `text`. Primary keys go to `primary-hover`. |
+| Pressed (while held) | Actions reuse their hover highlight immediately: neutral uses `key-hover`, ghost and actionable rows use `hover`, primary uses `primary-hover`, danger retains `danger-key`. No extra border, movement, scale or filter. Toggles do not imitate a selected state before activation |
+| Pressed toggle (on) | Uses `well` and the `text` color; the reserved border stays transparent |
+| Selected (one of several) | A flat `key` fill in a quiet well that updates immediately to the chosen item, with `text` for its label and icon; no visible group or selected-key border in normal colors. Hover only changes label and icon contrast; focus reuses `mu-focus` |
 | Checked | A flat `primary` fill with an `on-primary` mark |
 | Loading | The control becomes inert at once. After 300ms it hides its label and shows a Spinner without changing size; short waits keep the label |
 | Disabled | `text-disabled` text, quiet borders and `well` on all Button variants and other filled controls; no whole-control opacity, hover or press response |
 | Invalid | A `danger` edge on the field, plus an error line with an icon under it |
-| Focus (field) | The 1px edge darkens from `edge` to `focus-edge` (ink), on click and keyboard alike. No ring around it. Invalid text fields keep danger; the caret identifies typing focus |
+| Focus (field) | The caret or text selection identifies typing focus. Border and surface stay the same under mouse and keyboard focus, with no ring or animation. Invalid fields keep their danger edge; forced colors uses a 2px system edge |
 | Focus (everything else) | Reuse the shared 1px border on `:focus-visible`; primary/checked fills use `on-primary`, danger buttons use `on-danger`; text links get a double underline. Invalid non-text controls reuse the same focus edge; their error message keeps communicating the error |
 | Focus (inside a widget) | Menu items and options take the `hover` fill. No ring |
 
 ## Rules
 
+- An event does not need its own visual style. Text entry keeps its border, surface and geometry under hover, focus and press. Validation alone changes the ordinary field edge, immediately and without animation.
+- Hover, press and keyboard focus feedback are immediate. Actionable rows and actions reuse a highlight for pointer hover and touch press; do not invent a second held-state frame. Tabs and single-choice groups update their selected key without a slide.
 - Keep state styling minimal. Reuse the shared component and foundation treatments; add a separate treatment only when it communicates a distinct action or state. A component does not need a new fill, border, scale or animation for every pointer or focus event.
+- Persistent states and hover never strengthen a quiet boundary. Reserve `control-edge` for small checkbox/radio markers; text colors are not border colors. Focus and invalid states keep their explicit boundary treatments.
 - Keep selection persistent and independent of transient events. A selected fill is not a focus border. Reuse `mu-focus` for the shared focus behavior instead of defining component-specific focus variants.
 - Hover confirms an action, not the presence of content. Do not highlight a non-interactive container or data row merely because the pointer crosses it.
 - Press feedback does not move or resize a control, apply a brightness filter, or animate its mark. Checkbox and Radio marks change immediately. A Switch's knob still moves to show its saved state.
 - Hover never changes size, weight or layout.
 - An input never changes its background on hover or focus, so it never looks disabled.
-- Control focus borders 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 changes the existing edge, never adds a ring or visible outline. Filled controls use their contrasting text color at the edge.
+- Control focus borders show for keyboard focus only (`:focus-visible`), never on mouse click. Text fields use the visible caret or text selection for typing focus and keep their normal boundary.
+- Focus changes the existing edge, never adds a ring or visible outline. Filled controls use their contrasting text color at the edge for keyboard focus, not as a new pointer-held border.
 - Popups, dialogs and panels never show a focus ring when they open and take focus.
+- Opening and closing content retain the minimal shared [Motion](motion.md) transition. This does not animate focus, hover, press or navigation within the content; those respond immediately.
 - Focused borders use 2px in the system `Highlight` color in forced-colors mode. No shadow or outline fallback is needed.
-- Segmented selection keeps a text-colored key border in forced-colors mode, distinct from the shared focus treatment.
+- In forced-colors mode, segmented selection keeps a system-colored key border and on toggles get a system-colored boundary, distinct from the shared focus treatment.
 - Disabled controls stay in place. Prefer explaining why something is unavailable over hiding it.
 - Button waits 300ms before showing its spinner. It ignores presses and sets `aria-busy` immediately, cancels the delay when loading ends, and removes the spinner as soon as work finishes. Other loading indicators follow the same delay policy.
 
@@ -541,7 +590,7 @@ Every interactive component handles these states the same way.
 | Component family | Default feedback |
 | --- | --- |
 | Actions: Button and Link | Shared fill, edge or underline feedback, without movement or filters. All Button variants share the disabled well and edge |
-| Fields: Input, Textarea and Combobox input | Recolor the existing edge. Keep the surface and geometry fixed |
+| Fields: Input, Textarea and Combobox input | Keep the border, surface and geometry fixed through hover, focus and press. The caret or text selection indicates typing focus; validation alone recolors the ordinary edge |
 | Choices: Checkbox, Radio, Switch, Toggle, ToggleGroup and Tabs | Keep the saved state explicit through a mark, knob position or selected fill. Do not resize on press or imitate selection before activation |
 | Actionable rows: Menu, Select, Combobox options and List.ItemButton | Use the shared highlighted fill. Keep Base UI's interaction behavior |
 | Containers: Dialog, Drawer, Popover and Toast | Feedback belongs to their controls, not an extra container hover effect. Keep visibility, dismissal and Toast expansion behavior |
@@ -722,9 +771,9 @@ Wraps Base UI's [Button](https://base-ui.com/react/components/button): `disabled
 ## Style
 
 - A flat control: 20, 24 or 32px tall. `primary` is an ink key with `on-primary` text; `neutral` a `key` with a quiet `edge` boundary; `ghost` flat `text-secondary` with `hover` on hover; `danger` a `danger-key` with `on-danger` text.
-- A neutral button strengthens its boundary to `control-edge` on hover. Keyboard focus changes the 1px edge to ink; filled actions retain their contrasting focus edge.
+- A neutral button keeps its quiet `edge` on hover; its `key-hover` fill provides feedback. Keyboard focus changes the 1px edge to ink; filled actions retain their contrasting focus edge.
 - Only an icon: square. The side with an icon (`icon` at the start, `iconEnd` at the end) has 2px less padding.
-- Press uses `well` for neutral and ghost, and `primary-hover` for primary; danger retains `danger-key`. Filled primary and danger actions also recolor the existing edge to their contrasting text color. No translation, scale or brightness filter.
+- Hover and press reuse one immediate highlight: `key-hover` for neutral, `hover` for ghost, `primary-hover` for primary; danger retains `danger-key`. Holding the pointer adds no new boundary. Keyboard focus owns the contrasting edge. No color fade, translation, scale or brightness filter.
 - `loading` immediately sets `aria-busy` and `aria-disabled`, ignores presses and stays focusable. The label stays visible for 300ms; if still loading, a Spinner replaces it without changing width. Finishing cancels the delay and restores the label immediately.
 - Disabled: every variant uses `text-disabled` text, a `well` fill and a quiet `edge`, including ghost buttons. This keeps disabled toolbar actions distinct from enabled ghost actions without dimming the text. Opacity stays 1.
 
@@ -763,8 +812,8 @@ Wraps Base UI's [Toggle](https://base-ui.com/react/components/toggle): `pressed`
 
 ## Style
 
-- Off: flat `text-secondary`. On: sits in a `well` with `control-edge` and the `text` color.
-- Disabled: `text-disabled`; an on Toggle keeps its well and uses the quiet `edge`, so its state remains visible without an enabled boundary.
+- Off: flat `text-secondary`, with `hover` on hover. On: a `well` fill and the `text` color, with a transparent reserved border; hover keeps that selected fill. Fill and text changes are immediate. Hover never adds a boundary; keyboard focus reuses `mu-focus`.
+- Disabled: `text-disabled`; an on Toggle keeps its well and transparent border. In forced colors an on Toggle uses a system-colored boundary so selection survives when fills disappear.
 - A label wraps when its row runs out of room; an icon-only toggle never shrinks. A ToggleGroup is at most as wide as its container and grows in height to keep long translated labels readable. On touch screens each Toggle reserves at least 44px in each direction.
 
 <!-- docs/components/toggle-group.md -->
@@ -797,7 +846,7 @@ import { Bold, Code, Italic } from "lucide-react";
 
 | Part | Base UI part | Renders |
 | --- | --- | --- |
-| `ToggleGroup` | `ToggleGroup` | A `<div role="group">`. Takes `size`. Without `multiple`, adds the sliding key |
+| `ToggleGroup` | `ToggleGroup` | A `<div role="group">`. Takes `size`. Without `multiple`, adds the selected key |
 | `Toggle` | `Toggle` | One item, a `<button aria-pressed>` |
 | `Separator` | `Separator` | A line between clusters, `multiple` groups only |
 
@@ -827,10 +876,10 @@ Base UI's props pass through: `value`, `defaultValue`, `onValueChange`, `multipl
 ## Style
 
 - At most as wide as its container. With `fullWidth`, exactly as wide: labeled Toggles start at their natural width and share the extra space equally (`flex: 1 1 auto`), so equal labels give equal Toggles and a long label is never cut while there is room. Inside a popup that sizes to its content, the group is as wide as its labels need. Labels wrap at word boundaries, and the group and key grow to fit. Items keep enough width for their longest word, icon and padding; when those minimum widths cannot fit together, the group scrolls horizontally instead of breaking words or widening the page. Icon-only items keep their size. Prefer a Select when a narrow panel regularly needs this fallback.
-- `multiple`: items 2px apart.
+- `multiple`: items 2px apart, using Toggle's `well` fill and `text` when on, with no visible border in normal colors. Keyboard focus stays separate from selection.
 - Inside a segmented key, the label's line box can tighten at xs and sm to leave room for the focus border without changing geometry; its font size stays in the size row. Long labels wrap and increase the group's height.
 - Use the existing `md` size for a labeled layout choice at the top of a settings popover: a 32px group, 28px selected face and 16px icons. Keep `sm` (24px) for dense contexts; do not invent a height between the size rows.
-- Without `multiple`: a quiet `well` and contrasting `key` fill, with no visible group or selected-key border in normal colors. The selected label and icon use `text`; hover only changes label and icon contrast, without adding a fill or moving the key. Focus reuses `mu-focus`; do not add a component-specific focus treatment. In forced colors the selected key retains its text-colored border. The key slides to the chosen item over `duration-settle` with `ease-settle` and re-measures when an item changes width. Under reduced motion it jumps. On touch screens every item reserves at least 44px in each direction, without overlapping its neighbor.
+- Without `multiple`: a quiet `well` and contrasting `key` fill, with no visible group or selected-key border in normal colors. The selected label and icon use `text`; hover only changes label and icon contrast, without adding a fill or moving the key. Focus reuses `mu-focus`; do not add a component-specific focus treatment. In forced colors the selected key retains its text-colored border. The key updates immediately and re-measures when an item changes width. Selection and label changes do not animate. On touch screens every item reserves at least 44px in each direction, without overlapping its neighbor.
 
 <!-- docs/components/menu.md -->
 
@@ -922,7 +971,7 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `modal` on
 - A Separator has 6px above and below, the same as the popup padding, and runs edge to edge.
 - On touch screens rows are at least 44px tall; menus remain anchored floating lists, including submenus. The highlighted or keyboard-focused row uses `hover` with the row's radius (`radius-sm` at sm, `radius-md` at md), and so does a row whose menu is open (a SubmenuTrigger, or a `menuClasses().item` row that is a `Menu.Trigger`). Disabled rows and their icons use `text-disabled` without fading the whole row. `danger` rows use `danger`.
 - A ghost trigger keeps its `hover` background while the menu is open.
-- Fades in and rises `space-1` over `duration-fade`; no rise under reduced motion.
+- Opening and closing use the shared [Motion](../motion.md) fade and `space-1` offset over `duration-fade`. Both are immediate under reduced motion; item highlighting never animates.
 - A menu below or above its trigger sits 4px from it. A submenu opens beside its trigger row, its own padding (6px) from the row. The row sits the same 6px inside the parent menu, so the submenu's edge touches the parent's edge.
 - A menu that opens to the side of its trigger (`side` left, right, `inline-start` or `inline-end`; a submenu always does), aligned to `start` or `end`, moves along the trigger by its own top padding (6px, read when it is placed). Its first row lines up with the trigger. With no room below, it opens upward instead and its last row lines up with the trigger. A menu that opens above or below, or is centered, does not move.
 
@@ -1147,13 +1196,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 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).
+- An app's own one-line field, such as a tag input around a native `<input>`, takes `inputClasses()` on its box: typing focus keeps the edge unchanged, and `aria-invalid="true"` or `aria-disabled="true"` on the box show those states. See [Class functions](../custom-components.md#class-functions).
 
 ## Style
 
 - Enabled fields use flat `surface` with a quiet 1px `edge` border. A gray well is reserved for the disabled state.
 - Typed text weight 400; placeholder `text-secondary`. On touch screens typed text is 16px at every size, so iOS Safari does not zoom in on focus; the field keeps its height.
-- Hover darkens the edge to `control-edge`; focus recolors the 1px edge to `focus-edge` (ink), on click and keyboard alike. There is no ring around the field. The background stays fixed on hover and focus. Invalid fields keep their `danger` edge on hover and focus. Disabled fields use `well`, a quiet `edge` and `text-disabled` text. See [boundary contrast](../depth.md#rules) for the resting edge's contrast tradeoff.
+- Hover, focus and press keep the same `edge` border and `surface` fill. The caret or text selection indicates typing focus; there is no focus border change, ring or animation. Invalid fields retain their `danger` edge while focused. Disabled fields use `well`, a quiet `edge` and `text-disabled` text. Forced colors uses a 2px system focus edge. See [boundary contrast](../depth.md#rules) for the resting edge's contrast tradeoff.
 - The side with a prefix or suffix has 2px less padding.
 
 <!-- docs/components/textarea.md -->
@@ -1190,11 +1239,11 @@ 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 darkens the edge, 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()`: the caret or text selection indicates focus without changing the edge, and `aria-invalid="true"` or `aria-disabled="true"` show those states. See [Class functions](../custom-components.md#class-functions).
 
 ## Style
 
-- Looks like [Input](input.md). Resizes vertically only.
+- Looks like [Input](input.md), including an unchanged border and surface under mouse and keyboard focus. The caret or text selection identifies the active field; state changes have no animation. Resizes vertically only.
 - On touch screens typed text is 16px on a 20px line at every size, like Input, so iOS Safari does not zoom in on focus.
 
 <!-- docs/components/select.md -->
@@ -1248,7 +1297,7 @@ interface Select.TriggerProps extends BaseSelect.Trigger.Props {
   variant?: "neutral" | "ghost"; // default "neutral"; ghost: a flat row, for a switcher in a sidebar or toolbar
 }
 interface Select.PopupProps extends BaseSelect.Popup.Props {
-  alignItemWithTrigger?: boolean; // default true: the list opens over the trigger with the chosen item on the value
+  alignItemWithTrigger?: boolean; // default false: open below the trigger
   side?: Side; align?: Align; // used when alignItemWithTrigger is false
   container?: HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null; // portal target
 }
@@ -1269,9 +1318,9 @@ Base UI's props pass through: `items`, `value`, `defaultValue`, `onValueChange`,
 
 ## Style
 
-- Trigger: a neutral key ([Button](button.md) `neutral`), a quiet `edge` at rest and `control-edge` on hover, value left-aligned at weight 400, `ChevronsUpDown` in `text-secondary`. `ghost`: a ghost Button with the `text` color, `hover` on hover and while open. Placeholder in `text-secondary`, also weight 400. Invalid: a `danger` edge at rest and on hover; focus reuses the shared 1px edge while the error message stays visible.
+- Trigger: a neutral key ([Button](button.md) `neutral`), a quiet `edge` at rest and on hover, value left-aligned at weight 400, a single `ChevronDown` in `text-secondary`. `ghost`: a ghost Button with the `text` color, `hover` on hover and while open. Placeholder in `text-secondary`, also weight 400. Invalid: a `danger` edge at rest and on hover; focus reuses the shared 1px edge while the error message stays visible.
 - List: `mu-popup`, 6px padding, at least `menu-width` and the trigger's width, at most `menu-max-width` or the trigger's width when that is wider. Rows like [Menu](menu.md) items: 28px at sm, 32px at md, highlight in the row's radius; the highlighted row uses `hover`.
-- Fades in and rises `space-1` over `duration-fade`; no rise under reduced motion.
+- Opens below the trigger, aligned to its start edge; collision handling can flip it when space is limited. `alignItemWithTrigger={true}` opts into value-aligned positioning. Opening and closing use the shared [Motion](../motion.md) treatment: a 100ms fade and `space-1` offset, with no scale or chevron rotation. Under reduced motion both are immediate. The chosen value uses one check; row highlighting identifies the current pointer or keyboard target and updates without animation.
 
 <!-- docs/components/combobox.md -->
 
@@ -1373,12 +1422,12 @@ Base UI's props pass through: `items`, `value`, `defaultValue`, `onValueChange`,
 
 ## Style
 
-- The box is an [Input](input.md): flat `surface`, `edge`, and the focused edge on the box. The search icon and chevron are `text-secondary`; the chevron turns `text` on hover. Disabled text and both icons use `text-disabled`. The chevron has a built-in Tooltip using `triggerLabel`.
+- The box is an [Input](input.md): flat `surface`, `edge`, with no border or surface change under hover, focus or press. The caret or text selection indicates typing focus, without animation. The search icon and chevron are `text-secondary`; the chevron turns `text` on hover. Disabled text and both icons use `text-disabled`. The chevron has a built-in Tooltip using `triggerLabel`.
 - List: `mu-popup`, 6px padding, as wide as the input and at least `menu-width`. Rows like [Menu](menu.md) items: 28px at sm, 32px at md, highlight in the row's radius. The list is at most `list-height` (240px) tall, then it scrolls.
 - Rows are text weight 400; the highlighted row uses `hover`; the chosen row has a check at the end.
 - Empty text: `body` in `text-secondary`, `space-3` by `space-4` padding.
 - Grid cells: square, a control height, `inset` apart, `row-radius`; the highlighted cell uses `hover`, the chosen cell sits in a `well` like a pressed Toggle. No check.
-- Fades in and rises `space-1` over `duration-fade`; no rise under reduced motion.
+- Opening and closing use the shared [Motion](../motion.md) fade and `space-1` offset over `duration-fade`. Both are immediate under reduced motion; input feedback and option highlighting never animate.
 
 <!-- docs/components/checkbox.md -->
 
@@ -1454,9 +1503,9 @@ Wraps Base UI's [Switch](https://base-ui.com/react/components/switch) root with
 
 ## Style
 
-- A pill well with a round knob and a quiet `edge` at rest; the well fills with `primary` when on. An enabled off track strengthens to `control-edge` on hover. Keyboard focus uses a fine 1px contrasting boundary.
+- A pill well with a round knob and a quiet `edge` at rest; the well fills with `primary` when on. The track keeps its quiet boundary and fill on hover. Keyboard focus uses a fine 1px contrasting boundary.
 - Height = checkbox box + 2px; width = height × 1.7.
-- The knob is flat `text`, inset 2px; `on-primary` when on. It slides with `ease-settle` when the state changes, without growing on press. Under reduced motion it doesn't slide. Disabled switches keep the knob position, but use a quiet `edge` and a `text-disabled` knob. On touch screens margins reserve a 44px target without enlarging the mark.
+- The knob is flat `text`, inset 2px; `on-primary` when on. Only its position slides with `ease-settle` when the state changes, without growing on press; all colors change immediately. Under reduced motion it has no transition. Disabled switches keep the knob position, but use a quiet `edge` and a `text-disabled` knob. On touch screens margins reserve a 44px target without enlarging the mark.
 
 <!-- docs/components/radio-group.md -->
 
@@ -1542,7 +1591,7 @@ import { Bell, User } from "lucide-react";
 | Part | Base UI part | Renders |
 | --- | --- | --- |
 | `Tabs.Root` | `Tabs.Root` | A `<div>` around the list and panels. Takes `size` |
-| `Tabs.List` | `Tabs.List` with `Tabs.Indicator` | The well, a `<div role="tablist">`, with the sliding key built in |
+| `Tabs.List` | `Tabs.List` with `Tabs.Indicator` | The well, a `<div role="tablist">`, with the selected key built in |
 | `Tabs.Tab` | `Tabs.Tab` | One tab, a `<button role="tab">`. Takes `icon` |
 | `Tabs.Panel` | `Tabs.Panel` | One tab's content, a `<div role="tabpanel">` |
 
@@ -1569,7 +1618,7 @@ Base UI's props pass through: `value`, `defaultValue`, `onValueChange` on the ro
 
 ## Style
 
-- Shares the quiet well and sliding key with a single-choice ToggleGroup. Normal selection uses a `key` fill without a visible border; hover only changes label and icon contrast. Focus reuses `mu-focus`, independently of selection. In forced colors the selected key retains its text-colored border. Use the standard sm and md size rows and the shared inset and radius tokens.
+- Shares the quiet well and selected key with a single-choice ToggleGroup. Selection and label changes update immediately, without a slide or color fade. Normal selection uses a `key` fill without a visible border; hover only changes label and icon contrast. Focus reuses `mu-focus`, independently of selection. In forced colors the selected key retains its text-colored border. Use the standard sm and md size rows and the shared inset and radius tokens.
 - Tabs are sized to their labels and wrap when space is narrow; the well and key grow to fit. On touch screens each tab is at least 44px tall and wide. The key re-measures when a label changes width.
 - Selected and hovered labels `text`, others `text-secondary`. Weight never changes, so labels don't shift.
 
@@ -1595,7 +1644,7 @@ import { Collapsible } from "@usememos/ui";
 | Part | Base UI part | Renders |
 | --- | --- | --- |
 | `Collapsible.Root` | `Collapsible.Root` | A `<div>` around the trigger and panel. Takes `size` |
-| `Collapsible.Trigger` | `Collapsible.Trigger` | A ghost [Button](button.md) with a chevron at the end that turns while open |
+| `Collapsible.Trigger` | `Collapsible.Trigger` | A ghost [Button](button.md) with a chevron at the end that points up while open |
 | `Collapsible.Panel` | `Collapsible.Panel` | The content, a `<div>`; unmounted while closed unless `keepMounted` |
 
 ## Props
@@ -1618,9 +1667,9 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `disabled`
 ## Style
 
 - The trigger is a ghost key that bleeds `px` to the left, so its label lines up with the content below.
-- The chevron is `text-secondary` and turns 180° over `duration-settle` with `ease-settle`.
+- The chevron is `text-secondary` and changes orientation by 180° immediately when open; no rotation transition.
 - Disabled labels and chevrons use `text-disabled`.
-- The panel fades in and rises `space-1` over `duration-fade`. Its height never animates. No rise or turn under reduced motion.
+- The panel opens and closes with the shared [Motion](../motion.md) fade and `space-1` offset over `duration-fade`. Its height never animates. Opening and closing are immediate under reduced motion.
 
 <!-- docs/components/dialog.md -->
 
@@ -1706,7 +1755,7 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `modal`, `d
 
 - `mu-popup` with `radius-2xl`, `space-5` padding, `dialog-width` wide; children stack `space-4` apart, and the Footer sits `space-6` under them. The backdrop is `overlay`.
 - Title: `title`. Description: `body` in `text-secondary`, `space-1` under the title, so the two read as one header. The X is a small ghost Button at `space-4` from the corner. On touch screens it reserves 44px, and the title leaves room for that target.
-- Fades in and rises `space-1` over `duration-settle`. A sheet slides up `space-6`, with square bottom corners and full-width buttons stacked with the action on top. No movement under reduced motion.
+- Opening and closing use the shared [Motion](../motion.md) fade and `space-1` offset over `duration-settle`; the backdrop fades with the same timing. A sheet uses `space-6` from the bottom, with square bottom corners and full-width buttons stacked with the action on top. Opening and closing are immediate under reduced motion, including the backdrop.
 - Long content scrolls the viewport around the panel.
 - `bare`: no padding, no gap and no X; the content is clipped to the radius. Set the width with `className` when it differs from `dialog-width`.
 - `fullScreen`: the viewport's padding goes, and the popup fills it with square corners.
@@ -1773,7 +1822,7 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `onOpenChan
 - `panel`: content `space-5` in, stacked `space-4` apart, as in a Dialog; the X is a small ghost Button at `space-4` from the top end corner. On touch screens it reserves 44px, and the title leaves room for that target. Title: `title`. Description: `body` in `text-secondary`, `space-1` under the title.
 - `bare`: no padding, gap or X. A visually hidden `Drawer.Close` named `closeLabel` follows the content, so screen readers on touch screens can close it.
 - The backdrop is `overlay`; it fades as the drawer is swiped away.
-- Slides in from its edge over `duration-settle` with `ease-settle` and follows the finger while swiped. Under reduced motion it fades instead.
+- Opens and closes from its attached edge over `duration-settle` with `ease-settle`, with a backdrop fade of the same duration. It follows the finger while swiped. Under reduced motion both panel and backdrop change immediately, without a slide or fade. See [Motion](../motion.md).
 
 <!-- docs/components/popover.md -->
 
@@ -1836,7 +1885,7 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `modal` on
 - `mu-popup` (`surface`, a 1px `edge`, `radius-xl`), `space-4` padding, `popover-width` wide. Children stack `space-3` apart.
 - Title: `label`. Description: `caption` in `text-secondary`, `space-1` under the title.
 - `list`: 6px padding and no gap, like a Menu. A title and description inside line up with the rows' text, with `space-2` above the title and below the description.
-- Fades in and rises `space-1` over `duration-fade`; no rise under reduced motion.
+- Opening and closing use the shared [Motion](../motion.md) fade and `space-1` offset over `duration-fade`. Both are immediate under reduced motion.
 
 <!-- docs/components/tooltip.md -->
 
@@ -1894,7 +1943,7 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `disabled`
 ## Style
 
 - `primary` background, `on-primary` text, `label-sm`, `radius-md`, `space-1` by `space-2` padding, at most `tooltip-width` wide.
-- Opens after 400ms of hover, or at once on keyboard focus. Fades in and rises `space-1`; no rise under reduced motion.
+- Waits 400ms on hover before opening; keyboard focus has no opening delay. Opening and closing use the shared [Motion](../motion.md) fade and `space-1` offset over `duration-fade`. Both transitions are disabled under reduced motion. Moving between tooltips in a group skips the delay and replayed entrance.
 
 <!-- docs/components/toast.md -->
 
@@ -1954,7 +2003,7 @@ Base UI's props pass through: `timeout` (default 5000ms) and `limit` (default 3)
 
 - `mu-popup`, `toast-width` wide, top-right at `space-6` from the edges; below `breakpoint-sm`, full width across the top at `space-4`, below the status bar.
 - A tone icon (`Info`, `CircleCheck`, `TriangleAlert`, `CircleAlert`) in `text-secondary`, `success`, `warning` or `danger`; title in `label`; description in `caption` `text-secondary`; the action as a small neutral Button; the X as a small ghost Button.
-- Newest in front; the ones behind peek out `space-2` below and shrink. A toast behind hides its text at once and gets a 1px `edge`, so its text never shows below a shorter front toast and the peeks stay visible in Dark. Hover or focus fans them out downward, `space-3` apart. Toasts slide in from above and can be swiped up or to the right. Under reduced motion they only fade.
+- Newest in front; the ones behind peek out `space-2` below and shrink. A toast behind hides its text at once and gets a 1px `edge`, so its text never shows below a shorter front toast and the peeks stay visible in Dark. Hover or focus fans them out downward, `space-3` apart. Toasts slide in from above and can be swiped up or to the right. Opening and closing remain short, using `duration-settle`; they add no bounce or staged entrance. Under reduced motion visibility and stack changes are immediate, without a slide, scale or fade. See [Motion](../motion.md).
 
 <!-- docs/components/avatar.md -->
 
@@ -2370,7 +2419,7 @@ Every native attribute passes through.
 ## Style
 
 - `surface` fill, a 1px `line` edge, `radius-lg`. No shadow: it is flat, like a field.
-- Rows pad `space-3` × `space-4` at md and `space-2` × `space-3` at sm, divided by a 1px `line`. No hover on a plain row. An ItemButton fills its row, padded as the row is, lays out its children in a row `space-3` apart, highlights with `hover`, and rounds with the box at the first and last row; keyboard focus darkens the row's reserved border.
+- Rows pad `space-3` × `space-4` at md and `space-2` × `space-3` at sm, divided by a 1px `line`. No hover on a plain row. An ItemButton fills its row, padded as the row is, lays out its children in a row `space-3` apart, highlights immediately with `hover` on pointer hover or touch press, and rounds with the box at the first and last row; keyboard focus darkens the row's reserved border.
 - Text is `body` in `text`.
 
 <!-- docs/components/prose.md -->
@@ -3055,7 +3104,7 @@ An app changes only the color and font tokens. Every other token and every `mu-*
 
 - Every class the package ships starts with `mu-`.
 - The [public classes](custom-components.md#public-classes) are for apps too: size rows (`mu-s-md`), surface roles (`mu-key`), focus, touch targets, icons and the type scale. Apps apply them to their own parts and never override them.
-- `mu-positioner` puts a popup's positioner on `layer-popup`, and `mu-popup-motion` makes a popup fade in and rise `space-1` (no rise under reduced motion).
+- `mu-positioner` puts a popup's positioner on `layer-popup`, and `mu-popup-motion` supplies the shared opening and closing fade and `space-1` offset over `duration-fade`. Under reduced motion it has no transition, including opacity. See [Motion](motion.md).
 - The surface classes `mu-well`, `mu-key` and `mu-popup` apply flat fills and borders. Use them for new parts. See [Surfaces and boundaries](depth.md).
 - `mu-prose` styles rendered content. See [Prose](components/prose.md).
 - `mu-icon` applies icon size and stroke rules outside a component, at the size of the nearest size row; `mu-icon-xs`, `mu-icon-sm` and `mu-icon-md` set a fixed size on their own. See [Icons](icons.md).
@@ -3176,7 +3225,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 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 text field keeps its normal border and surface when it or its input has focus; use the caret or text selection to identify typing 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 directly focusable button or anchor also gets the row highlight on `:focus-visible`, even without `data-highlighted`. `item` works on a `<div>`, `<button>` or `<a>`. For a two-line row, wrap `label` and `description` in a `text` span.
 - A popup fades in with `data-starting-style` and out with `data-ending-style`, which Base UI's popups set.
 - A tag with a user's color sets `--mu-badge-color` on the element: `style={{ "--mu-badge-color": tag.color } as React.CSSProperties}`. The fill becomes a tint of it; the text stays ink.
@@ -3214,7 +3263,7 @@ Apply these classes to an app's own elements. Don't override their rules: the pr
 | `mu-compact` | md controls and rows inside are `control-compact` (28px) tall; text, icons, padding and radius stay md | An app's sidebar with 28px rows, or a list Popover beside it |
 | `mu-base` | The system font, the row's text size and weight 500, the `text` color, and icon sizing for Lucide icons inside | The root of a control |
 | `mu-well` | `well` and a quiet 1px `edge` | A recessed surface; add a separate treatment for selection |
-| `mu-key` | `key` and a quiet 1px `edge`; selected or pressed keys use `text-secondary` at the edge | A bounded control surface; Base UI's `data-selected` / `data-pressed`, or `aria-selected="true"` / `aria-pressed="true"`, identify its active state |
+| `mu-key` | `key` and a quiet 1px `edge`, including with selected or pressed attributes | A bounded control surface, or the bright selected face inside a well. It does not add interaction-state styling; use Toggle or ToggleGroup for choices |
 | `mu-popup` | `surface`, a 1px `edge` 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 |

package/llms.txt

@@ -1,17 +1,18 @@
 # Memos UI (@usememos/ui)
 
-> Memos UI is one calm, dense and flat system for every product we build: memos (the app), the website, the web clipper and whatever comes next. Pure grays and ink emphasis keep attention on people's content. Hierarchy comes from type, spacing and fills. Components reuse a few shared state treatments; pointer events do not add decorative motion or effects.
+> Memos UI is one calm, dense and flat system for every product we build: memos (the app), the website, the web clipper and whatever comes next. Quiet neutrals, a warm Light canvas and ink emphasis keep attention on people's content. Hierarchy comes from type, spacing and fills. Components reuse a few shared state treatments; pointer events do not add decorative motion or effects.
 
 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
 
+- [Design reference: Linear](https://github.com/usememos/ui/blob/main/docs/design-reference.md): Official source evidence and how we apply it to Memos UI
 - [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 and Dark, and how themes are chosen
 - [Surfaces and boundaries](https://github.com/usememos/ui/blob/main/docs/depth.md): Flat surface roles, borders and focus without shadows or outlines
 - [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
-- [Motion](https://github.com/usememos/ui/blob/main/docs/motion.md): Press, settle and fade timing, and reduced motion
+- [Motion](https://github.com/usememos/ui/blob/main/docs/motion.md): Immediate feedback, minimal opening and closing, and reduced motion
 - [States](https://github.com/usememos/ui/blob/main/docs/states.md): Hover, pressed, loading, disabled, invalid and focus
 - [Icons](https://github.com/usememos/ui/blob/main/docs/icons.md): Lucide, sizes, the fixed stroke and accessibility
 - [Components](https://github.com/usememos/ui/blob/main/docs/components/README.md): The 31 components, what was left out, and one page per component

package/package.json

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