{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu",
  "title": "Dropdown menu",
  "description": "A list of words on the popover panel; the one you point at is marked with the highlighter.",
  "dependencies": [
    "@radix-ui/react-dropdown-menu"
  ],
  "registryDependencies": [
    "https://thedirectors.agency/ui/r/0nlytype.json",
    "https://thedirectors.agency/ui/r/kbd.json",
    "https://thedirectors.agency/ui/r/popover.json"
  ],
  "files": [
    {
      "path": "registry/0nlytype/ui/dropdown-menu.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as MenuPrimitive from \"@radix-ui/react-dropdown-menu\"\n\nimport { marginaliaUnder } from \"@/lib/0nlytype/menu-room\"\nimport { useComposedRefs } from \"@/lib/0nlytype/refs\"\nimport { cn } from \"@/lib/utils\"\n\n// Radix reads direction from its own provider, not the page, so on a right-to-left page a menu\n// would hang from the wrong end and its arrow keys would run the wrong way round. Without a dir,\n// the menu takes the direction of the page around its trigger, read as the trigger mounts (as the\n// menubar and the toggle group do). The root renders nothing, so the trigger reports it.\nconst Around = React.createContext<(dir: \"rtl\") => void>(() => {})\n\nfunction DropdownMenu({ dir, ...props }: React.ComponentProps<typeof MenuPrimitive.Root>) {\n  const [around, setAround] = React.useState<\"rtl\">()\n  return (\n    <Around.Provider value={setAround}>\n      <MenuPrimitive.Root data-slot=\"dropdown-menu\" dir={dir ?? around} {...props} />\n    </Around.Provider>\n  )\n}\n\nfunction DropdownMenuTrigger({ ref, ...props }: React.ComponentProps<typeof MenuPrimitive.Trigger>) {\n  const setAround = React.useContext(Around)\n  const composedRef = useComposedRefs(React.useCallback((node: HTMLButtonElement | null) => {\n    if (node && getComputedStyle(node).direction === \"rtl\") setAround(\"rtl\")\n  }, [setAround]), ref)\n  return (\n    <MenuPrimitive.Trigger\n      ref={composedRef}\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuGroup(props: React.ComponentProps<typeof MenuPrimitive.Group>) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuRadioGroup(props: React.ComponentProps<typeof MenuPrimitive.RadioGroup>) {\n  return <MenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />\n}\n\nfunction DropdownMenuSub(props: React.ComponentProps<typeof MenuPrimitive.Sub>) {\n  return <MenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\n/**\n * How a menu's list is set. `list`: the item you point at is marked with the highlighter.\n * `leaders`: a book's contents page; each word is joined to its keys by leader dots, and the\n * leader of the word you point at inks from the word to its keys. `marginalia` (dropdown\n * only): the word you point at is explained by a small note hung beside the list on a hairline\n * arrow (each item's `hint`). `orbit` (context menu only): the words stand on an arc.\n * Submenus inherit leaders; the other looks keep to their own list.\n */\ntype MenuVariant = \"list\" | \"leaders\" | \"marginalia\" | \"orbit\"\nconst MenuLook = React.createContext<MenuVariant>(\"list\")\n\ntype Note = { hint?: string; y: number; under: boolean }\n\n/**\n * Marginalia: the note for the item you point at, set beside the list at that item's height\n * (or under the list, where there's no room beside it). Radix focuses the item you point at or\n * arrow to, so focus tells us which one. Focus from a submenu bubbles here through React, so\n * only this menu's own items count.\n */\nfunction useMarginalia(on: boolean) {\n  const [note, setNote] = React.useState<Note>({ y: 0, under: false })\n  const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {\n    const menu = event.currentTarget, item = (event.target as HTMLElement).closest<HTMLElement>(\"[role^='menuitem']\")\n    if (!on || !item || item.closest(\"[role='menu']\") !== menu) return\n    const under = marginaliaUnder(menu.getBoundingClientRect(), document.documentElement.clientWidth, getComputedStyle(menu).direction)\n    setNote({ hint: item.dataset.hint, y: item.offsetTop + item.offsetHeight / 2, under })\n  }\n  const el = on ? (\n    <div className=\"ot-menu-note\" aria-hidden data-under={note.under ? \"\" : undefined} data-empty={note.hint ? undefined : \"\"} style={{ \"--ot-note-y\": `${note.y}px` } as React.CSSProperties}>\n      {note.hint}\n    </div>\n  ) : null\n  return { onFocus, el }\n}\n\n/**\n * A list of words on the popover panel, hung from its trigger on a leader line. The word\n * you point at is marked with the highlighter; the words arrive in turn.\n */\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 27, /* --ot-space-5: the leader is this long */\n  collisionPadding = 20,\n  variant = \"list\",\n  style,\n  onFocus,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Content> & { variant?: \"list\" | \"leaders\" | \"marginalia\" }) {\n  const margin = useMarginalia(variant === \"marginalia\")\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        data-variant={variant}\n        align={align}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        style={{ \"--ot-pop-gap\": `${sideOffset}px`, ...style } as React.CSSProperties}\n        className={cn(\"ot-pop ot-menu\", className)}\n        onFocus={(event) => (onFocus?.(event), margin.onFocus(event))}\n        {...props}\n      >\n        <MenuLook.Provider value={variant}>{children}</MenuLook.Provider>\n        {margin.el}\n      </MenuPrimitive.Content>\n    </MenuPrimitive.Portal>\n  )\n}\n\n/** An item's `hint`: the note marginalia hangs beside it, and its description for screen readers. */\nconst hinted = (hint?: string) => (hint ? { \"data-hint\": hint, \"aria-description\": hint } : {})\n\n/** A destructive item says so in its words (\"Delete Halden for good\"); it is never red. */\nfunction DropdownMenuItem({\n  className,\n  variant = \"default\",\n  hint,\n  ...props\n}: React.ComponentProps<typeof MenuPrimitive.Item> & { variant?: \"default\" | \"destructive\"; hint?: string }) {\n  return <MenuPrimitive.Item data-slot=\"dropdown-menu-item\" data-variant={variant} className={cn(\"ot-menu-item\", className)} {...hinted(hint)} {...props} />\n}\n\n/** Checked, the sentence turns to the expression italic. Screen readers get aria-checked. */\nfunction DropdownMenuCheckboxItem({ className, hint, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem> & { hint?: string }) {\n  return <MenuPrimitive.CheckboxItem data-slot=\"dropdown-menu-checkbox-item\" className={cn(\"ot-menu-item\", className)} {...hinted(hint)} {...props} />\n}\n\nfunction DropdownMenuRadioItem({ className, hint, ...props }: React.ComponentProps<typeof MenuPrimitive.RadioItem> & { hint?: string }) {\n  return <MenuPrimitive.RadioItem data-slot=\"dropdown-menu-radio-item\" className={cn(\"ot-menu-item\", className)} {...hinted(hint)} {...props} />\n}\n\nfunction DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label data-slot=\"dropdown-menu-label\" className={cn(\"ot-menu-label\", className)} {...props} />\n}\n\nfunction DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator data-slot=\"dropdown-menu-separator\" className={cn(\"ot-menu-sep\", className)} {...props} />\n}\n\n/**\n * Shortcut keys, each drawn as a base `ot-kbd` cap. A string of one word splits into\n * its characters (\"⌘D\" is two keys); a string with spaces splits on them (\"Shift Tab\").\n * A shortcut is a Latin key sequence, so it reads ⌘D left to right on a right-to-left page too.\n */\nfunction DropdownMenuShortcut({ className, children, ...props }: React.ComponentProps<\"span\">) {\n  const keys = typeof children === \"string\" ? (children.includes(\" \") ? children.split(\" \") : [...children]) : null\n  return (\n    <span data-slot=\"dropdown-menu-shortcut\" dir=\"ltr\" className={cn(\"ot-menu-keys\", className)} {...props}>\n      {keys ? keys.map((k, i) => <kbd key={i} className=\"ot-kbd\">{k}</kbd>) : children}\n    </span>\n  )\n}\n\n/** Opens something, so it carries the one → glyph. */\nfunction DropdownMenuSubTrigger({ className, hint, ...props }: React.ComponentProps<typeof MenuPrimitive.SubTrigger> & { hint?: string }) {\n  return <MenuPrimitive.SubTrigger data-slot=\"dropdown-menu-sub-trigger\" className={cn(\"ot-menu-item ot-menu-sub\", className)} {...hinted(hint)} {...props} />\n}\n\ntype SubPlace = Pick<React.ComponentProps<typeof MenuPrimitive.SubContent>, \"ref\" | \"sideOffset\" | \"alignOffset\" | \"collisionPadding\" | \"style\">\n\n/** The leader a dropped submenu hangs on: --ot-space-4. */\nconst DROP = 18\n\n/**\n * Where a submenu opens, for all three menus. Beside its item when it fits there, as on a desk.\n * On a narrow screen, where it fits on neither side, it drops open under its item instead, in\n * by the words' inset, the next level of an outline, and hangs from the item on a leader the way\n * the menu hangs from its trigger (data-drop; dropdown-menu.css draws it). Radix fixes a\n * submenu's side (right, or left in right-to-left), so the drop is made from the offsets alone:\n * back across the item, and down by its height. Measured as the submenu opens.\n */\nfunction useSubmenuPlace({ ref, sideOffset = 2, alignOffset = -8, collisionPadding = 20, style }: SubPlace) {\n  const look = React.useContext(MenuLook)\n  const [drop, setDrop] = React.useState<{ side: number; align: number } | null>(null)\n  const place = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      const item = node && document.getElementById(node.getAttribute(\"aria-labelledby\") ?? \"\")\n      if (!node || !item) return\n      const r = item.getBoundingClientRect()\n      const pad = typeof collisionPadding === \"number\" ? collisionPadding : Math.max(collisionPadding.left ?? 0, collisionPadding.right ?? 0)\n      const fits = Math.max(document.documentElement.clientWidth - r.right, r.left) - pad - sideOffset >= node.offsetWidth\n      item.toggleAttribute(\"data-drop\", !fits) // its arrow turns down\n      const next = fits ? null : { side: parseFloat(getComputedStyle(item).paddingInlineStart) - r.width, align: r.height }\n      setDrop((was) => (was?.side === next?.side && was?.align === next?.align ? was : next))\n    },\n    [sideOffset, collisionPadding],\n  )\n  return {\n    ref: useComposedRefs(place, ref),\n    sideOffset: drop ? drop.side : sideOffset,\n    alignOffset: drop ? drop.align : alignOffset,\n    collisionPadding,\n    style: drop ? ({ \"--ot-pop-gap\": `${DROP}px`, ...style } as React.CSSProperties) : style,\n    \"data-drop\": drop ? \"\" : undefined,\n    \"data-variant\": look === \"leaders\" ? look : undefined, // a submenu keeps the contents page's leaders\n  }\n}\n\nfunction DropdownMenuSubContent({ className, ref, sideOffset, alignOffset, collisionPadding, style, ...props }: React.ComponentProps<typeof MenuPrimitive.SubContent>) {\n  const place = useSubmenuPlace({ ref, sideOffset, alignOffset, collisionPadding, style })\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.SubContent data-slot=\"dropdown-menu-sub-content\" className={cn(\"ot-pop ot-menu\", className)} {...props} {...place} />\n    </MenuPrimitive.Portal>\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  useSubmenuPlace,\n  MenuLook,\n}\nexport type { MenuVariant }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/0nlytype/styles/dropdown-menu.css",
      "content": "@layer components {\n  /* ── ot-menu ── a list of words on the popover panel (ot-pop, from popover.css: the\n     leader, the in and out); the one you point at is marked with the highlighter.\n     Radix moves the highlight (data-highlighted) with the pointer and the arrow keys.\n     Dropdown menu, context menu and menubar all wear it. */\n  .ot-pop.ot-menu { padding: var(--ot-space-2) 0; min-width: 14rem; }\n  .ot-pop.ot-menu > * { animation: ot-arrive var(--ot-moderato) var(--ot-exhale) backwards; animation-delay: calc((sibling-index() - 1) * var(--ot-arpeggio)); }\n  .ot-pop.ot-menu[data-state=\"closed\"] > * { animation: none; }\n\n  .ot-menu-item {\n    position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: var(--ot-space-6);\n    margin: 0; padding: 0.34em var(--ot-space-5); cursor: pointer; user-select: none; outline: 0;\n    color: var(--ot-graphite);\n    background: linear-gradient(var(--ot-mark), var(--ot-mark)) no-repeat 100% 0 / 0% 100%;\n    /* The colour flips with the first frames of the stroke and back after the last, as the link's does, so the words are never pale on yellow. */\n    transition: background-size var(--ot-allegro) var(--ot-exhale), background-position 0s, color 0s linear var(--ot-allegro);\n  }\n  .ot-menu-item:is([data-highlighted], [data-force~=\"hover\"], .ot-menu-sub[data-state=\"open\"]) { background-position: 0 0; background-size: 100% 100%; color: var(--ot-on-mark); transition-delay: 0s; }\n  .ot-menu-item:is([dir=\"rtl\"], [dir=\"rtl\"] *) { background-position: 0 0; }\n  .ot-menu-item:is([dir=\"rtl\"], [dir=\"rtl\"] *):is([data-highlighted], [data-force~=\"hover\"], .ot-menu-sub[data-state=\"open\"]) { background-position: 100% 0; }\n\n  /* Checked, a sentence is yours: the expression italic. */\n  .ot-menu-item:is([data-state=\"checked\"]) {\n    font-family: var(--ot-expression); font-style: italic; font-size: calc(var(--ot-expression-scale) * 1em); color: var(--ot-ink);\n    line-height: calc(var(--ot-p-lh) / var(--ot-expression-scale)); padding-block: calc(0.34em / var(--ot-expression-scale)); /* the row keeps its height */\n  }\n  .ot-menu-item[data-state=\"checked\"][data-highlighted] { color: var(--ot-on-mark); }\n\n  /* A destructive item says so in its words; it only sits a little heavier. Red is for errors. */\n  .ot-menu-item[data-variant=\"destructive\"] { font-weight: 500; color: var(--ot-ink); }\n  .ot-menu-item[data-variant=\"destructive\"][data-highlighted] { color: var(--ot-on-mark); }\n\n  .ot-menu-item[data-disabled] { color: var(--ot-pencil); opacity: 0.55; cursor: not-allowed; pointer-events: none; }\n\n  /* Only a sub-trigger opens something, so only it carries the arrow. */\n  .ot-menu-sub::after { content: \"→\" / \"\"; font-size: 0.85em; color: var(--ot-pencil); }\n  .ot-menu-sub:is([dir=\"rtl\"], [dir=\"rtl\"] *)::after { content: \"←\" / \"\"; }\n  .ot-menu-sub:is([data-highlighted], [data-state=\"open\"])::after { color: inherit; }\n\n  /* On a narrow screen, with no room beside it, a submenu drops open under its item\n     (useSubmenuPlace), in by the words' inset: the next level of an outline. It hangs from\n     the item as the menu hangs from its trigger, a callout on a leader after Weingart: the dot\n     lands on the marked item's foot and the line drops, over a strip of paper that covers the\n     words it passes (and takes their taps). The item's arrow turns down while it is open. */\n  .ot-pop.ot-menu[data-drop] { border-top: var(--ot-pop-gap) solid var(--ot-paper); }\n  .ot-pop.ot-menu[data-drop]::before, .ot-pop.ot-menu[data-drop]::after { content: \"\"; position: absolute; pointer-events: none; background: var(--ot-ink); }\n  .ot-pop.ot-menu[data-drop]::before { inset-inline-start: var(--ot-pop-lead); bottom: 100%; width: var(--ot-hairline); height: var(--ot-pop-gap); transform-origin: 50% 0; }\n  .ot-pop.ot-menu[data-drop]::after { inset-inline-start: calc(var(--ot-pop-lead) - 2px); bottom: calc(100% + var(--ot-pop-gap) - 2.5px); width: 5px; height: 5px; border-radius: 50%; }\n  .ot-menu-sub[data-drop][data-state=\"open\"]::after { content: \"↓\" / \"\"; }\n  @media (forced-colors: active) {\n    /* The highlighter is a gradient, which forced colours drops; the system's own highlight stands in. Leaders and orbit mark by other means. */\n    .ot-pop.ot-menu:not([data-variant=\"leaders\"], [data-variant=\"orbit\"]) .ot-menu-item:is([data-highlighted], [data-force~=\"hover\"], .ot-menu-sub[data-state=\"open\"]) { forced-color-adjust: none; background: Highlight; color: HighlightText; }\n    .ot-pop.ot-menu[data-drop] { border-top-color: Canvas; }\n    .ot-pop.ot-menu[data-drop]::before, .ot-pop.ot-menu[data-drop]::after { background: CanvasText; }\n  }\n\n  .ot-menu-keys { display: inline-flex; align-items: baseline; gap: var(--ot-space-2); font-size: var(--ot-pp); color: var(--ot-pencil); font-variant-numeric: tabular-nums; }\n  .ot-menu-item:is([data-highlighted], [data-force~=\"hover\"]) :is(.ot-menu-keys, .ot-kbd) { color: inherit; }\n  /* On the highlighter the caps' corners are drawn in the text's own colour, as the rules follow the ink. */\n  .ot-menu-item:is([data-highlighted], [data-force~=\"hover\"]) .ot-kbd { --c: color-mix(in srgb, var(--ot-on-mark) 42%, transparent); }\n  .ot-pop.ot-menu:is([data-variant=\"leaders\"], [data-variant=\"orbit\"]) .ot-menu-item .ot-kbd { --c: var(--ot-rule-strong); }\n\n  .ot-menu-label { padding: var(--ot-space-2) var(--ot-space-5) var(--ot-space-1); font-size: var(--ot-pp); line-height: var(--ot-pp-lh); color: var(--ot-pencil); }\n  .ot-menu-sep { height: var(--ot-hairline); margin-block: var(--ot-space-2); background: var(--ot-rule); }\n\n  /* ── leaders ── a book's contents page: each word is joined to its keys by a row of leader\n     dots, the way a title is joined to its page number. The highlighter stands down; the\n     leader of the word you point at inks from the word to its keys (or to the line's end, where\n     there are none) and leaves toward them, as the highlighter's stroke does. Submenus keep it. */\n  .ot-pop.ot-menu[data-variant=\"leaders\"] .ot-menu-item { --ot-leader: transparent; gap: var(--ot-space-2); white-space: nowrap; background: none; transition: color var(--ot-allegro); }\n  .ot-pop.ot-menu[data-variant=\"leaders\"] .ot-menu-item:is(:has(.ot-menu-keys), .ot-menu-sub) { --ot-leader: var(--ot-rule-strong); }\n  .ot-pop.ot-menu[data-variant=\"leaders\"] .ot-menu-item::before {\n    content: \"\"; order: 1; flex: 1 0 var(--ot-space-6); align-self: baseline; height: 0.5em;\n    background: linear-gradient(var(--ot-ink), var(--ot-ink)) no-repeat 100% 0 / 0% 100%, var(--ot-leader);\n    mask: radial-gradient(circle at 50% 84%, #000 0.07em, transparent 0.1em) 0 0 / 0.45em 100% repeat-x;\n    transition: background-size var(--ot-allegro) var(--ot-exhale), background-position 0s;\n  }\n  .ot-pop.ot-menu[data-variant=\"leaders\"] .ot-menu-item > .ot-menu-keys { order: 2; }\n  .ot-pop.ot-menu[data-variant=\"leaders\"] .ot-menu-sub::after { order: 3; }\n  .ot-pop.ot-menu[data-variant=\"leaders\"] .ot-menu-item:is([data-highlighted], [data-force~=\"hover\"], .ot-menu-sub[data-state=\"open\"]) { color: var(--ot-ink); }\n  .ot-pop.ot-menu[data-variant=\"leaders\"] .ot-menu-item:is([data-highlighted], [data-force~=\"hover\"], .ot-menu-sub[data-state=\"open\"])::before { background-position: 0 0; background-size: 100% 100%; }\n  .ot-pop.ot-menu[data-variant=\"leaders\"]:is([dir=\"rtl\"], [dir=\"rtl\"] *) .ot-menu-item::before { background-position: 0 0; }\n  .ot-pop.ot-menu[data-variant=\"leaders\"]:is([dir=\"rtl\"], [dir=\"rtl\"] *) .ot-menu-item:is([data-highlighted], [data-force~=\"hover\"], .ot-menu-sub[data-state=\"open\"])::before { background-position: 100% 0; }\n  .ot-pop.ot-menu[data-variant=\"leaders\"] .ot-menu-item:is([data-highlighted], [data-force~=\"hover\"]) .ot-menu-keys { color: var(--ot-ink); }\n\n  /* ── marginalia ── after \"It has to be design.\", where small notes hang beside the big\n     words on hairline arrows: the word you point at is explained by its hint, set small in a\n     narrow ragged column beside the list at that word's height, on an arrow pointing back at\n     it. It glides from word to word. Where there's no room beside the list, it stands under\n     it as the list's caption, without the arrow. aria-hidden: each item carries its hint as its\n     description. */\n  .ot-menu-note {\n    position: absolute; inset-inline-start: calc(100% + var(--ot-space-3)); top: var(--ot-note-y, 0);\n    width: max-content; max-width: 13em; padding-block: var(--ot-space-1); padding-inline: calc(var(--ot-space-5) + var(--ot-space-2)) var(--ot-space-2);\n    translate: 0 calc(var(--ot-pp) * var(--ot-pp-lh) / -2 - var(--ot-space-1));\n    font-size: var(--ot-pp); line-height: var(--ot-pp-lh); color: var(--ot-graphite); text-wrap: pretty; background: var(--ot-paper); pointer-events: none;\n    transition: top var(--ot-moderato) var(--ot-exhale), opacity var(--ot-allegro);\n  }\n  .ot-menu-note::before, .ot-menu-note::after { content: \"\"; position: absolute; top: calc(var(--ot-space-1) + var(--ot-pp) * var(--ot-pp-lh) / 2); }\n  .ot-menu-note::before { inset-inline-start: 0; width: var(--ot-space-5); height: var(--ot-hairline); background: var(--ot-ink); }\n  .ot-menu-note::after { inset-inline-start: 1px; width: 5px; height: 5px; margin-top: -2.5px; border-inline-start: var(--ot-hairline) solid var(--ot-ink); border-block-end: var(--ot-hairline) solid var(--ot-ink); rotate: 45deg; }\n  .ot-menu-note:is([dir=\"rtl\"], [dir=\"rtl\"] *)::after { rotate: -45deg; }\n  .ot-menu-note[data-empty] { opacity: 0; }\n  .ot-menu-note[data-under] { top: calc(100% + var(--ot-space-3)); inset-inline-start: calc(var(--ot-space-5) - var(--ot-space-2)); translate: none; padding-inline-start: var(--ot-space-2); transition: opacity var(--ot-allegro); }\n  .ot-menu-note[data-under]::before, .ot-menu-note[data-under]::after { display: none; }\n\n  @media (forced-colors: active) {\n    .ot-pop.ot-menu[data-variant=\"leaders\"] .ot-menu-item::before { forced-color-adjust: none; background: linear-gradient(CanvasText, CanvasText) no-repeat 100% 0 / 0% 100%, GrayText; }\n    .ot-pop.ot-menu[data-variant=\"leaders\"] .ot-menu-item:not(:has(.ot-menu-keys), .ot-menu-sub)::before { background-color: transparent; }\n    .ot-pop.ot-menu[data-variant=\"leaders\"] .ot-menu-item:is([data-highlighted], [data-force~=\"hover\"])::before { background-position: 0 0; background-size: 100% 100%; }\n    .ot-menu-note::before { background: CanvasText; }\n    .ot-menu-note::after { border-color: CanvasText; }\n  }\n}\n",
      "type": "registry:file",
      "target": "styles/0nlytype/dropdown-menu.css"
    }
  ],
  "css": {
    "@import \"../styles/0nlytype/dropdown-menu.css\"": {}
  },
  "meta": {
    "movement": "IX",
    "underneath": "radix",
    "contract": "ot-menu"
  },
  "type": "registry:ui"
}