@usememos/ui 26.11.16 → 26.11.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/collapsible/index.js.map +1 -1
- package/dist/components/select/index.js +1 -1
- package/dist/components/select/index.js.map +3 -3
- package/dist/components/tabs/index.js.map +1 -1
- package/dist/components/toggle-group/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/tokens.css +1 -1
- package/dist/types/components/collapsible/index.d.ts +1 -1
- package/dist/types/components/select/index.d.ts +2 -2
- package/dist/types/components/tabs/index.d.ts +1 -1
- package/dist/types/components/toggle-group/index.d.ts +1 -1
- package/llms-full.txt +112 -65
- package/llms.txt +3 -2
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/collapsible/index.tsx"],
|
|
4
|
-
"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
|
|
4
|
+
"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"],
|
|
5
5
|
"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",
|
|
6
6
|
"names": ["BaseCollapsible", "ChevronDown", "forwardRef", "withClass", "SizeContext", "useRowSize", "buttonClasses", "jsx", "jsxs", "Root", "size", "className", "props", "ref", "resolved", "Trigger", "children", "Panel"]
|
|
7
7
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{Select as t}from"@base-ui/react/select";import{Check as
|
|
2
|
+
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};
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/select/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { Select as BaseSelect } from '@base-ui/react/select';\nimport { Check, ChevronDown,
|
|
5
|
-
"mappings": ";AAAA,OAAS,UAAUA,MAAkB,wBACrC,OAAS,SAAAC,EAAO,eAAAC,EAAa,
|
|
6
|
-
"names": ["BaseSelect", "Check", "ChevronDown", "
|
|
4
|
+
"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"],
|
|
5
|
+
"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",
|
|
6
|
+
"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"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/tabs/index.tsx"],
|
|
4
|
-
"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
|
|
4
|
+
"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"],
|
|
5
5
|
"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",
|
|
6
6
|
"names": ["BaseTabs", "forwardRef", "withClass", "SizeContext", "useRowSize", "jsx", "jsxs", "Root", "size", "className", "props", "ref", "resolved", "List", "children", "Tab", "icon", "Panel"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/toggle-group/index.tsx"],
|
|
4
|
-
"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
|
|
4
|
+
"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"],
|
|
5
5
|
"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",
|
|
6
6
|
"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"]
|
|
7
7
|
}
|
package/dist/styles.css
CHANGED
|
@@ -1 +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-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-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))}.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}.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(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: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;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;border-color:transparent}.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)}}}
|
|
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-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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@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-
|
|
1
|
+
@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}}}
|
|
@@ -7,7 +7,7 @@ export interface RootProps extends BaseCollapsible.Root.Props {
|
|
|
7
7
|
export declare const Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
8
8
|
export interface TriggerProps extends BaseCollapsible.Trigger.Props {
|
|
9
9
|
}
|
|
10
|
-
/** A ghost key with a chevron at the end that
|
|
10
|
+
/** A ghost key with a chevron at the end that points up while the panel is open. */
|
|
11
11
|
export declare const Trigger: import("react").ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
12
12
|
export interface PanelProps extends BaseCollapsible.Panel.Props {
|
|
13
13
|
}
|
|
@@ -25,8 +25,8 @@ export interface PopupProps extends BaseSelect.Popup.Props, PositionerProps {
|
|
|
25
25
|
container?: BaseSelect.Portal.Props['container'];
|
|
26
26
|
}
|
|
27
27
|
/**
|
|
28
|
-
* The list of items. By default it opens
|
|
29
|
-
*
|
|
28
|
+
* The list of items. By default it opens below the trigger, aligned to its
|
|
29
|
+
* start edge. `alignItemWithTrigger` can opt into value-aligned positioning.
|
|
30
30
|
*/
|
|
31
31
|
export declare const Popup: import("react").ForwardRefExoticComponent<Omit<PopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
32
32
|
export interface ItemProps extends BaseSelect.Item.Props {
|
|
@@ -8,7 +8,7 @@ export interface RootProps extends BaseTabs.Root.Props {
|
|
|
8
8
|
export declare const Root: import("react").ForwardRefExoticComponent<Omit<RootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
9
9
|
export interface ListProps extends BaseTabs.List.Props {
|
|
10
10
|
}
|
|
11
|
-
/** The well that holds the tabs, with the
|
|
11
|
+
/** The well that holds the tabs, with the selected key built in. */
|
|
12
12
|
export declare const List: import("react").ForwardRefExoticComponent<Omit<ListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
13
13
|
export interface TabProps extends BaseTabs.Tab.Props {
|
|
14
14
|
icon?: IconElement;
|
|
@@ -9,7 +9,7 @@ export interface ToggleGroupProps extends BaseToggleGroup.Props {
|
|
|
9
9
|
}
|
|
10
10
|
/**
|
|
11
11
|
* A row of Toggles. With `multiple` it is a toolbar of independent on/off
|
|
12
|
-
* toggles. Without it, one choice among peers: a well with one
|
|
12
|
+
* toggles. Without it, one choice among peers: a well with one selected key,
|
|
13
13
|
* the same control as Tabs.
|
|
14
14
|
*/
|
|
15
15
|
export declare const ToggleGroup: import("react").ForwardRefExoticComponent<Omit<ToggleGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
package/llms-full.txt
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
# Memos UI design system
|
|
4
4
|
|
|
5
|
-
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.
|
|
5
|
+
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.
|
|
6
6
|
|
|
7
7
|
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.
|
|
8
8
|
|
|
@@ -17,12 +17,13 @@ It is not a general-purpose UI library for outside developers. Components are ge
|
|
|
17
17
|
|
|
18
18
|
| Doc | What it covers |
|
|
19
19
|
| --- | --- |
|
|
20
|
+
| [Design reference: Linear](design-reference.md) | Official source evidence and how we apply it to Memos UI |
|
|
20
21
|
| [Principles and voice](principles.md) | The taste in six rules, and how interface text is written |
|
|
21
22
|
| [Color](color.md) | Color roles, every color token in Light and Dark, and how themes are chosen |
|
|
22
23
|
| [Depth](depth.md) | Flat surface roles, borders and focus without shadows or outlines |
|
|
23
24
|
| [Typography](typography.md) | The system font, the type scale and text rules |
|
|
24
25
|
| [Size, spacing and layout](layout.md) | Control sizes, the 4px scale, radius, layout widths, breakpoints and layers |
|
|
25
|
-
| [Motion](motion.md) |
|
|
26
|
+
| [Motion](motion.md) | Immediate feedback, minimal opening and closing, and reduced motion |
|
|
26
27
|
| [States](states.md) | Hover, pressed, loading, disabled, invalid and focus |
|
|
27
28
|
| [Icons](icons.md) | Lucide, sizes, the fixed stroke and accessibility |
|
|
28
29
|
| [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
|
|
|
36
37
|
- **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.
|
|
37
38
|
- **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).
|
|
38
39
|
- **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.
|
|
39
|
-
- **Ink is the accent.** The primary action and
|
|
40
|
-
- **One quiet hue.** `accent` is a quiet blue used only for links and text selection, never as a fill.
|
|
40
|
+
- **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.
|
|
41
|
+
- **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.
|
|
41
42
|
- **Status colors only for status.** Green means success, amber means warning, red means danger or error. None of them is used for emphasis.
|
|
42
43
|
- **Lucide icons** at one fixed screen-pixel stroke, 1.25px, at every size.
|
|
43
44
|
- **The system UI font** for all text. The package ships no font files.
|
|
44
45
|
- **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.
|
|
45
46
|
- **Dense, on a 4px grid.** Controls are 32px tall by default.
|
|
46
47
|
|
|
48
|
+
<!-- docs/design-reference.md -->
|
|
49
|
+
|
|
50
|
+
# Design reference: Linear
|
|
51
|
+
|
|
52
|
+
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.
|
|
53
|
+
|
|
54
|
+
## What the sources establish
|
|
55
|
+
|
|
56
|
+
- 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.
|
|
57
|
+
- 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.
|
|
58
|
+
- 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.
|
|
59
|
+
- 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.
|
|
60
|
+
- 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.
|
|
61
|
+
|
|
62
|
+
## How we apply this
|
|
63
|
+
|
|
64
|
+
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.
|
|
65
|
+
|
|
66
|
+
| Before | After | Why |
|
|
67
|
+
| --- | --- | --- |
|
|
68
|
+
| 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 |
|
|
69
|
+
| 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 |
|
|
70
|
+
| 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 |
|
|
71
|
+
| Tabs and single-choice groups animate each selection | Update the selected key immediately | Frequent navigation does not wait for decoration |
|
|
72
|
+
| 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 |
|
|
73
|
+
| 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 |
|
|
74
|
+
| A switch fades its track, border and knob colors | Update colors immediately; only the knob moves briefly | Motion explains a saved position |
|
|
75
|
+
| Screens restyle controls to solve local taste problems | Fix shared roles and components, then test the contract | Products stay consistent |
|
|
76
|
+
|
|
77
|
+
## Boundaries
|
|
78
|
+
|
|
79
|
+
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.
|
|
80
|
+
|
|
81
|
+
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.
|
|
82
|
+
|
|
47
83
|
<!-- docs/principles.md -->
|
|
48
84
|
|
|
49
85
|
# Principles and voice
|
|
50
86
|
|
|
51
87
|
## Principles
|
|
52
88
|
|
|
53
|
-
1. **
|
|
54
|
-
2. **
|
|
55
|
-
3. **
|
|
56
|
-
4. **
|
|
57
|
-
5. **
|
|
58
|
-
6. **
|
|
89
|
+
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.
|
|
90
|
+
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.
|
|
91
|
+
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.
|
|
92
|
+
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.
|
|
93
|
+
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.
|
|
94
|
+
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.
|
|
59
95
|
|
|
60
96
|
## Voice and interface text
|
|
61
97
|
|
|
@@ -92,7 +128,7 @@ Memos UI is ink on paper: a light warm-gray canvas, bright surfaces, `primary` i
|
|
|
92
128
|
| Keys | `key`, `key-hover` | Neutral buttons, select triggers, the selected tab, kbd |
|
|
93
129
|
| 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 |
|
|
94
130
|
| Emphasis | `primary`, `primary-hover`, `on-primary` | Primary button, checked checkbox and radio, switch when on, tooltip |
|
|
95
|
-
| Meta | `accent`, `selection`, `focus`, `focus-edge` | Links and text selection (`accent`); the keyboard focus edge and the
|
|
131
|
+
| 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 |
|
|
96
132
|
| Status | `success`, `warning`, `danger` and their `-soft` pairs; `danger-key`, `on-danger` | Toasts, badges, field errors, danger buttons |
|
|
97
133
|
| Lines | `edge`, `control-edge`, `line` | Quiet resting borders on fields, neutral buttons, switch tracks and surfaces; small checkbox/radio markers; separators and table rules |
|
|
98
134
|
|
|
@@ -100,7 +136,7 @@ Memos UI is ink on paper: a light warm-gray canvas, bright surfaces, `primary` i
|
|
|
100
136
|
|
|
101
137
|
- 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.
|
|
102
138
|
- `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.
|
|
103
|
-
-
|
|
139
|
+
- 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).
|
|
104
140
|
- Status colors appear only when there is a status. Red is for destructive actions and errors, never for emphasis.
|
|
105
141
|
- `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.
|
|
106
142
|
- Always pair a status color with a word or an icon.
|
|
@@ -115,7 +151,7 @@ There are two themes: **Light** (the default) and **Dark**.
|
|
|
115
151
|
- 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.
|
|
116
152
|
- 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.
|
|
117
153
|
- 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`.
|
|
118
|
-
- `edge` separates bounded surfaces and stays quiet at rest, on hover and under selected/pressed attributes. Text fields keep it
|
|
154
|
+
- `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).
|
|
119
155
|
|
|
120
156
|
### Choosing a theme
|
|
121
157
|
|
|
@@ -158,7 +194,7 @@ An app can offer more themes than the two the package ships, such as a warm Pape
|
|
|
158
194
|
expect(themeTokens.filter((name) => !paper.includes(`${name}:`))).toEqual([]);
|
|
159
195
|
});
|
|
160
196
|
```
|
|
161
|
-
- Keep the rules on this page: `primary` stays ink, not a brand hue; `accent` is only for links and selection; focus
|
|
197
|
+
- 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.
|
|
162
198
|
- 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.
|
|
163
199
|
- The tokens sit in the `mu` [cascade layer](building.md#cascade-layer), so an unlayered app theme wins over them at any specificity.
|
|
164
200
|
- 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.
|
|
@@ -186,7 +222,7 @@ An app can offer more themes than the two the package ships, such as a warm Pape
|
|
|
186
222
|
| `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 |
|
|
187
223
|
| `selection` | `rgba(40,99,171,0.18)` | `rgba(135,186,253,0.28)` | Text selection and the selected range in an editor |
|
|
188
224
|
| `focus` | `var(--mu-primary)` | `var(--mu-primary)` | 1px keyboard focus border, on `:focus-visible` only; contrasting text color on filled controls |
|
|
189
|
-
| `focus-edge` | `var(--mu-
|
|
225
|
+
| `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 |
|
|
190
226
|
| `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 |
|
|
191
227
|
| `success-soft` | `#e9f4ec` | `#14261a` | Background of success badges and toasts |
|
|
192
228
|
| `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) |
|
|
@@ -219,11 +255,11 @@ Use these classes before writing new surface styles. `mu-key` covers both a cont
|
|
|
219
255
|
|
|
220
256
|
- 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.
|
|
221
257
|
- 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.
|
|
222
|
-
- 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`
|
|
258
|
+
- 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.
|
|
223
259
|
- A checked checkbox or radio uses `primary` with an `on-primary` mark. A switch also moves its knob.
|
|
224
260
|
- 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.
|
|
225
261
|
- 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.
|
|
226
|
-
- 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.
|
|
262
|
+
- 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.
|
|
227
263
|
- Floating surfaces have a border so they remain distinct over the same surface color. Modal backdrops still use `overlay`.
|
|
228
264
|
- Content is grouped by spacing, headings and separators. The boxed exceptions are List, bordered Table and bordered Form.
|
|
229
265
|
- Borders count toward the documented padding. Reserve their space and compensate inner padding so states never move text or change a control's size.
|
|
@@ -232,7 +268,7 @@ Use these classes before writing new surface styles. `mu-key` covers both a cont
|
|
|
232
268
|
|
|
233
269
|
- `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.
|
|
234
270
|
- 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.
|
|
235
|
-
-
|
|
271
|
+
- 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).
|
|
236
272
|
- 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.
|
|
237
273
|
- Text links use a double underline on keyboard focus, including links already underlined at rest.
|
|
238
274
|
- Menu items and options use their highlighted fill. Opening a popup never draws a focus boundary around the popup.
|
|
@@ -477,52 +513,62 @@ Use these tokens for every `z-index`. Don't invent new layers in product code.
|
|
|
477
513
|
|
|
478
514
|
# Motion
|
|
479
515
|
|
|
480
|
-
|
|
516
|
+
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.
|
|
517
|
+
|
|
518
|
+
Our [Linear reference](design-reference.md) informs this restraint. The timings below are Memos UI decisions, not Linear's published animation specification.
|
|
481
519
|
|
|
482
520
|
## Rules
|
|
483
521
|
|
|
484
|
-
- **
|
|
485
|
-
|
|
486
|
-
- **
|
|
487
|
-
- **
|
|
488
|
-
- **
|
|
522
|
+
- **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.
|
|
523
|
+
|
|
524
|
+
- **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.
|
|
525
|
+
- **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.
|
|
526
|
+
- **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.
|
|
527
|
+
- **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.
|
|
528
|
+
- **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.
|
|
529
|
+
- **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.
|
|
530
|
+
- **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.
|
|
531
|
+
- **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.
|
|
532
|
+
- **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.
|
|
489
533
|
- **Spinners** turn once every 0.8s. **Skeletons** shimmer once every 1.4s.
|
|
490
|
-
- **Reduced motion.** Under `prefers-reduced-motion`,
|
|
534
|
+
- **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.
|
|
491
535
|
|
|
492
536
|
## Tokens
|
|
493
537
|
|
|
494
538
|
| Token | Value | Usage |
|
|
495
539
|
| --- | --- | --- |
|
|
496
|
-
| `duration-press` |
|
|
497
|
-
| `duration-settle` | 150ms |
|
|
498
|
-
| `duration-fade` | 100ms |
|
|
540
|
+
| `duration-press` | 0ms | Immediate shared hover, press and focus feedback |
|
|
541
|
+
| `duration-settle` | 150ms | Switch knob position; Dialog and Drawer opening and closing |
|
|
542
|
+
| `duration-fade` | 100ms | Shared popup and Collapsible opening and closing |
|
|
499
543
|
| `duration-spin` | 800ms | One turn of a Spinner |
|
|
500
544
|
| `duration-shimmer` | 1400ms | One pass of a Skeleton's shimmer |
|
|
501
|
-
| `ease-settle` | `cubic-bezier(0.2, 0.9, 0.3, 1)` |
|
|
502
|
-
| `ease-out` | `cubic-bezier(0.2, 0, 0, 1)` |
|
|
545
|
+
| `ease-settle` | `cubic-bezier(0.2, 0.9, 0.3, 1)` | Switch and Drawer position changes; no bounce |
|
|
546
|
+
| `ease-out` | `cubic-bezier(0.2, 0, 0, 1)` | Popup and Dialog opening and closing; backdrop fades |
|
|
503
547
|
|
|
504
548
|
<!-- docs/states.md -->
|
|
505
549
|
|
|
506
550
|
# States
|
|
507
551
|
|
|
508
|
-
|
|
552
|
+
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.
|
|
509
553
|
|
|
510
554
|
| State | Looks like |
|
|
511
555
|
| --- | --- |
|
|
512
556
|
| 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`. |
|
|
513
|
-
| Pressed (while held) |
|
|
557
|
+
| 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 |
|
|
514
558
|
| Pressed toggle (on) | Uses `well` and the `text` color; the reserved border stays transparent |
|
|
515
|
-
| Selected (one of several) | A flat `key` fill in a quiet well that
|
|
559
|
+
| 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` |
|
|
516
560
|
| Checked | A flat `primary` fill with an `on-primary` mark |
|
|
517
561
|
| 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 |
|
|
518
562
|
| Disabled | `text-disabled` text, quiet borders and `well` on all Button variants and other filled controls; no whole-control opacity, hover or press response |
|
|
519
563
|
| Invalid | A `danger` edge on the field, plus an error line with an icon under it |
|
|
520
|
-
| Focus (field) | The
|
|
564
|
+
| 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 |
|
|
521
565
|
| 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 |
|
|
522
566
|
| Focus (inside a widget) | Menu items and options take the `hover` fill. No ring |
|
|
523
567
|
|
|
524
568
|
## Rules
|
|
525
569
|
|
|
570
|
+
- 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.
|
|
571
|
+
- 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.
|
|
526
572
|
- 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.
|
|
527
573
|
- 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.
|
|
528
574
|
- 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.
|
|
@@ -530,9 +576,10 @@ Every interactive component handles these states the same way.
|
|
|
530
576
|
- 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.
|
|
531
577
|
- Hover never changes size, weight or layout.
|
|
532
578
|
- An input never changes its background on hover or focus, so it never looks disabled.
|
|
533
|
-
- Control focus borders show for keyboard focus only (`:focus-visible`), never on mouse click.
|
|
534
|
-
- Focus changes the existing edge, never adds a ring or visible outline. Filled controls use their contrasting text color at the edge.
|
|
579
|
+
- 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.
|
|
580
|
+
- 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.
|
|
535
581
|
- Popups, dialogs and panels never show a focus ring when they open and take focus.
|
|
582
|
+
- 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.
|
|
536
583
|
- Focused borders use 2px in the system `Highlight` color in forced-colors mode. No shadow or outline fallback is needed.
|
|
537
584
|
- 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.
|
|
538
585
|
- Disabled controls stay in place. Prefer explaining why something is unavailable over hiding it.
|
|
@@ -543,7 +590,7 @@ Every interactive component handles these states the same way.
|
|
|
543
590
|
| Component family | Default feedback |
|
|
544
591
|
| --- | --- |
|
|
545
592
|
| Actions: Button and Link | Shared fill, edge or underline feedback, without movement or filters. All Button variants share the disabled well and edge |
|
|
546
|
-
| Fields: Input, Textarea and Combobox input |
|
|
593
|
+
| 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 |
|
|
547
594
|
| 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 |
|
|
548
595
|
| Actionable rows: Menu, Select, Combobox options and List.ItemButton | Use the shared highlighted fill. Keep Base UI's interaction behavior |
|
|
549
596
|
| Containers: Dialog, Drawer, Popover and Toast | Feedback belongs to their controls, not an extra container hover effect. Keep visibility, dismissal and Toast expansion behavior |
|
|
@@ -726,7 +773,7 @@ Wraps Base UI's [Button](https://base-ui.com/react/components/button): `disabled
|
|
|
726
773
|
- 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.
|
|
727
774
|
- 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.
|
|
728
775
|
- Only an icon: square. The side with an icon (`icon` at the start, `iconEnd` at the end) has 2px less padding.
|
|
729
|
-
-
|
|
776
|
+
- 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.
|
|
730
777
|
- `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.
|
|
731
778
|
- 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.
|
|
732
779
|
|
|
@@ -765,7 +812,7 @@ Wraps Base UI's [Toggle](https://base-ui.com/react/components/toggle): `pressed`
|
|
|
765
812
|
|
|
766
813
|
## Style
|
|
767
814
|
|
|
768
|
-
- 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. Hover never adds a boundary; keyboard focus reuses `mu-focus`.
|
|
815
|
+
- 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`.
|
|
769
816
|
- 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.
|
|
770
817
|
- 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.
|
|
771
818
|
|
|
@@ -799,7 +846,7 @@ import { Bold, Code, Italic } from "lucide-react";
|
|
|
799
846
|
|
|
800
847
|
| Part | Base UI part | Renders |
|
|
801
848
|
| --- | --- | --- |
|
|
802
|
-
| `ToggleGroup` | `ToggleGroup` | A `<div role="group">`. Takes `size`. Without `multiple`, adds the
|
|
849
|
+
| `ToggleGroup` | `ToggleGroup` | A `<div role="group">`. Takes `size`. Without `multiple`, adds the selected key |
|
|
803
850
|
| `Toggle` | `Toggle` | One item, a `<button aria-pressed>` |
|
|
804
851
|
| `Separator` | `Separator` | A line between clusters, `multiple` groups only |
|
|
805
852
|
|
|
@@ -832,7 +879,7 @@ Base UI's props pass through: `value`, `defaultValue`, `onValueChange`, `multipl
|
|
|
832
879
|
- `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.
|
|
833
880
|
- 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.
|
|
834
881
|
- 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.
|
|
835
|
-
- 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
|
|
882
|
+
- 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.
|
|
836
883
|
|
|
837
884
|
<!-- docs/components/menu.md -->
|
|
838
885
|
|
|
@@ -924,7 +971,7 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `modal` on
|
|
|
924
971
|
- A Separator has 6px above and below, the same as the popup padding, and runs edge to edge.
|
|
925
972
|
- 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`.
|
|
926
973
|
- A ghost trigger keeps its `hover` background while the menu is open.
|
|
927
|
-
-
|
|
974
|
+
- 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.
|
|
928
975
|
- 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.
|
|
929
976
|
- 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.
|
|
930
977
|
|
|
@@ -1149,13 +1196,13 @@ Wraps Base UI's [Input](https://base-ui.com/react/components/input), so inside a
|
|
|
1149
1196
|
- Provide a `Field.Label` or `aria-label`. Never a placeholder alone.
|
|
1150
1197
|
- `prefix` and `suffix` hold an icon, a short word or a small ghost Button.
|
|
1151
1198
|
- `sm` for filters inside panels, `md` everywhere else.
|
|
1152
|
-
- An app's own one-line field, such as a tag input around a native `<input>`, takes `inputClasses()` on its box: focus
|
|
1199
|
+
- 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).
|
|
1153
1200
|
|
|
1154
1201
|
## Style
|
|
1155
1202
|
|
|
1156
1203
|
- Enabled fields use flat `surface` with a quiet 1px `edge` border. A gray well is reserved for the disabled state.
|
|
1157
1204
|
- 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.
|
|
1158
|
-
- Hover
|
|
1205
|
+
- 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.
|
|
1159
1206
|
- The side with a prefix or suffix has 2px less padding.
|
|
1160
1207
|
|
|
1161
1208
|
<!-- docs/components/textarea.md -->
|
|
@@ -1192,11 +1239,11 @@ Base UI has no textarea part, so this renders Base UI's `Field.Control` as a `<t
|
|
|
1192
1239
|
|
|
1193
1240
|
- Provide a `Field.Label` or `aria-label`.
|
|
1194
1241
|
- Rich content is not a textarea: use the editor (`@usememos/editor`) with [Prose](prose.md).
|
|
1195
|
-
- An app's own multi-line field, such as a content-editable editor, takes `textareaClasses()`: focus
|
|
1242
|
+
- 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).
|
|
1196
1243
|
|
|
1197
1244
|
## Style
|
|
1198
1245
|
|
|
1199
|
-
- Looks like [Input](input.md). Resizes vertically only.
|
|
1246
|
+
- 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.
|
|
1200
1247
|
- 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.
|
|
1201
1248
|
|
|
1202
1249
|
<!-- docs/components/select.md -->
|
|
@@ -1250,7 +1297,7 @@ interface Select.TriggerProps extends BaseSelect.Trigger.Props {
|
|
|
1250
1297
|
variant?: "neutral" | "ghost"; // default "neutral"; ghost: a flat row, for a switcher in a sidebar or toolbar
|
|
1251
1298
|
}
|
|
1252
1299
|
interface Select.PopupProps extends BaseSelect.Popup.Props {
|
|
1253
|
-
alignItemWithTrigger?: boolean; // default
|
|
1300
|
+
alignItemWithTrigger?: boolean; // default false: open below the trigger
|
|
1254
1301
|
side?: Side; align?: Align; // used when alignItemWithTrigger is false
|
|
1255
1302
|
container?: HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null; // portal target
|
|
1256
1303
|
}
|
|
@@ -1271,9 +1318,9 @@ Base UI's props pass through: `items`, `value`, `defaultValue`, `onValueChange`,
|
|
|
1271
1318
|
|
|
1272
1319
|
## Style
|
|
1273
1320
|
|
|
1274
|
-
- Trigger: a neutral key ([Button](button.md) `neutral`), a quiet `edge` at rest and on hover, value left-aligned at weight 400, `
|
|
1321
|
+
- 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.
|
|
1275
1322
|
- 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`.
|
|
1276
|
-
-
|
|
1323
|
+
- 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.
|
|
1277
1324
|
|
|
1278
1325
|
<!-- docs/components/combobox.md -->
|
|
1279
1326
|
|
|
@@ -1375,12 +1422,12 @@ Base UI's props pass through: `items`, `value`, `defaultValue`, `onValueChange`,
|
|
|
1375
1422
|
|
|
1376
1423
|
## Style
|
|
1377
1424
|
|
|
1378
|
-
- The box is an [Input](input.md): flat `surface`, `edge`,
|
|
1425
|
+
- 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`.
|
|
1379
1426
|
- 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.
|
|
1380
1427
|
- Rows are text weight 400; the highlighted row uses `hover`; the chosen row has a check at the end.
|
|
1381
1428
|
- Empty text: `body` in `text-secondary`, `space-3` by `space-4` padding.
|
|
1382
1429
|
- 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.
|
|
1383
|
-
-
|
|
1430
|
+
- 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.
|
|
1384
1431
|
|
|
1385
1432
|
<!-- docs/components/checkbox.md -->
|
|
1386
1433
|
|
|
@@ -1458,7 +1505,7 @@ Wraps Base UI's [Switch](https://base-ui.com/react/components/switch) root with
|
|
|
1458
1505
|
|
|
1459
1506
|
- 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.
|
|
1460
1507
|
- Height = checkbox box + 2px; width = height × 1.7.
|
|
1461
|
-
- The knob is flat `text`, inset 2px; `on-primary` when on.
|
|
1508
|
+
- 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.
|
|
1462
1509
|
|
|
1463
1510
|
<!-- docs/components/radio-group.md -->
|
|
1464
1511
|
|
|
@@ -1544,7 +1591,7 @@ import { Bell, User } from "lucide-react";
|
|
|
1544
1591
|
| Part | Base UI part | Renders |
|
|
1545
1592
|
| --- | --- | --- |
|
|
1546
1593
|
| `Tabs.Root` | `Tabs.Root` | A `<div>` around the list and panels. Takes `size` |
|
|
1547
|
-
| `Tabs.List` | `Tabs.List` with `Tabs.Indicator` | The well, a `<div role="tablist">`, with the
|
|
1594
|
+
| `Tabs.List` | `Tabs.List` with `Tabs.Indicator` | The well, a `<div role="tablist">`, with the selected key built in |
|
|
1548
1595
|
| `Tabs.Tab` | `Tabs.Tab` | One tab, a `<button role="tab">`. Takes `icon` |
|
|
1549
1596
|
| `Tabs.Panel` | `Tabs.Panel` | One tab's content, a `<div role="tabpanel">` |
|
|
1550
1597
|
|
|
@@ -1571,7 +1618,7 @@ Base UI's props pass through: `value`, `defaultValue`, `onValueChange` on the ro
|
|
|
1571
1618
|
|
|
1572
1619
|
## Style
|
|
1573
1620
|
|
|
1574
|
-
- Shares the quiet well and
|
|
1621
|
+
- 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.
|
|
1575
1622
|
- 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.
|
|
1576
1623
|
- Selected and hovered labels `text`, others `text-secondary`. Weight never changes, so labels don't shift.
|
|
1577
1624
|
|
|
@@ -1597,7 +1644,7 @@ import { Collapsible } from "@usememos/ui";
|
|
|
1597
1644
|
| Part | Base UI part | Renders |
|
|
1598
1645
|
| --- | --- | --- |
|
|
1599
1646
|
| `Collapsible.Root` | `Collapsible.Root` | A `<div>` around the trigger and panel. Takes `size` |
|
|
1600
|
-
| `Collapsible.Trigger` | `Collapsible.Trigger` | A ghost [Button](button.md) with a chevron at the end that
|
|
1647
|
+
| `Collapsible.Trigger` | `Collapsible.Trigger` | A ghost [Button](button.md) with a chevron at the end that points up while open |
|
|
1601
1648
|
| `Collapsible.Panel` | `Collapsible.Panel` | The content, a `<div>`; unmounted while closed unless `keepMounted` |
|
|
1602
1649
|
|
|
1603
1650
|
## Props
|
|
@@ -1620,9 +1667,9 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `disabled`
|
|
|
1620
1667
|
## Style
|
|
1621
1668
|
|
|
1622
1669
|
- The trigger is a ghost key that bleeds `px` to the left, so its label lines up with the content below.
|
|
1623
|
-
- The chevron is `text-secondary` and
|
|
1670
|
+
- The chevron is `text-secondary` and changes orientation by 180° immediately when open; no rotation transition.
|
|
1624
1671
|
- Disabled labels and chevrons use `text-disabled`.
|
|
1625
|
-
- The panel
|
|
1672
|
+
- 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.
|
|
1626
1673
|
|
|
1627
1674
|
<!-- docs/components/dialog.md -->
|
|
1628
1675
|
|
|
@@ -1708,7 +1755,7 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `modal`, `d
|
|
|
1708
1755
|
|
|
1709
1756
|
- `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`.
|
|
1710
1757
|
- 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.
|
|
1711
|
-
-
|
|
1758
|
+
- 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.
|
|
1712
1759
|
- Long content scrolls the viewport around the panel.
|
|
1713
1760
|
- `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`.
|
|
1714
1761
|
- `fullScreen`: the viewport's padding goes, and the popup fills it with square corners.
|
|
@@ -1775,7 +1822,7 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `onOpenChan
|
|
|
1775
1822
|
- `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.
|
|
1776
1823
|
- `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.
|
|
1777
1824
|
- The backdrop is `overlay`; it fades as the drawer is swiped away.
|
|
1778
|
-
-
|
|
1825
|
+
- 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).
|
|
1779
1826
|
|
|
1780
1827
|
<!-- docs/components/popover.md -->
|
|
1781
1828
|
|
|
@@ -1838,7 +1885,7 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `modal` on
|
|
|
1838
1885
|
- `mu-popup` (`surface`, a 1px `edge`, `radius-xl`), `space-4` padding, `popover-width` wide. Children stack `space-3` apart.
|
|
1839
1886
|
- Title: `label`. Description: `caption` in `text-secondary`, `space-1` under the title.
|
|
1840
1887
|
- `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.
|
|
1841
|
-
-
|
|
1888
|
+
- Opening and closing use the shared [Motion](../motion.md) fade and `space-1` offset over `duration-fade`. Both are immediate under reduced motion.
|
|
1842
1889
|
|
|
1843
1890
|
<!-- docs/components/tooltip.md -->
|
|
1844
1891
|
|
|
@@ -1896,7 +1943,7 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `disabled`
|
|
|
1896
1943
|
## Style
|
|
1897
1944
|
|
|
1898
1945
|
- `primary` background, `on-primary` text, `label-sm`, `radius-md`, `space-1` by `space-2` padding, at most `tooltip-width` wide.
|
|
1899
|
-
-
|
|
1946
|
+
- 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.
|
|
1900
1947
|
|
|
1901
1948
|
<!-- docs/components/toast.md -->
|
|
1902
1949
|
|
|
@@ -1956,7 +2003,7 @@ Base UI's props pass through: `timeout` (default 5000ms) and `limit` (default 3)
|
|
|
1956
2003
|
|
|
1957
2004
|
- `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.
|
|
1958
2005
|
- 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.
|
|
1959
|
-
- 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
|
|
2006
|
+
- 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).
|
|
1960
2007
|
|
|
1961
2008
|
<!-- docs/components/avatar.md -->
|
|
1962
2009
|
|
|
@@ -2372,7 +2419,7 @@ Every native attribute passes through.
|
|
|
2372
2419
|
## Style
|
|
2373
2420
|
|
|
2374
2421
|
- `surface` fill, a 1px `line` edge, `radius-lg`. No shadow: it is flat, like a field.
|
|
2375
|
-
- 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
|
|
2422
|
+
- 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.
|
|
2376
2423
|
- Text is `body` in `text`.
|
|
2377
2424
|
|
|
2378
2425
|
<!-- docs/components/prose.md -->
|
|
@@ -3057,7 +3104,7 @@ An app changes only the color and font tokens. Every other token and every `mu-*
|
|
|
3057
3104
|
|
|
3058
3105
|
- Every class the package ships starts with `mu-`.
|
|
3059
3106
|
- 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.
|
|
3060
|
-
- `mu-positioner` puts a popup's positioner on `layer-popup`, and `mu-popup-motion`
|
|
3107
|
+
- `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).
|
|
3061
3108
|
- 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).
|
|
3062
3109
|
- `mu-prose` styles rendered content. See [Prose](components/prose.md).
|
|
3063
3110
|
- `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).
|
|
@@ -3178,7 +3225,7 @@ A class function returns the classes that make any element look like a component
|
|
|
3178
3225
|
|
|
3179
3226
|
State is set with attributes, never with extra classes:
|
|
3180
3227
|
|
|
3181
|
-
- A field
|
|
3228
|
+
- 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.
|
|
3182
3229
|
- 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.
|
|
3183
3230
|
- A popup fades in with `data-starting-style` and out with `data-ending-style`, which Base UI's popups set.
|
|
3184
3231
|
- 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.
|
package/llms.txt
CHANGED
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
# Memos UI (@usememos/ui)
|
|
2
2
|
|
|
3
|
-
> 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.
|
|
3
|
+
> 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.
|
|
4
4
|
|
|
5
5
|
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.
|
|
6
6
|
|
|
7
7
|
## Docs
|
|
8
8
|
|
|
9
|
+
- [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
|
|
9
10
|
- [Principles and voice](https://github.com/usememos/ui/blob/main/docs/principles.md): The taste in six rules, and how interface text is written
|
|
10
11
|
- [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
|
|
11
12
|
- [Surfaces and boundaries](https://github.com/usememos/ui/blob/main/docs/depth.md): Flat surface roles, borders and focus without shadows or outlines
|
|
12
13
|
- [Typography](https://github.com/usememos/ui/blob/main/docs/typography.md): The system font, the type scale and text rules
|
|
13
14
|
- [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
|
|
14
|
-
- [Motion](https://github.com/usememos/ui/blob/main/docs/motion.md):
|
|
15
|
+
- [Motion](https://github.com/usememos/ui/blob/main/docs/motion.md): Immediate feedback, minimal opening and closing, and reduced motion
|
|
15
16
|
- [States](https://github.com/usememos/ui/blob/main/docs/states.md): Hover, pressed, loading, disabled, invalid and focus
|
|
16
17
|
- [Icons](https://github.com/usememos/ui/blob/main/docs/icons.md): Lucide, sizes, the fixed stroke and accessibility
|
|
17
18
|
- [Components](https://github.com/usememos/ui/blob/main/docs/components/README.md): The 31 components, what was left out, and one page per component
|