@usememos/ui 26.11.18 → 26.11.19

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.
Files changed (8) hide show
  1. package/dist/components/menu/index.js +1 -1
  2. package/dist/components/menu/index.js.map +2 -2
  3. package/dist/components/popover/index.js.map +1 -1
  4. package/dist/styles.css +1 -1
  5. package/dist/types/components/popover/index.d.ts +1 -1
  6. package/llms-full.txt +258 -37
  7. package/llms.txt +2 -0
  8. package/package.json +1 -1
package/dist/components/menu/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  'use client';
2
- import{Menu as s}from"@base-ui/react/menu";import{Check as S,ChevronRight as v}from"lucide-react";import{forwardRef as c,useCallback as I,useId as G,useRef as C}from"react";import{cx as T,withClass as m}from"../../internal/class-name.js";import{splitPositioner as E}from"../../internal/popup.js";import{SizeContext as k,useRowSize as B}from"../../internal/size.js";import{menuClasses as N}from"./classes.js";import{Fragment as y,jsx as t,jsxs as g}from"react/jsx-runtime";var u=N();function A({size:i,...o}){let e=B(i);return t(k.Provider,{value:e,children:t(s.Root,{...o})})}var W=c(function({className:o,...e},r){return t(s.Trigger,{ref:r,...e,className:m("mu-menu-trigger",o)})}),q=c(function({container:o,className:e,...r},n){let p=B(),a=C(null),l=I(f=>{a.current=f,typeof n=="function"?n(f):n&&(n.current=f)},[n]),d=I(({side:f,align:M})=>{let x=a.current;if(!x||M==="center"||f==="top"||f==="bottom")return 0;let h=getComputedStyle(x);return-(parseFloat(h.paddingTop)+parseFloat(h.borderTopWidth))||0},[]),P=I(({side:f})=>{let M=a.current;if(!M||f==="top"||f==="bottom")return 4;let x=getComputedStyle(M);return parseFloat(x.paddingTop)+parseFloat(x.borderTopWidth)||4},[]),[R,L]=E(r);return t(s.Portal,{container:o,children:t(s.Positioner,{sideOffset:P,alignOffset:d,...R,className:"mu-positioner",children:t(s.Popup,{ref:l,...L,className:m(N({size:p}).popup,e)})})})});function b({icon:i,shortcut:o,description:e,children:r}){let n=G(),p=e!=null&&e!==!1,a=t("span",{className:u.label,id:p?`${n}-label`:void 0,children:r}),l=g(y,{children:[i,p?g("span",{className:u.text,children:[a,t("span",{className:u.description,id:`${n}-description`,children:e})]}):a,o!==void 0?t("span",{className:u.shortcut,children:o}):null]}),d=p?{"aria-labelledby":`${n}-label`,"aria-describedby":`${n}-description`}:null;return[l,d]}var J=c(function({icon:o,shortcut:e,description:r,danger:n=!1,className:p,children:a,...l},d){let[P,R]=b({icon:o,shortcut:e,description:r,children:a});return t(s.Item,{ref:d,...R,...l,className:m(n?u.dangerItem:u.item,p),children:P})}),K=c(function({icon:o,shortcut:e,description:r,className:n,children:p,...a},l){let[d,P]=b({icon:o,shortcut:e,description:r,children:p});return g(s.CheckboxItem,{ref:l,...P,...a,className:m(T(u.item,"mu-menu-checkbox-item"),n),children:[d,t("span",{className:"mu-menu-indicator",children:t(s.CheckboxItemIndicator,{render:t(S,{"aria-hidden":!0})})})]})}),Q=c(function({className:o,...e},r){return t(s.RadioGroup,{ref:r,...e,className:m("mu-menu-radio-group",o)})}),U=c(function({icon:o,shortcut:e,description:r,className:n,children:p,...a},l){let[d,P]=b({icon:o,shortcut:e,description:r,children:p});return g(s.RadioItem,{ref:l,...P,...a,className:m(T(u.item,"mu-menu-radio-item"),n),children:[d,t("span",{className:"mu-menu-indicator",children:t(s.RadioItemIndicator,{render:t(S,{"aria-hidden":!0})})})]})}),V=c(function({className:o,...e},r){return t(s.Group,{ref:r,...e,className:m("mu-menu-group",o)})}),X=c(function({className:o,...e},r){return t(s.GroupLabel,{ref:r,...e,className:m(u.groupLabel,o)})}),Y=c(function({className:o,...e},r){return t(s.Separator,{ref:r,...e,className:m(u.separator,o)})}),Z=s.SubmenuRoot,_=c(function({icon:o,className:e,children:r,...n},p){let[a]=b({icon:o,children:r});return g(s.SubmenuTrigger,{ref:p,...n,className:m(T(u.item,"mu-menu-submenu-trigger"),e),children:[a,t(v,{className:"mu-menu-chevron","aria-hidden":!0})]})});export{K as CheckboxItem,V as Group,X as GroupLabel,J as Item,q as Popup,Q as RadioGroup,U as RadioItem,A as Root,Y as Separator,Z as SubmenuRoot,_ as SubmenuTrigger,W as Trigger};
2
+ import{Menu as s}from"@base-ui/react/menu";import{Check as S,ChevronRight as G}from"lucide-react";import{forwardRef as c,useCallback as I,useId as v,useRef as C}from"react";import{cx as T,withClass as m}from"../../internal/class-name.js";import{splitPositioner as E}from"../../internal/popup.js";import{SizeContext as k,useRowSize as B}from"../../internal/size.js";import{menuClasses as N}from"./classes.js";import{Fragment as w,jsx as t,jsxs as g}from"react/jsx-runtime";var u=N();function W({size:i,...o}){let e=B(i);return t(k.Provider,{value:e,children:t(s.Root,{...o})})}var $=c(function({className:o,...e},r){return t(s.Trigger,{ref:r,...e,className:m("mu-menu-trigger",o)})}),q=c(function({container:o,className:e,...r},n){let p=B(),a=C(null),l=I(P=>{a.current=P,typeof n=="function"?n(P):n&&(n.current=P)},[n]),d=I(({side:P,align:M})=>{let x=a.current;if(!x||M==="center"||P==="top"||P==="bottom")return 0;let h=getComputedStyle(x);return-(parseFloat(h.paddingTop)+parseFloat(h.borderTopWidth))||0},[]),f=I(({side:P})=>{let M=a.current;if(!M||P==="top"||P==="bottom")return 4;let x=getComputedStyle(M);return parseFloat(x.paddingTop)+parseFloat(x.borderTopWidth)||4},[]),[b,L]=E(r);return t(s.Portal,{container:o,children:t(s.Positioner,{sideOffset:f,alignOffset:d,...b,className:"mu-positioner",children:t(s.Popup,{ref:l,...L,className:m(N({size:p}).popup,e)})})})});function R({icon:i,shortcut:o,description:e,children:r}){let n=v(),p=e!=null&&e!==!1,a=t("span",{className:u.label,children:r}),l=g(w,{children:[i,p?g("span",{className:u.text,children:[a,t("span",{className:u.description,id:`${n}-description`,"aria-hidden":"true",children:e})]}):a,o!==void 0?t("span",{className:u.shortcut,children:o}):null]}),d=p?{"aria-describedby":`${n}-description`}:null;return[l,d]}var J=c(function({icon:o,shortcut:e,description:r,danger:n=!1,className:p,children:a,...l},d){let[f,b]=R({icon:o,shortcut:e,description:r,children:a});return t(s.Item,{ref:d,...b,...l,className:m(n?u.dangerItem:u.item,p),children:f})}),K=c(function({icon:o,shortcut:e,description:r,className:n,children:p,...a},l){let[d,f]=R({icon:o,shortcut:e,description:r,children:p});return g(s.CheckboxItem,{ref:l,...f,...a,className:m(T(u.item,"mu-menu-checkbox-item"),n),children:[d,t("span",{className:"mu-menu-indicator",children:t(s.CheckboxItemIndicator,{render:t(S,{"aria-hidden":!0})})})]})}),Q=c(function({className:o,...e},r){return t(s.RadioGroup,{ref:r,...e,className:m("mu-menu-radio-group",o)})}),U=c(function({icon:o,shortcut:e,description:r,className:n,children:p,...a},l){let[d,f]=R({icon:o,shortcut:e,description:r,children:p});return g(s.RadioItem,{ref:l,...f,...a,className:m(T(u.item,"mu-menu-radio-item"),n),children:[d,t("span",{className:"mu-menu-indicator",children:t(s.RadioItemIndicator,{render:t(S,{"aria-hidden":!0})})})]})}),V=c(function({className:o,...e},r){return t(s.Group,{ref:r,...e,className:m("mu-menu-group",o)})}),X=c(function({className:o,...e},r){return t(s.GroupLabel,{ref:r,...e,className:m(u.groupLabel,o)})}),Y=c(function({className:o,...e},r){return t(s.Separator,{ref:r,...e,className:m(u.separator,o)})}),Z=s.SubmenuRoot,_=c(function({icon:o,className:e,children:r,...n},p){let[a]=R({icon:o,children:r});return g(s.SubmenuTrigger,{ref:p,...n,className:m(T(u.item,"mu-menu-submenu-trigger"),e),children:[a,t(G,{"aria-hidden":!0})]})});export{K as CheckboxItem,V as Group,X as GroupLabel,J as Item,q as Popup,Q as RadioGroup,U as RadioItem,W as Root,Y as Separator,Z as SubmenuRoot,_ as SubmenuTrigger,$ as Trigger};
3
3
  //# sourceMappingURL=index.js.map
