@adea-ai/ui 0.69.1 → 0.70.0

package/dist/components/ui/dropdown-menu/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","names":["DropdownMenu","KobalteDropdownMenu","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","popoverArrow","cn","props","_$createComponent","DropdownMenuTrigger","Trigger","DropdownMenuPortal","Portal","DropdownMenuContentProps","Content","hideArrow","DropdownMenuContent","local","rest","children","_$mergeProps","class","_$memo","Arrow","DropdownMenuItem","Item","variant","shortcut","_el$","_tmpl$","_$insert","DropdownMenuShortcut","_el$2","_tmpl$2","_$spread","DropdownMenuCheckboxItem","CheckboxItem","ItemIndicator","DropdownMenuRadioGroup","RadioGroup","DropdownMenuRadioItem","RadioItem","DropdownMenuLabel","GroupLabel","DropdownMenuGroup","Group","DropdownMenuSeparator","Separator","DropdownMenuSub","Sub","DropdownMenuSubTrigger","SubTrigger","DropdownMenuSubContent","SubContent","DropdownMenu","_$createComponent","KobalteDropdownMenu","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { DropdownMenu as KobalteDropdownMenu } from '@kobalte/core/dropdown-menu'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n  menuContentPadding,\n  menuItem,\n  menuLabel,\n  menuSeparator,\n  overlayMotion,\n  overlaySurface,\n  popoverArrow,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * DropdownMenu.\n *\n * A list of actions on a trigger. This is the right home for \"what can I do\n * with this thing\": rename, duplicate, export, delete. It is not a Select\n * (which holds a *value* the user is choosing) and not a Popover (which holds\n * arbitrary content).\n *\n * Kobalte supplies the full menu contract — arrow keys, typeahead, the roving\n * highlight, Escape to close and return focus — which is exactly what a\n * hand-rolled `div` with click handlers gets wrong.\n *\n * The `destructive` variant on an item is a *colour*, not a confirmation.\n * Pairing it with an AlertDialog is the caller's job.\n */\nexport function DropdownMenu(props: ComponentProps<typeof KobalteDropdownMenu>) {\n  return <KobalteDropdownMenu {...props} />\n}\n\nexport function DropdownMenuTrigger(props: ComponentProps<typeof KobalteDropdownMenu.Trigger>) {\n  return <KobalteDropdownMenu.Trigger {...props} />\n}\n\nexport function DropdownMenuPortal(props: ComponentProps<typeof KobalteDropdownMenu.Portal>) {\n  return <KobalteDropdownMenu.Portal {...props} />\n}\n\nexport type DropdownMenuContentProps = ComponentProps<typeof KobalteDropdownMenu.Content> & {\n  hideArrow?: boolean\n}\n\nexport function DropdownMenuContent(props: DropdownMenuContentProps) {\n  const [local, rest] = splitProps(props, ['class', 'hideArrow', 'children'])\n\n  return (\n    <KobalteDropdownMenu.Portal>\n      <KobalteDropdownMenu.Content\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      >\n        {!local.hideArrow && <KobalteDropdownMenu.Arrow aria-hidden=\"true\" class={popoverArrow} />}\n        {local.children}\n      </KobalteDropdownMenu.Content>\n    </KobalteDropdownMenu.Portal>\n  )\n}\n\nexport function DropdownMenuItem(\n  props: ComponentProps<typeof KobalteDropdownMenu.Item> & {\n    /** Colour the row as a destructive action. Confirm it separately. */\n    variant?: 'default' | 'destructive'\n    /** Draw a shortcut hint at the trailing edge of the row. */\n    shortcut?: string\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'variant', 'shortcut', 'children'])\n\n  return (\n    <KobalteDropdownMenu.Item\n      class={cn(\n        menuItem,\n        {\n          'text-destructive data-[highlighted]:bg-destructive-subtle data-[highlighted]:text-destructive':\n            local.variant === 'destructive',\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      {local.shortcut ? (\n        <span class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\">\n          {local.shortcut}\n        </span>\n      ) : null}\n    </KobalteDropdownMenu.Item>\n  )\n}\n\n/**\n * The chord drawn at a row's trailing edge.\n *\n * A component as well as the `shortcut` prop on an item, because a caller composing\n * a row by hand needs the same treatment — and because the alternative is every\n * caller inventing the same mono-and-dimmed span.\n */\nexport function DropdownMenuShortcut(props: ComponentProps<'span'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      class={cn('text-muted-foreground ms-auto font-mono text-2xs tracking-widest', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function DropdownMenuCheckboxItem(\n  props: ComponentProps<typeof KobalteDropdownMenu.CheckboxItem>\n) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteDropdownMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteDropdownMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Check class=\"size-4\" />\n      </KobalteDropdownMenu.ItemIndicator>\n    </KobalteDropdownMenu.CheckboxItem>\n  )\n}\n\nexport function DropdownMenuRadioGroup(\n  props: ComponentProps<typeof KobalteDropdownMenu.RadioGroup>\n) {\n  return <KobalteDropdownMenu.RadioGroup {...props} />\n}\n\nexport function DropdownMenuRadioItem(props: ComponentProps<typeof KobalteDropdownMenu.RadioItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteDropdownMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteDropdownMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Circle class=\"size-2 fill-current\" />\n      </KobalteDropdownMenu.ItemIndicator>\n    </KobalteDropdownMenu.RadioItem>\n  )\n}\n\nexport function DropdownMenuLabel(props: ComponentProps<typeof KobalteDropdownMenu.GroupLabel>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDropdownMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function DropdownMenuGroup(props: ComponentProps<typeof KobalteDropdownMenu.Group>) {\n  return <KobalteDropdownMenu.Group {...props} />\n}\n\nexport function DropdownMenuSeparator(props: ComponentProps<typeof KobalteDropdownMenu.Separator>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDropdownMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function DropdownMenuSub(props: ComponentProps<typeof KobalteDropdownMenu.Sub>) {\n  return <KobalteDropdownMenu.Sub {...props} />\n}\n\nexport function DropdownMenuSubTrigger(\n  props: ComponentProps<typeof KobalteDropdownMenu.SubTrigger>\n) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteDropdownMenu.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n      {local.children}\n      <ChevronRight class=\"ms-auto size-4\" />\n    </KobalteDropdownMenu.SubTrigger>\n  )\n}\n\nexport function DropdownMenuSubContent(\n  props: ComponentProps<typeof KobalteDropdownMenu.SubContent>\n) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteDropdownMenu.Portal>\n      <KobalteDropdownMenu.SubContent\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      />\n    </KobalteDropdownMenu.Portal>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.js","names":["DropdownMenu","KobalteDropdownMenu","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","popoverArrow","cn","props","_$createComponent","DropdownMenuTrigger","Trigger","DropdownMenuPortal","Portal","DropdownMenuContentProps","Content","hideArrow","portalMount","HTMLElement","DropdownMenuContent","local","rest","mount","children","_$mergeProps","class","_$memo","Arrow","DropdownMenuItem","Item","variant","shortcut","_el$","_tmpl$","_$insert","DropdownMenuShortcut","_el$2","_tmpl$2","_$spread","DropdownMenuCheckboxItem","CheckboxItem","ItemIndicator","DropdownMenuRadioGroup","RadioGroup","DropdownMenuRadioItem","RadioItem","DropdownMenuLabel","GroupLabel","DropdownMenuGroup","Group","DropdownMenuSeparator","Separator","DropdownMenuSub","Sub","DropdownMenuSubTrigger","SubTrigger","DropdownMenuSubContent","SubContent","DropdownMenu","_$createComponent","KobalteDropdownMenu","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { DropdownMenu as KobalteDropdownMenu } from '@kobalte/core/dropdown-menu'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n  menuContentPadding,\n  menuItem,\n  menuLabel,\n  menuSeparator,\n  overlayMotion,\n  overlaySurface,\n  popoverArrow,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * DropdownMenu.\n *\n * A list of actions on a trigger, with radio groups for persistent choices\n * that fit naturally in a compact menu. Use Select for form inputs whose\n * selected value needs the field-style control, and Popover for arbitrary\n * content.\n *\n * Kobalte supplies the full menu contract — arrow keys, typeahead, the roving\n * highlight, Escape to close and return focus — which is exactly what a\n * hand-rolled `div` with click handlers gets wrong.\n *\n * The `destructive` variant on an item is a *colour*, not a confirmation.\n * Pairing it with an AlertDialog is the caller's job.\n */\nexport function DropdownMenu(props: ComponentProps<typeof KobalteDropdownMenu>) {\n  return <KobalteDropdownMenu {...props} />\n}\n\nexport function DropdownMenuTrigger(props: ComponentProps<typeof KobalteDropdownMenu.Trigger>) {\n  return <KobalteDropdownMenu.Trigger {...props} />\n}\n\nexport function DropdownMenuPortal(props: ComponentProps<typeof KobalteDropdownMenu.Portal>) {\n  return <KobalteDropdownMenu.Portal {...props} />\n}\n\nexport type DropdownMenuContentProps = ComponentProps<typeof KobalteDropdownMenu.Content> & {\n  hideArrow?: boolean\n  /** Mount under an owner element such as a modal, keeping the menu in its accessible subtree. */\n  portalMount?: HTMLElement\n}\n\nexport function DropdownMenuContent(props: DropdownMenuContentProps) {\n  const [local, rest] = splitProps(props, ['class', 'hideArrow', 'children', 'portalMount'])\n\n  return (\n    <KobalteDropdownMenu.Portal mount={local.portalMount}>\n      <KobalteDropdownMenu.Content\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      >\n        {!local.hideArrow && <KobalteDropdownMenu.Arrow aria-hidden=\"true\" class={popoverArrow} />}\n        {local.children}\n      </KobalteDropdownMenu.Content>\n    </KobalteDropdownMenu.Portal>\n  )\n}\n\nexport function DropdownMenuItem(\n  props: ComponentProps<typeof KobalteDropdownMenu.Item> & {\n    /** Colour the row as a destructive action. Confirm it separately. */\n    variant?: 'default' | 'destructive'\n    /** Draw a shortcut hint at the trailing edge of the row. */\n    shortcut?: string\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'variant', 'shortcut', 'children'])\n\n  return (\n    <KobalteDropdownMenu.Item\n      class={cn(\n        menuItem,\n        {\n          'text-destructive data-[highlighted]:bg-destructive-subtle data-[highlighted]:text-destructive':\n            local.variant === 'destructive',\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      {local.shortcut ? (\n        <span class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\">\n          {local.shortcut}\n        </span>\n      ) : null}\n    </KobalteDropdownMenu.Item>\n  )\n}\n\n/**\n * The chord drawn at a row's trailing edge.\n *\n * A component as well as the `shortcut` prop on an item, because a caller composing\n * a row by hand needs the same treatment — and because the alternative is every\n * caller inventing the same mono-and-dimmed span.\n */\nexport function DropdownMenuShortcut(props: ComponentProps<'span'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      class={cn('text-muted-foreground ms-auto font-mono text-2xs tracking-widest', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function DropdownMenuCheckboxItem(\n  props: ComponentProps<typeof KobalteDropdownMenu.CheckboxItem>\n) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteDropdownMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteDropdownMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Check class=\"size-4\" />\n      </KobalteDropdownMenu.ItemIndicator>\n    </KobalteDropdownMenu.CheckboxItem>\n  )\n}\n\nexport function DropdownMenuRadioGroup(\n  props: ComponentProps<typeof KobalteDropdownMenu.RadioGroup>\n) {\n  return <KobalteDropdownMenu.RadioGroup {...props} />\n}\n\nexport function DropdownMenuRadioItem(props: ComponentProps<typeof KobalteDropdownMenu.RadioItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteDropdownMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteDropdownMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Circle class=\"size-2 fill-current\" />\n      </KobalteDropdownMenu.ItemIndicator>\n    </KobalteDropdownMenu.RadioItem>\n  )\n}\n\nexport function DropdownMenuLabel(props: ComponentProps<typeof KobalteDropdownMenu.GroupLabel>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDropdownMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function DropdownMenuGroup(props: ComponentProps<typeof KobalteDropdownMenu.Group>) {\n  return <KobalteDropdownMenu.Group {...props} />\n}\n\nexport function DropdownMenuSeparator(props: ComponentProps<typeof KobalteDropdownMenu.Separator>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDropdownMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function DropdownMenuSub(props: ComponentProps<typeof KobalteDropdownMenu.Sub>) {\n  return <KobalteDropdownMenu.Sub {...props} />\n}\n\nexport function DropdownMenuSubTrigger(\n  props: ComponentProps<typeof KobalteDropdownMenu.SubTrigger>\n) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteDropdownMenu.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n      {local.children}\n      <ChevronRight class=\"ms-auto size-4\" />\n    </KobalteDropdownMenu.SubTrigger>\n  )\n}\n\nexport function DropdownMenuSubContent(\n  props: ComponentProps<typeof KobalteDropdownMenu.SubContent>\n) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteDropdownMenu.Portal>\n      <KobalteDropdownMenu.SubContent\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      />\n    </KobalteDropdownMenu.Portal>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgBA,eAAae,OAAmD;CAC9E,OAAAC,gBAAQf,cAAwBc,KAAK;AACvC;AAEA,SAAgBE,oBAAoBF,OAA2D;CAC7F,OAAAC,gBAAQf,aAAoBiB,SAAYH,KAAK;AAC/C;AAEA,SAAgBI,mBAAmBJ,OAA0D;CAC3F,OAAAC,gBAAQf,aAAoBmB,QAAWL,KAAK;AAC9C;AAQA,SAAgBW,oBAAoBX,OAAiC;CACnE,MAAM,CAACY,OAAOC,QAAQtB,WAAWS,OAAO;EAAC;EAAS;EAAa;EAAY;CAAa,CAAC;CAEzF,OAAAC,gBACGf,aAAoBmB,QAAM;EAAA,IAACS,QAAK;GAAA,OAAEF,MAAMH;EAAW;EAAA,IAAAM,WAAA;GAAA,OAAAd,gBACjDf,aAAoBqB,SAAOS,WAAA,EAAA,KAAA,WAAA;IAAA,OACnBjB,GACLF,gBACAD,eACA,0FAAA,OAEAgB,MAAMK,KACR;GAAC,EAAA,GACGJ,MAAI,EAAA,IAAAE,WAAA;IAAA,OAAA,CAAAG,WAEPA,WAAA,CAAA,CAAA,CAACN,MAAMJ,SAAS,CAAA,CAAA,KAAAP,gBAAKf,aAAoBiC,OAAK;KAAA,eAAA;KAAA,SAAA;IAAuC,CAAA,CAAI,GAAAD,WACzFN,MAAMG,QAAQ,CAAA;GAAA,EAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAIvB;AAEA,SAAgBK,iBACdpB,OAMA;CACA,MAAM,CAACY,OAAOC,QAAQtB,WAAWS,OAAO;EAAC;EAAS;EAAW;EAAY;CAAU,CAAC;CAEpF,OAAAC,gBACGf,aAAoBmC,MAAIL,WAAA,EAAA,KAAA,WAAA;EAAA,OAChBjB,GACLN,UACA,EACE,iGACEmB,MAAMU,YAAY,cACtB,GACAV,MAAMK,KACR;CAAC,EAAA,GACGJ,MAAI,EAAA,IAAAE,WAAA;EAAA,OAAA,CAAAG,WAEPN,MAAMG,QAAQ,GAAAG,WACdA,WAAA,CAAA,CAAAN,MAAMW,QAAQ,CAAA,CAAA,WAAA;GAAA,IAAAC,OAAAC,OAAA;GAAAC,OAAAF,YAEVZ,MAAMW,QAAQ;GAAA,OAAAC;EAAA,EAAA,CAAA,IAEf,IAAI,CAAA;CAAA,EAAA,CAAA,CAAA;AAGd;;;;;;;;AASA,SAAgBG,qBAAqB3B,OAA+B;CAClE,MAAM,CAACY,OAAOC,QAAQtB,WAAWS,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAA4B,QAAAC,QAAA;EAAAC,OAAAF,OAAAZ,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWjB,GAAG,oEAAoEa,MAAMK,KAAK;EAAC,EAAA,GACtFJ,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAe;CAAA,EAAA,CAAA;AAGd;AAEA,SAAgBG,yBACd/B,OACA;CACA,MAAM,CAACY,OAAOC,QAAQtB,WAAWS,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,OAAAC,gBACGf,aAAoB8C,cAAYhB,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQjB,GAAGN,UAAU,QAAQmB,MAAMK,KAAK;CAAC,EAAA,GAAMJ,MAAI,EAAA,IAAAE,WAAA;EAAA,OAAA,CAAAG,WACjFN,MAAMG,QAAQ,GAAAd,gBACdf,aAAoB+C,eAAa;GAAA,SAAA;GAAA,IAAAlB,WAAA;IAAA,OAAAd,gBAC/Bd,OAAK,EAAA,SAAA,SAAA,CAAA;GAAA;EAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAId;AAEA,SAAgB+C,uBACdlC,OACA;CACA,OAAAC,gBAAQf,aAAoBiD,YAAenC,KAAK;AAClD;AAEA,SAAgBoC,sBAAsBpC,OAA6D;CACjG,MAAM,CAACY,OAAOC,QAAQtB,WAAWS,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,OAAAC,gBACGf,aAAoBmD,WAASrB,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQjB,GAAGN,UAAU,QAAQmB,MAAMK,KAAK;CAAC,EAAA,GAAMJ,MAAI,EAAA,IAAAE,WAAA;EAAA,OAAA,CAAAG,WAC9EN,MAAMG,QAAQ,GAAAd,gBACdf,aAAoB+C,eAAa;GAAA,SAAA;GAAA,IAAAlB,WAAA;IAAA,OAAAd,gBAC/BZ,QAAM,EAAA,SAAA,sBAAA,CAAA;GAAA;EAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAIf;AAEA,SAAgBiD,kBAAkBtC,OAA8D;CAC9F,MAAM,CAACY,OAAOC,QAAQtB,WAAWS,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAC,gBAAQf,aAAoBqD,YAAUvB,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQjB,GAAGL,WAAWkB,MAAMK,KAAK;CAAC,EAAA,GAAMJ,IAAI,CAAA;AACpF;AAEA,SAAgB2B,kBAAkBxC,OAAyD;CACzF,OAAAC,gBAAQf,aAAoBuD,OAAUzC,KAAK;AAC7C;AAEA,SAAgB0C,sBAAsB1C,OAA6D;CACjG,MAAM,CAACY,OAAOC,QAAQtB,WAAWS,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAC,gBAAQf,aAAoByD,WAAS3B,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQjB,GAAGJ,eAAeiB,MAAMK,KAAK;CAAC,EAAA,GAAMJ,IAAI,CAAA;AACvF;AAEA,SAAgB+B,gBAAgB5C,OAAuD;CACrF,OAAAC,gBAAQf,aAAoB2D,KAAQ7C,KAAK;AAC3C;AAEA,SAAgB8C,uBACd9C,OACA;CACA,MAAM,CAACY,OAAOC,QAAQtB,WAAWS,OAAO,CAAC,SAAS,UAAU,CAAC;CAE7D,OAAAC,gBACGf,aAAoB6D,YAAU/B,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQjB,GAAGN,UAAUmB,MAAMK,KAAK;CAAC,EAAA,GAAMJ,MAAI,EAAA,IAAAE,WAAA;EAAA,OAAA,CAAAG,WACvEN,MAAMG,QAAQ,GAAAd,gBACdb,cAAY,EAAA,SAAA,iBAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAGnB;AAEA,SAAgB4D,uBACdhD,OACA;CACA,MAAM,CAACY,OAAOC,QAAQtB,WAAWS,OAAO,CAAC,OAAO,CAAC;CAEjD,OAAAC,gBACGf,aAAoBmB,QAAM,EAAA,IAAAU,WAAA;EAAA,OAAAd,gBACxBf,aAAoB+D,YAAUjC,WAAA,EAAA,KAAA,WAAA;GAAA,OACtBjB,GACLF,gBACAD,eACA,yFAAA,OAEAgB,MAAMK,KACR;EAAC,EAAA,GACGJ,IAAI,CAAA;CAAA,EAAA,CAAA;AAIhB"}

