Todae

Todae

Native platform

Todae builds on the browser instead of reimplementing it. It uses the features below with no JavaScript fallbacks, so a browser that has them is a browser Todae supports. There is no separate support matrix.

  • CSS anchor positioning: placing popovers and tooltips next to their trigger, and flipping them at the viewport edge with position-try-fallbacks. Without it: the surface is not placed next to its trigger and sits near the top-left corner of the viewport.
  • Popover API: showing Popover.Root and Tooltip.Root in the top layer. Todae needs it.
  • <dialog> and showModal(): Dialog.Root and BottomSheet.Root, for the top layer, ::backdrop, an inert page behind, Escape, and <form method="dialog">. Todae needs it. The scrim reads Todae's custom properties from ::backdrop, which inherits them from its dialog in current browsers; an older engine that does not shows no scrim color.
  • closedby: BottomSheet with dismissOnEscape={false}, so the browser ignores Escape. Without it: Escape still asks to close, and Todae holds the sheet open.
  • inert: hiding the chip measuring copy. Todae needs it.
  • <details name>: exclusive accordions. Without it: several disclosures in a group can be open at once.
  • ::details-content: fading a disclosure's content in. Without it: the content appears at once.
  • field-sizing: content: Field.Textarea with autoGrow. Without it: the textarea keeps its rows and scrolls.
  • :has(): Field and Chip focus rings and adornment layout, the Alert columns, and stopping page scroll while a modal <dialog> is open (with :modal). Todae needs it.
  • scrollbar-gutter: keeping the page's scrollbar space while a modal <dialog> stops page scroll. Without it: the page shifts by the scrollbar's width when a modal opens.
  • Cascade layers: ordering Todae's reset, tokens, components and a company's theme. Todae needs it.
  • Relative color syntax: translucent colors made from a token, such as color.bg.selected. Todae needs it.
  • @starting-style: Dialog entry transitions. Without it: the dialog appears without a transition.
  • dvh units: Dialog and BottomSheet heights that follow mobile browser chrome. Todae needs it.

Behavior that matters most is tested in a real browser (Chromium, through Playwright): Escape order across stacked overlays, modal focus and restore, flip at the viewport edge, chip overflow measurement and bottom-sheet drag. Every docs example is also checked with axe there.