package/dist/components/menu/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/menu/index.tsx"],
4
- "sourcesContent": ["import { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { Check, ChevronRight } from 'lucide-react';\nimport { forwardRef, useCallback, useId, useRef, type ReactNode } from 'react';\nimport { cx, withClass } from '../../internal/class-name';\nimport { splitPositioner } from '../../internal/popup';\nimport { SizeContext, useRowSize } from '../../internal/size';\nimport type { IconElement, Size } from '../../types';\nimport { menuClasses } from './classes';\n\nconst classes = /* @__PURE__ */ menuClasses();\n\nexport interface RootProps extends BaseMenu.Root.Props {\n /** Row height of every item: 28 (sm) or 32px (md). */\n size?: Exclude<Size, 'xs'>;\n}\n\n/** Groups a trigger and its menu. */\nexport function Root({ size, ...props }: RootProps) {\n const resolved = useRowSize(size);\n return (\n <SizeContext.Provider value={resolved}>\n <BaseMenu.Root {...props} />\n </SizeContext.Provider>\n );\n}\n\nexport interface TriggerProps extends BaseMenu.Trigger.Props {}\n\n/** Opens the menu. Usually `render={<Button variant=\"ghost\" icon={<Ellipsis />} aria-label=\"More actions\" />}`. */\nexport const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function MenuTrigger({ className, ...props }, ref) {\n return <BaseMenu.Trigger ref={ref} {...props} className={withClass('mu-menu-trigger', className)} />;\n});\n\ntype PositionerProps = Pick<\n BaseMenu.Positioner.Props,\n 'side' | 'align' | 'collisionAvoidance' | 'collisionBoundary' | 'sticky' | 'anchor' | 'positionMethod' | 'disableAnchorTracking'\n>;\n\nexport interface PopupProps extends BaseMenu.Popup.Props, PositionerProps {\n /** Where the menu is portaled to. Default `document.body`. */\n container?: BaseMenu.Portal.Props['container'];\n}\n\n/**\n * The list of items. Also the popup of a submenu, inside `SubmenuRoot`. When it\n * opens to the side of its trigger (a submenu, or a panel row's own menu),\n * aligned to the start or end, it moves along the trigger by its own top\n * padding and border (read when it is placed): its first row\n * lines up with the trigger, or its last row when it opens upward.\n */\nexport const Popup = forwardRef<HTMLDivElement, PopupProps>(function MenuPopup({ container, className, ...props }, ref) {\n const size = useRowSize();\n const popupRef = useRef<HTMLDivElement | null>(null);\n const setRef = useCallback(\n (node: HTMLDivElement | null) => {\n popupRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n // Base UI reverses the sign when the popup aligns to the trigger's end, so one value serves both.\n // `side` is where it actually opens, after any flip; above, below or centered, it does not move.\n const alignOffset = useCallback(({ side, align }: { side: string; align: string }) => {\n const popup = popupRef.current;\n if (!popup || align === 'center' || side === 'top' || side === 'bottom') return 0;\n const style = getComputedStyle(popup);\n return -(parseFloat(style.paddingTop) + parseFloat(style.borderTopWidth)) || 0;\n }, []);\n // Beside its trigger, it sits its own padding away, so a submenu's edge meets its parent's edge.\n const sideOffset = useCallback(({ side }: { side: string }) => {\n const popup = popupRef.current;\n if (!popup || side === 'top' || side === 'bottom') return 4;\n const style = getComputedStyle(popup);\n return parseFloat(style.paddingTop) + parseFloat(style.borderTopWidth) || 4;\n }, []);\n const [positioner, rest] = splitPositioner(props);\n return (\n <BaseMenu.Portal container={container}>\n <BaseMenu.Positioner sideOffset={sideOffset} alignOffset={alignOffset} {...positioner} className=\"mu-positioner\">\n <BaseMenu.Popup ref={setRef} {...rest} className={withClass(menuClasses({ size }).popup, className)} />\n </BaseMenu.Positioner>\n </BaseMenu.Portal>\n );\n});\n\ninterface RowProps {\n /** A Lucide element before the label. */\n icon?: IconElement;\n /** A keyboard shortcut at the end of the row, such as \"\u2318 D\". */\n shortcut?: ReactNode;\n /** A line of `text-secondary` text under the label, which makes the row two lines tall. Screen readers read it as the item's description. */\n description?: ReactNode;\n children?: ReactNode;\n}\n\n/**\n * The shared inside of every row: icon, label, shortcut. With a description,\n * the label and description stack, and the item is named by the label and\n * described by the description.\n */\nfunction useRow({ icon, shortcut, description, children }: RowProps) {\n const id = useId();\n const hasDescription = description !== undefined && description !== null && description !== false;\n const label = <span className={classes.label} id={hasDescription ? `${id}-label` : undefined}>{children}</span>;\n const content = (\n <>\n {icon}\n {hasDescription ? (\n <span className={classes.text}>\n {label}\n <span className={classes.description} id={`${id}-description`}>{description}</span>\n </span>\n ) : (\n label\n )}\n {shortcut !== undefined ? <span className={classes.shortcut}>{shortcut}</span> : null}\n </>\n );\n const aria = hasDescription ? { 'aria-labelledby': `${id}-label`, 'aria-describedby': `${id}-description` } : null;\n return [content, aria] as const;\n}\n\nexport interface ItemProps extends BaseMenu.Item.Props, RowProps {\n /** A destructive action: red text. Put it last, after a Separator. */\n danger?: boolean;\n}\n\n/** One action. */\nexport const Item = forwardRef<HTMLDivElement, ItemProps>(function MenuItem({ icon, shortcut, description, danger = false, className, children, ...props }, ref) {\n const [row, aria] = useRow({ icon, shortcut, description, children });\n return (\n <BaseMenu.Item ref={ref} {...aria} {...props} className={withClass(danger ? classes.dangerItem : classes.item, className)}>\n {row}\n </BaseMenu.Item>\n );\n});\n\nexport interface CheckboxItemProps extends BaseMenu.CheckboxItem.Props, RowProps {}\n\n/** An option that turns on or off, with a check at the end. Stays open on click. */\nexport const CheckboxItem = forwardRef<HTMLDivElement, CheckboxItemProps>(function MenuCheckboxItem({ icon, shortcut, description, className, children, ...props }, ref) {\n const [row, aria] = useRow({ icon, shortcut, description, children });\n return (\n <BaseMenu.CheckboxItem ref={ref} {...aria} {...props} className={withClass(cx(classes.item, 'mu-menu-checkbox-item'), className)}>\n {row}\n <span className=\"mu-menu-indicator\">\n <BaseMenu.CheckboxItemIndicator render={<Check aria-hidden />} />\n </span>\n </BaseMenu.CheckboxItem>\n );\n});\n\nexport interface RadioGroupProps extends BaseMenu.RadioGroup.Props {}\n\n/** Groups RadioItems: exactly one is chosen. */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(function MenuRadioGroup({ className, ...props }, ref) {\n return <BaseMenu.RadioGroup ref={ref} {...props} className={withClass('mu-menu-radio-group', className)} />;\n});\n\nexport interface RadioItemProps extends BaseMenu.RadioItem.Props, RowProps {}\n\n/** One choice in a RadioGroup, with a check at the end when chosen. Stays open on click. */\nexport const RadioItem = forwardRef<HTMLDivElement, RadioItemProps>(function MenuRadioItem({ icon, shortcut, description, className, children, ...props }, ref) {\n const [row, aria] = useRow({ icon, shortcut, description, children });\n return (\n <BaseMenu.RadioItem ref={ref} {...aria} {...props} className={withClass(cx(classes.item, 'mu-menu-radio-item'), className)}>\n {row}\n <span className=\"mu-menu-indicator\">\n <BaseMenu.RadioItemIndicator render={<Check aria-hidden />} />\n </span>\n </BaseMenu.RadioItem>\n );\n});\n\nexport interface GroupProps extends BaseMenu.Group.Props {}\n\n/** A labeled set of items. */\nexport const Group = forwardRef<HTMLDivElement, GroupProps>(function MenuGroup({ className, ...props }, ref) {\n return <BaseMenu.Group ref={ref} {...props} className={withClass('mu-menu-group', className)} />;\n});\n\nexport interface GroupLabelProps extends BaseMenu.GroupLabel.Props {}\n\n/** The name of a Group or RadioGroup. */\nexport const GroupLabel = forwardRef<HTMLDivElement, GroupLabelProps>(function MenuGroupLabel({ className, ...props }, ref) {\n return <BaseMenu.GroupLabel ref={ref} {...props} className={withClass(classes.groupLabel, className)} />;\n});\n\nexport interface SeparatorProps extends BaseMenu.Separator.Props {}\n\n/** A line between groups of items. */\nexport const Separator = forwardRef<HTMLDivElement, SeparatorProps>(function MenuSeparator({ className, ...props }, ref) {\n return <BaseMenu.Separator ref={ref} {...props} className={withClass(classes.separator, className)} />;\n});\n\nexport type SubmenuRootProps = BaseMenu.SubmenuRoot.Props;\n\n/** Holds a SubmenuTrigger and its own Popup. */\nexport const SubmenuRoot = BaseMenu.SubmenuRoot;\n\nexport interface SubmenuTriggerProps extends BaseMenu.SubmenuTrigger.Props {\n icon?: IconElement;\n children?: ReactNode;\n}\n\n/** The row that opens a submenu, with a chevron at the end. */\nexport const SubmenuTrigger = forwardRef<HTMLDivElement, SubmenuTriggerProps>(function MenuSubmenuTrigger({ icon, className, children, ...props }, ref) {\n const [row] = useRow({ icon, children });\n return (\n <BaseMenu.SubmenuTrigger ref={ref} {...props} className={withClass(cx(classes.item, 'mu-menu-submenu-trigger'), className)}>\n {row}\n <ChevronRight className=\"mu-menu-chevron\" aria-hidden />\n </BaseMenu.SubmenuTrigger>\n );\n});\n"],
5
- "mappings": ";AAAA,OAAS,QAAQA,MAAgB,sBACjC,OAAS,SAAAC,EAAO,gBAAAC,MAAoB,eACpC,OAAS,cAAAC,EAAY,eAAAC,EAAa,SAAAC,EAAO,UAAAC,MAA8B,QACvE,OAAS,MAAAC,EAAI,aAAAC,MAAiB,+BAC9B,OAAS,mBAAAC,MAAuB,0BAChC,OAAS,eAAAC,EAAa,cAAAC,MAAkB,yBAExC,OAAS,eAAAC,MAAmB,eActB,OAqFF,YAAAC,EArFE,OAAAC,EAwFE,QAAAC,MAxFF,oBAZN,IAAMC,EAA0BJ,EAAY,EAQrC,SAASK,EAAK,CAAE,KAAAC,EAAM,GAAGC,CAAM,EAAc,CAClD,IAAMC,EAAWT,EAAWO,CAAI,EAChC,OACEJ,EAACJ,EAAY,SAAZ,CAAqB,MAAOU,EAC3B,SAAAN,EAACd,EAAS,KAAT,CAAe,GAAGmB,EAAO,EAC5B,CAEJ,CAKO,IAAME,EAAUlB,EAA4C,SAAqB,CAAE,UAAAmB,EAAW,GAAGH,CAAM,EAAGI,EAAK,CACpH,OAAOT,EAACd,EAAS,QAAT,CAAiB,IAAKuB,EAAM,GAAGJ,EAAO,UAAWX,EAAU,kBAAmBc,CAAS,EAAG,CACpG,CAAC,EAmBYE,EAAQrB,EAAuC,SAAmB,CAAE,UAAAsB,EAAW,UAAAH,EAAW,GAAGH,CAAM,EAAGI,EAAK,CACtH,IAAML,EAAOP,EAAW,EAClBe,EAAWpB,EAA8B,IAAI,EAC7CqB,EAASvB,EACZwB,GAAgC,CAC/BF,EAAS,QAAUE,EACf,OAAOL,GAAQ,WAAYA,EAAIK,CAAI,EAC9BL,IAAKA,EAAI,QAAUK,EAC9B,EACA,CAACL,CAAG,CACN,EAGMM,EAAczB,EAAY,CAAC,CAAE,KAAA0B,EAAM,MAAAC,CAAM,IAAuC,CACpF,IAAMC,EAAQN,EAAS,QACvB,GAAI,CAACM,GAASD,IAAU,UAAYD,IAAS,OAASA,IAAS,SAAU,MAAO,GAChF,IAAMG,EAAQ,iBAAiBD,CAAK,EACpC,MAAO,EAAE,WAAWC,EAAM,UAAU,EAAI,WAAWA,EAAM,cAAc,IAAM,CAC/E,EAAG,CAAC,CAAC,EAECC,EAAa9B,EAAY,CAAC,CAAE,KAAA0B,CAAK,IAAwB,CAC7D,IAAME,EAAQN,EAAS,QACvB,GAAI,CAACM,GAASF,IAAS,OAASA,IAAS,SAAU,MAAO,GAC1D,IAAMG,EAAQ,iBAAiBD,CAAK,EACpC,OAAO,WAAWC,EAAM,UAAU,EAAI,WAAWA,EAAM,cAAc,GAAK,CAC5E,EAAG,CAAC,CAAC,EACC,CAACE,EAAYC,CAAI,EAAI3B,EAAgBU,CAAK,EAChD,OACEL,EAACd,EAAS,OAAT,CAAgB,UAAWyB,EAC1B,SAAAX,EAACd,EAAS,WAAT,CAAoB,WAAYkC,EAAY,YAAaL,EAAc,GAAGM,EAAY,UAAU,gBAC/F,SAAArB,EAACd,EAAS,MAAT,CAAe,IAAK2B,EAAS,GAAGS,EAAM,UAAW5B,EAAUI,EAAY,CAAE,KAAAM,CAAK,CAAC,EAAE,MAAOI,CAAS,EAAG,EACvG,EACF,CAEJ,CAAC,EAiBD,SAASe,EAAO,CAAE,KAAAC,EAAM,SAAAC,EAAU,YAAAC,EAAa,SAAAC,CAAS,EAAa,CACnE,IAAMC,EAAKrC,EAAM,EACXsC,EAA8CH,GAAgB,MAAQA,IAAgB,GACtFI,EAAQ9B,EAAC,QAAK,UAAWE,EAAQ,MAAO,GAAI2B,EAAiB,GAAGD,CAAE,SAAW,OAAY,SAAAD,EAAS,EAClGI,EACJ9B,EAAAF,EAAA,CACG,UAAAyB,EACAK,EACC5B,EAAC,QAAK,UAAWC,EAAQ,KACtB,UAAA4B,EACD9B,EAAC,QAAK,UAAWE,EAAQ,YAAa,GAAI,GAAG0B,CAAE,eAAiB,SAAAF,EAAY,GAC9E,EAEAI,EAEDL,IAAa,OAAYzB,EAAC,QAAK,UAAWE,EAAQ,SAAW,SAAAuB,EAAS,EAAU,MACnF,EAEIO,EAAOH,EAAiB,CAAE,kBAAmB,GAAGD,CAAE,SAAU,mBAAoB,GAAGA,CAAE,cAAe,EAAI,KAC9G,MAAO,CAACG,EAASC,CAAI,CACvB,CAQO,IAAMC,EAAO5C,EAAsC,SAAkB,CAAE,KAAAmC,EAAM,SAAAC,EAAU,YAAAC,EAAa,OAAAQ,EAAS,GAAO,UAAA1B,EAAW,SAAAmB,EAAU,GAAGtB,CAAM,EAAGI,EAAK,CAC/J,GAAM,CAAC0B,EAAKH,CAAI,EAAIT,EAAO,CAAE,KAAAC,EAAM,SAAAC,EAAU,YAAAC,EAAa,SAAAC,CAAS,CAAC,EACpE,OACE3B,EAACd,EAAS,KAAT,CAAc,IAAKuB,EAAM,GAAGuB,EAAO,GAAG3B,EAAO,UAAWX,EAAUwC,EAAShC,EAAQ,WAAaA,EAAQ,KAAMM,CAAS,EACrH,SAAA2B,EACH,CAEJ,CAAC,EAKYC,EAAe/C,EAA8C,SAA0B,CAAE,KAAAmC,EAAM,SAAAC,EAAU,YAAAC,EAAa,UAAAlB,EAAW,SAAAmB,EAAU,GAAGtB,CAAM,EAAGI,EAAK,CACvK,GAAM,CAAC0B,EAAKH,CAAI,EAAIT,EAAO,CAAE,KAAAC,EAAM,SAAAC,EAAU,YAAAC,EAAa,SAAAC,CAAS,CAAC,EACpE,OACE1B,EAACf,EAAS,aAAT,CAAsB,IAAKuB,EAAM,GAAGuB,EAAO,GAAG3B,EAAO,UAAWX,EAAUD,EAAGS,EAAQ,KAAM,uBAAuB,EAAGM,CAAS,EAC5H,UAAA2B,EACDnC,EAAC,QAAK,UAAU,oBACd,SAAAA,EAACd,EAAS,sBAAT,CAA+B,OAAQc,EAACb,EAAA,CAAM,cAAW,GAAC,EAAI,EACjE,GACF,CAEJ,CAAC,EAKYkD,EAAahD,EAA4C,SAAwB,CAAE,UAAAmB,EAAW,GAAGH,CAAM,EAAGI,EAAK,CAC1H,OAAOT,EAACd,EAAS,WAAT,CAAoB,IAAKuB,EAAM,GAAGJ,EAAO,UAAWX,EAAU,sBAAuBc,CAAS,EAAG,CAC3G,CAAC,EAKY8B,EAAYjD,EAA2C,SAAuB,CAAE,KAAAmC,EAAM,SAAAC,EAAU,YAAAC,EAAa,UAAAlB,EAAW,SAAAmB,EAAU,GAAGtB,CAAM,EAAGI,EAAK,CAC9J,GAAM,CAAC0B,EAAKH,CAAI,EAAIT,EAAO,CAAE,KAAAC,EAAM,SAAAC,EAAU,YAAAC,EAAa,SAAAC,CAAS,CAAC,EACpE,OACE1B,EAACf,EAAS,UAAT,CAAmB,IAAKuB,EAAM,GAAGuB,EAAO,GAAG3B,EAAO,UAAWX,EAAUD,EAAGS,EAAQ,KAAM,oBAAoB,EAAGM,CAAS,EACtH,UAAA2B,EACDnC,EAAC,QAAK,UAAU,oBACd,SAAAA,EAACd,EAAS,mBAAT,CAA4B,OAAQc,EAACb,EAAA,CAAM,cAAW,GAAC,EAAI,EAC9D,GACF,CAEJ,CAAC,EAKYoD,EAAQlD,EAAuC,SAAmB,CAAE,UAAAmB,EAAW,GAAGH,CAAM,EAAGI,EAAK,CAC3G,OAAOT,EAACd,EAAS,MAAT,CAAe,IAAKuB,EAAM,GAAGJ,EAAO,UAAWX,EAAU,gBAAiBc,CAAS,EAAG,CAChG,CAAC,EAKYgC,EAAanD,EAA4C,SAAwB,CAAE,UAAAmB,EAAW,GAAGH,CAAM,EAAGI,EAAK,CAC1H,OAAOT,EAACd,EAAS,WAAT,CAAoB,IAAKuB,EAAM,GAAGJ,EAAO,UAAWX,EAAUQ,EAAQ,WAAYM,CAAS,EAAG,CACxG,CAAC,EAKYiC,EAAYpD,EAA2C,SAAuB,CAAE,UAAAmB,EAAW,GAAGH,CAAM,EAAGI,EAAK,CACvH,OAAOT,EAACd,EAAS,UAAT,CAAmB,IAAKuB,EAAM,GAAGJ,EAAO,UAAWX,EAAUQ,EAAQ,UAAWM,CAAS,EAAG,CACtG,CAAC,EAKYkC,EAAcxD,EAAS,YAQvByD,EAAiBtD,EAAgD,SAA4B,CAAE,KAAAmC,EAAM,UAAAhB,EAAW,SAAAmB,EAAU,GAAGtB,CAAM,EAAGI,EAAK,CACtJ,GAAM,CAAC0B,CAAG,EAAIZ,EAAO,CAAE,KAAAC,EAAM,SAAAG,CAAS,CAAC,EACvC,OACE1B,EAACf,EAAS,eAAT,CAAwB,IAAKuB,EAAM,GAAGJ,EAAO,UAAWX,EAAUD,EAAGS,EAAQ,KAAM,yBAAyB,EAAGM,CAAS,EACtH,UAAA2B,EACDnC,EAACZ,EAAA,CAAa,UAAU,kBAAkB,cAAW,GAAC,GACxD,CAEJ,CAAC",
4
+ "sourcesContent": ["import { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { Check, ChevronRight } from 'lucide-react';\nimport { forwardRef, useCallback, useId, useRef, type ReactNode } from 'react';\nimport { cx, withClass } from '../../internal/class-name';\nimport { splitPositioner } from '../../internal/popup';\nimport { SizeContext, useRowSize } from '../../internal/size';\nimport type { IconElement, Size } from '../../types';\nimport { menuClasses } from './classes';\n\nconst classes = /* @__PURE__ */ menuClasses();\n\nexport interface RootProps extends BaseMenu.Root.Props {\n /** Row height of every item: 28 (sm) or 32px (md). */\n size?: Exclude<Size, 'xs'>;\n}\n\n/** Groups a trigger and its menu. */\nexport function Root({ size, ...props }: RootProps) {\n const resolved = useRowSize(size);\n return (\n <SizeContext.Provider value={resolved}>\n <BaseMenu.Root {...props} />\n </SizeContext.Provider>\n );\n}\n\nexport interface TriggerProps extends BaseMenu.Trigger.Props {}\n\n/** Opens the menu. Usually `render={<Button variant=\"ghost\" icon={<Ellipsis />} aria-label=\"More actions\" />}`. */\nexport const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function MenuTrigger({ className, ...props }, ref) {\n return <BaseMenu.Trigger ref={ref} {...props} className={withClass('mu-menu-trigger', className)} />;\n});\n\ntype PositionerProps = Pick<\n BaseMenu.Positioner.Props,\n 'side' | 'align' | 'collisionAvoidance' | 'collisionBoundary' | 'sticky' | 'anchor' | 'positionMethod' | 'disableAnchorTracking'\n>;\n\nexport interface PopupProps extends BaseMenu.Popup.Props, PositionerProps {\n /** Where the menu is portaled to. Default `document.body`. */\n container?: BaseMenu.Portal.Props['container'];\n}\n\n/**\n * The list of items. Also the popup of a submenu, inside `SubmenuRoot`. When it\n * opens to the side of its trigger (a submenu, or a panel row's own menu),\n * aligned to the start or end, it moves along the trigger by its own top\n * padding and border (read when it is placed): its first row\n * lines up with the trigger, or its last row when it opens upward.\n */\nexport const Popup = forwardRef<HTMLDivElement, PopupProps>(function MenuPopup({ container, className, ...props }, ref) {\n const size = useRowSize();\n const popupRef = useRef<HTMLDivElement | null>(null);\n const setRef = useCallback(\n (node: HTMLDivElement | null) => {\n popupRef.current = node;\n if (typeof ref === 'function') ref(node);\n else if (ref) ref.current = node;\n },\n [ref],\n );\n // Base UI reverses the sign when the popup aligns to the trigger's end, so one value serves both.\n // `side` is where it actually opens, after any flip; above, below or centered, it does not move.\n const alignOffset = useCallback(({ side, align }: { side: string; align: string }) => {\n const popup = popupRef.current;\n if (!popup || align === 'center' || side === 'top' || side === 'bottom') return 0;\n const style = getComputedStyle(popup);\n return -(parseFloat(style.paddingTop) + parseFloat(style.borderTopWidth)) || 0;\n }, []);\n // Beside its trigger, it sits its own padding away, so a submenu's edge meets its parent's edge.\n const sideOffset = useCallback(({ side }: { side: string }) => {\n const popup = popupRef.current;\n if (!popup || side === 'top' || side === 'bottom') return 4;\n const style = getComputedStyle(popup);\n return parseFloat(style.paddingTop) + parseFloat(style.borderTopWidth) || 4;\n }, []);\n const [positioner, rest] = splitPositioner(props);\n return (\n <BaseMenu.Portal container={container}>\n <BaseMenu.Positioner sideOffset={sideOffset} alignOffset={alignOffset} {...positioner} className=\"mu-positioner\">\n <BaseMenu.Popup ref={setRef} {...rest} className={withClass(menuClasses({ size }).popup, className)} />\n </BaseMenu.Positioner>\n </BaseMenu.Portal>\n );\n});\n\ninterface RowProps {\n /** A Lucide element before the label. */\n icon?: IconElement;\n /** A keyboard shortcut at the end of the row, such as \"\u2318 D\". */\n shortcut?: ReactNode;\n /** A line of `text-secondary` text under the label, which makes the row two lines tall. Screen readers read it as the item's description. */\n description?: ReactNode;\n children?: ReactNode;\n}\n\n/**\n * The shared inside of every row: icon, label, shortcut. With a description,\n * the label and description stack, and the item is named by the label and\n * described by the description.\n */\nfunction useRow({ icon, shortcut, description, children }: RowProps) {\n const id = useId();\n const hasDescription = description !== undefined && description !== null && description !== false;\n const label = <span className={classes.label}>{children}</span>;\n const content = (\n <>\n {icon}\n {hasDescription ? (\n <span className={classes.text}>\n {label}\n {/* Referenced as a description, without also becoming part of the name from content. */}\n <span className={classes.description} id={`${id}-description`} aria-hidden=\"true\">{description}</span>\n </span>\n ) : (\n label\n )}\n {shortcut !== undefined ? <span className={classes.shortcut}>{shortcut}</span> : null}\n </>\n );\n const aria = hasDescription ? { 'aria-describedby': `${id}-description` } : null;\n return [content, aria] as const;\n}\n\nexport interface ItemProps extends BaseMenu.Item.Props, RowProps {\n /** A destructive action: red text. Put it last, after a Separator. */\n danger?: boolean;\n}\n\n/** One action. */\nexport const Item = forwardRef<HTMLDivElement, ItemProps>(function MenuItem({ icon, shortcut, description, danger = false, className, children, ...props }, ref) {\n const [row, aria] = useRow({ icon, shortcut, description, children });\n return (\n <BaseMenu.Item ref={ref} {...aria} {...props} className={withClass(danger ? classes.dangerItem : classes.item, className)}>\n {row}\n </BaseMenu.Item>\n );\n});\n\nexport interface CheckboxItemProps extends BaseMenu.CheckboxItem.Props, RowProps {}\n\n/** An option that turns on or off, with a check at the end. Stays open on click. */\nexport const CheckboxItem = forwardRef<HTMLDivElement, CheckboxItemProps>(function MenuCheckboxItem({ icon, shortcut, description, className, children, ...props }, ref) {\n const [row, aria] = useRow({ icon, shortcut, description, children });\n return (\n <BaseMenu.CheckboxItem ref={ref} {...aria} {...props} className={withClass(cx(classes.item, 'mu-menu-checkbox-item'), className)}>\n {row}\n <span className=\"mu-menu-indicator\">\n <BaseMenu.CheckboxItemIndicator render={<Check aria-hidden />} />\n </span>\n </BaseMenu.CheckboxItem>\n );\n});\n\nexport interface RadioGroupProps extends BaseMenu.RadioGroup.Props {}\n\n/** Groups RadioItems: exactly one is chosen. */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(function MenuRadioGroup({ className, ...props }, ref) {\n return <BaseMenu.RadioGroup ref={ref} {...props} className={withClass('mu-menu-radio-group', className)} />;\n});\n\nexport interface RadioItemProps extends BaseMenu.RadioItem.Props, RowProps {}\n\n/** One choice in a RadioGroup, with a check at the end when chosen. Stays open on click. */\nexport const RadioItem = forwardRef<HTMLDivElement, RadioItemProps>(function MenuRadioItem({ icon, shortcut, description, className, children, ...props }, ref) {\n const [row, aria] = useRow({ icon, shortcut, description, children });\n return (\n <BaseMenu.RadioItem ref={ref} {...aria} {...props} className={withClass(cx(classes.item, 'mu-menu-radio-item'), className)}>\n {row}\n <span className=\"mu-menu-indicator\">\n <BaseMenu.RadioItemIndicator render={<Check aria-hidden />} />\n </span>\n </BaseMenu.RadioItem>\n );\n});\n\nexport interface GroupProps extends BaseMenu.Group.Props {}\n\n/** A labeled set of items. */\nexport const Group = forwardRef<HTMLDivElement, GroupProps>(function MenuGroup({ className, ...props }, ref) {\n return <BaseMenu.Group ref={ref} {...props} className={withClass('mu-menu-group', className)} />;\n});\n\nexport interface GroupLabelProps extends BaseMenu.GroupLabel.Props {}\n\n/** The name of a Group or RadioGroup. */\nexport const GroupLabel = forwardRef<HTMLDivElement, GroupLabelProps>(function MenuGroupLabel({ className, ...props }, ref) {\n return <BaseMenu.GroupLabel ref={ref} {...props} className={withClass(classes.groupLabel, className)} />;\n});\n\nexport interface SeparatorProps extends BaseMenu.Separator.Props {}\n\n/** A line between groups of items. */\nexport const Separator = forwardRef<HTMLDivElement, SeparatorProps>(function MenuSeparator({ className, ...props }, ref) {\n return <BaseMenu.Separator ref={ref} {...props} className={withClass(classes.separator, className)} />;\n});\n\nexport type SubmenuRootProps = BaseMenu.SubmenuRoot.Props;\n\n/** Holds a SubmenuTrigger and its own Popup. */\nexport const SubmenuRoot = BaseMenu.SubmenuRoot;\n\nexport interface SubmenuTriggerProps extends BaseMenu.SubmenuTrigger.Props {\n icon?: IconElement;\n children?: ReactNode;\n}\n\n/** The row that opens a submenu, with a chevron at the end. */\nexport const SubmenuTrigger = forwardRef<HTMLDivElement, SubmenuTriggerProps>(function MenuSubmenuTrigger({ icon, className, children, ...props }, ref) {\n const [row] = useRow({ icon, children });\n return (\n <BaseMenu.SubmenuTrigger ref={ref} {...props} className={withClass(cx(classes.item, 'mu-menu-submenu-trigger'), className)}>\n {row}\n <ChevronRight aria-hidden />\n </BaseMenu.SubmenuTrigger>\n );\n});\n"],
5
+ "mappings": ";AAAA,OAAS,QAAQA,MAAgB,sBACjC,OAAS,SAAAC,EAAO,gBAAAC,MAAoB,eACpC,OAAS,cAAAC,EAAY,eAAAC,EAAa,SAAAC,EAAO,UAAAC,MAA8B,QACvE,OAAS,MAAAC,EAAI,aAAAC,MAAiB,+BAC9B,OAAS,mBAAAC,MAAuB,0BAChC,OAAS,eAAAC,EAAa,cAAAC,MAAkB,yBAExC,OAAS,eAAAC,MAAmB,eActB,OAqFF,YAAAC,EArFE,OAAAC,EAwFE,QAAAC,MAxFF,oBAZN,IAAMC,EAA0BJ,EAAY,EAQrC,SAASK,EAAK,CAAE,KAAAC,EAAM,GAAGC,CAAM,EAAc,CAClD,IAAMC,EAAWT,EAAWO,CAAI,EAChC,OACEJ,EAACJ,EAAY,SAAZ,CAAqB,MAAOU,EAC3B,SAAAN,EAACd,EAAS,KAAT,CAAe,GAAGmB,EAAO,EAC5B,CAEJ,CAKO,IAAME,EAAUlB,EAA4C,SAAqB,CAAE,UAAAmB,EAAW,GAAGH,CAAM,EAAGI,EAAK,CACpH,OAAOT,EAACd,EAAS,QAAT,CAAiB,IAAKuB,EAAM,GAAGJ,EAAO,UAAWX,EAAU,kBAAmBc,CAAS,EAAG,CACpG,CAAC,EAmBYE,EAAQrB,EAAuC,SAAmB,CAAE,UAAAsB,EAAW,UAAAH,EAAW,GAAGH,CAAM,EAAGI,EAAK,CACtH,IAAML,EAAOP,EAAW,EAClBe,EAAWpB,EAA8B,IAAI,EAC7CqB,EAASvB,EACZwB,GAAgC,CAC/BF,EAAS,QAAUE,EACf,OAAOL,GAAQ,WAAYA,EAAIK,CAAI,EAC9BL,IAAKA,EAAI,QAAUK,EAC9B,EACA,CAACL,CAAG,CACN,EAGMM,EAAczB,EAAY,CAAC,CAAE,KAAA0B,EAAM,MAAAC,CAAM,IAAuC,CACpF,IAAMC,EAAQN,EAAS,QACvB,GAAI,CAACM,GAASD,IAAU,UAAYD,IAAS,OAASA,IAAS,SAAU,MAAO,GAChF,IAAMG,EAAQ,iBAAiBD,CAAK,EACpC,MAAO,EAAE,WAAWC,EAAM,UAAU,EAAI,WAAWA,EAAM,cAAc,IAAM,CAC/E,EAAG,CAAC,CAAC,EAECC,EAAa9B,EAAY,CAAC,CAAE,KAAA0B,CAAK,IAAwB,CAC7D,IAAME,EAAQN,EAAS,QACvB,GAAI,CAACM,GAASF,IAAS,OAASA,IAAS,SAAU,MAAO,GAC1D,IAAMG,EAAQ,iBAAiBD,CAAK,EACpC,OAAO,WAAWC,EAAM,UAAU,EAAI,WAAWA,EAAM,cAAc,GAAK,CAC5E,EAAG,CAAC,CAAC,EACC,CAACE,EAAYC,CAAI,EAAI3B,EAAgBU,CAAK,EAChD,OACEL,EAACd,EAAS,OAAT,CAAgB,UAAWyB,EAC1B,SAAAX,EAACd,EAAS,WAAT,CAAoB,WAAYkC,EAAY,YAAaL,EAAc,GAAGM,EAAY,UAAU,gBAC/F,SAAArB,EAACd,EAAS,MAAT,CAAe,IAAK2B,EAAS,GAAGS,EAAM,UAAW5B,EAAUI,EAAY,CAAE,KAAAM,CAAK,CAAC,EAAE,MAAOI,CAAS,EAAG,EACvG,EACF,CAEJ,CAAC,EAiBD,SAASe,EAAO,CAAE,KAAAC,EAAM,SAAAC,EAAU,YAAAC,EAAa,SAAAC,CAAS,EAAa,CACnE,IAAMC,EAAKrC,EAAM,EACXsC,EAA8CH,GAAgB,MAAQA,IAAgB,GACtFI,EAAQ9B,EAAC,QAAK,UAAWE,EAAQ,MAAQ,SAAAyB,EAAS,EAClDI,EACJ9B,EAAAF,EAAA,CACG,UAAAyB,EACAK,EACC5B,EAAC,QAAK,UAAWC,EAAQ,KACtB,UAAA4B,EAED9B,EAAC,QAAK,UAAWE,EAAQ,YAAa,GAAI,GAAG0B,CAAE,eAAgB,cAAY,OAAQ,SAAAF,EAAY,GACjG,EAEAI,EAEDL,IAAa,OAAYzB,EAAC,QAAK,UAAWE,EAAQ,SAAW,SAAAuB,EAAS,EAAU,MACnF,EAEIO,EAAOH,EAAiB,CAAE,mBAAoB,GAAGD,CAAE,cAAe,EAAI,KAC5E,MAAO,CAACG,EAASC,CAAI,CACvB,CAQO,IAAMC,EAAO5C,EAAsC,SAAkB,CAAE,KAAAmC,EAAM,SAAAC,EAAU,YAAAC,EAAa,OAAAQ,EAAS,GAAO,UAAA1B,EAAW,SAAAmB,EAAU,GAAGtB,CAAM,EAAGI,EAAK,CAC/J,GAAM,CAAC0B,EAAKH,CAAI,EAAIT,EAAO,CAAE,KAAAC,EAAM,SAAAC,EAAU,YAAAC,EAAa,SAAAC,CAAS,CAAC,EACpE,OACE3B,EAACd,EAAS,KAAT,CAAc,IAAKuB,EAAM,GAAGuB,EAAO,GAAG3B,EAAO,UAAWX,EAAUwC,EAAShC,EAAQ,WAAaA,EAAQ,KAAMM,CAAS,EACrH,SAAA2B,EACH,CAEJ,CAAC,EAKYC,EAAe/C,EAA8C,SAA0B,CAAE,KAAAmC,EAAM,SAAAC,EAAU,YAAAC,EAAa,UAAAlB,EAAW,SAAAmB,EAAU,GAAGtB,CAAM,EAAGI,EAAK,CACvK,GAAM,CAAC0B,EAAKH,CAAI,EAAIT,EAAO,CAAE,KAAAC,EAAM,SAAAC,EAAU,YAAAC,EAAa,SAAAC,CAAS,CAAC,EACpE,OACE1B,EAACf,EAAS,aAAT,CAAsB,IAAKuB,EAAM,GAAGuB,EAAO,GAAG3B,EAAO,UAAWX,EAAUD,EAAGS,EAAQ,KAAM,uBAAuB,EAAGM,CAAS,EAC5H,UAAA2B,EACDnC,EAAC,QAAK,UAAU,oBACd,SAAAA,EAACd,EAAS,sBAAT,CAA+B,OAAQc,EAACb,EAAA,CAAM,cAAW,GAAC,EAAI,EACjE,GACF,CAEJ,CAAC,EAKYkD,EAAahD,EAA4C,SAAwB,CAAE,UAAAmB,EAAW,GAAGH,CAAM,EAAGI,EAAK,CAC1H,OAAOT,EAACd,EAAS,WAAT,CAAoB,IAAKuB,EAAM,GAAGJ,EAAO,UAAWX,EAAU,sBAAuBc,CAAS,EAAG,CAC3G,CAAC,EAKY8B,EAAYjD,EAA2C,SAAuB,CAAE,KAAAmC,EAAM,SAAAC,EAAU,YAAAC,EAAa,UAAAlB,EAAW,SAAAmB,EAAU,GAAGtB,CAAM,EAAGI,EAAK,CAC9J,GAAM,CAAC0B,EAAKH,CAAI,EAAIT,EAAO,CAAE,KAAAC,EAAM,SAAAC,EAAU,YAAAC,EAAa,SAAAC,CAAS,CAAC,EACpE,OACE1B,EAACf,EAAS,UAAT,CAAmB,IAAKuB,EAAM,GAAGuB,EAAO,GAAG3B,EAAO,UAAWX,EAAUD,EAAGS,EAAQ,KAAM,oBAAoB,EAAGM,CAAS,EACtH,UAAA2B,EACDnC,EAAC,QAAK,UAAU,oBACd,SAAAA,EAACd,EAAS,mBAAT,CAA4B,OAAQc,EAACb,EAAA,CAAM,cAAW,GAAC,EAAI,EAC9D,GACF,CAEJ,CAAC,EAKYoD,EAAQlD,EAAuC,SAAmB,CAAE,UAAAmB,EAAW,GAAGH,CAAM,EAAGI,EAAK,CAC3G,OAAOT,EAACd,EAAS,MAAT,CAAe,IAAKuB,EAAM,GAAGJ,EAAO,UAAWX,EAAU,gBAAiBc,CAAS,EAAG,CAChG,CAAC,EAKYgC,EAAanD,EAA4C,SAAwB,CAAE,UAAAmB,EAAW,GAAGH,CAAM,EAAGI,EAAK,CAC1H,OAAOT,EAACd,EAAS,WAAT,CAAoB,IAAKuB,EAAM,GAAGJ,EAAO,UAAWX,EAAUQ,EAAQ,WAAYM,CAAS,EAAG,CACxG,CAAC,EAKYiC,EAAYpD,EAA2C,SAAuB,CAAE,UAAAmB,EAAW,GAAGH,CAAM,EAAGI,EAAK,CACvH,OAAOT,EAACd,EAAS,UAAT,CAAmB,IAAKuB,EAAM,GAAGJ,EAAO,UAAWX,EAAUQ,EAAQ,UAAWM,CAAS,EAAG,CACtG,CAAC,EAKYkC,EAAcxD,EAAS,YAQvByD,EAAiBtD,EAAgD,SAA4B,CAAE,KAAAmC,EAAM,UAAAhB,EAAW,SAAAmB,EAAU,GAAGtB,CAAM,EAAGI,EAAK,CACtJ,GAAM,CAAC0B,CAAG,EAAIZ,EAAO,CAAE,KAAAC,EAAM,SAAAG,CAAS,CAAC,EACvC,OACE1B,EAACf,EAAS,eAAT,CAAwB,IAAKuB,EAAM,GAAGJ,EAAO,UAAWX,EAAUD,EAAGS,EAAQ,KAAM,yBAAyB,EAAGM,CAAS,EACtH,UAAA2B,EACDnC,EAACZ,EAAA,CAAa,cAAW,GAAC,GAC5B,CAEJ,CAAC",
6
6
  "names": ["BaseMenu", "Check", "ChevronRight", "forwardRef", "useCallback", "useId", "useRef", "cx", "withClass", "splitPositioner", "SizeContext", "useRowSize", "menuClasses", "Fragment", "jsx", "jsxs", "classes", "Root", "size", "props", "resolved", "Trigger", "className", "ref", "Popup", "container", "popupRef", "setRef", "node", "alignOffset", "side", "align", "popup", "style", "sideOffset", "positioner", "rest", "useRow", "icon", "shortcut", "description", "children", "id", "hasDescription", "label", "content", "aria", "Item", "danger", "row", "CheckboxItem", "RadioGroup", "RadioItem", "Group", "GroupLabel", "Separator", "SubmenuRoot", "SubmenuTrigger"]