package/dist/r/appearance-editor.json

@@ -10,9 +10,9 @@
   ],
   "registryDependencies": [
     "@adea-ai/ui/button",
+    "@adea-ai/ui/dropdown-menu",
     "@adea-ai/ui/input",
     "@adea-ai/ui/popover",
-    "@adea-ai/ui/select",
     "@adea-ai/ui/switch",
     "lib"
   ],

package/dist/r/registry.json

@@ -1652,9 +1652,9 @@
       ],
       "registryDependencies": [
         "@adea-ai/ui/button",
+        "@adea-ai/ui/dropdown-menu",
         "@adea-ai/ui/input",
         "@adea-ai/ui/popover",
-        "@adea-ai/ui/select",
         "@adea-ai/ui/switch",
         "lib"
       ],

package/dist/r/src/components/composites/appearance-editor/appearance-editor.tsx

@@ -208,7 +208,7 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
   )
 }
 
-/** Modal anchoring/dismissal and nested-listbox behavior come from Kobalte.
+/** Modal anchoring/dismissal and nested-menu behavior come from Kobalte.
  * Its measured available height also bounds scrolling, keeping footer actions
  * reachable when a narrow popup begins below its trigger. */
 export function AppearancePopover(props: AppearancePopoverProps) {

package/dist/r/src/components/composites/appearance-editor/appearance-rows.tsx

@@ -24,18 +24,33 @@
 // Retains the compact divided row and palette-preview selector from the pinned
 // Zeron/Adea composition; Kobalte owns option navigation and nested dismissal.
 import type { AdeaTheme, AdeaThemeRecord } from '@adea-ai/themes'
-import { Show, createMemo, createSignal, type JSX } from 'solid-js'
-import { Palette } from 'lucide-solid'
+import { For, Show, createMemo, createSignal, onCleanup, type JSX } from 'solid-js'
+import { ChevronDown, Palette } from 'lucide-solid'
 import { cn } from '../../../lib/utils'
+import { Button } from '../../ui/button/button'
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../../ui/select/select'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '../../ui/dropdown-menu/dropdown-menu'
 import { PalettePreview } from './theme-preview'
 
+const POINTER_FOCUS_TARGET_SELECTOR =
+  'a[href], area[href], button, input, select, textarea, iframe, [tabindex], [contenteditable], details > summary:first-of-type'
+
+function isTabStop(element: HTMLElement) {
+  return (
+    (element.tabIndex >= 0 ||
+      (element.matches('details > summary:first-of-type') && !element.hasAttribute('tabindex'))) &&
+    !element.matches(':disabled') &&
+    element.getAttribute('aria-disabled') !== 'true' &&
+    element.closest('[hidden], [inert], [aria-hidden="true"]') === null &&
+    element.getClientRects().length > 0
+  )
+}
+
 export function SettingsRow(props: {
   title: string
   icon: JSX.Element
@@ -66,6 +81,13 @@ export function SettingsRow(props: {
   )
 }
 
+/**
+ * A compact persistent theme choice. Kobalte handles menu navigation and
+ * dismissal; this row moves Tab to the adjacent browser-reported stop because
+ * menus consume Tab by default. Enumerating elements and checking their native
+ * tabIndex keeps details summaries in the order while preserving explicit
+ * tabindex overrides.
+ */
 export function ThemeRow(props: {
   appearance: 'light' | 'dark'
   selectedId: string
@@ -75,6 +97,15 @@ export function ThemeRow(props: {
   onSelect: (id: string) => void
 }) {
   const [portalMount, setPortalMount] = createSignal<HTMLDivElement>()
+  const [triggerElement, setTriggerElement] = createSignal<HTMLButtonElement>()
+  const [menuOpen, setMenuOpen] = createSignal(false)
+  const [focusOutsideTarget, setFocusOutsideTarget] = createSignal<HTMLElement>()
+  const [restoreTriggerFocus, setRestoreTriggerFocus] = createSignal(false)
+  let focusTargetAfterTab: HTMLElement | undefined
+  let focusLifecycleVersion = 0
+  onCleanup(() => {
+    focusLifecycleVersion += 1
+  })
   const options = createMemo(() =>
     props.themes.filter((theme) => theme.appearance === props.appearance)
   )
@@ -84,38 +115,204 @@ export function ThemeRow(props: {
       options().find((theme) => theme.id === props.preview.id)
   )
   const label = () => (props.appearance === 'light' ? 'Light theme' : 'Dark theme')
+  const closeMenu = () => {
+    if (menuOpen()) focusLifecycleVersion += 1
+    setMenuOpen(false)
+  }
+  const moveFocusOnTab = (event: KeyboardEvent) => {
+    if (event.key !== 'Tab' || event.isComposing) return
+
+    const trigger = triggerElement()
+    if (!trigger) return
+    const parentDialog = portalMount()?.closest<HTMLElement>('[role="dialog"]')
+    const focusScope = parentDialog ?? portalMount()?.ownerDocument.body
+    if (!focusScope) return
+
+    const focusStops = Array.from(focusScope.querySelectorAll<HTMLElement>('*')).filter(
+      (element) =>
+        isTabStop(element) &&
+        element.closest('[role="menu"], [hidden], [inert], [aria-hidden="true"]') === null
+    )
+    const orderedFocusStops = [
+      ...focusStops
+        .filter((element) => element.tabIndex > 0)
+        .toSorted((a, b) => a.tabIndex - b.tabIndex),
+      ...focusStops.filter((element) => element.tabIndex <= 0),
+    ]
+    const triggerIndex = orderedFocusStops.indexOf(trigger)
+    const direction = event.shiftKey ? -1 : 1
+    const adjacent =
+      orderedFocusStops[triggerIndex + direction] ??
+      (parentDialog ? (direction > 0 ? orderedFocusStops[0] : orderedFocusStops.at(-1)) : undefined)
+
+    event.stopPropagation()
+    setRestoreTriggerFocus(false)
+    if (adjacent) {
+      event.preventDefault()
+      focusTargetAfterTab = adjacent
+      setFocusOutsideTarget(adjacent)
+      closeMenu()
+      adjacent.focus({ preventScroll: true })
+    } else {
+      focusTargetAfterTab = undefined
+      setFocusOutsideTarget(undefined)
+      closeMenu()
+    }
+  }
   return (
     <SettingsRow title={label()} icon={<Palette />}>
       <div ref={setPortalMount}>
-        <Select
+        <DropdownMenu
           modal={false}
-          options={options()}
-          value={selected()}
-          optionValue="id"
-          optionTextValue="name"
-          disabled={props.disabled || options().length === 0}
-          onChange={(theme) => {
-            if (theme) props.onSelect(theme.id)
+          open={menuOpen()}
+          onOpenChange={(open) => {
+            if (open !== menuOpen()) focusLifecycleVersion += 1
+            setMenuOpen(open)
+            if (open) {
+              focusTargetAfterTab = undefined
+              setFocusOutsideTarget(undefined)
+              setRestoreTriggerFocus(false)
+            }
           }}
-          itemComponent={(item) => (
-            <SelectItem item={item.item}>
-              <PalettePreview theme={item.item.rawValue} />
-              {item.item.rawValue.name}
-            </SelectItem>
-          )}
         >
-          <SelectTrigger size="sm" aria-label={label()} class="w-full sm:w-52">
-            <SelectValue>
-              {() => (
-                <>
-                  <PalettePreview theme={props.preview} />
-                  <span>{selected()?.name ?? props.preview.name}</span>
-                </>
-              )}
-            </SelectValue>
-          </SelectTrigger>
-          <SelectContent portalMount={portalMount()} />
-        </Select>
+          <DropdownMenuTrigger
+            ref={setTriggerElement}
+            as={Button}
+            variant="outline"
+            size="sm"
+            aria-label={label()}
+            disabled={props.disabled || options().length === 0}
+            class="w-full justify-between sm:w-52"
+          >
+            <span class="flex min-w-0 flex-1 items-center gap-2">
+              <PalettePreview theme={props.preview} />
+              <span class="min-w-0 flex-1 truncate">{selected()?.name ?? props.preview.name}</span>
+            </span>
+            <ChevronDown aria-hidden="true" class="shrink-0 text-muted-foreground" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            portalMount={portalMount()}
+            class="max-h-(--kb-popper-content-available-height) w-(--kb-popper-anchor-width) min-w-32 overflow-x-hidden overflow-y-auto"
+            onInteractOutside={(event) => {
+              if (event.detail.originalEvent.type !== 'pointerdown') return
+              const parentDialog = portalMount()?.closest<HTMLElement>('[role="dialog"]')
+              const focusScope = parentDialog ?? portalMount()?.ownerDocument.body
+              const target = event.detail.originalEvent.target
+              if (!(target instanceof Element) || !focusScope?.contains(target)) return
+
+              const focusTarget = target.closest<HTMLElement>(POINTER_FOCUS_TARGET_SELECTOR)
+              if (focusTarget && isTabStop(focusTarget)) {
+                setRestoreTriggerFocus(false)
+                setFocusOutsideTarget(focusTarget)
+              } else {
+                setRestoreTriggerFocus(true)
+              }
+            }}
+            onFocusOutside={(event) => {
+              // The containing dialog or document body can briefly reclaim
+              // focus when the menu opens. Keep that handoff from dismissing
+              // it; focus moving to another descendant still closes the menu.
+              const parentDialog = portalMount()?.closest<HTMLElement>('[role="dialog"]')
+              const focusScope = parentDialog ?? portalMount()?.ownerDocument.body
+              const target = event.detail.originalEvent.target
+              if (target === focusScope) {
+                event.preventDefault()
+              } else if (target instanceof HTMLElement && focusScope?.contains(target)) {
+                setRestoreTriggerFocus(false)
+                setFocusOutsideTarget(target)
+              }
+            }}
+            onEscapeKeyDown={() => setRestoreTriggerFocus(true)}
+            onCloseAutoFocus={(event) => {
+              // A prior menu instance can finish its focus cleanup after this
+              // row has already reopened. Do not let that cleanup steal focus.
+              if (menuOpen()) {
+                event.preventDefault()
+                return
+              }
+
+              const lifecycleVersion = focusLifecycleVersion
+              const shouldRestore = restoreTriggerFocus()
+              const focusTarget = focusTargetAfterTab ?? focusOutsideTarget()
+              focusTargetAfterTab = undefined
+              setFocusOutsideTarget(undefined)
+              setRestoreTriggerFocus(false)
+              if (shouldRestore) {
+                // The saved focus may be the containing dialog rather than
+                // the trigger when WebKit opens this menu from a pointer click.
+                event.preventDefault()
+                triggerElement()?.focus({ preventScroll: true })
+                return
+              }
+
+              const parentDialog = portalMount()?.closest<HTMLElement>('[role="dialog"]')
+              const focusScope = parentDialog ?? portalMount()?.ownerDocument.body
+              if (focusTarget?.isConnected && focusScope?.contains(focusTarget)) {
+                // Preserve the intended in-scope destination across
+                // Kobalte's deferred stale-focus restore.
+                event.preventDefault()
+                queueMicrotask(() => {
+                  if (lifecycleVersion !== focusLifecycleVersion || menuOpen()) return
+
+                  const activeElement = document.activeElement
+                  const isMenuFocus =
+                    activeElement instanceof HTMLElement &&
+                    activeElement.closest('[role="menu"]') !== null
+                  const isTriggerFocus = activeElement === triggerElement()
+                  if (
+                    activeElement !== focusTarget &&
+                    (activeElement === document.body ||
+                      activeElement === focusScope ||
+                      isMenuFocus ||
+                      isTriggerFocus)
+                  ) {
+                    focusTarget.focus({ preventScroll: true })
+                  }
+                })
+                return
+              }
+
+              const activeElement = document.activeElement
+              if (
+                focusScope &&
+                activeElement instanceof HTMLElement &&
+                activeElement !== focusScope &&
+                focusScope.contains(activeElement) &&
+                activeElement.closest('[role="menu"]') === null
+              ) {
+                // Preserve a real focus target in this scope instead of
+                // restoring the stale element captured when the menu mounted. A
+                // focused menu item is about to unmount, so Kobalte must restore
+                // focus to the trigger instead.
+                event.preventDefault()
+              }
+            }}
+          >
+            <DropdownMenuRadioGroup
+              value={selected()?.id ?? ''}
+              aria-label={`${label()} options`}
+              on:keydown={moveFocusOnTab}
+              onChange={(id) => {
+                if (!props.disabled && typeof id === 'string') props.onSelect(id)
+              }}
+            >
+              <For each={options()}>
+                {(theme) => (
+                  <DropdownMenuRadioItem
+                    value={theme.id}
+                    textValue={theme.name}
+                    closeOnSelect={true}
+                    disabled={props.disabled}
+                    onSelect={() => setRestoreTriggerFocus(true)}
+                  >
+                    <PalettePreview theme={theme} />
+                    <span class="min-w-0 flex-1 truncate">{theme.name}</span>
+                  </DropdownMenuRadioItem>
+                )}
+              </For>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
     </SettingsRow>
   )

package/dist/r/src/components/ui/dropdown-menu/dropdown-menu.tsx

@@ -16,10 +16,10 @@ import { cn } from '../../../lib/utils'
 /**
  * DropdownMenu.
  *
- * A list of actions on a trigger. This is the right home for "what can I do
- * with this thing": rename, duplicate, export, delete. It is not a Select
- * (which holds a *value* the user is choosing) and not a Popover (which holds
- * arbitrary content).
+ * A list of actions on a trigger, with radio groups for persistent choices
+ * that fit naturally in a compact menu. Use Select for form inputs whose
+ * selected value needs the field-style control, and Popover for arbitrary
+ * content.
  *
  * Kobalte supplies the full menu contract — arrow keys, typeahead, the roving
  * highlight, Escape to close and return focus — which is exactly what a
@@ -42,13 +42,15 @@ export function DropdownMenuPortal(props: ComponentProps<typeof KobalteDropdownM
 
 export type DropdownMenuContentProps = ComponentProps<typeof KobalteDropdownMenu.Content> & {
   hideArrow?: boolean
+  /** Mount under an owner element such as a modal, keeping the menu in its accessible subtree. */
+  portalMount?: HTMLElement
 }
 
 export function DropdownMenuContent(props: DropdownMenuContentProps) {
-  const [local, rest] = splitProps(props, ['class', 'hideArrow', 'children'])
+  const [local, rest] = splitProps(props, ['class', 'hideArrow', 'children', 'portalMount'])
 
   return (
-    <KobalteDropdownMenu.Portal>
+    <KobalteDropdownMenu.Portal mount={local.portalMount}>
       <KobalteDropdownMenu.Content
         class={cn(
           overlaySurface,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.69.1",
+  "version": "0.70.0",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

package/registry.json

@@ -1652,9 +1652,9 @@
       ],
       "registryDependencies": [
         "@adea-ai/ui/button",
+        "@adea-ai/ui/dropdown-menu",
         "@adea-ai/ui/input",
         "@adea-ai/ui/popover",
-        "@adea-ai/ui/select",
         "@adea-ai/ui/switch",
         "lib"
       ],

package/src/components/composites/appearance-editor/appearance-editor.tsx

@@ -208,7 +208,7 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
   )
 }
 
-/** Modal anchoring/dismissal and nested-listbox behavior come from Kobalte.
+/** Modal anchoring/dismissal and nested-menu behavior come from Kobalte.
  * Its measured available height also bounds scrolling, keeping footer actions
  * reachable when a narrow popup begins below its trigger. */
 export function AppearancePopover(props: AppearancePopoverProps) {