7
7
  }
package/dist/components/popover/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/popover/index.tsx"],
4
- "sourcesContent": ["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport { forwardRef } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { splitPositioner } from '../../internal/popup';\nimport { SizeContext } from '../../internal/size';\nimport { popoverClasses, type PopoverVariant } from './classes';\n\nconst classes = /* @__PURE__ */ popoverClasses();\nconst listClasses = /* @__PURE__ */ popoverClasses({ variant: 'list' });\n\nexport type RootProps = BasePopover.Root.Props;\n\n/** Groups a trigger and its popover. */\nexport const Root = BasePopover.Root;\n\nexport interface TriggerProps extends BasePopover.Trigger.Props {}\n\n/** Opens the popover. Usually `render={<Button />}`. */\nexport const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function PopoverTrigger({ className, ...props }, ref) {\n return <BasePopover.Trigger ref={ref} {...props} className={withClass('mu-popover-trigger', className)} />;\n});\n\ntype PositionerProps = Pick<\n BasePopover.Positioner.Props,\n 'side' | 'align' | 'collisionAvoidance' | 'collisionBoundary' | 'sticky' | 'anchor' | 'positionMethod' | 'disableAnchorTracking'\n>;\n\nexport interface PopupProps extends BasePopover.Popup.Props, PositionerProps {\n /** Where the popover is portaled to. Default `document.body`. */\n container?: BasePopover.Portal.Props['container'];\n /**\n * `panel` (default) pads its content `space-4` and stacks it `space-3` apart.\n * `list` holds rows, such as an account menu with a header: a Menu's\n * `space-1` padding and no gap, for rows with `menuClasses().item`.\n */\n variant?: PopoverVariant;\n}\n\n/** The panel: a bordered surface, `popover-width` wide. */\nexport const Popup = forwardRef<HTMLDivElement, PopupProps>(function PopoverPopup({ container, variant = 'panel', className, children, ...props }, ref) {\n const [positioner, rest] = splitPositioner(props);\n return (\n <BasePopover.Portal container={container}>\n <BasePopover.Positioner sideOffset={6} {...positioner} className=\"mu-positioner\">\n <BasePopover.Popup ref={ref} {...rest} className={withClass(variant === 'list' ? listClasses.popup : classes.popup, className)}>\n {/* The panel is md wherever it is declared: React context crosses the portal, so a sm toolbar's size would leak in. */}\n <SizeContext.Provider value=\"md\">{children}</SizeContext.Provider>\n </BasePopover.Popup>\n </BasePopover.Positioner>\n </BasePopover.Portal>\n );\n});\n\nexport interface TitleProps extends BasePopover.Title.Props {}\n\n/** The popover's heading, an `<h2>`. Names the popup for screen readers. */\nexport const Title = forwardRef<HTMLHeadingElement, TitleProps>(function PopoverTitle({ className, ...props }, ref) {\n return <BasePopover.Title ref={ref} {...props} className={withClass(classes.title, className)} />;\n});\n\nexport interface DescriptionProps extends BasePopover.Description.Props {}\n\n/** One line under the title, a `<p>`. */\nexport const Description = forwardRef<HTMLParagraphElement, DescriptionProps>(function PopoverDescription({ className, ...props }, ref) {\n return <BasePopover.Description ref={ref} {...props} className={withClass(classes.description, className)} />;\n});\n\nexport interface CloseProps extends BasePopover.Close.Props {}\n\n/** Closes the popover. Usually `render={<Button />}`. */\nexport const Close = forwardRef<HTMLButtonElement, CloseProps>(function PopoverClose({ className, ...props }, ref) {\n return <BasePopover.Close ref={ref} {...props} className={withClass('mu-popover-close', className)} />;\n});\n"],
4
+ "sourcesContent": ["import { Popover as BasePopover } from '@base-ui/react/popover';\nimport { forwardRef } from 'react';\nimport { withClass } from '../../internal/class-name';\nimport { splitPositioner } from '../../internal/popup';\nimport { SizeContext } from '../../internal/size';\nimport { popoverClasses, type PopoverVariant } from './classes';\n\nconst classes = /* @__PURE__ */ popoverClasses();\nconst listClasses = /* @__PURE__ */ popoverClasses({ variant: 'list' });\n\nexport type RootProps = BasePopover.Root.Props;\n\n/** Groups a trigger and its popover. */\nexport const Root = BasePopover.Root;\n\nexport interface TriggerProps extends BasePopover.Trigger.Props {}\n\n/** Opens the popover. Usually `render={<Button />}`. */\nexport const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function PopoverTrigger({ className, ...props }, ref) {\n return <BasePopover.Trigger ref={ref} {...props} className={withClass('mu-popover-trigger', className)} />;\n});\n\ntype PositionerProps = Pick<\n BasePopover.Positioner.Props,\n 'side' | 'align' | 'collisionAvoidance' | 'collisionBoundary' | 'sticky' | 'anchor' | 'positionMethod' | 'disableAnchorTracking'\n>;\n\nexport interface PopupProps extends BasePopover.Popup.Props, PositionerProps {\n /** Where the popover is portaled to. Default `document.body`. */\n container?: BasePopover.Portal.Props['container'];\n /**\n * `panel` (default) pads its content `space-4` and stacks it `space-3` apart.\n * `list` holds rows, such as an account menu with a header: a Menu's\n * 6px outer padding and no gap, for rows with `menuClasses().item`.\n */\n variant?: PopoverVariant;\n}\n\n/** The panel: a bordered surface, `popover-width` wide. */\nexport const Popup = forwardRef<HTMLDivElement, PopupProps>(function PopoverPopup({ container, variant = 'panel', className, children, ...props }, ref) {\n const [positioner, rest] = splitPositioner(props);\n return (\n <BasePopover.Portal container={container}>\n <BasePopover.Positioner sideOffset={6} {...positioner} className=\"mu-positioner\">\n <BasePopover.Popup ref={ref} {...rest} className={withClass(variant === 'list' ? listClasses.popup : classes.popup, className)}>\n {/* The panel is md wherever it is declared: React context crosses the portal, so a sm toolbar's size would leak in. */}\n <SizeContext.Provider value=\"md\">{children}</SizeContext.Provider>\n </BasePopover.Popup>\n </BasePopover.Positioner>\n </BasePopover.Portal>\n );\n});\n\nexport interface TitleProps extends BasePopover.Title.Props {}\n\n/** The popover's heading, an `<h2>`. Names the popup for screen readers. */\nexport const Title = forwardRef<HTMLHeadingElement, TitleProps>(function PopoverTitle({ className, ...props }, ref) {\n return <BasePopover.Title ref={ref} {...props} className={withClass(classes.title, className)} />;\n});\n\nexport interface DescriptionProps extends BasePopover.Description.Props {}\n\n/** One line under the title, a `<p>`. */\nexport const Description = forwardRef<HTMLParagraphElement, DescriptionProps>(function PopoverDescription({ className, ...props }, ref) {\n return <BasePopover.Description ref={ref} {...props} className={withClass(classes.description, className)} />;\n});\n\nexport interface CloseProps extends BasePopover.Close.Props {}\n\n/** Closes the popover. Usually `render={<Button />}`. */\nexport const Close = forwardRef<HTMLButtonElement, CloseProps>(function PopoverClose({ className, ...props }, ref) {\n return <BasePopover.Close ref={ref} {...props} className={withClass('mu-popover-close', className)} />;\n});\n"],
5
5
  "mappings": ";AAAA,OAAS,WAAWA,MAAmB,yBACvC,OAAS,cAAAC,MAAkB,QAC3B,OAAS,aAAAC,MAAiB,+BAC1B,OAAS,mBAAAC,MAAuB,0BAChC,OAAS,eAAAC,MAAmB,yBAC5B,OAAS,kBAAAC,MAA2C,eAc3C,cAAAC,MAAA,oBAZT,IAAMC,EAA0BF,EAAe,EACzCG,EAA8BH,EAAe,CAAE,QAAS,MAAO,CAAC,EAKzDI,EAAOT,EAAY,KAKnBU,EAAUT,EAA4C,SAAwB,CAAE,UAAAU,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACvH,OAAOP,EAACN,EAAY,QAAZ,CAAoB,IAAKa,EAAM,GAAGD,EAAO,UAAWV,EAAU,qBAAsBS,CAAS,EAAG,CAC1G,CAAC,EAmBYG,EAAQb,EAAuC,SAAsB,CAAE,UAAAc,EAAW,QAAAC,EAAU,QAAS,UAAAL,EAAW,SAAAM,EAAU,GAAGL,CAAM,EAAGC,EAAK,CACtJ,GAAM,CAACK,EAAYC,CAAI,EAAIhB,EAAgBS,CAAK,EAChD,OACEN,EAACN,EAAY,OAAZ,CAAmB,UAAWe,EAC7B,SAAAT,EAACN,EAAY,WAAZ,CAAuB,WAAY,EAAI,GAAGkB,EAAY,UAAU,gBAC/D,SAAAZ,EAACN,EAAY,MAAZ,CAAkB,IAAKa,EAAM,GAAGM,EAAM,UAAWjB,EAAUc,IAAY,OAASR,EAAY,MAAQD,EAAQ,MAAOI,CAAS,EAE3H,SAAAL,EAACF,EAAY,SAAZ,CAAqB,MAAM,KAAM,SAAAa,EAAS,EAC7C,EACF,EACF,CAEJ,CAAC,EAKYG,EAAQnB,EAA2C,SAAsB,CAAE,UAAAU,EAAW,GAAGC,CAAM,EAAGC,EAAK,CAClH,OAAOP,EAACN,EAAY,MAAZ,CAAkB,IAAKa,EAAM,GAAGD,EAAO,UAAWV,EAAUK,EAAQ,MAAOI,CAAS,EAAG,CACjG,CAAC,EAKYU,EAAcpB,EAAmD,SAA4B,CAAE,UAAAU,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACtI,OAAOP,EAACN,EAAY,YAAZ,CAAwB,IAAKa,EAAM,GAAGD,EAAO,UAAWV,EAAUK,EAAQ,YAAaI,CAAS,EAAG,CAC7G,CAAC,EAKYW,EAAQrB,EAA0C,SAAsB,CAAE,UAAAU,EAAW,GAAGC,CAAM,EAAGC,EAAK,CACjH,OAAOP,EAACN,EAAY,MAAZ,CAAkB,IAAKa,EAAM,GAAGD,EAAO,UAAWV,EAAU,mBAAoBS,CAAS,EAAG,CACtG,CAAC",
6
6
  "names": ["BasePopover", "forwardRef", "withClass", "splitPositioner", "SizeContext", "popoverClasses", "jsx", "classes", "listClasses", "Root", "Trigger", "className", "props", "ref", "Popup", "container", "variant", "children", "positioner", "rest", "Title", "Description", "Close"]
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: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;touch-action:manipulation;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-pill{border-radius:var(--mu-radius-full);padding-inline:calc(var(--mu-row-padding) - 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;touch-action:manipulation;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-pill{border-radius:var(--mu-radius-full);padding-block:0;padding-inline:calc(var(--mu-row-padding) - 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)and (pointer:fine){.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}.mu-toggle-soft{background-color:var(--mu-hover)}@media(hover:hover)and (pointer:fine){.mu-toggle-soft:hover:where(:not([data-disabled])){background-color:var(--mu-well)}}.mu-toggle-soft[data-pressed]{background-color:var(--mu-selected)}.mu-toggle-soft:where([data-disabled]:not([data-pressed])){background-color:var(--mu-well)}@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-selected: 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)}}}
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{:is(.mu-menu-popup,.mu-popover-list,.mu-menu-group,.mu-menu-radio-group,.mu-select-list,.mu-select-group,.mu-combobox-list,.mu-combobox-group){--option-leading-display: none}:is(.mu-menu-popup,.mu-popover-list,.mu-menu-group,.mu-menu-radio-group,.mu-select-list,.mu-select-group,.mu-combobox-list,.mu-combobox-group):where(:has(>:is(.mu-menu-item,.mu-select-item,.mu-combobox-item)>svg:first-child)){--option-leading-display: block}:is(.mu-menu-item,.mu-select-item,.mu-combobox-item):where(:not(:has(>svg:first-child))):before{content:"";display:var(--option-leading-display, none);flex:none;width:var(--mu-row-icon);height:var(--mu-row-icon)}.mu-combobox-row>.mu-combobox-item:before{display:none}.mu-menu-shortcut{flex:none}:is(.mu-menu-item,.mu-select-item,.mu-combobox-item)[data-highlighted]:not([data-disabled]){background-color:var(--mu-hover)}:is(.mu-menu-item,.mu-select-item,.mu-combobox-item)[data-disabled]{color:var(--mu-text-disabled)}:is(.mu-menu-item,.mu-select-item,.mu-combobox-item)[data-disabled] :where(svg,.mu-menu-description,.mu-menu-shortcut,.mu-menu-indicator,.mu-select-indicator,.mu-combobox-indicator){color:inherit}}@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;touch-action:manipulation;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-pill{border-radius:var(--mu-radius-full);padding-inline:calc(var(--mu-row-padding) - 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)}:where(.mu-popover-popup .mu-field-horizontal)>.mu-field-label{color:var(--mu-text-secondary)}.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);cursor:pointer}.mu-field-label[data-disabled],.mu-field-label:where(:has(>.mu-checkbox[data-disabled],>.mu-switch[data-disabled],>.mu-radio[data-disabled])){color:var(--mu-text-disabled);cursor:not-allowed}.mu-field-description{margin:0;color:var(--mu-text-secondary);overflow-wrap:anywhere}.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}.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);overflow-wrap:anywhere}.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;touch-action:manipulation;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-pill{border-radius:var(--mu-radius-full);padding-block:0;padding-inline:calc(var(--mu-row-padding) - 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)and (pointer:fine){.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}.mu-toggle-soft{background-color:var(--mu-hover)}@media(hover:hover)and (pointer:fine){.mu-toggle-soft:hover:where(:not([data-disabled])){background-color:var(--mu-well)}}.mu-toggle-soft[data-pressed]{background-color:var(--mu-selected)}.mu-toggle-soft:where([data-disabled]:not([data-pressed])){background-color:var(--mu-well)}@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-selected: 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-space-2) 0}.mu-popover-list>.mu-popover-description{margin:0;padding:0 var(--mu-space-2) 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-space-2);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>svg{color:var(--mu-text-secondary)}.mu-menu-item[data-popup-open]:not([data-disabled]){background-color:var(--mu-hover)}.mu-menu-item:focus-visible:not([data-disabled]){background-color:var(--mu-hover)}.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;overflow-wrap:anywhere}.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-item>svg:last-child{margin-inline-end:calc(var(--mu-row-padding-icon) - var(--mu-row-padding))}.mu-menu-group-label{padding:var(--mu-space-2) var(--mu-space-2) 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(1px + var(--mu-radius-md) - var(--mu-radius-xl));background-color:var(--mu-line)}@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-space-2);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>svg{color:var(--mu-text-secondary)}.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-space-2) 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(1px + 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){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;grid-template-columns:minmax(0,1fr);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-full>.mu-dialog-popup:not(.mu-dialog-bare){padding:var(--mu-space-5)}.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-left>.mu-drawer-popup>.mu-drawer-content{padding-right:calc(var(--mu-space-5) - 1px)}.mu-drawer-right>.mu-drawer-popup>.mu-drawer-content{padding-left:calc(var(--mu-space-5) - 1px)}.mu-drawer-bottom>.mu-drawer-popup>.mu-drawer-content{padding-top:calc(var(--mu-space-5) - 1px)}:is(.mu-drawer-left,.mu-drawer-right,.mu-drawer-bottom)>.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-space-2);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>svg{color:var(--mu-text-secondary)}.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-space-2) 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(1px + var(--mu-radius-md) - var(--mu-radius-xl));background-color:var(--mu-line)}@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) - 1px)}.mu-table-bordered :is(.mu-table-head,.mu-table-cell):last-child{padding-inline-end:calc(var(--mu-row-padding) + var(--mu-space-1) - 1px)}}@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: calc(var(--mu-space-3) - 1px);--list-pad-inline: calc(var(--mu-space-4) - 1px)}.mu-list.mu-s-sm{--list-pad-block: calc(var(--mu-space-2) - 1px);--list-pad-inline: calc(var(--mu-space-3) - 1px)}.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:calc(var(--mu-space-4) - 1px);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(1px - var(--mu-space-4)) calc(1px - var(--mu-space-4));padding:calc(var(--mu-space-3) - 1px) calc(var(--mu-space-4) - 1px);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/types/components/popover/index.d.ts CHANGED
@@ -14,7 +14,7 @@ export interface PopupProps extends BasePopover.Popup.Props, PositionerProps {
14
14
  /**
15
15
  * `panel` (default) pads its content `space-4` and stacks it `space-3` apart.
16
16
  * `list` holds rows, such as an account menu with a header: a Menu's
17
- * `space-1` padding and no gap, for rows with `menuClasses().item`.
17
+ * 6px outer padding and no gap, for rows with `menuClasses().item`.
18
18
  */
19
19
  variant?: PopoverVariant;
20
20
  }
package/llms-full.txt CHANGED
@@ -19,6 +19,8 @@ It is not a general-purpose UI library for outside developers. Components are ge
19
19
  | --- | --- |
20
20
  | [Design reference: Linear](design-reference.md) | Official source evidence and how we apply it to Memos UI |
21
21
  | [Principles and voice](principles.md) | The taste in six rules, and how interface text is written |
22
+ | [Keeping the system consistent](consistency.md) | Rule ownership, app styling boundaries and the documentation-to-verification loop |
23
+ | [Component verification](testing.md) | Prop coverage, component fixtures, browser checks and screenshot maintenance |
22
24
  | [Color](color.md) | Color roles, every color token in Light and Dark, and how themes are chosen |
23
25
  | [Depth](depth.md) | Flat surface roles, borders and focus without shadows or outlines |
24
26
  | [Typography](typography.md) | The system font, the type scale and text rules |
@@ -59,6 +61,8 @@ Linear's product interface is the reference for our hierarchy, restraint and int
59
61
  - 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
62
  - 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
63
 
64
+ A signed-in browser inspection on 14 November 2026 checked Display options, Preferences and the workspace menu. Display-option and settings-page names were 500; Select values and options were 400; sampled workspace-menu text and helper descriptions were 450. Compact-panel names used a quieter color than values, while settings-page names used primary text with quieter descriptions. These are observations of those views, not a complete Linear type specification. Memos UI adopts the name/value distinction with its existing system fonts, 400/500 weights and size scale; it does not copy Linear's Inter Variable font, 450 weight or 12px panel text.
65
+
62
66
  ## How we apply this
63
67
 
64
68
  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.
@@ -73,6 +77,7 @@ These are Memos UI decisions informed by those sources and product review, not c
73
77
  | 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
78
  | A switch fades its track, border and knob colors | Update colors immediately; only the knob moves briefly | Motion explains a saved position |
75
79
  | Screens restyle controls to solve local taste problems | Fix shared roles and components, then test the contract | Products stay consistent |
80
+ | Horizontal settings names lose the weight of a field label | Keep all Field labels at 500; keep values and option text at 400; use contextual text colors | A name and its chosen value have distinct roles |
76
81
 
77
82
  ## Boundaries
78
83
 
@@ -106,12 +111,118 @@ State feedback is immediate. Motion is reserved for spatial changes, appearing o
106
111
  ## What to avoid
107
112
 
108
113
  - A brand hue on controls, or blue anywhere at rest except links.
109
- - Cards and boxes around content. Group with spacing, a heading and a `Separator`. The exceptions are rows of settings or records: a [List](components/list.md), or a [Table](components/table.md) with `bordered`.
114
+ - Cards and boxes around content. Group with spacing, a heading and a `Separator`. The exceptions are settings or records in a [List](components/list.md), a [Table](components/table.md) with `bordered`, or a small [Form](components/form.md) with `bordered` among them.
110
115
  - Textures, glass or blur behind text, and neumorphism.
111
116
  - Pills as the default for buttons or inputs. Use the opt-in Button/Toggle `shape="pill"` for compact reaction controls and similar content choices; ordinary actions keep the size-row corners.
112
117
  - Color as the only signal. Status colors always come with a word or an icon.
113
118
  - Illustrations in empty states.
114
119
 
120
+ <!-- docs/consistency.md -->
121
+
122
+ # Keeping the system consistent
123
+
124
+ Use shared rules for a visual role, then compose components from those rules. A new screen is not a reason for a new padding, text style or state treatment.
125
+
126
+ ## Rule ownership
127
+
128
+ Each decision has one owner. Component pages describe their API and map parts to these roles; they do not redefine the roles. Summaries and examples link to the owner. If they disagree, fix the summary or example and check the implementation against the owner.
129
+
130
+ | Decision | Owner |
131
+ | --- | --- |
132
+ | Product character and interface voice | [Principles](principles.md) |
133
+ | Color roles and theme values | [Color](color.md) |
134
+ | Text roles, sizes and weights | [Typography](typography.md) |
135
+ | Surface and boundary treatments | [Depth](depth.md) |
136
+ | Size rows, measured insets, row anatomy and shape | [Layout](layout.md) |
137
+ | Combined states and their precedence | [States](states.md#combined-states) |
138
+ | Icon boxes, strokes and accessibility | [Icons](icons.md) |
139
+ | Transitions and reduced motion | [Motion](motion.md) |
140
+ | Screen composition | [Patterns](patterns.md) and [Usage](usage.md) |
141
+
142
+ Change the owning rule first. An exception belongs beside that rule, with its reason and scope, and a link from the relevant component or pattern. Update affected examples, implementation and verification in the same change. Do not add a second rule to work around the first.
143
+
144
+ ## Styling ownership
145
+
146
+ `className` and `style` are layout and integration hooks, not permission to invent a component appearance. The CSS cascade permits more than the design contract supports.
147
+
148
+ | App owns | Package owns |
149
+ | --- | --- |
150
+ | Placement, external margins, width constraints, flex/grid arrangement and responsive composition | Internal padding and gaps, height/minimum hit area, radius, type, icon geometry, semantic colors and state treatments |
151
+ | Choosing documented props and composing parts | The appearance and behavior promised by those props and parts |
152
+ | Complete color/font themes through the documented theme tokens | All other token values and every shipped class rule |
153
+
154
+ Layout hooks must not clip content, shrink hit areas or force a fixed height that prevents documented wrapping. Wrap a component to add layout spacing instead of changing its internal padding. Use the component's size, variant and shape APIs for supported visual choices. A new supported appearance requires a change to the owning rule and API, not a per-instance utility override.
155
+
156
+ An app-owned part uses Base UI for behavior, class functions or public classes for existing looks, and tokens for its additional structure. It follows the same role, geometry and state contracts; it never restyles a shipped part or changes internal row variables. See [Building your own component](custom-components.md).
157
+
158
+ ```tsx
159
+ // Layout belongs to the app; appearance comes from the component.
160
+ <Button className="w-full" size="sm">Save</Button>
161
+
162
+ // Incorrect: a local appearance that bypasses the size and text roles.
163
+ <Button className="h-12 px-8 font-light">Save</Button>
164
+ ```
165
+
166
+ ## Closing a rule change
167
+
168
+ A visual rule is complete only when its documentation, implementations, compositions and checks agree:
169
+
170
+ 1. Update the owner and every conflicting summary or example. Map the affected parts to the existing roles before adding a token or variant.
171
+ 2. Apply the rule to every implementation of that role, including class-function consumers. Test behavior through Base UI rather than inventing parallel interaction code.
172
+ 3. Exercise relevant prop combinations with ordinary and long localized text, missing optional parts and combined states. Reuse the owning component section and its focused fixtures; keep cross-component seams such as a panel containing controls. Follow [Component verification](testing.md), without adding mock product screens.
173
+ 4. Check computed text roles and actual box coordinates separately from screenshots. Cover Light/Dark, supported sizes, keyboard use, coarse pointers and reduced motion where affected. Assert accessible names and interaction results when structure changes.
174
+ 5. Generate changed baselines with the Linux Screenshots workflow, inspect the changed images, and keep only intentional changes. Record the user-visible result in the changelog. Passing an image comparison alone does not verify a semantic role.
175
+
176
+ Typography changes also need visual inspection in a native system-font browser. Linux snapshots remain the reproducible baseline, but platforms can render 400 and 500 differently. Never change a semantic weight merely to make one platform's screenshot look heavier. Report platforms that were not inspected.
177
+
178
+ The checks have distinct jobs: unit tests cover public props, token tables, class parity and CSS constraints; browser assertions cover roles, geometry and behavior; component and overlay screenshots cover appearance. Keep all three when a change crosses those boundaries. Do not replace one with another or update baselines to hide a failing contract.
179
+
180
+ <!-- docs/testing.md -->
181
+
182
+ # Component verification
183
+
184
+ The playground is a component test fixture. It is not a mock product. Organize cases around the public API exported from `packages/ui/src/index.ts`, including namespace parts and supported prop values.
185
+
186
+ ## Coverage contract
187
+
188
+ For each component, verify:
189
+
190
+ | Input | Required evidence |
191
+ | --- | --- |
192
+ | Package-owned prop | An explicit case in its component unit suite, asserting the observable result |
193
+ | Literal variant, size or orientation | Default/omitted behavior and every supported value; include inherited size and explicit override where the component participates in size context |
194
+ | Optional content | Present and absent; include icon-only and both icon slots where supported |
195
+ | Stateful API | Controlled value plus callback and parent update; uncontrolled default plus internal update; disabled/loading must prevent activation as documented |
196
+ | Composition hooks | Ref target, native/ARIA/data attributes, caller class/style, and `render` where supported. Input-like wrappers distinguish box hooks from control hooks |
197
+ | Folded overlay | Default and custom portal targets, positioning-prop routing, close label, variant and open/close behavior |
198
+ | Public namespace part | A direct render case with its parent context; verify its association, structure or behavior |
199
+ | Meaningful prop combination | A regression case at the seam, such as disabled + selected + description, or icon-only + loading + custom render |
200
+
201
+ `packages/ui/test/prop-coverage.test.ts` derives package-owned props and public parts from the actual TypeScript exports. It fails if a component suite omits an exported part or never explicitly supplies one of those props. This is an inventory guard; it does not judge assertion quality or replace the behavior checks above. Do not satisfy it with an unused fixture or a prop that is supplied but never checked.
202
+
203
+ Base UI and native props are inherited APIs. Verify that our wrappers preserve controlled state, callbacks, refs, `render`, attributes and positioning. Do not copy the upstream suite or build the Cartesian product of unrelated options. Exhaust the package's documented values, then test combinations that can interfere with each other.
204
+
205
+ ## Where cases live
206
+
207
+ - **Unit:** `packages/ui/test/components/<component>.test.tsx`. All props for one component live together, including features added later. Shared size boundaries live in `composition.test.tsx`; class-function parity and token/CSS constraints remain shared suites.
208
+ - **Browser:** `e2e/` verifies real interaction and layout: keyboard paths, focus restoration, label/error associations, sizing, text roles, forced colors, reduced motion and touch targets. Shared contracts stay in `consistency`, `icons`, `surfaces`, `touch` and `interop` suites instead of being duplicated in every component.
209
+ - **Visual fixture:** `playground/sections/<component>.tsx` shows supported appearances and relevant states. Small reusable fixtures in `playground/fixtures/` belong to the components that render them. No settings-page, timeline or empty-page mockups.
210
+ - **Visual baseline:** `e2e/visual.spec.ts` captures each component section in Light/Dark and every supported size, and on a coarse pointer. It also captures the overlay cases defined in that file. Generated baselines come from Linux CI only.
211
+
212
+ One fixture may support multiple assertions when it exercises the same props. Keep focused composed fixtures when they test a real seam, such as a list Popover containing a Menu, controls inside a panel, or a reaction picker. Remove a fixture only after migrating any unique assertion it supports.
213
+
214
+ ## Changing the API or fixtures
215
+
216
+ 1. Read the public prop type and its component guide. Add the case beside that component's existing cases, with an assertion about the caller-visible result.
217
+ 2. Exercise defaults, supported values, and relevant combinations. Keep type restrictions checked by TypeScript, not runtime fallbacks.
218
+ 3. Update the component section when appearance changes. Add an overlay capture when a new appearance is otherwise invisible in its closed section.
219
+ 4. Run typecheck, unit and Chromium tests. The inventory guard must remain strict; do not exclude a new prop or public part just to pass it.
220
+ 5. Generate and inspect Linux screenshots. Remove baselines for deleted fixtures, retain unrelated baselines, then run CI against the final source and images.
221
+
222
+ Use the shared render helper so every React root and portal unmounts after a unit test. Tests must not depend on DOM, timers, open widgets or refs left by an earlier case. Follow [Closing a rule change](consistency.md#closing-a-rule-change) when the API work changes a visual contract.
223
+
224
+ For an overlay's close behavior, assert that it becomes hidden and focus returns as documented. Do not require its DOM to disappear: Base UI may retain hidden content, and supported `keepMounted` APIs deliberately do so. Unit-test cleanup still unmounts every root between cases.
225
+
115
226
  <!-- docs/color.md -->
116
227
 
117
228
  # Color
@@ -133,6 +244,16 @@ Memos UI is ink on paper: a light warm-gray canvas, bright surfaces, `primary` i
133
244
  | Status | `success`, `warning`, `danger` and their `-soft` pairs; `danger-key`, `on-danger` | Toasts, badges, field errors, danger buttons |
134
245
  | Lines | `edge`, `control-edge`, `line` | Quiet resting borders on fields, neutral buttons, switch tracks and surfaces; small checkbox/radio markers; separators and table rules |
135
246
 
247
+ ## Text hierarchy
248
+
249
+ Weight identifies a name or content; color determines how much attention it gets. Keep the [text-role weights](typography.md#text-roles) when changing context.
250
+
251
+ - Forms, settings pages and Dialogs: Field labels and setting names use `text`; descriptions, helper text and metadata use `text-secondary`.
252
+ - Compact controls in a Popover: horizontal Field labels use `text-secondary`, while entered text and selected values use `text`. Vertical Field labels keep `text`. The package supplies this treatment; apps do not recolor each label.
253
+ - Menu, Select and Combobox items use `text`, with secondary descriptions and shortcuts. Selection does not lower the text's contrast or change its weight; the component's fill or check identifies the choice.
254
+ - Disabled labels and values use `text-disabled` at their ordinary weight. Invalid fields keep their label's contextual color; the error text and existing control edge use `danger`.
255
+ - A label's contextual color stays fixed under hover, focus and checked states. Interactive Button, Toggle and Tabs labels keep their component's state colors. Never use opacity to make ordinary labels or values quieter.
256
+
136
257
  ## Rules
137
258
 
138
259
  - 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.
@@ -167,7 +288,7 @@ An app sets only these tokens:
167
288
  - the 29 color tokens in the [table below](#color-tokens),
168
289
  - the three font tokens in [Typography](typography.md#fonts): `font-sans`, `font-display` and `font-mono`.
169
290
 
170
- Every other token (space, radius, sizes, layout widths, layers, motion) and every `mu-*` class rule is internal. Read those tokens in app CSS (`var(--mu-space-4)`), but don't override them, even though the cascade layer lets an app rule win: the products would drift apart, and the package's tests and screenshots cover only its own values. To change one element, pass `className` or `style` to that component (see [API conventions](building.md#api-conventions)).
291
+ Every other token (space, radius, sizes, layout widths, layers, motion) and every `mu-*` class rule is internal. Read those tokens in app CSS (`var(--mu-space-4)`), but don't override them, even though the cascade layer lets an app rule win. `className` and `style` support app-owned layout, not changes to a component's internal appearance. See [Styling ownership](consistency.md#styling-ownership) for the boundary.
171
292
 
172
293
  Internal rules are not private classes. An app applies the [public classes](custom-components.md#public-classes) and the class functions to its own elements; it only never changes what they do.
173
294
 
@@ -216,7 +337,7 @@ An app can offer more themes than the two the package ships, such as a warm Pape
216
337
  | `line` | `oklch(0.919 0.004 95)` | `#252525` | Separators, table rules and menu dividers. About 1.2:1 against canvas in Light, so structural lines also need spacing or a heading |
217
338
  | `overlay` | `rgba(0,0,0,0.32)` | `rgba(0,0,0,0.6)` | Backdrop behind dialogs and sheets |
218
339
  | `text` | `#1a1a1a` | `#ededed` | Primary text and icons on canvas, surface, well, key and selected (10:1 or more in both themes) |
219
- | `text-secondary` | `#5e5e5e` | `#adadad` | Secondary text: descriptions, placeholders, unselected tabs and toggles, shortcuts, timestamps (4.9:1 or more on every surface) |
340
+ | `text-secondary` | `#5e5e5e` | `#adadad` | Secondary text: descriptions, placeholders, horizontal Field labels in Popovers, unselected tabs and toggles, shortcuts, timestamps (4.9:1 or more on every surface) |
220
341
  | `text-disabled` | `#666666` | `#9e9e9e` | Disabled text and icons, at least 4.5:1 on `canvas`, `surface`, `well`, `key` and `selected`; never fade the whole control |
221
342
  | `primary` | `#1a1a1a` | `#e6e6e6` | The one emphasized action and every on state: primary buttons, checked boxes and radios, switches when on, tooltips. Ink, not a hue |
222
343
  | `primary-hover` | `#333333` | `#ffffff` | Hover on a primary key |
@@ -264,7 +385,7 @@ Use these classes before writing new surface styles. `mu-key` covers both a cont
264
385
  - 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.
265
386
  - Floating surfaces have a border so they remain distinct over the same surface color. Modal backdrops still use `overlay`.
266
387
  - Content is grouped by spacing, headings and separators. The boxed exceptions are List, bordered Table and bordered Form.
267
- - Borders count toward the documented padding. Reserve their space and compensate inner padding so states never move text or change a control's size.
388
+ - Reserve border space so states never move text or change a control's size. [Measured insets](layout.md#measured-insets) defines which border a documented padding includes.
268
389
 
269
390
  ## Focus
270
391
 
@@ -284,7 +405,7 @@ Use these classes before writing new surface styles. `mu-key` covers both a cont
284
405
 
285
406
  - Font decisions follow Apple's [typography guidelines](https://developer.apple.com/design/human-interface-guidelines/typography): the system font, no weight lighter than Regular, hierarchy from color, weight and size, no text under its 11pt minimum for iPhone, and no added letter spacing. The package follows these rules; it does not copy Apple's size tables, which differ per platform (13pt text on Mac, 17pt on iPhone). One set of sizes serves every device, and text does not grow on touch screens, except typed text in fields (see the last rule).
286
407
  - Use few sizes and few weights. App text uses four sizes (13, 14, 16 and 20px) and two weights (400 and 500); 11px is reserved for compact control labels, keyboard shortcuts and initials (see `label-xs` and `caption-xs`); user tags and status labels use 13px `caption` even inside a 20px Badge. Hierarchy comes from text color, spacing and grouping first, then from weight, and from size last.
287
- - Weight 400 is for running text, values people typed or chose, and badge text (a badge's tone and fill carry its weight). Weight 500 is for labels, controls, titles and headings. The UI uses no 600 or 700. The one exception is [Prose](components/prose.md): bold text and headings that people wrote are 600, because 500 does not read as bold in system fonts.
408
+ - Weight 500 names a control, setting or section: Field labels, including horizontal settings rows and labels around Checkbox, Switch or Radio, button and layout-toggle labels, titles and headings. Weight 400 is for entered or selected values, Menu/Select/Combobox items, running text, descriptions, metadata and badge text. A row's layout or control type never lowers its label's weight. The UI uses no 450, 600 or 700. The one exception is [Prose](components/prose.md): bold text and headings that people wrote are 600, because 500 does not read as bold in system fonts.
288
409
  - 20px (`heading`) is for the page title only, once per page. 32px (`display`) is for the hero headline on a website only, once per page. Nothing else in the UI is larger than 16px, and 16px is only for `title` and Prose text. Headings that people write inside Prose have their own sizes (see [Prose](#prose)).
289
410
  - A section title inside a page or panel is `label` (14px, 500), set apart by space above it, not by a larger size. See [Page](patterns.md#page).
290
411
  - Secondary text (descriptions, helper text, metadata) is `caption` (13px) in `text-secondary`. No text is smaller than 13px, except `label-xs` and `caption-xs` inside 20px parts.
@@ -298,6 +419,21 @@ Use these classes before writing new surface styles. `mu-key` covers both a cont
298
419
  - Titles and headings (`title`, `heading`, `display`, and headings in Prose) use `text-wrap: balance`, so a heading that wraps does not leave one word on its last line. Prose paragraphs and list items use `text-wrap: pretty`. Browsers without these wrap as usual.
299
420
  - Typed text in fields is 16px on touch screens (`pointer: coarse`), whatever the field's size: below 16px, iOS Safari zooms the page in when a field takes focus. The field keeps its height; its label and placeholder layout do not change.
300
421
 
422
+ ## Text roles
423
+
424
+ Choose weight by what the text does, then color by its context. A less prominent color never calls for a lighter weight. See [Text hierarchy](color.md#text-hierarchy) for the color contract and [Settings](patterns.md#settings) for composition.
425
+
426
+ | Role | Weight | Color |
427
+ | --- | --- | --- |
428
+ | Field labels in forms, settings pages and Dialogs, including labels around Checkbox, Switch or Radio | 500 | `text` |
429
+ | Horizontal Field labels inside a Popover | 500 | `text-secondary` |
430
+ | Entered text and selected values | 400 | `text`; placeholders use `text-secondary` |
431
+ | Menu, Select and Combobox item text, selected or not | 400 | `text`; destructive Menu items keep `danger` |
432
+ | Button, Toggle and Tabs labels; section titles | 500 | The component's documented color or state |
433
+ | Descriptions, helper text and metadata | 400 | `text-secondary`; errors keep `danger` |
434
+
435
+ Disabled text uses `text-disabled` without changing its weight. Selected and unselected items keep the same weight; fill, color or a check communicates selection. Do not apply the settings-name rule to Menu items or sidebar navigation rows: those remain scanned content at 400.
436
+
301
437
  ## Fonts
302
438
 
303
439
  | Family | Stack |
@@ -320,14 +456,14 @@ Nine styles over six sizes. 11, 13 and 14px each have a 400 style for text and a
320
456
  | `caption-xs` | 11 / 16px | 400 | Initials and brief counts inside 20px parts. Never for user tags, status names, running or secondary text. Badges use `caption`: their words need to be as readable as the metadata beside them |
321
457
  | `caption` | 13 / 18px | 400 | Badge text; secondary text: field descriptions and errors, metadata, timestamps, toast and popover descriptions, table captions, sm table cells. Usually in `text-secondary` |
322
458
  | `label-sm` | 13 / 18px | 500 | Labels inside sm controls, tooltips, group labels in menus and lists, table heads |
323
- | `body` | 14 / 20px | 400 | Default running text in app UI; dialog descriptions; the names in rows people scan: Menu and Select items, settings row names, sidebar navigation rows |
459
+ | `body` | 14 / 20px | 400 | Default running text in app UI; entered and selected values; dialog descriptions; Menu and Select items and sidebar navigation rows. Field and settings labels use `label` |
324
460
  | `label` | 14 / 20px | 500 | Labels inside md controls, field labels, buttons, section titles, popover and toast titles. The default control text |
325
461
 
326
462
  ### Headings (`--mu-font-display`)
327
463
 
328
464
  | Style | Size / line | Weight | Usage |
329
465
  | --- | --- | --- | --- |
330
- | `title` | 16 / 24px | 500 | Dialog titles; empty-state titles |
466
+ | `title` | 16 / 24px | 500 | Dialog and Drawer titles; empty-state titles |
331
467
  | `heading` | 20 / 28px | 500 | The page title in an app or on a website. One per page |
332
468
  | `display` | 32 / 40px | 500 | The hero headline on a website. Never in an app |
333
469
 
@@ -346,6 +482,21 @@ The scale used to have 12 sizes and 3 weights. These styles were removed; use th
346
482
  | `body-lg` | 16 / 24px, 400 | `body`, or `Prose` for long-form copy |
347
483
  | `label-lg` | 16 / 24px, 500 | `label` (there is no `lg` control size) |
348
484
 
485
+ ## Content fitting
486
+
487
+ Choose fitting by content role, not by language or a one-off width override. Never reduce the type size or weight to make a string fit.
488
+
489
+ | Content | Fitting rule |
490
+ | --- | --- |
491
+ | Single-line action keys and list option names/selected values | Preserve the full accessible text; allow the label box to shrink and ellipsize within its width constraint. Icons and state slots stay visible |
492
+ | Descriptions, hints, errors and prose | Wrap and grow the block; break an unbroken string when necessary rather than overflow the surface |
493
+ | Setting names and multi-line choice labels | Wrap at word boundaries and grow the row. Keep the associated control usable and aligned |
494
+ | Numeric data in aligned columns | Use tabular numbers and preserve the value; allow the data region to scroll when columns cannot fit |
495
+
496
+ When truncation hides information needed to distinguish choices, the product provides a wrapping presentation, a keyboard/touch-accessible detail view, or a full-text Tooltip as appropriate. A hover-only native `title` is not the sole recovery path. The DOM's accessible name alone is not a visual recovery path. Layout groups wrap or use their documented scroll behavior before clipping controls. Verify with a long localized label and an unbroken value at a 320px viewport; the page must not gain horizontal overflow from controls or hints.
497
+
498
+ Derive an action's accessible name from its visible label, including a displayed shortcut when it is part of that label. Supplementary descriptions are separate accessible descriptions, not replacements for the label or duplicate announcements. Keep those roles intact when a row wraps or truncates.
499
+
349
500
  ## Prose
350
501
 
351
502
  Rendered content (notes, comments, changelogs, website pages) uses the `Prose` styles, not the scale above. It uses 16px text (14px at `sm`) and 13px table heads, and has three heading sizes: 24px `h1`, 20px `h2`, and 16px `h3`–`h6`. 24px appears nowhere else. The reason: notes have sections and subsections, and when `h2` and `h3` were both the size of the text they read as one level, and as bold sentences. At `sm`, `h1` is 16px and `h2`–`h6` are 14px. See [Prose](components/prose.md).
@@ -367,15 +518,57 @@ The table gives desktop sizes. Touch targets reserve additional space as describ
367
518
  - Use `sm` for dense toolbars, table rows and filters inside panels, and `md` everywhere else, including marketing pages, onboarding and sheets. A sidebar with 28px rows puts the `mu-compact` class on itself: md controls and rows inside are `control-compact` (28px) tall, with md text, icons, padding and radius (see [A sidebar navigation row](usage.md#a-sidebar-navigation-row)). It is the only height between sizes, and it is not a `size` value. Floating lists (Menu, Select and Combobox lists) use it for their sm rows too: an sm list has 28px rows with sm text and icons, because a 24px row is cramped inside a 12px-radius popup. Emphasis comes from the `primary` variant, not from a bigger control. On touch screens buttons, fields and option rows grow to at least 44px; checkboxes, radios and switches keep their small marks and reserve 44px of layout space around them.
368
519
  - Use `xs` for secondary actions beside 13px text: actions on a row or an entry, inline formatting, filters in a tight header, checkboxes in a dense list. It is the height of a Badge or a Kbd, so they line up. Don't use `xs` for forms, for navigation, or for the main action of a screen.
369
520
  - Only Button, Toggle, ToggleGroup, Checkbox, RadioGroup and Radio, Switch, Avatar, Spinner and Skeleton take `xs`. Text entry, menus, tabs and tables are too cramped at 20px, so their `size` is `sm | md`, and an `xs` inherited from a parent renders them at `sm`.
370
- - The icon side of a control has 2px less padding, so text and icon look centered. Button and Toggle with `shape="pill"` instead keep equal size-row padding at both ends and use `radius-full`; an icon-only control is a circle. Heights, icon sizes and touch targets stay the same.
521
+ - The icon side of a control has 2px less padding, so text and icon look centered. Floating-list items follow the separate contract below. Button and Toggle with `shape="pill"` instead keep equal size-row padding at both ends and use `radius-full`; an icon-only control is a circle. Heights, icon sizes and touch targets stay the same.
371
522
  - On touch screens (`pointer: coarse`), every control reserves at least `hit-area` (44px) in the layout. Buttons and option rows grow; checkboxes, radios and switches reserve margins around their visual marks. Adjacent hit areas must never overlap. A segmented group adds its 2px inset around 44px items.
372
523
 
524
+ ### Floating-list items
525
+
526
+ Menu, Select and Combobox list items, including inline Combobox lists and rows drawn with `menuClasses().item`, share this contract. They do not inherit a button's horizontal padding: changing a list's size changes its height, type, icons and radius, while its content edges stay fixed.
527
+
528
+ | Measurement | sm | md |
529
+ | --- | --- | --- |
530
+ | Row height | 28px | 32px |
531
+ | Row padding, both inline edges | 8px | 8px |
532
+ | Leading icon to label | 8px | 8px |
533
+ | Standalone trailing Menu icon box to row end | 6px | 6px |
534
+ | Group-label inline padding | 8px | 8px |
535
+
536
+ - Leading icons keep the same 8px inset as text-only items; do not apply the control's 2px icon-side reduction. This keeps the row's content edge independent of its children.
537
+ - A standalone trailing icon in a Menu row uses the control's shared 2px optical correction toward the inline end. This applies to built-in submenu arrows and app-supplied trailing icons alike. Icons keep their size-row square; do not add offsets for individual glyphs. Wrapped selection checks keep the ordinary 8px end inset.
538
+ - Menu and Select popups, Combobox lists and list Popovers keep 6px outer padding, including the surface border. A list Popover's title and description use the same 8px inline padding as its rows. Separators retain their 6px block spacing and extend to the surface edges.
539
+ - On coarse pointers rows grow to at least 44px; horizontal spacing stays the same. Combobox grid cells keep their square-cell layout instead of list-item padding.
540
+ - Triggers, text fields, boxed List rows and panel Popovers keep their own spacing contracts. Apps reuse the list classes instead of adding another layer of horizontal padding.
541
+
542
+ ### Measured insets
543
+
544
+ Documented padding measures from a part's outer border edge to its content box, including that part's border. A bordered container and an unbordered container with the same inset therefore align. Subtract each perimeter border from the CSS padding on that side; do not subtract it twice when the padded content is a child. Borderless and full-screen variants restore the full inset. Safe-area space is additional where the component documents it.
545
+
546
+ | Measurement | Reference edges |
547
+ | --- | --- |
548
+ | Control padding | Control's outer edge to text or the SVG square; reserve the control's own focus border |
549
+ | Surface padding | Surface's outer edge to its first/last content box, even when a child supplies the padding |
550
+ | Collection outer inset | Popup's outer edge to the row's highlight box |
551
+ | Row padding | Row's highlight edge to its leading/trailing content box |
552
+ | Content gap | Adjacent content boxes; no container border is added |
553
+
554
+ A boxed row collection's perimeter counts once in its outer rows/columns. Internal cell padding is measured from the cell edge; dividers separate rows and do not add horizontal indentation. At the same size, boxed records, forms and tables share their outer content edge. Measure SVG squares, not the painted glyph inside a viewBox. Only the shared optical corrections above may move those squares.
555
+
556
+ ### Row anatomy
557
+
558
+ Rows in one sibling set share content columns: leading icon, label (and optional description), then trailing information or state. This applies to action and option lists, including app-owned lists built from the class functions.
559
+
560
+ - If any sibling has a leading icon, reserve the same icon square and gap in siblings without one. A wholly text-only set reserves neither. A named group starts its own set; a nested popup never changes its parent's columns. Grid pickers are cells, not list rows.
561
+ - The label and its description start on the same line. Multi-line rows grow; the icon and state marker align with the label's first line. Do not vertically center them against the combined text block.
562
+ - Labels take the remaining width and may shrink. Shortcuts, values and state markers do not shrink into the label. Choice rows reserve their check slot even when unchecked; ordinary action rows do not reserve a check they never show.
563
+ - Group headings align to the row's content edge before the icon column. A separator divides sibling sets without introducing another text inset; it bleeds to the surface's inner border edge, never across the perimeter border or into horizontal overflow.
564
+ - Missing content, selection, hover and disabled states do not change columns, padding or text weight. Text fitting follows [Content fitting](typography.md#content-fitting).
565
+
373
566
  ## Spacing
374
567
 
375
568
  Layout spacing comes from one ladder of nine steps, and each step has a job. Two rules decide every gap:
376
569
 
377
570
  - Closer means more related. A title is nearer to its own text than to the block before it.
378
- - A container's padding is never smaller than the gap between its blocks.
571
+ - Within a bounded panel, the content inset is at least the ordinary gap between peer blocks. Page gutters, separation between page regions, and content-to-footer spacing have different jobs; use their documented steps instead of comparing them to a panel's stack gap.
379
572
 
380
573
  | Token | Value | Job | Where |
381
574
  | --- | --- | --- | --- |
@@ -390,8 +583,8 @@ Layout spacing comes from one ladder of nine steps, and each step has a job. Two
390
583
  | `space-16` | 64px | Website hero and footer | The padding of a hero or a footer |
391
584
 
392
585
  - `inset` (2px) is not a layout step. It is the gap between a well and the key inside it, and between items inside one cluster (a toolbar). Inside a well the gap is 0.
393
- - Inside a control the size row sets the spacing (see [Control sizes](#control-sizes)): 6px between an md icon and its text, 6px of padding at xs and in a menu, 2px less padding on a control's icon side. These are optical values of the control, not layout steps. Don't use 6px or 10px between things.
394
- - `space-8`, `space-12` and `space-16` are for an app's page layout. No component uses them.
586
+ - Inside a control the size row sets the spacing (see [Control sizes](#control-sizes)): 6px between an md icon and its text, 6px of padding at xs, and 2px less padding on a control's icon side. Floating lists use the separate item contract above and a 6px outer inset. These are optical values of the control, not layout steps. Don't use 6px or 10px between things.
587
+ - `space-8`, `space-12` and `space-16` are for page and viewport layout, never ordinary padding or gaps inside controls and panels. Overlay viewports may reserve this space around a panel.
395
588
 
396
589
  Every surface follows the same two tiers. Big surfaces pad `space-5` and stack `space-4`; small ones pad `space-4` and stack `space-3`.
397
590
 
@@ -404,7 +597,7 @@ Every surface follows the same two tiers. Big surfaces pad `space-5` and stack `
404
597
  | Fieldset | | 12px | 8px from the legend to its options | |
405
598
  | Field | | 4px between label, control and hint | | |
406
599
 
407
- The playground has three reference screens built only from these steps: a settings page, a timeline and an empty page (`#screen-settings`, `#screen-timeline` and `#screen-empty`, in `playground/screens.tsx`). The screenshot tests cover them, so a spacing change is judged on a whole screen, not only on one component. An app's pages copy their spacing.
600
+ The playground's component sections exercise size rows, insets and prop combinations. Focused option-row fixtures cover missing icons, long content and disabled saved choices across actions, choices and filtering. Browser assertions check measured edges and cross-component alignment; Linux screenshots check each component and open overlay. See [Component verification](testing.md).
408
601
 
409
602
  ### Spacing in an app
410
603
 
@@ -439,19 +632,19 @@ it("uses only ladder steps for padding, margin and gap", () => {
439
632
 
440
633
  ## Radius
441
634
 
442
- Inner radius = outer radius − `inset`, so nested corners stay concentric. Floating lists follow the same rule with their padding: 6px (`radius-xl` − `radius-md`), so an md row's highlight is concentric with the popup's corner, and an sm row's 4px corner sits inside it.
635
+ Concentric corners subtract the actual distance between their outer edges. A key inside a well uses outer radius − `inset`; content clipped just inside a border subtracts that border. Floating lists use their 6px outer inset (`radius-xl` − `radius-md`), so an md row's highlight is concentric with the popup's corner. Sm keeps its documented 4px size-row radius rather than inventing another radius for that context.
443
636
 
444
637
  | Token | Value | Usage |
445
638
  | --- | --- | --- |
446
639
  | `radius-xs` | 2px | Keys inside sm wells (`radius-sm` minus the 2px inset); inline code |
447
640
  | `radius-sm` | 4px | sm controls |
448
641
  | `radius-md` | 6px | md controls, the default |
449
- | `radius-lg` | 8px | Images in Prose |
642
+ | `radius-lg` | 8px | Boxed record/form/table surfaces and images in Prose |
450
643
  | `radius-xl` | 12px | Menus, select lists, popovers and toasts |
451
644
  | `radius-2xl` | 16px | Dialogs and sheets |
452
- | `radius-full` | 9999px | Avatars, radios, switches and their knobs, and badges only |
645
+ | `radius-full` | 9999px | Avatars, radios, switches and their knobs, badges, and opt-in pill controls |
453
646
 
454
- Buttons and inputs are never pills; badges always are, so a label is never mistaken for a control.
647
+ Ordinary controls use their size-row radius; inputs never use a pill. Badges always use `radius-full`. The explicit exception is Button/Toggle `shape="pill"` for compact reactions and similar content choices: their text controls are pills and their icon-only controls are circles. The shape changes corners and the documented optical padding, never size, text role or interaction treatment. Do not turn ordinary form actions or fields into pills with CSS.
455
648
 
456
649
  ## Sizes
457
650
 
@@ -555,7 +748,7 @@ Behavioral states are complete, but they do not each require a different appeara
555
748
 
556
749
  | State | Looks like |
557
750
  | --- | --- |
558
- | 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`. |
751
+ | 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 action labels go to `text`; Field labels keep their contextual color. Primary keys go to `primary-hover`. |
559
752
  | 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 |
560
753
  | Pressed toggle (on) | Default: `well` and `text`. Soft: `selected` and `text`, retained on hover; the reserved border stays transparent |
561
754
  | 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` |
@@ -567,6 +760,21 @@ Behavioral states are complete, but they do not each require a different appeara
567
760
  | 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 |
568
761
  | Focus (inside a widget) | Menu items and options take the `hover` fill. No ring |
569
762
 
763
+ ## Combined states
764
+
765
+ Apply states by what they communicate, not by whichever selector happens to win. These rules cover shipped components and app-owned parts alike.
766
+
767
+ | Combination | Result |
768
+ | --- | --- |
769
+ | Disabled + any pointer/focus state | No hover, press or focus highlight. Label, icon, value, placeholder, description and shortcut inside the unavailable control/row use `text-disabled`, including a danger action. Keep geometry and weight unchanged |
770
+ | Disabled + saved selection | Keep the selected fill, mark or knob position recognizable; dim text and marks. Disabled choice controls use their documented disabled surface. Never erase the saved choice |
771
+ | Invalid + disabled | Disabled control appearance wins. An existing error message outside the control remains `danger`; disabling does not silently remove its explanation |
772
+ | Invalid + keyboard focus | Text entry retains its invalid edge and caret/selection. Other controls use the shared focus edge while the error message continues to identify the error. Forced-colors focus remains visible |
773
+ | Selected + hover/focus | Retain the saved selection. Apply only the family's shared transient treatment, without changing columns, weight or boundary strength |
774
+ | Loading + disabled | Loading immediately blocks activation and keeps the action's identity and dimensions; its delayed spinner communicates waiting. Ordinary disabled styling must not replace the loading treatment |
775
+
776
+ Supporting text outside an unavailable control is still information: a Field hint explaining availability keeps `text-secondary`, and its error keeps `danger`. This differs from the description inside a disabled actionable row, which dims with that row. State selectors must cover all owned parts, including nested indicators, and exclude disabled controls from transient treatments.
777
+
570
778
  ## Rules
571
779
 
572
780
  - 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.
@@ -620,12 +828,12 @@ import { Pin, Trash2 } from "lucide-react";
620
828
  - **Size comes from the control.** An icon inside a component is 12px at xs, 14px at sm and 16px at md (`icon-xs`, `icon-sm`, `icon-md`). Don't pass `size`.
621
829
  - **One stroke, fixed in screen pixels.** Every icon, at every size and in badges, draws the `icon-stroke` token: 1.25px. The check in a checkbox is the one exception, at 2px. Apps don't change the token. At 1.25px a 16px outline glyph (calendar, paperclip, search) reads no heavier than the 14px weight-400 text beside it: an icon puts more ink in its box than a letter does, so matching the letters' stem width would read heavier. CSS applies `vector-effect: non-scaling-stroke`, which matches Lucide's `absoluteStrokeWidth`, so no props are needed. Don't pass `strokeWidth`.
622
830
  - **Color is `currentColor`.** Icons follow the text color: `text` in controls, `text-secondary` in menu rows, the tone color in toasts.
623
- - **Icons sit in a fixed square.** In a menu row or a control, the icon square keeps labels aligned whether or not a row has an icon.
831
+ - **Icons sit in a fixed square.** Collections reserve missing leading icons according to [Row anatomy](layout.md#row-anatomy). Independent controls do not reserve an absent icon.
624
832
  - **Accessibility.** Icons are `aria-hidden`. Every icon-only Button or Toggle has an `aria-label`, and a Tooltip with the same text.
625
833
  - **Standalone icons.** Outside a component, give the icon a size class: `mu-icon-xs` (12px), `mu-icon-sm` (14px) or `mu-icon-md` (16px), all with the 1.25px stroke. Each sets the box and the stroke together, so a heading's icon or an empty state's icon matches the icons in controls. `mu-icon` alone takes the size of the nearest size row (`mu-s-*`), or 16px outside one. Don't size an icon with a utility such as `size-4`: it changes the box but not the stroke.
626
834
 
627
835
  ```tsx
628
- <h2 className="mu-title"><Inbox className="mu-icon-sm" aria-hidden /> Inbox</h2>
836
+ <h2 className="mu-label"><Inbox className="mu-icon-sm" aria-hidden /> Inbox</h2>
629
837
  ```
630
838
 
631
839
  ## Built-in glyphs
@@ -664,6 +872,8 @@ When Lucide doesn't have an icon, draw it on Lucide's 24px grid with 2px round s
664
872
 
665
873
  ## Page template
666
874
 
875
+ Map parts to the shared rules in [Keeping the system consistent](../consistency.md#rule-ownership). This page template does not authorize component-specific versions of typography, geometry or combined states. Put an exception beside its owning rule, then link it from the component page and cover it in the shared reference or an existing fixture.
876
+
667
877
  Pages are reference for agents: short, imperative, no narrative. Every page has these sections, in this order:
668
878
 
669
879
  1. **Title and purpose.** `# Name`, then one line: what it is for.
@@ -979,6 +1189,7 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `modal` on
979
1189
 
980
1190
  - `mu-popup` with 6px padding (`radius-xl` − `radius-md`, so md highlights are concentric with the corners). As wide as its longest row, at least `menu-width` (160px) and at most `menu-max-width` (280px), both clamped to the space available; labels truncate and descriptions wrap at the maximum. Scrolls when taller than the space available.
981
1191
  - Rows are 28px at sm (`control-compact`, with sm text and icons) and 32px at md, text weight 400; icons in `text-secondary`; the shortcut right-aligned in `text-secondary`. Text starts at the start edge.
1192
+ - Rows and group labels use 8px inline padding at both sizes, with an 8px icon-to-label gap. Leading icons do not reduce the start padding. A standalone trailing icon gets the shared 2px end correction, including in app-built rows; wrapped checks keep the 8px end inset. See [Floating-list items](../layout.md#floating-list-items).
982
1193
  - A row with a description grows: the label, then the description in `caption` and `text-secondary`, with the row's vertical padding above and below. The icon and the check stay on the label's line.
983
1194
  - A Separator has 6px above and below, the same as the popup padding, and runs edge to edge.
984
1195
  - 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`.
@@ -1167,8 +1378,9 @@ Base UI's props pass through: `name`, `invalid`, `disabled`, `validate`, `valida
1167
1378
 
1168
1379
  ## Style
1169
1380
 
1170
- - Label: `label` style (14px, 500), `space-1` above the control; weight 400 when it wraps a Checkbox, Switch or Radio.
1171
- - Horizontal: a two-column grid. The label (weight 400, as every settings row name is; see [Page](../patterns.md#page)) and description fill the first column; the control sits at the end, centered on them, `space-4` from the text. The error spans the row under them.
1381
+ - Label: `label` style (14px, 500), `text`, `space-1` above the control. It stays 500 when it wraps a Checkbox, Switch or Radio, and in horizontal rows. A control's name is distinct from the value someone enters or selects, which stays 400.
1382
+ - Horizontal: a two-column grid. The label and description fill the first column; the control sits at the end, centered on them, `space-4` from the text. The error spans the row under them. In a Popover, the horizontal label uses `text-secondary`; in forms, settings pages and Dialogs it uses `text`. Vertical labels keep `text` in either context. See [Settings](../patterns.md#settings).
1383
+ - Disabled labels use `text-disabled`, including inside a Popover, without changing weight. This applies when the Field is disabled or a directly wrapped Checkbox, Switch or Radio is individually disabled. Hover, focus, checked and invalid states do not change a label's contextual color; errors retain their separate `danger` text.
1172
1384
  - Description and error: `caption` (13px), `space-1` below the control. The error hides the description and turns the control's edge `danger`.
1173
1385
  - Fieldset: its options stack `space-3` apart. The legend (`label`) sits `space-2` above the first one, closer than the options are to each other, so it reads as their name.
1174
1386
 
@@ -1331,7 +1543,7 @@ Base UI's props pass through: `items`, `value`, `defaultValue`, `onValueChange`,
1331
1543
  ## Style
1332
1544
 
1333
1545
  - 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.
1334
- - 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`.
1546
+ - 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`. Items and group labels use 8px inline padding at both sizes, including when an item has a leading icon; the icon-to-label gap is 8px. See [Floating-list items](../layout.md#floating-list-items).
1335
1547
  - 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.
1336
1548
 
1337
1549
  <!-- docs/components/combobox.md -->
@@ -1436,7 +1648,7 @@ Base UI's props pass through: `items`, `value`, `defaultValue`, `onValueChange`,
1436
1648
 
1437
1649
  - 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`.
1438
1650
  - 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.
1439
- - Rows are text weight 400; the highlighted row uses `hover`; the chosen row has a check at the end.
1651
+ - Rows are text weight 400; the highlighted row uses `hover`; the chosen row has a check at the end. List items and group labels use 8px inline padding at both sizes, including when an item has a leading icon; the icon-to-label gap is 8px. Inline lists follow the same [floating-list item contract](../layout.md#floating-list-items); grid cells keep the square layout below.
1440
1652
  - Empty text: `body` in `text-secondary`, `space-3` by `space-4` padding.
1441
1653
  - 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.
1442
1654
  - 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.
@@ -1895,8 +2107,9 @@ Base UI's props pass through: `open`, `defaultOpen`, `onOpenChange`, `modal` on
1895
2107
  ## Style
1896
2108
 
1897
2109
  - `mu-popup` (`surface`, a 1px `edge`, `radius-xl`), `space-4` padding, `popover-width` wide. Children stack `space-3` apart.
2110
+ - Horizontal Field labels are 500 in `text-secondary`; selected and entered values remain 400 in `text`. Vertical Field labels stay 500 in `text`. Disabled labels keep `text-disabled`, and state changes never promote a setting name's color. See [Settings](../patterns.md#settings).
1898
2111
  - Title: `label`. Description: `caption` in `text-secondary`, `space-1` under the title.
1899
- - `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.
2112
+ - `list`: 6px padding and no gap, like a Menu. Rows use the [floating-list item contract](../layout.md#floating-list-items). A title and description use the same 8px inline padding as text-only rows, with `space-2` above the title and below the description; they do not reserve a leading icon column.
1900
2113
  - Opening and closing use the shared [Motion](../motion.md) fade and `space-1` offset over `duration-fade`. Both are immediate under reduced motion.
1901
2114
 
1902
2115
 
@@ -2531,7 +2744,7 @@ Every native attribute passes through.
2531
2744
 
2532
2745
  - `surface` fill, a 1px `line` edge, `radius-lg`. No shadow: it is flat, like a field.
2533
2746
  - 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.
2534
- - Text is `body` in `text`.
2747
+ - Record text is `body` in `text`. Settings rows follow [Field](field.md): the name is 500 in `text`, values are 400, and descriptions are `caption` in `text-secondary`.
2535
2748
 
2536
2749
  <!-- docs/components/prose.md -->
2537
2750
 
@@ -2825,7 +3038,7 @@ const [confirming, setConfirming] = useState(false);
2825
3038
  </List.Root>
2826
3039
  ```
2827
3040
 
2828
- A horizontal Field puts the setting's name first, at weight 400, and the Switch or Select at the end of the row. The section title above it is the `label` (500). A [List](components/list.md) boxes the rows of one section and divides them with lines. Inside a Dialog, leave out the List and stack the Fields. For a short list of options under one heading (notification types), a Switch or Checkbox inside its `Field.Label` also works.
3041
+ A horizontal Field puts the setting's name first at weight 500 and the Switch or Select at the end of the row. Selected values stay 400. A [List](components/list.md) boxes the rows of one section and divides them with lines. Inside a Dialog or Popover, leave out the List and stack the Fields. Names use `text` on a settings page or in a Dialog; horizontal names inside a Popover use `text-secondary`, with the chosen values in `text`. The package supplies the label colors. A Switch, Checkbox or Radio inside its `Field.Label` also keeps a 500 label. See [Settings](patterns.md#settings).
2829
3042
 
2830
3043
  No Save button and no toast: the Switch shows the result. If saving fails, move the Switch back and show a danger Toast.
2831
3044
 
@@ -2895,7 +3108,7 @@ The package ships no navigation component: the sidebar's rows are the app's link
2895
3108
  - `mu-compact` changes only md. sm (24px) and xs (20px) controls inside keep their heights, so an xs ghost Button for a row action still fits.
2896
3109
  - Popups opened from the sidebar (the Select's list, a Menu) mount outside it, at the normal 32px. To give a panel of rows the same 28px, put `mu-compact` on its popup: `<Popover.Popup variant="list" className="mu-compact">`.
2897
3110
  - `mu-s-md` gives the rows 14px text, 16px icons with a 1.25px stroke, and md padding and radius; `mu-base` sets the font. Never set the `--mu-row-*` variables or the size tokens yourself; `mu-compact` is the only way to change a row's height.
2898
- - Rows are weight 400 (`body`), like Menu items, Select items and settings row names. A column of rows is content people scan; at 500 every row competes and the sidebar reads as bold. 500 is for what names a group: a section title in the sidebar and the "New" Button's label. The current row stands out by its fill and `text` color, not by weight, so the text doesn't shift when the current page changes.
3111
+ - Navigation rows are weight 400 (`body`), like Menu and Select items. A column of navigation is content people scan; at 500 every row competes and the sidebar reads as bold. 500 is for a section title, the "New" Button's label and Field labels that name settings. The current navigation row stands out by its fill and `text` color, not by weight, so the text doesn't shift when the current page changes.
2899
3112
  - Mark the current page with `aria-current="page"`, not with color alone; the fill shows it too.
2900
3113
  - Rows stack `inset` (2px) apart. On `pointer: coarse`, set `min-height: var(--mu-hit-area)` on each navigation row so it reserves 44px in the layout; never extend overlapping hit areas around tightly stacked rows.
2901
3114
  - A row with a count or a menu at its end adds it after the label with `margin-inline-start: auto`.
@@ -3093,7 +3306,7 @@ Names and parts from other libraries and where they go.
3093
3306
 
3094
3307
  # Patterns
3095
3308
 
3096
- How the components go together. Each product builds its screens from these patterns. None of them is specific to one product. The gaps come from the [spacing ladder](layout.md#spacing), and the playground shows a settings page, a timeline and an empty page built this way (`playground/screens.tsx`).
3309
+ How the components go together. Each product builds its screens from these patterns. None of them is specific to one product. The gaps come from the [spacing ladder](layout.md#spacing). The playground verifies component props and focused compositions; product screen mockups belong to the products, not this package's test fixture.
3097
3310
 
3098
3311
  ## Page
3099
3312
 
@@ -3102,7 +3315,7 @@ How the components go together. Each product builds its screens from these patte
3102
3315
  - Sidebar navigation rows (pages, views, tags) are `body` text, weight 400, `text-secondary`, and the current row is `text` on the `hover` fill. A sidebar section title ("Tags") is `label-sm` or `label`, 500, and the "New" Button keeps its 500 label. Rows are scanned content; weight is for the few things that name them.
3103
3316
  - Content sits in a column of at most `content-width` (720px), padded `space-4` on phones and `space-6` on desktop.
3104
3317
  - A page header is a `heading` with an optional `body` line `space-1` under it, and the page's one primary action at the right. `heading` appears once per page.
3105
- - Sections inside a page have a `label` title (14px, 500) with `space-6` above it and `space-2` below. Section titles are never larger than the text around them; space and grouping set them apart. A section's rows are horizontal Fields: the name at weight 400 (`body`) and the description in `caption`, `text-secondary`. The section title above is the only `label` (500); the row names stay 400 so the title stands out from them. Two blocks of one section (a List and the Form that adds to it) are `space-4` apart.
3318
+ - Sections inside a page have a `label` title (14px, 500) with `space-6` above it and `space-2` below. Section titles are never larger than the text around them; space and grouping set them apart. A section's rows are horizontal Fields: the name at weight 500 in `text`, the description in `caption` and `text-secondary`, and any entered or selected value at 400. Space separates a section title from its rows; do not lower the rows' label weight. Two blocks of one section (a List and the Form that adds to it) are `space-4` apart.
3106
3319
 
3107
3320
  ## Form
3108
3321
 
@@ -3114,6 +3327,14 @@ How the components go together. Each product builds its screens from these patte
3114
3327
  - Errors appear under the field, in words that say how to fix it.
3115
3328
  - A small form on a settings page, among Lists ("Add a tag rule", a reactions picker), is a `bordered` [Form](components/form.md): a title, its fields, and the buttons in a footer bar.
3116
3329
 
3330
+ ## Settings
3331
+
3332
+ - Use horizontal Fields for a setting's name and its Switch or Select. Names stay 500, including when a Checkbox, Switch or Radio is inside `Field.Label`; values and Select options stay 400. Descriptions are `caption`, 400.
3333
+ - On a settings page, put a section's Fields in one List: names use `text`, descriptions use `text-secondary`. Inside a Dialog, stack Fields without a List and keep the same colors.
3334
+ - For a compact view-options panel, use a Popover and stack horizontal Fields without a List. The package gives these labels `text-secondary`; current values stay `text`, making the chosen configuration easier to scan. Vertical form labels inside a Popover still use `text`. Do not add per-label font or color overrides.
3335
+ - A section or panel title stays 500 in `text`. Layout toggles keep their 500 labels in every state. Chosen values and Menu, Select or Combobox options keep 400 in every state; selection uses the component's fill or check.
3336
+ - Disabled text keeps its weight and uses `text-disabled`. Do not change label colors on hover or while a setting is checked. See [Text roles](typography.md#text-roles).
3337
+
3117
3338
  ## Entry
3118
3339
 
3119
3340
  A repeated unit of content in a list: a note, a comment, a changelog item.
@@ -3192,7 +3413,7 @@ Every token is a custom property named `--mu-<token>`, so the `surface` token is
3192
3413
 
3193
3414
  ### Cascade layer
3194
3415
 
3195
- Both stylesheets sit in one [cascade layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) named `mu`. Unlayered CSS always wins over layered CSS, so an app's own rules override a component without a specificity fight: a `className` on a `Button` that sets `width` wins over the button's own rule.
3416
+ Both stylesheets sit in one [cascade layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) named `mu`. Unlayered CSS always wins over layered CSS, so app-owned layout needs no specificity fight: a `className` on a `Button` that sets `width` wins over the button's own rule. This is a cascade mechanism, not permission to restyle the component; follow [Styling ownership](consistency.md#styling-ownership).
3196
3417
 
3197
3418
  When the app also puts its CSS in layers, declare the order once, before any import, so that `mu` comes after resets and before the app's components and utilities. For an app on Tailwind CSS v4:
3198
3419
 
@@ -3273,8 +3494,8 @@ import { Ellipsis, Pin, Trash2 } from "lucide-react";
3273
3494
  - `pressed` + `onPressedChange`, or `defaultPressed` (Toggle)
3274
3495
  - `open` + `onOpenChange`, or `defaultOpen` (Menu, Dialog, AlertDialog, Popover, Tooltip, Collapsible, Select, Combobox)
3275
3496
  - **`icon`** takes a Lucide element (`icon={<Pin />}`), never a string name.
3276
- - **`render`** on every component and part swaps the rendered element, as in Base UI: a router's link in `Link`, a Button as a `Menu.Trigger`. Base UI doesn't render links through Button; a link that looks like a button is an anchor with `buttonClasses()` (see [Button](components/button.md#rules)).
3277
- - **`className` and `style`** pass through to the part's element, after our classes.
3497
+ - **`render`**, where the public prop type exposes it, swaps the rendered element through Base UI or `useRender`: a router's link in `Link`, a Button as a `Menu.Trigger`. Fixed native-element wrappers keep their documented element. Base UI doesn't render links through Button; a link that looks like a button is an anchor with `buttonClasses()` (see [Button](components/button.md#rules)).
3498
+ - **`className` and `style`** pass through to the part's element, after our classes, for layout and integration within [Styling ownership](consistency.md#styling-ownership).
3278
3499
  - **Accessible names.** A control without a visible label takes `aria-label`. Icon-only controls always do.
3279
3500
  - **`tone`** describes a label or status treatment. The shared status tones are `"neutral" | "success" | "warning" | "danger"`. Badge also keeps `"outline"` for a quiet label and `"primary"` for emphasis; these are label treatments, not statuses. Badge's user-chosen `color` is allowed only with `"neutral"` (or an omitted tone). Toasts use the shared status tones through Base UI's `type` prop.
3280
3501
  - **`variant`** selects a component's predefined appearance or structure. Values belong to that component, not a global variant set: Button has `"primary" | "neutral" | "ghost" | "danger"`; Toggle has `"ghost" | "soft"`; Select.Trigger has `"neutral" | "ghost"`; Popover.Popup has `"panel" | "list"`; Dialog.Popup and Drawer.Popup have `"panel" | "bare"`. See each component's page for usage and defaults.
@@ -3335,7 +3556,7 @@ A class function returns the classes that make any element look like a component
3335
3556
  | `inputClasses({ size })` | A string | One-line field, such as a tag input around a native `<input>` |
3336
3557
  | `textareaClasses({ size })` | A string | Multi-line field, such as a content-editable editor |
3337
3558
  | `badgeClasses({ tone })` | A string | Label, such as a tag that is also a link |
3338
- | `menuClasses({ size })` | `popup`, `item`, `dangerItem`, `label`, `text`, `description`, `shortcut`, `separator`, `groupLabel` | Floating list, such as an editor's suggestion list, or rows inside a Popover with `variant="list"`. Rows are 28px at sm and 32px at md, as in a Menu |
3559
+ | `menuClasses({ size })` | `popup`, `item`, `dangerItem`, `label`, `text`, `description`, `shortcut`, `separator`, `groupLabel` | Floating list, such as an editor's suggestion list, or rows inside a Popover with `variant="list"`. Rows are 28px at sm and 32px at md, with fixed 8px inline padding; see [Floating-list items](layout.md#floating-list-items) |
3339
3560
  | `popoverClasses({ variant })` | `popup`, `title`, `description` | Floating panel, such as an emoji picker |
3340
3561
 
3341
3562
  State is set with attributes, never with extra classes:
@@ -3368,7 +3589,7 @@ A popup built this way still needs its behavior from Base UI or the editor it be
3368
3589
 
3369
3590
  ## Public classes
3370
3591
 
3371
- Apply these classes to an app's own elements. Don't override their rules: the products would drift apart, and the package's tests cover only its own values. Every other `mu-*` class, such as a component part's `mu-menu-item`, is internal; reach it through a class function.
3592
+ Apply these classes to an app's own elements. Don't override their rules; see [Styling ownership](consistency.md#styling-ownership). Every other `mu-*` class, such as a component part's `mu-menu-item`, is internal; reach it through a class function. Text roles are defined in [Typography](typography.md#text-roles); the class table is an index of those styles.
3372
3593
 
3373
3594
  | Class | What it applies | Use it for |
3374
3595
  | --- | --- | --- |
@@ -3394,8 +3615,8 @@ Apply these classes to an app's own elements. Don't override their rules: the pr
3394
3615
  | `mu-caption` | 13 / 18px, 400 | Secondary text |
3395
3616
  | `mu-label-sm` | 13 / 18px, 500 | Small labels |
3396
3617
  | `mu-body` | 14 / 20px, 400 | Body text |
3397
- | `mu-label` | 14 / 20px, 500 | Labels and buttons |
3398
- | `mu-title` | 16 / 24px, 500 | Section titles |
3618
+ | `mu-label` | 14 / 20px, 500 | Labels, buttons and section titles |
3619
+ | `mu-title` | 16 / 24px, 500 | Dialog, Drawer and empty-state titles |
3399
3620
  | `mu-heading` | 20 / 28px, 500 | The page title |
3400
3621
  | `mu-display` | 32 / 40px, 500 | A website hero only |
3401
3622
 
@@ -3418,7 +3639,7 @@ A size row class sets these variables on its element, and children inherit them.
3418
3639
  | `--mu-row-icon-stroke` | 1.25px | 1.25px | 1.25px |
3419
3640
  | `--mu-row-check-box` | 14px | 16px | 18px |
3420
3641
 
3421
- `--mu-row-padding-icon` is the padding on the side of a control that starts or ends with an icon. Inside `mu-compact`, the md `--mu-row-height` is 28px. `--mu-row-field-font-size` and `--mu-row-field-line-height` are for text people type; on touch screens they are 16px and 20px at every size, so iOS Safari does not zoom in when a field takes focus.
3642
+ `--mu-row-padding-icon` is the padding on the side of a control that starts or ends with an icon. Floating-list items use their [fixed 8px spacing](layout.md#floating-list-items) instead of these control-padding values; `menuClasses().item` supplies it for app-built rows too. Inside `mu-compact`, the md `--mu-row-height` is 28px. `--mu-row-field-font-size` and `--mu-row-field-line-height` are for text people type; on touch screens they are 16px and 20px at every size, so iOS Safari does not zoom in when a field takes focus.
3422
3643
 
3423
3644
  ```css
3424
3645
  .app-tag-input-chip {
package/llms.txt CHANGED
@@ -8,6 +8,8 @@ React components on Base UI, CSS tokens and foundation styles. Load `@usememos/u
8
8
 
9
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
10
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
11
+ - [Keeping the system consistent](https://github.com/usememos/ui/blob/main/docs/consistency.md): Rule ownership, app styling boundaries and the documentation-to-verification loop
12
+ - [Component verification](https://github.com/usememos/ui/blob/main/docs/testing.md): Prop coverage, component fixtures, browser checks and screenshot maintenance
11
13
  - [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
12
14
  - [Surfaces and boundaries](https://github.com/usememos/ui/blob/main/docs/depth.md): Flat surface roles, borders and focus without shadows or outlines
13
15
  - [Typography](https://github.com/usememos/ui/blob/main/docs/typography.md): The system font, the type scale and text rules
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@usememos/ui",
3
- "version": "26.11.18",
3
+ "version": "26.11.19",
4
4
  "description": "The Memos UI design system: tokens, foundation styles and React components for usememos products.",
5
5
  "keywords": [
6
6
  "react",