@adea-ai/ui 0.99.2 → 0.99.3

package/dist/components/ui/context-menu/context-menu.d.ts

@@ -30,6 +30,14 @@ export declare function ContextMenuItem(props: ComponentProps<typeof KobalteCont
 export declare function ContextMenuCheckboxItem(props: ComponentProps<typeof KobalteContextMenu.CheckboxItem>): import("solid-js").JSX.Element;
 export declare function ContextMenuRadioGroup(props: ComponentProps<typeof KobalteContextMenu.RadioGroup>): import("solid-js").JSX.Element;
 export declare function ContextMenuRadioItem(props: ComponentProps<typeof KobalteContextMenu.RadioItem>): import("solid-js").JSX.Element;
+/**
+ * The caption of a `ContextMenuGroup`, and that group's accessible name. It must be a
+ * child of the group it names: Kobalte reads the group from context, so a label
+ * placed directly in the content throws `useMenuGroupContext must be used within
+ * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+ * label and its items in a group anyway — the grouping is what a screen reader
+ * announces.
+ */
 export declare function ContextMenuLabel(props: ComponentProps<typeof KobalteContextMenu.GroupLabel>): import("solid-js").JSX.Element;
 export declare function ContextMenuGroup(props: ComponentProps<typeof KobalteContextMenu.Group>): import("solid-js").JSX.Element;
 export declare function ContextMenuSeparator(props: ComponentProps<typeof KobalteContextMenu.Separator>): import("solid-js").JSX.Element;

package/dist/components/ui/context-menu/context-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/context-menu/context-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAE9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAa9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,kCAE3E;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,kCAE1F;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,kCAiB1F;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,GAAG;IACtD,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,kCAiCF;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,YAAY,CAAC,kCAY9D;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAEhG;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,SAAS,CAAC,kCAW9F;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAG3F;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,kCAEtF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,SAAS,CAAC,kCAG9F;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG,CAAC,kCAElF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAShG;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAiBhG"}
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/context-menu/context-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAE9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAa9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,kCAE3E;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,kCAE1F;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,kCAiB1F;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,GAAG;IACtD,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,kCAiCF;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,YAAY,CAAC,kCAY9D;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAEhG;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,SAAS,CAAC,kCAW9F;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAG3F;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,kCAEtF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,SAAS,CAAC,kCAG9F;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,GAAG,CAAC,kCAElF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAShG;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,kCAiBhG"}

package/dist/components/ui/context-menu/context-menu.js

@@ -85,6 +85,14 @@ function ContextMenuRadioItem(props) {
 		})];
 	} }));
 }
+/**
+* The caption of a `ContextMenuGroup`, and that group's accessible name. It must be a
+* child of the group it names: Kobalte reads the group from context, so a label
+* placed directly in the content throws `useMenuGroupContext must be used within
+* a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+* label and its items in a group anyway — the grouping is what a screen reader
+* announces.
+*/
 function ContextMenuLabel(props) {
 	const [local, rest] = splitProps(props, ["class"]);
 	return createComponent(ContextMenu.GroupLabel, mergeProps({ get ["class"]() {

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

@@ -1 +1 @@
-{"version":3,"file":"context-menu.js","names":["ContextMenu","KobalteContextMenu","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","destructiveMenuItem","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","cn","props","_$createComponent","ContextMenuTrigger","Trigger","ContextMenuContent","Content","local","rest","Portal","children","_$mergeProps","class","ContextMenuItem","Item","variant","shortcut","keyshortcuts","aria-keyshortcuts","_$memo","_el$","_tmpl$","_$insert","ContextMenuCheckboxItem","CheckboxItem","ItemIndicator","ContextMenuRadioGroup","RadioGroup","ContextMenuRadioItem","RadioItem","ContextMenuLabel","GroupLabel","ContextMenuGroup","Group","ContextMenuSeparator","Separator","ContextMenuSub","Sub","ContextMenuSubTrigger","SubTrigger","ContextMenuSubContent","SubContent","ContextMenu","_$createComponent","KobalteContextMenu","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/context-menu/context-menu.tsx"],"sourcesContent":["import { ContextMenu as KobalteContextMenu } from '@kobalte/core/context-menu'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n  menuContentPadding,\n  destructiveMenuItem,\n  menuItem,\n  menuLabel,\n  menuSeparator,\n  overlayMotion,\n  overlaySurface,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * ContextMenu.\n *\n * The same actions as DropdownMenu, opened by right-click. The trigger is the\n * region the menu belongs to — a file row, a canvas, a code block — and the\n * menu opens at the pointer.\n *\n * The accessibility rule for this component is not about its own markup: a\n * context menu must never hold the *only* route to an action, because a\n * right-click is unavailable on touch and undiscoverable on a trackpad. Every\n * item here should also appear somewhere reachable, usually a DropdownMenu on\n * the same row.\n */\nexport function ContextMenu(props: ComponentProps<typeof KobalteContextMenu>) {\n  return <KobalteContextMenu {...props} />\n}\n\nexport function ContextMenuTrigger(props: ComponentProps<typeof KobalteContextMenu.Trigger>) {\n  return <KobalteContextMenu.Trigger {...props} />\n}\n\nexport function ContextMenuContent(props: ComponentProps<typeof KobalteContextMenu.Content>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteContextMenu.Portal>\n      <KobalteContextMenu.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    </KobalteContextMenu.Portal>\n  )\n}\n\nexport function ContextMenuItem(\n  props: ComponentProps<typeof KobalteContextMenu.Item> & {\n    variant?: 'default' | 'destructive'\n    shortcut?: string\n    /**\n     * The parseable chord behind `shortcut`, e.g. `Meta+C`. The drawn glyph is\n     * `aria-hidden` — reading it out would pollute the item's accessible name —\n     * so this is what assistive technology announces instead. Supply it\n     * whenever `shortcut` is drawn.\n     */\n    keyshortcuts?: string\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'shortcut',\n    'keyshortcuts',\n    'children',\n  ])\n\n  return (\n    <KobalteContextMenu.Item\n      class={cn(\n        menuItem,\n        {\n          [destructiveMenuItem]: local.variant === 'destructive',\n        },\n        local.class\n      )}\n      aria-keyshortcuts={local.keyshortcuts}\n      {...rest}\n    >\n      {local.children}\n      {local.shortcut ? (\n        <span\n          aria-hidden=\"true\"\n          class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\"\n        >\n          {local.shortcut}\n        </span>\n      ) : null}\n    </KobalteContextMenu.Item>\n  )\n}\n\nexport function ContextMenuCheckboxItem(\n  props: ComponentProps<typeof KobalteContextMenu.CheckboxItem>\n) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteContextMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteContextMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Check class=\"size-4\" />\n      </KobalteContextMenu.ItemIndicator>\n    </KobalteContextMenu.CheckboxItem>\n  )\n}\n\nexport function ContextMenuRadioGroup(props: ComponentProps<typeof KobalteContextMenu.RadioGroup>) {\n  return <KobalteContextMenu.RadioGroup {...props} />\n}\n\nexport function ContextMenuRadioItem(props: ComponentProps<typeof KobalteContextMenu.RadioItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteContextMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteContextMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Circle class=\"size-2 fill-current\" />\n      </KobalteContextMenu.ItemIndicator>\n    </KobalteContextMenu.RadioItem>\n  )\n}\n\nexport function ContextMenuLabel(props: ComponentProps<typeof KobalteContextMenu.GroupLabel>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteContextMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function ContextMenuGroup(props: ComponentProps<typeof KobalteContextMenu.Group>) {\n  return <KobalteContextMenu.Group {...props} />\n}\n\nexport function ContextMenuSeparator(props: ComponentProps<typeof KobalteContextMenu.Separator>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteContextMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function ContextMenuSub(props: ComponentProps<typeof KobalteContextMenu.Sub>) {\n  return <KobalteContextMenu.Sub {...props} />\n}\n\nexport function ContextMenuSubTrigger(props: ComponentProps<typeof KobalteContextMenu.SubTrigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteContextMenu.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n      {local.children}\n      <ChevronRight class=\"ms-auto size-4\" />\n    </KobalteContextMenu.SubTrigger>\n  )\n}\n\nexport function ContextMenuSubContent(props: ComponentProps<typeof KobalteContextMenu.SubContent>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteContextMenu.Portal>\n      <KobalteContextMenu.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    </KobalteContextMenu.Portal>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"context-menu.js","names":["ContextMenu","KobalteContextMenu","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","destructiveMenuItem","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","cn","props","_$createComponent","ContextMenuTrigger","Trigger","ContextMenuContent","Content","local","rest","Portal","children","_$mergeProps","class","ContextMenuItem","Item","variant","shortcut","keyshortcuts","aria-keyshortcuts","_$memo","_el$","_tmpl$","_$insert","ContextMenuCheckboxItem","CheckboxItem","ItemIndicator","ContextMenuRadioGroup","RadioGroup","ContextMenuRadioItem","RadioItem","ContextMenuLabel","GroupLabel","ContextMenuGroup","Group","ContextMenuSeparator","Separator","ContextMenuSub","Sub","ContextMenuSubTrigger","SubTrigger","ContextMenuSubContent","SubContent","ContextMenu","_$createComponent","KobalteContextMenu","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/context-menu/context-menu.tsx"],"sourcesContent":["import { ContextMenu as KobalteContextMenu } from '@kobalte/core/context-menu'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n  menuContentPadding,\n  destructiveMenuItem,\n  menuItem,\n  menuLabel,\n  menuSeparator,\n  overlayMotion,\n  overlaySurface,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * ContextMenu.\n *\n * The same actions as DropdownMenu, opened by right-click. The trigger is the\n * region the menu belongs to — a file row, a canvas, a code block — and the\n * menu opens at the pointer.\n *\n * The accessibility rule for this component is not about its own markup: a\n * context menu must never hold the *only* route to an action, because a\n * right-click is unavailable on touch and undiscoverable on a trackpad. Every\n * item here should also appear somewhere reachable, usually a DropdownMenu on\n * the same row.\n */\nexport function ContextMenu(props: ComponentProps<typeof KobalteContextMenu>) {\n  return <KobalteContextMenu {...props} />\n}\n\nexport function ContextMenuTrigger(props: ComponentProps<typeof KobalteContextMenu.Trigger>) {\n  return <KobalteContextMenu.Trigger {...props} />\n}\n\nexport function ContextMenuContent(props: ComponentProps<typeof KobalteContextMenu.Content>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteContextMenu.Portal>\n      <KobalteContextMenu.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    </KobalteContextMenu.Portal>\n  )\n}\n\nexport function ContextMenuItem(\n  props: ComponentProps<typeof KobalteContextMenu.Item> & {\n    variant?: 'default' | 'destructive'\n    shortcut?: string\n    /**\n     * The parseable chord behind `shortcut`, e.g. `Meta+C`. The drawn glyph is\n     * `aria-hidden` — reading it out would pollute the item's accessible name —\n     * so this is what assistive technology announces instead. Supply it\n     * whenever `shortcut` is drawn.\n     */\n    keyshortcuts?: string\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'shortcut',\n    'keyshortcuts',\n    'children',\n  ])\n\n  return (\n    <KobalteContextMenu.Item\n      class={cn(\n        menuItem,\n        {\n          [destructiveMenuItem]: local.variant === 'destructive',\n        },\n        local.class\n      )}\n      aria-keyshortcuts={local.keyshortcuts}\n      {...rest}\n    >\n      {local.children}\n      {local.shortcut ? (\n        <span\n          aria-hidden=\"true\"\n          class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\"\n        >\n          {local.shortcut}\n        </span>\n      ) : null}\n    </KobalteContextMenu.Item>\n  )\n}\n\nexport function ContextMenuCheckboxItem(\n  props: ComponentProps<typeof KobalteContextMenu.CheckboxItem>\n) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteContextMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteContextMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Check class=\"size-4\" />\n      </KobalteContextMenu.ItemIndicator>\n    </KobalteContextMenu.CheckboxItem>\n  )\n}\n\nexport function ContextMenuRadioGroup(props: ComponentProps<typeof KobalteContextMenu.RadioGroup>) {\n  return <KobalteContextMenu.RadioGroup {...props} />\n}\n\nexport function ContextMenuRadioItem(props: ComponentProps<typeof KobalteContextMenu.RadioItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteContextMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteContextMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Circle class=\"size-2 fill-current\" />\n      </KobalteContextMenu.ItemIndicator>\n    </KobalteContextMenu.RadioItem>\n  )\n}\n\n/**\n * The caption of a `ContextMenuGroup`, and that group's accessible name. It must be a\n * child of the group it names: Kobalte reads the group from context, so a label\n * placed directly in the content throws `useMenuGroupContext must be used within\n * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the\n * label and its items in a group anyway — the grouping is what a screen reader\n * announces.\n */\nexport function ContextMenuLabel(props: ComponentProps<typeof KobalteContextMenu.GroupLabel>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteContextMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function ContextMenuGroup(props: ComponentProps<typeof KobalteContextMenu.Group>) {\n  return <KobalteContextMenu.Group {...props} />\n}\n\nexport function ContextMenuSeparator(props: ComponentProps<typeof KobalteContextMenu.Separator>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteContextMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function ContextMenuSub(props: ComponentProps<typeof KobalteContextMenu.Sub>) {\n  return <KobalteContextMenu.Sub {...props} />\n}\n\nexport function ContextMenuSubTrigger(props: ComponentProps<typeof KobalteContextMenu.SubTrigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteContextMenu.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n      {local.children}\n      <ChevronRight class=\"ms-auto size-4\" />\n    </KobalteContextMenu.SubTrigger>\n  )\n}\n\nexport function ContextMenuSubContent(props: ComponentProps<typeof KobalteContextMenu.SubContent>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteContextMenu.Portal>\n      <KobalteContextMenu.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    </KobalteContextMenu.Portal>\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/drawer/drawer.d.ts

@@ -18,7 +18,14 @@ import type { ComponentProps } from 'solid-js';
 export declare function Drawer(props: ComponentProps<typeof DrawerPrimitive>): import("solid-js").JSX.Element;
 export declare function DrawerTrigger(props: ComponentProps<typeof DrawerPrimitive.Trigger>): import("solid-js").JSX.Element;
 export declare function DrawerOverlay(props: ComponentProps<typeof DrawerPrimitive.Overlay>): import("solid-js").JSX.Element;
-export type DrawerContentProps = ComponentProps<typeof DrawerPrimitive.Content> & {
+export type DrawerContentProps = Omit<ComponentProps<typeof DrawerPrimitive.Content>, 'side'> & {
+    /**
+     * Not accepted here. corvu reads the side from the root `Drawer`, which uses it
+     * for the drag axis and publishes it as `data-side`; a `side` on the content
+     * would type-check through the polymorphic props and be silently ignored,
+     * leaving the drawer on the bottom edge. Set `<Drawer side="right">` instead.
+     */
+    side?: never;
     /**
      * Draw the grabber at the leading edge of the sheet.
      *

package/dist/components/ui/drawer/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,eAAe,CAAA;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,kCAEnE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAElF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAalF;AAED,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IAChF;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,kCA8BtD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,kCAQ9E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,kCAQ1F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,kCAGpF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCASxD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAStD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCASxD"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,MAAM,eAAe,CAAA;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,kCAEnE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAElF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,kCAalF;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAC9F;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,kCA8BtD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,kCAQ9E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,kCAQ1F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,kCAGpF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCASxD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAStD;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCASxD"}

package/dist/components/ui/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","names":["DrawerPrimitive","ComponentProps","splitProps","cn","Drawer","props","_$createComponent","DrawerTrigger","Trigger","DrawerOverlay","Overlay","local","rest","_$mergeProps","class","DrawerContentProps","Content","withHandle","DrawerContent","Portal","children","_$memo","_el$","_tmpl$","_$effect","_$className","DrawerTitle","Label","DrawerDescription","Description","DrawerCloseButton","Close","DrawerHeader","_el$2","_tmpl$2","_$spread","DrawerBody","_el$3","_tmpl$3","DrawerFooter","_el$4","_tmpl$4","_$createComponent","_$mergeProps","_$memo","_$className"],"sources":["../../../../src/components/ui/drawer/drawer.tsx"],"sourcesContent":["import DrawerPrimitive from '@corvu/drawer'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Drawer.\n *\n * A sheet the user can drag away: it opens from an edge, carries a handle, and\n * closes by swipe as well as by button. That drag affordance is the reason to\n * choose it over Sheet — the gesture is for content the user is *finishing*\n * with (a summary, a queue, a confirmation), not for browsing.\n *\n * On a large window a Drawer is usually the wrong control: dragging is a touch\n * idiom, and on a desktop the same content is better as a Sheet or a Dialog.\n * The exceptions are the surfaces a pointer also drags naturally — a bottom\n * console, a media panel.\n *\n * corvu supplies the drag physics, the snap points and the pointer capture.\n */\nexport function Drawer(props: ComponentProps<typeof DrawerPrimitive>) {\n  return <DrawerPrimitive {...props} />\n}\n\nexport function DrawerTrigger(props: ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger {...props} />\n}\n\nexport function DrawerOverlay(props: ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <DrawerPrimitive.Overlay\n      class={cn(\n        'fixed inset-0 z-(--z-drawer) bg-scrim/50',\n        'data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport type DrawerContentProps = ComponentProps<typeof DrawerPrimitive.Content> & {\n  /**\n   * Draw the grabber at the leading edge of the sheet.\n   *\n   * It is an affordance, not the drag target: corvu makes the whole sheet\n   * draggable, exactly as the platform's own sheets behave. So this is\n   * `aria-hidden` decoration that tells the user the sheet can be pulled — it\n   * carries no behaviour and must not be the only thing that moves.\n   */\n  withHandle?: boolean\n}\n\nexport function DrawerContent(props: DrawerContentProps) {\n  const [local, rest] = splitProps(props, ['class', 'withHandle', 'children'])\n\n  return (\n    <DrawerPrimitive.Portal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        class={cn(\n          'group/drawer bg-popover text-popover-foreground fixed z-(--z-drawer) flex flex-col border-border shadow-lg',\n          'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:max-h-[85vh] data-[side=bottom]:rounded-t-xl data-[side=bottom]:border-t',\n          'data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:max-h-[85vh] data-[side=top]:rounded-b-xl data-[side=top]:border-b',\n          'data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:w-80 data-[side=left]:rounded-e-xl data-[side=left]:border-e',\n          'data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:w-80 data-[side=right]:rounded-s-xl data-[side=right]:border-s',\n          local.class\n        )}\n        {...rest}\n      >\n        {local.withHandle ? (\n          <span\n            aria-hidden=\"true\"\n            class={cn(\n              'bg-muted shrink-0 self-center',\n              'group-data-[side=bottom]/drawer:mt-2 group-data-[side=bottom]/drawer:h-1.5 group-data-[side=bottom]/drawer:w-10 group-data-[side=bottom]/drawer:rounded-full'\n            )}\n          />\n        ) : null}\n        {local.children}\n      </DrawerPrimitive.Content>\n    </DrawerPrimitive.Portal>\n  )\n}\n\nexport function DrawerTitle(props: ComponentProps<typeof DrawerPrimitive.Label>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <DrawerPrimitive.Label\n      class={cn('text-base leading-none font-semibold tracking-tight', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function DrawerDescription(props: ComponentProps<typeof DrawerPrimitive.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <DrawerPrimitive.Description\n      class={cn('text-muted-foreground text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function DrawerCloseButton(props: ComponentProps<typeof DrawerPrimitive.Close>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <DrawerPrimitive.Close class={cn('focus-ring', local.class)} {...rest} />\n}\n\nexport function DrawerHeader(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      class={cn('flex flex-col gap-1.5 p-5 pb-3 text-start', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function DrawerBody(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"drawer-body\"\n      class={cn('min-h-0 flex-1 overflow-y-auto px-5 pb-4', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function DrawerFooter(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      class={cn('flex flex-col-reverse gap-2 p-5 pt-3 sm:flex-row sm:justify-end', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"drawer.js","names":["DrawerPrimitive","ComponentProps","splitProps","cn","Drawer","props","_$createComponent","DrawerTrigger","Trigger","DrawerOverlay","Overlay","local","rest","_$mergeProps","class","DrawerContentProps","Omit","Content","side","withHandle","DrawerContent","Portal","children","_$memo","_el$","_tmpl$","_$effect","_$className","DrawerTitle","Label","DrawerDescription","Description","DrawerCloseButton","Close","DrawerHeader","_el$2","_tmpl$2","_$spread","DrawerBody","_el$3","_tmpl$3","DrawerFooter","_el$4","_tmpl$4","_$createComponent","_$mergeProps","_$memo","_$className"],"sources":["../../../../src/components/ui/drawer/drawer.tsx"],"sourcesContent":["import DrawerPrimitive from '@corvu/drawer'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Drawer.\n *\n * A sheet the user can drag away: it opens from an edge, carries a handle, and\n * closes by swipe as well as by button. That drag affordance is the reason to\n * choose it over Sheet — the gesture is for content the user is *finishing*\n * with (a summary, a queue, a confirmation), not for browsing.\n *\n * On a large window a Drawer is usually the wrong control: dragging is a touch\n * idiom, and on a desktop the same content is better as a Sheet or a Dialog.\n * The exceptions are the surfaces a pointer also drags naturally — a bottom\n * console, a media panel.\n *\n * corvu supplies the drag physics, the snap points and the pointer capture.\n */\nexport function Drawer(props: ComponentProps<typeof DrawerPrimitive>) {\n  return <DrawerPrimitive {...props} />\n}\n\nexport function DrawerTrigger(props: ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger {...props} />\n}\n\nexport function DrawerOverlay(props: ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <DrawerPrimitive.Overlay\n      class={cn(\n        'fixed inset-0 z-(--z-drawer) bg-scrim/50',\n        'data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport type DrawerContentProps = Omit<ComponentProps<typeof DrawerPrimitive.Content>, 'side'> & {\n  /**\n   * Not accepted here. corvu reads the side from the root `Drawer`, which uses it\n   * for the drag axis and publishes it as `data-side`; a `side` on the content\n   * would type-check through the polymorphic props and be silently ignored,\n   * leaving the drawer on the bottom edge. Set `<Drawer side=\"right\">` instead.\n   */\n  side?: never\n  /**\n   * Draw the grabber at the leading edge of the sheet.\n   *\n   * It is an affordance, not the drag target: corvu makes the whole sheet\n   * draggable, exactly as the platform's own sheets behave. So this is\n   * `aria-hidden` decoration that tells the user the sheet can be pulled — it\n   * carries no behaviour and must not be the only thing that moves.\n   */\n  withHandle?: boolean\n}\n\nexport function DrawerContent(props: DrawerContentProps) {\n  const [local, rest] = splitProps(props, ['class', 'withHandle', 'children'])\n\n  return (\n    <DrawerPrimitive.Portal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        class={cn(\n          'group/drawer bg-popover text-popover-foreground fixed z-(--z-drawer) flex flex-col border-border shadow-lg',\n          'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:max-h-[85vh] data-[side=bottom]:rounded-t-xl data-[side=bottom]:border-t',\n          'data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:max-h-[85vh] data-[side=top]:rounded-b-xl data-[side=top]:border-b',\n          'data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:w-80 data-[side=left]:rounded-e-xl data-[side=left]:border-e',\n          'data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:w-80 data-[side=right]:rounded-s-xl data-[side=right]:border-s',\n          local.class\n        )}\n        {...rest}\n      >\n        {local.withHandle ? (\n          <span\n            aria-hidden=\"true\"\n            class={cn(\n              'bg-muted shrink-0 self-center',\n              'group-data-[side=bottom]/drawer:mt-2 group-data-[side=bottom]/drawer:h-1.5 group-data-[side=bottom]/drawer:w-10 group-data-[side=bottom]/drawer:rounded-full'\n            )}\n          />\n        ) : null}\n        {local.children}\n      </DrawerPrimitive.Content>\n    </DrawerPrimitive.Portal>\n  )\n}\n\nexport function DrawerTitle(props: ComponentProps<typeof DrawerPrimitive.Label>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <DrawerPrimitive.Label\n      class={cn('text-base leading-none font-semibold tracking-tight', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function DrawerDescription(props: ComponentProps<typeof DrawerPrimitive.Description>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <DrawerPrimitive.Description\n      class={cn('text-muted-foreground text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function DrawerCloseButton(props: ComponentProps<typeof DrawerPrimitive.Close>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <DrawerPrimitive.Close class={cn('focus-ring', local.class)} {...rest} />\n}\n\nexport function DrawerHeader(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      class={cn('flex flex-col gap-1.5 p-5 pb-3 text-start', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function DrawerBody(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"drawer-body\"\n      class={cn('min-h-0 flex-1 overflow-y-auto px-5 pb-4', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function DrawerFooter(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      class={cn('flex flex-col-reverse gap-2 p-5 pt-3 sm:flex-row sm:justify-end', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/dropdown-menu/dropdown-menu.d.ts

@@ -56,6 +56,14 @@ export declare function DropdownMenuShortcut(props: ComponentProps<'span'>): imp
 export declare function DropdownMenuCheckboxItem(props: ComponentProps<typeof KobalteDropdownMenu.CheckboxItem>): import("solid-js").JSX.Element;
 export declare function DropdownMenuRadioGroup(props: ComponentProps<typeof KobalteDropdownMenu.RadioGroup>): import("solid-js").JSX.Element;
 export declare function DropdownMenuRadioItem(props: ComponentProps<typeof KobalteDropdownMenu.RadioItem>): import("solid-js").JSX.Element;
+/**
+ * The caption of a `DropdownMenuGroup`, and that group's accessible name. It must be a
+ * child of the group it names: Kobalte reads the group from context, so a label
+ * placed directly in the content throws `useMenuGroupContext must be used within
+ * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+ * label and its items in a group anyway — the grouping is what a screen reader
+ * announces.
+ */
 export declare function DropdownMenuLabel(props: ComponentProps<typeof KobalteDropdownMenu.GroupLabel>): import("solid-js").JSX.Element;
 export declare function DropdownMenuGroup(props: ComponentProps<typeof KobalteDropdownMenu.Group>): import("solid-js").JSX.Element;
 export declare function DropdownMenuSeparator(props: ComponentProps<typeof KobalteDropdownMenu.Separator>): import("solid-js").JSX.Element;

package/dist/components/ui/dropdown-menu/dropdown-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEjF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAc9C;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,kCAG7E;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,OAAO,CAAC,kCAE5F;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,MAAM,CAAC,kCAE1F;AAED,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,OAAO,CAAC,GAAG;IAC1F,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gGAAgG;IAChG,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,kCAoBlE;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,GAAG;IACvD,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,kCAiCF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,kCAUjE;AAED,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,YAAY,CAAC,kCAe/D;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,UAAU,CAAC,kCAG7D;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,SAAS,CAAC,kCAgBhG;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,UAAU,CAAC,kCAG7F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,KAAK,CAAC,kCAExF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,SAAS,CAAC,kCAGhG;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,GAAG,CAAC,kCAEpF;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,UAAU,CAAC,kCAU7D;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,UAAU,CAAC,kCAkB7D"}
+{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEjF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAc9C;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,kCAG7E;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,OAAO,CAAC,kCAE5F;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,MAAM,CAAC,kCAE1F;AAED,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,OAAO,CAAC,GAAG;IAC1F,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gGAAgG;IAChG,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,kCAoBlE;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,GAAG;IACvD,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,kCAiCF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,kCAUjE;AAED,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,YAAY,CAAC,kCAe/D;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,UAAU,CAAC,kCAG7D;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,SAAS,CAAC,kCAgBhG;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,UAAU,CAAC,kCAG7F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,KAAK,CAAC,kCAExF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,SAAS,CAAC,kCAGhG;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,GAAG,CAAC,kCAEpF;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,UAAU,CAAC,kCAU7D;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,UAAU,CAAC,kCAkB7D"}

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

@@ -136,6 +136,14 @@ function DropdownMenuRadioItem(props) {
 		})];
 	} }));
 }
+/**
+* The caption of a `DropdownMenuGroup`, and that group's accessible name. It must be a
+* child of the group it names: Kobalte reads the group from context, so a label
+* placed directly in the content throws `useMenuGroupContext must be used within
+* a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+* label and its items in a group anyway — the grouping is what a screen reader
+* announces.
+*/
 function DropdownMenuLabel(props) {
 	const [local, rest] = splitProps(props, ["class"]);
 	return createComponent(DropdownMenu.GroupLabel, mergeProps({ get ["class"]() {

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","destructiveMenuItem","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","popoverArrow","cn","props","local","rest","_$createComponent","_$mergeProps","modal","DropdownMenuTrigger","Trigger","DropdownMenuPortal","Portal","DropdownMenuContentProps","Content","hideArrow","portalMount","HTMLElement","DropdownMenuContent","mount","children","class","_$memo","Arrow","DropdownMenuItem","Item","variant","shortcut","keyshortcuts","aria-keyshortcuts","_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  destructiveMenuItem,\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 * Menus are nonmodal by default so their generated focus guards do not become\n * invalid direct children of the ARIA menu. Set `modal` explicitly when the\n * surrounding interaction needs modal containment.\n *\n * The `destructive` variant marks the row with a status-coloured edge and\n * highlighted tint while keeping its label on the body foreground. Pairing it\n * with an AlertDialog is the caller's job.\n */\nexport function DropdownMenu(props: ComponentProps<typeof KobalteDropdownMenu>) {\n  const [local, rest] = splitProps(props, ['modal'])\n  return <KobalteDropdownMenu modal={local.modal ?? false} {...rest} />\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     * The parseable chord behind `shortcut`, e.g. `Meta+E`. The drawn glyph is\n     * `aria-hidden` — reading it out would pollute the item's accessible name —\n     * so this is what assistive technology announces instead. Supply it\n     * whenever `shortcut` is drawn.\n     */\n    keyshortcuts?: string\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'shortcut',\n    'keyshortcuts',\n    'children',\n  ])\n\n  return (\n    <KobalteDropdownMenu.Item\n      class={cn(\n        menuItem,\n        {\n          [destructiveMenuItem]: local.variant === 'destructive',\n        },\n        local.class\n      )}\n      aria-keyshortcuts={local.keyshortcuts}\n      {...rest}\n    >\n      {local.children}\n      {local.shortcut ? (\n        <span\n          aria-hidden=\"true\"\n          class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\"\n        >\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 *\n * The glyphs are decorative: the span is `aria-hidden` and the parseable chord\n * belongs in the row's `aria-keyshortcuts`, so the item's accessible name stays\n * exactly its label.\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      aria-hidden=\"true\"\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\n        data-slot=\"dropdown-menu-indicator\"\n        class=\"absolute end-2 flex size-4 items-center justify-center text-primary\"\n      >\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      {/* The indicator reads in the accent, like every other selected state in\n          the system — a canvas-colored dot on a checked row reads as decoration. */}\n      <KobalteDropdownMenu.ItemIndicator\n        data-slot=\"dropdown-menu-indicator\"\n        class=\"absolute end-2 flex size-4 items-center justify-center text-primary\"\n      >\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","destructiveMenuItem","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","popoverArrow","cn","props","local","rest","_$createComponent","_$mergeProps","modal","DropdownMenuTrigger","Trigger","DropdownMenuPortal","Portal","DropdownMenuContentProps","Content","hideArrow","portalMount","HTMLElement","DropdownMenuContent","mount","children","class","_$memo","Arrow","DropdownMenuItem","Item","variant","shortcut","keyshortcuts","aria-keyshortcuts","_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  destructiveMenuItem,\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 * Menus are nonmodal by default so their generated focus guards do not become\n * invalid direct children of the ARIA menu. Set `modal` explicitly when the\n * surrounding interaction needs modal containment.\n *\n * The `destructive` variant marks the row with a status-coloured edge and\n * highlighted tint while keeping its label on the body foreground. Pairing it\n * with an AlertDialog is the caller's job.\n */\nexport function DropdownMenu(props: ComponentProps<typeof KobalteDropdownMenu>) {\n  const [local, rest] = splitProps(props, ['modal'])\n  return <KobalteDropdownMenu modal={local.modal ?? false} {...rest} />\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     * The parseable chord behind `shortcut`, e.g. `Meta+E`. The drawn glyph is\n     * `aria-hidden` — reading it out would pollute the item's accessible name —\n     * so this is what assistive technology announces instead. Supply it\n     * whenever `shortcut` is drawn.\n     */\n    keyshortcuts?: string\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'shortcut',\n    'keyshortcuts',\n    'children',\n  ])\n\n  return (\n    <KobalteDropdownMenu.Item\n      class={cn(\n        menuItem,\n        {\n          [destructiveMenuItem]: local.variant === 'destructive',\n        },\n        local.class\n      )}\n      aria-keyshortcuts={local.keyshortcuts}\n      {...rest}\n    >\n      {local.children}\n      {local.shortcut ? (\n        <span\n          aria-hidden=\"true\"\n          class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\"\n        >\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 *\n * The glyphs are decorative: the span is `aria-hidden` and the parseable chord\n * belongs in the row's `aria-keyshortcuts`, so the item's accessible name stays\n * exactly its label.\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      aria-hidden=\"true\"\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\n        data-slot=\"dropdown-menu-indicator\"\n        class=\"absolute end-2 flex size-4 items-center justify-center text-primary\"\n      >\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      {/* The indicator reads in the accent, like every other selected state in\n          the system — a canvas-colored dot on a checked row reads as decoration. */}\n      <KobalteDropdownMenu.ItemIndicator\n        data-slot=\"dropdown-menu-indicator\"\n        class=\"absolute end-2 flex size-4 items-center justify-center text-primary\"\n      >\n        <Circle class=\"size-2 fill-current\" />\n      </KobalteDropdownMenu.ItemIndicator>\n    </KobalteDropdownMenu.RadioItem>\n  )\n}\n\n/**\n * The caption of a `DropdownMenuGroup`, and that group's accessible name. It must be a\n * child of the group it names: Kobalte reads the group from context, so a label\n * placed directly in the content throws `useMenuGroupContext must be used within\n * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the\n * label and its items in a group anyway — the grouping is what a screen reader\n * announces.\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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"}

package/dist/components/ui/menubar/menubar.d.ts

@@ -36,6 +36,14 @@ export declare function MenubarItem(props: ComponentProps<typeof KobalteMenubar.
 export declare function MenubarCheckboxItem(props: ComponentProps<typeof KobalteMenubar.CheckboxItem>): import("solid-js").JSX.Element;
 export declare function MenubarRadioGroup(props: ComponentProps<typeof KobalteMenubar.RadioGroup>): import("solid-js").JSX.Element;
 export declare function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.RadioItem>): import("solid-js").JSX.Element;
+/**
+ * The caption of a `MenubarGroup`, and that group's accessible name. It must be a
+ * child of the group it names: Kobalte reads the group from context, so a label
+ * placed directly in the content throws `useMenuGroupContext must be used within
+ * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+ * label and its items in a group anyway — the grouping is what a screen reader
+ * announces.
+ */
 export declare function MenubarLabel(props: ComponentProps<typeof KobalteMenubar.GroupLabel>): import("solid-js").JSX.Element;
 export declare function MenubarGroup(props: ComponentProps<typeof KobalteMenubar.Group>): import("solid-js").JSX.Element;
 export declare function MenubarSeparator(props: ComponentProps<typeof KobalteMenubar.Separator>): import("solid-js").JSX.Element;

package/dist/components/ui/menubar/menubar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/menubar/menubar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAc9C;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,kCAWnE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,kCAE5E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,kCAelF;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,kCAmBlF;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,GAAG;IAClD,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,kCAgCF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,YAAY,CAAC,kCAU5F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAExF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,kCAUtF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAGnF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,kCAE9E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,kCAGtF;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG,CAAC,kCAE1E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAQxF;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAgBxF"}
+{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/menubar/menubar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAc9C;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,kCAWnE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,kCAE5E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,kCAelF;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,kCAmBlF;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,GAAG;IAClD,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,kCAgCF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,YAAY,CAAC,kCAU5F;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAExF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,kCAUtF;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAGnF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,kCAE9E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,SAAS,CAAC,kCAGtF;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG,CAAC,kCAE1E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAQxF;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,UAAU,CAAC,kCAgBxF"}

package/dist/components/ui/menubar/menubar.js

@@ -104,6 +104,14 @@ function MenubarRadioItem(props) {
 		})];
 	} }));
 }
+/**
+* The caption of a `MenubarGroup`, and that group's accessible name. It must be a
+* child of the group it names: Kobalte reads the group from context, so a label
+* placed directly in the content throws `useMenuGroupContext must be used within
+* a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+* label and its items in a group anyway — the grouping is what a screen reader
+* announces.
+*/
 function MenubarLabel(props) {
 	const [local, rest] = splitProps(props, ["class"]);
 	return createComponent(Menubar.GroupLabel, mergeProps({ get ["class"]() {

package/dist/components/ui/menubar/menubar.js.map

@@ -1 +1 @@
-{"version":3,"file":"menubar.js","names":["Menubar","KobalteMenubar","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","destructiveMenuItem","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","popoverArrow","cn","props","local","rest","_$createComponent","_$mergeProps","class","MenubarMenu","Menu","MenubarTrigger","Trigger","MenubarContent","Content","Portal","children","Arrow","_$memo","MenubarItem","Item","variant","shortcut","keyshortcuts","aria-keyshortcuts","_el$","_tmpl$","_$insert","MenubarCheckboxItem","CheckboxItem","ItemIndicator","MenubarRadioGroup","RadioGroup","MenubarRadioItem","RadioItem","MenubarLabel","GroupLabel","MenubarGroup","Group","MenubarSeparator","Separator","MenubarSub","Sub","MenubarSubTrigger","SubTrigger","MenubarSubContent","SubContent","Menubar","_$createComponent","KobalteMenubar","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/menubar/menubar.tsx"],"sourcesContent":["import { Menubar as KobalteMenubar } from '@kobalte/core/menubar'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n  menuContentPadding,\n  destructiveMenuItem,\n  menuItem,\n  menuLabel,\n  menuSeparator,\n  overlayMotion,\n  overlaySurface,\n  popoverArrow,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * Menubar.\n *\n * A persistent row of menus at the top of a surface — the desktop application\n * pattern. Each trigger opens its own menu, and the arrow keys move *between*\n * menus once one is open, which is what makes a menubar a single control rather\n * than five menus that happen to be adjacent.\n *\n * This is for a window-level command surface. For actions on one thing, use\n * DropdownMenu; a menubar on a row would be a menu pretending to be chrome.\n */\nexport function Menubar(props: ComponentProps<typeof KobalteMenubar>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteMenubar\n      class={cn(\n        'flex items-center gap-0.5 rounded-md border border-border bg-card p-0.5',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * One top-level menu: a trigger and the panel it opens.\n *\n * Required, and the reason the component is not just a row of triggers — the\n * menubar's arrow keys move *between* menus, which only works when each trigger\n * belongs to a menu the bar knows about. `value` names it.\n */\nexport function MenubarMenu(props: ComponentProps<typeof KobalteMenubar.Menu>) {\n  return <KobalteMenubar.Menu {...props} />\n}\n\nexport function MenubarTrigger(props: ComponentProps<typeof KobalteMenubar.Trigger>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteMenubar.Trigger\n      class={cn(\n        'flex items-center rounded-sm px-2 py-1 text-sm font-medium select-none',\n        'transition-colors ease-out outline-none',\n        'data-[expanded]:bg-surface-active',\n        'data-[highlighted]:bg-surface-hover',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function MenubarContent(props: ComponentProps<typeof KobalteMenubar.Content>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.Portal>\n      <KobalteMenubar.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        <KobalteMenubar.Arrow aria-hidden=\"true\" class={popoverArrow} />\n        {local.children}\n      </KobalteMenubar.Content>\n    </KobalteMenubar.Portal>\n  )\n}\n\nexport function MenubarItem(\n  props: ComponentProps<typeof KobalteMenubar.Item> & {\n    variant?: 'default' | 'destructive'\n    shortcut?: string\n    /**\n     * The parseable chord behind `shortcut`, e.g. `Meta+N`. The drawn glyph is\n     * `aria-hidden` — reading it out would pollute the item's accessible name —\n     * so this is what assistive technology announces instead. Supply it\n     * whenever `shortcut` is drawn.\n     */\n    keyshortcuts?: string\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'shortcut',\n    'keyshortcuts',\n    'children',\n  ])\n  return (\n    <KobalteMenubar.Item\n      class={cn(\n        menuItem,\n        {\n          [destructiveMenuItem]: local.variant === 'destructive',\n        },\n        local.class\n      )}\n      aria-keyshortcuts={local.keyshortcuts}\n      {...rest}\n    >\n      {local.children}\n      {local.shortcut ? (\n        <span\n          aria-hidden=\"true\"\n          class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\"\n        >\n          {local.shortcut}\n        </span>\n      ) : null}\n    </KobalteMenubar.Item>\n  )\n}\n\nexport function MenubarCheckboxItem(props: ComponentProps<typeof KobalteMenubar.CheckboxItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteMenubar.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Check class=\"size-4\" />\n      </KobalteMenubar.ItemIndicator>\n    </KobalteMenubar.CheckboxItem>\n  )\n}\n\nexport function MenubarRadioGroup(props: ComponentProps<typeof KobalteMenubar.RadioGroup>) {\n  return <KobalteMenubar.RadioGroup {...props} />\n}\n\nexport function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.RadioItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteMenubar.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Circle class=\"size-2 fill-current\" />\n      </KobalteMenubar.ItemIndicator>\n    </KobalteMenubar.RadioItem>\n  )\n}\n\nexport function MenubarLabel(props: ComponentProps<typeof KobalteMenubar.GroupLabel>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteMenubar.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function MenubarGroup(props: ComponentProps<typeof KobalteMenubar.Group>) {\n  return <KobalteMenubar.Group {...props} />\n}\n\nexport function MenubarSeparator(props: ComponentProps<typeof KobalteMenubar.Separator>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteMenubar.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function MenubarSub(props: ComponentProps<typeof KobalteMenubar.Sub>) {\n  return <KobalteMenubar.Sub {...props} />\n}\n\nexport function MenubarSubTrigger(props: ComponentProps<typeof KobalteMenubar.SubTrigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n      {local.children}\n      <ChevronRight class=\"ms-auto size-4\" />\n    </KobalteMenubar.SubTrigger>\n  )\n}\n\nexport function MenubarSubContent(props: ComponentProps<typeof KobalteMenubar.SubContent>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteMenubar.Portal>\n      <KobalteMenubar.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    </KobalteMenubar.Portal>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"menubar.js","names":["Menubar","KobalteMenubar","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","destructiveMenuItem","menuItem","menuLabel","menuSeparator","overlayMotion","overlaySurface","popoverArrow","cn","props","local","rest","_$createComponent","_$mergeProps","class","MenubarMenu","Menu","MenubarTrigger","Trigger","MenubarContent","Content","Portal","children","Arrow","_$memo","MenubarItem","Item","variant","shortcut","keyshortcuts","aria-keyshortcuts","_el$","_tmpl$","_$insert","MenubarCheckboxItem","CheckboxItem","ItemIndicator","MenubarRadioGroup","RadioGroup","MenubarRadioItem","RadioItem","MenubarLabel","GroupLabel","MenubarGroup","Group","MenubarSeparator","Separator","MenubarSub","Sub","MenubarSubTrigger","SubTrigger","MenubarSubContent","SubContent","Menubar","_$createComponent","KobalteMenubar","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/menubar/menubar.tsx"],"sourcesContent":["import { Menubar as KobalteMenubar } from '@kobalte/core/menubar'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n  menuContentPadding,\n  destructiveMenuItem,\n  menuItem,\n  menuLabel,\n  menuSeparator,\n  overlayMotion,\n  overlaySurface,\n  popoverArrow,\n} from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n/**\n * Menubar.\n *\n * A persistent row of menus at the top of a surface — the desktop application\n * pattern. Each trigger opens its own menu, and the arrow keys move *between*\n * menus once one is open, which is what makes a menubar a single control rather\n * than five menus that happen to be adjacent.\n *\n * This is for a window-level command surface. For actions on one thing, use\n * DropdownMenu; a menubar on a row would be a menu pretending to be chrome.\n */\nexport function Menubar(props: ComponentProps<typeof KobalteMenubar>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteMenubar\n      class={cn(\n        'flex items-center gap-0.5 rounded-md border border-border bg-card p-0.5',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * One top-level menu: a trigger and the panel it opens.\n *\n * Required, and the reason the component is not just a row of triggers — the\n * menubar's arrow keys move *between* menus, which only works when each trigger\n * belongs to a menu the bar knows about. `value` names it.\n */\nexport function MenubarMenu(props: ComponentProps<typeof KobalteMenubar.Menu>) {\n  return <KobalteMenubar.Menu {...props} />\n}\n\nexport function MenubarTrigger(props: ComponentProps<typeof KobalteMenubar.Trigger>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteMenubar.Trigger\n      class={cn(\n        'flex items-center rounded-sm px-2 py-1 text-sm font-medium select-none',\n        'transition-colors ease-out outline-none',\n        'data-[expanded]:bg-surface-active',\n        'data-[highlighted]:bg-surface-hover',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function MenubarContent(props: ComponentProps<typeof KobalteMenubar.Content>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.Portal>\n      <KobalteMenubar.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        <KobalteMenubar.Arrow aria-hidden=\"true\" class={popoverArrow} />\n        {local.children}\n      </KobalteMenubar.Content>\n    </KobalteMenubar.Portal>\n  )\n}\n\nexport function MenubarItem(\n  props: ComponentProps<typeof KobalteMenubar.Item> & {\n    variant?: 'default' | 'destructive'\n    shortcut?: string\n    /**\n     * The parseable chord behind `shortcut`, e.g. `Meta+N`. The drawn glyph is\n     * `aria-hidden` — reading it out would pollute the item's accessible name —\n     * so this is what assistive technology announces instead. Supply it\n     * whenever `shortcut` is drawn.\n     */\n    keyshortcuts?: string\n  }\n) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'shortcut',\n    'keyshortcuts',\n    'children',\n  ])\n  return (\n    <KobalteMenubar.Item\n      class={cn(\n        menuItem,\n        {\n          [destructiveMenuItem]: local.variant === 'destructive',\n        },\n        local.class\n      )}\n      aria-keyshortcuts={local.keyshortcuts}\n      {...rest}\n    >\n      {local.children}\n      {local.shortcut ? (\n        <span\n          aria-hidden=\"true\"\n          class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\"\n        >\n          {local.shortcut}\n        </span>\n      ) : null}\n    </KobalteMenubar.Item>\n  )\n}\n\nexport function MenubarCheckboxItem(props: ComponentProps<typeof KobalteMenubar.CheckboxItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteMenubar.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Check class=\"size-4\" />\n      </KobalteMenubar.ItemIndicator>\n    </KobalteMenubar.CheckboxItem>\n  )\n}\n\nexport function MenubarRadioGroup(props: ComponentProps<typeof KobalteMenubar.RadioGroup>) {\n  return <KobalteMenubar.RadioGroup {...props} />\n}\n\nexport function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.RadioItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteMenubar.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Circle class=\"size-2 fill-current\" />\n      </KobalteMenubar.ItemIndicator>\n    </KobalteMenubar.RadioItem>\n  )\n}\n\n/**\n * The caption of a `MenubarGroup`, and that group's accessible name. It must be a\n * child of the group it names: Kobalte reads the group from context, so a label\n * placed directly in the content throws `useMenuGroupContext must be used within\n * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the\n * label and its items in a group anyway — the grouping is what a screen reader\n * announces.\n */\nexport function MenubarLabel(props: ComponentProps<typeof KobalteMenubar.GroupLabel>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteMenubar.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function MenubarGroup(props: ComponentProps<typeof KobalteMenubar.Group>) {\n  return <KobalteMenubar.Group {...props} />\n}\n\nexport function MenubarSeparator(props: ComponentProps<typeof KobalteMenubar.Separator>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteMenubar.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function MenubarSub(props: ComponentProps<typeof KobalteMenubar.Sub>) {\n  return <KobalteMenubar.Sub {...props} />\n}\n\nexport function MenubarSubTrigger(props: ComponentProps<typeof KobalteMenubar.SubTrigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n  return (\n    <KobalteMenubar.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n      {local.children}\n      <ChevronRight class=\"ms-auto size-4\" />\n    </KobalteMenubar.SubTrigger>\n  )\n}\n\nexport function MenubarSubContent(props: ComponentProps<typeof KobalteMenubar.SubContent>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteMenubar.Portal>\n      <KobalteMenubar.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    </KobalteMenubar.Portal>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA2BA,SAAgBA,UAAQgB,OAA8C;CACpE,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGlB,SAAcmB,WAAA,EAAA,KAAA,WAAA;EAAA,OACNL,GACL,2EACAE,MAAMI,KACR;CAAC,EAAA,GACGH,IAAI,CAAA;AAGd;;;;;;;;AASA,SAAgBI,YAAYN,OAAmD;CAC7E,OAAAG,gBAAQlB,QAAesB,MAASP,KAAK;AACvC;AAEA,SAAgBQ,eAAeR,OAAsD;CACnF,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGlB,QAAewB,SAAOL,WAAA,EAAA,KAAA,WAAA;EAAA,OACdL,GACL,0EACA,2CACA,qCACA,uCACA,oFACAE,MAAMI,KACR;CAAC,EAAA,GACGH,IAAI,CAAA;AAGd;AAEA,SAAgBQ,eAAeV,OAAsD;CACnF,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO,CAAC,SAAS,UAAU,CAAC;CAC7D,OAAAG,gBACGlB,QAAe2B,QAAM,EAAA,IAAAC,WAAA;EAAA,OAAAV,gBACnBlB,QAAe0B,SAAOP,WAAA,EAAA,KAAA,WAAA;GAAA,OACdL,GACLF,gBACAD,eACA,0FAAA,OAEAK,MAAMI,KACR;EAAC,EAAA,GACGH,MAAI,EAAA,IAAAW,WAAA;GAAA,OAAA,CAAAV,gBAEPlB,QAAe6B,OAAK;IAAA,eAAA;IAAA,SAA2BhB;GAAY,CAAA,GAAAiB,WAC3Dd,MAAMY,QAAQ,CAAA;EAAA,EAAA,CAAA,CAAA;CAAA,EAAA,CAAA;AAIvB;AAEA,SAAgBG,YACdhB,OAWA;CACA,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO;EACtC;EACA;EACA;EACA;EACA;CAAU,CACX;CACD,OAAAG,gBACGlB,QAAegC,MAAIb,WAAA;EAAA,KAAA,WAAA;GAAA,OACXL,GACLN,UACA,GACGD,sBAAsBS,MAAMiB,YAAY,cAC3C,GACAjB,MAAMI,KACR;EAAC;EAAA,KAAA,uBAAA;GAAA,OACkBJ,MAAMmB;EAAY;CAAA,GACjClB,MAAI,EAAA,IAAAW,WAAA;EAAA,OAAA,CAAAE,WAEPd,MAAMY,QAAQ,GAAAE,WACdA,WAAA,CAAA,CAAAd,MAAMkB,QAAQ,CAAA,CAAA,WAAA;GAAA,IAAAG,OAAAC,OAAA;GAAAC,OAAAF,YAKVrB,MAAMkB,QAAQ;GAAA,OAAAG;EAAA,EAAA,CAAA,IAEf,IAAI,CAAA;CAAA,EAAA,CAAA,CAAA;AAGd;AAEA,SAAgBG,oBAAoBzB,OAA2D;CAC7F,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO,CAAC,SAAS,UAAU,CAAC;CAC7D,OAAAG,gBACGlB,QAAeyC,cAAYtB,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAGN,UAAU,QAAQQ,MAAMI,KAAK;CAAC,EAAA,GAAMH,MAAI,EAAA,IAAAW,WAAA;EAAA,OAAA,CAAAE,WAC5Ed,MAAMY,QAAQ,GAAAV,gBACdlB,QAAe0C,eAAa;GAAA,SAAA;GAAA,IAAAd,WAAA;IAAA,OAAAV,gBAC1BjB,OAAK,EAAA,SAAA,SAAA,CAAA;GAAA;EAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAId;AAEA,SAAgB0C,kBAAkB5B,OAAyD;CACzF,OAAAG,gBAAQlB,QAAe4C,YAAe7B,KAAK;AAC7C;AAEA,SAAgB8B,iBAAiB9B,OAAwD;CACvF,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO,CAAC,SAAS,UAAU,CAAC;CAC7D,OAAAG,gBACGlB,QAAe8C,WAAS3B,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAGN,UAAU,QAAQQ,MAAMI,KAAK;CAAC,EAAA,GAAMH,MAAI,EAAA,IAAAW,WAAA;EAAA,OAAA,CAAAE,WACzEd,MAAMY,QAAQ,GAAAV,gBACdlB,QAAe0C,eAAa;GAAA,SAAA;GAAA,IAAAd,WAAA;IAAA,OAAAV,gBAC1Bf,QAAM,EAAA,SAAA,sBAAA,CAAA;GAAA;EAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAIf;;;;;;;;;AAUA,SAAgB4C,aAAahC,OAAyD;CACpF,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBAAQlB,QAAegD,YAAU7B,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAGL,WAAWO,MAAMI,KAAK;CAAC,EAAA,GAAMH,IAAI,CAAA;AAC/E;AAEA,SAAgBgC,aAAalC,OAAoD;CAC/E,OAAAG,gBAAQlB,QAAekD,OAAUnC,KAAK;AACxC;AAEA,SAAgBoC,iBAAiBpC,OAAwD;CACvF,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBAAQlB,QAAeoD,WAASjC,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAGJ,eAAeM,MAAMI,KAAK;CAAC,EAAA,GAAMH,IAAI,CAAA;AAClF;AAEA,SAAgBoC,WAAWtC,OAAkD;CAC3E,OAAAG,gBAAQlB,QAAesD,KAAQvC,KAAK;AACtC;AAEA,SAAgBwC,kBAAkBxC,OAAyD;CACzF,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO,CAAC,SAAS,UAAU,CAAC;CAC7D,OAAAG,gBACGlB,QAAewD,YAAUrC,WAAA,EAAA,KAAA,WAAA;EAAA,OAAQL,GAAGN,UAAUQ,MAAMI,KAAK;CAAC,EAAA,GAAMH,MAAI,EAAA,IAAAW,WAAA;EAAA,OAAA,CAAAE,WAClEd,MAAMY,QAAQ,GAAAV,gBACdhB,cAAY,EAAA,SAAA,iBAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAGnB;AAEA,SAAgBuD,kBAAkB1C,OAAyD;CACzF,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO,CAAC,OAAO,CAAC;CACjD,OAAAG,gBACGlB,QAAe2B,QAAM,EAAA,IAAAC,WAAA;EAAA,OAAAV,gBACnBlB,QAAe0D,YAAUvC,WAAA,EAAA,KAAA,WAAA;GAAA,OACjBL,GACLF,gBACAD,eACA,yFAAA,OAEAK,MAAMI,KACR;EAAC,EAAA,GACGH,IAAI,CAAA;CAAA,EAAA,CAAA;AAIhB"}

package/dist/components/ui/navigation-menu/navigation-menu.d.ts

@@ -37,9 +37,15 @@ import * as KobalteNavigationMenu from '@kobalte/core/navigation-menu';
  * - `Content` must be a direct child of `Menu`, and the `Viewport` is a **sibling
  *   of the menus** — not inside them. All the panels share one viewport, which is
  *   what lets the bar animate between them instead of each panel popping in place.
+ * - The viewport is an empty surface. Each `Content` reaches it through Kobalte's
+ *   `Portal`, which mounts the panel inside the viewport while keeping it in its
+ *   own `Menu`'s context. A `Content` rendered anywhere else — the viewport's own
+ *   children included — has no `Menu` above it, and Kobalte throws
+ *   `useMenuRootContext must be used within a MenuRoot` the moment a panel opens.
  *
- * The wrapper enforces the last of those by rendering the `Viewport` itself, so a
- * caller cannot forget it and get a menu whose panels never appear.
+ * The wrapper enforces the last two by rendering the `Viewport` itself and by
+ * portalling every `NavigationMenuContent`, so a caller cannot forget either and
+ * get a menu whose panels never appear.
  */
 export type NavigationMenuProps = ComponentProps<typeof KobalteNavigationMenu.Root> & {
     /** The accessible name for the navigation landmark. */
@@ -56,6 +62,12 @@ export declare function NavigationMenuContent(props: ComponentProps<typeof Kobal
 /**
  * The shared panel surface. One per menu bar, and the wrapper supplies it — but
  * exported so a caller with an unusual layout can place it themselves.
+ *
+ * It renders no children: the panels arrive through each `NavigationMenuContent`'s
+ * portal. Kobalte positions it under the bar and publishes the active panel's size
+ * as `--kb-navigation-menu-viewport-*`, which the surface animates between.
+ * `box-content` keeps the border outside that measured size so a panel is never
+ * clipped by its own frame.
  */
 export declare function NavigationMenuViewport(props: ComponentProps<typeof KobalteNavigationMenu.Viewport>): JSX.Element;
 /**

package/dist/components/ui/navigation-menu/navigation-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation-menu/navigation-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AACpE,OAAO,KAAK,qBAAqB,MAAM,+BAA+B,CAAA;AAKtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,GAAG;IACpF,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAsBxD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,eAE1F;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC,eAuBhG;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC,eAkBhG;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,QAAQ,CAAC,eAyB7D;AAED;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,GAAG;IACxF,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sBAAsB;IACtB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,eAoBhE;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,SAAS,CAAC,eAS9D;AAED,wDAAwD;AACxD,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,UAAU,CAAC,eAa/D;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,KAAK,CAAC,eAG5F"}
+{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation-menu/navigation-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AACpE,OAAO,KAAK,qBAAqB,MAAM,+BAA+B,CAAA;AAKtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AAEH,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,GAAG;IACpF,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAsBxD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,eAE1F;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC,eAuBhG;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC,eA4BhG;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,QAAQ,CAAC,eAiB7D;AAED;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,GAAG;IACxF,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sBAAsB;IACtB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,eAoBhE;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,SAAS,CAAC,eAS9D;AAED,wDAAwD;AACxD,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,UAAU,CAAC,eAa/D;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,qBAAqB,CAAC,KAAK,CAAC,eAG5F"}

package/dist/components/ui/navigation-menu/navigation-menu.js

@@ -1,13 +1,12 @@
 import { cn } from "../../../lib/utils.js";
 import { menuItem, overlayMotion, overlaySurface } from "../../../lib/overlay.js";
-import { className, createComponent, effect, insert, memo, mergeProps, template } from "solid-js/web";
+import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
 import { ChevronDown } from "lucide-solid";
 import { splitProps } from "solid-js";
 import * as KobalteNavigationMenu from "@kobalte/core/navigation-menu";
 //#region src/components/ui/navigation-menu/navigation-menu.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<span class=font-medium>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<span class="col-start-2 text-xs text-muted-foreground">`);
+var _tmpl$ = /*#__PURE__*/ template(`<span class=font-medium>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span class="col-start-2 text-xs text-muted-foreground">`);
 function NavigationMenu(props) {
 	const [local, rest] = splitProps(props, [
 		"label",
@@ -45,26 +44,32 @@ function NavigationMenuTrigger(props) {
 }
 function NavigationMenuContent(props) {
 	const [local, rest] = splitProps(props, ["class", "children"]);
-	return createComponent(KobalteNavigationMenu.Content, mergeProps({ get ["class"]() {
-		return cn("grid w-max gap-1 p-2", "data-[wide]:grid-cols-2", local.class);
-	} }, rest, { get children() {
-		return local.children;
-	} }));
+	return createComponent(KobalteNavigationMenu.Portal, { get children() {
+		return createComponent(KobalteNavigationMenu.Content, mergeProps({ get ["class"]() {
+			return cn("absolute top-0 left-0 grid w-max gap-1 p-2 outline-none", overlayMotion, "data-[wide]:grid-cols-2", local.class);
+		} }, rest, { get children() {
+			return local.children;
+		} }));
+	} });
 }
 /**
 * The shared panel surface. One per menu bar, and the wrapper supplies it — but
 * exported so a caller with an unusual layout can place it themselves.
+*
+* It renders no children: the panels arrive through each `NavigationMenuContent`'s
+* portal. Kobalte positions it under the bar and publishes the active panel's size
+* as `--kb-navigation-menu-viewport-*`, which the surface animates between.
+* `box-content` keeps the border outside that measured size so a panel is never
+* clipped by its own frame.
 */
 function NavigationMenuViewport(props) {
 	const [local, rest] = splitProps(props, ["class"]);
-	return createComponent(KobalteNavigationMenu.Viewport, mergeProps({ get ["class"]() {
-		return cn("absolute top-full left-0 isolate z-(--z-menu) mt-1.5 flex justify-center overflow-hidden", "h-(--kb-navigation-menu-viewport-height) w-(--kb-navigation-menu-viewport-width)", "origin-top transition-[width,height] duration-200 ease-out", local.class);
-	} }, rest, { get children() {
-		var _el$ = _tmpl$();
-		insert(_el$, createComponent(KobalteNavigationMenu.Content, {}));
-		effect(() => className(_el$, cn(overlaySurface, overlayMotion, "w-full rounded-lg border border-border bg-popover p-1 shadow-lg")));
-		return _el$;
-	} }));
+	return createComponent(KobalteNavigationMenu.Viewport, mergeProps({
+		"data-slot": "navigation-menu-viewport",
+		get ["class"]() {
+			return cn(overlaySurface, "isolate z-(--z-menu) mt-1.5 box-content list-none overflow-hidden", "h-(--kb-navigation-menu-viewport-height) w-(--kb-navigation-menu-viewport-width)", "origin-(--kb-menu-content-transform-origin) transition-[width,height] duration-200 ease-out", local.class);
+		}
+	}, rest));
 }
 function NavigationMenuItem(props) {
 	const [local, rest] = splitProps(props, [
@@ -79,14 +84,14 @@ function NavigationMenuItem(props) {
 		return [
 			memo(() => local.icon),
 			(() => {
-				var _el$2 = _tmpl$2();
-				insert(_el$2, () => local.children);
-				return _el$2;
+				var _el$ = _tmpl$();
+				insert(_el$, () => local.children);
+				return _el$;
 			})(),
 			memo(() => memo(() => !!local.description)() && (() => {
-				var _el$3 = _tmpl$3();
-				insert(_el$3, () => local.description);
-				return _el$3;
+				var _el$2 = _tmpl$2();
+				insert(_el$2, () => local.description);
+				return _el$2;
 			})())
 		];
 	} }));

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-menu.js","names":["splitProps","ComponentProps","JSX","KobalteNavigationMenu","ChevronDown","cn","menuContentPadding","menuItem","overlayMotion","overlaySurface","NavigationMenuProps","Root","label","NavigationMenu","props","local","rest","_$createComponent","_$mergeProps","class","aria-label","children","_$memo","NavigationMenuViewport","NavigationMenuMenu","Menu","NavigationMenuTrigger","Trigger","NavigationMenuContent","Content","Viewport","_el$","_tmpl$","_$insert","_$effect","_$className","NavigationMenuItemProps","Item","description","icon","Element","NavigationMenuItem","_el$2","_tmpl$2","_el$3","_tmpl$3","NavigationMenuSeparator","Separator","NavigationMenuGroupLabel","GroupLabel","NavigationMenuGroup","Group","_$createComponent","_$mergeProps","_$memo","_$className"],"sources":["../../../../src/components/ui/navigation-menu/navigation-menu.tsx"],"sourcesContent":["import { splitProps, type ComponentProps, type JSX } from 'solid-js'\nimport * as KobalteNavigationMenu from '@kobalte/core/navigation-menu'\nimport { ChevronDown } from 'lucide-solid'\nimport { cn } from '#lib/utils'\nimport { menuContentPadding, menuItem, overlayMotion, overlaySurface } from '#lib/overlay'\n\n/**\n * NavigationMenu.\n *\n * A site-style menu bar: top-level triggers that open panels of links. It is the\n * header pattern — a documentation site, a marketing page, an application with\n * several top-level destinations — and it is deliberately *not* a `Menubar`.\n * `Menubar` is a row of application menus (File, Edit, View) whose items are\n * commands; this is a row of destinations whose panels are links. The two have\n * different roles, different keyboard models, and different semantics.\n *\n * ## Composition\n *\n * Kobalte's primitive has an unusual shape, and getting it wrong is why this took\n * three attempts to port. The structure is:\n *\n * ```tsx\n * <NavigationMenu>\n *   <NavigationMenuMenu>\n *     <NavigationMenuTrigger>Destinations</NavigationMenuTrigger>\n *     <NavigationMenuContent>\n *       <NavigationMenuItem href=\"/x\">X</NavigationMenuItem>\n *     </NavigationMenuContent>\n *   </NavigationMenuMenu>\n *   <NavigationMenuViewport />\n * </NavigationMenu>\n * ```\n *\n * Three facts that are not obvious from the prop types:\n *\n * - `Menu` renders **nothing**. It is a context provider — one per top-level\n *   entry, naming it so the bar's arrow keys can move between entries. A menu\n *   without one cannot be reached by keyboard.\n * - `Trigger` renders `<li role=\"presentation\"><button>`. It is already the list\n *   item, so wrapping it in your own `<li>` produces a `<ul>` inside a `<ul>`.\n * - `Content` must be a direct child of `Menu`, and the `Viewport` is a **sibling\n *   of the menus** — not inside them. All the panels share one viewport, which is\n *   what lets the bar animate between them instead of each panel popping in place.\n *\n * The wrapper enforces the last of those by rendering the `Viewport` itself, so a\n * caller cannot forget it and get a menu whose panels never appear.\n */\n\nexport type NavigationMenuProps = ComponentProps<typeof KobalteNavigationMenu.Root> & {\n  /** The accessible name for the navigation landmark. */\n  label?: string\n}\n\nexport function NavigationMenu(props: NavigationMenuProps) {\n  const [local, rest] = splitProps(props, ['label', 'class', 'children'])\n\n  return (\n    <KobalteNavigationMenu.Root\n      class={cn(\n        'relative flex max-w-max flex-1 items-center justify-center',\n        '[&>nav>ul]:flex [&>nav>ul]:items-center [&>nav>ul]:gap-1',\n        local.class\n      )}\n      aria-label={local.label ?? 'Main'}\n      {...rest}\n    >\n      {local.children}\n      {/*\n        The shared panel surface. Rendered here rather than left to the caller:\n        every panel animates through this one element, and a menu bar without it\n        opens panels that never paint.\n      */}\n      <NavigationMenuViewport />\n    </KobalteNavigationMenu.Root>\n  )\n}\n\n/**\n * One top-level entry. Renders nothing itself — see the note above — and exists\n * so a caller cannot build a bar whose entries the keyboard cannot reach.\n */\nexport function NavigationMenuMenu(props: ComponentProps<typeof KobalteNavigationMenu.Menu>) {\n  return <KobalteNavigationMenu.Menu {...props} />\n}\n\nexport function NavigationMenuTrigger(props: ComponentProps<typeof KobalteNavigationMenu.Trigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteNavigationMenu.Trigger\n      class={cn(\n        'inline-flex items-center gap-1 rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground',\n        'transition-colors ease-out outline-none select-none',\n        'hover:bg-muted hover:text-foreground',\n        'data-[expanded]:bg-muted data-[expanded]:text-foreground',\n        'data-[highlighted]:bg-muted data-[highlighted]:text-foreground',\n        'focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <ChevronDown\n        aria-hidden=\"true\"\n        class=\"size-3.5 transition-transform duration-200 ease-out [[data-expanded]_&]:rotate-180\"\n      />\n    </KobalteNavigationMenu.Trigger>\n  )\n}\n\nexport function NavigationMenuContent(props: ComponentProps<typeof KobalteNavigationMenu.Content>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteNavigationMenu.Content\n      class={cn(\n        'grid w-max gap-1 p-2',\n        // A two-column panel is the shape most menu bars want, and it is opt-in\n        // through this hook rather than a prop because the column count is a\n        // layout decision the caller's content makes.\n        'data-[wide]:grid-cols-2',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n    </KobalteNavigationMenu.Content>\n  )\n}\n\n/**\n * The shared panel surface. One per menu bar, and the wrapper supplies it — but\n * exported so a caller with an unusual layout can place it themselves.\n */\nexport function NavigationMenuViewport(\n  props: ComponentProps<typeof KobalteNavigationMenu.Viewport>\n) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteNavigationMenu.Viewport\n      class={cn(\n        'absolute top-full left-0 isolate z-(--z-menu) mt-1.5 flex justify-center overflow-hidden',\n        'h-(--kb-navigation-menu-viewport-height) w-(--kb-navigation-menu-viewport-width)',\n        'origin-top transition-[width,height] duration-200 ease-out',\n        local.class\n      )}\n      {...rest}\n    >\n      <div\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'w-full rounded-lg border border-border bg-popover p-1 shadow-lg'\n        )}\n      >\n        <KobalteNavigationMenu.Content />\n      </div>\n    </KobalteNavigationMenu.Viewport>\n  )\n}\n\n/**\n * A link inside a panel. `href` is the point of the component, so it is a link\n * rather than a button — and the accessible name comes from its text, which is\n * why there is no `aria-label` here.\n */\nexport type NavigationMenuItemProps = ComponentProps<typeof KobalteNavigationMenu.Item> & {\n  /** A one-line description, shown under the label. */\n  description?: string\n  /** A leading icon. */\n  icon?: JSX.Element\n}\n\nexport function NavigationMenuItem(props: NavigationMenuItemProps) {\n  const [local, rest] = splitProps(props, ['class', 'children', 'description', 'icon'])\n\n  return (\n    <KobalteNavigationMenu.Item\n      class={cn(\n        menuItem,\n        'grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5',\n        local.description && 'grid-rows-[auto_auto] py-2',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.icon}\n      <span class=\"font-medium\">{local.children}</span>\n      {local.description && (\n        <span class=\"col-start-2 text-xs text-muted-foreground\">{local.description}</span>\n      )}\n    </KobalteNavigationMenu.Item>\n  )\n}\n\nexport function NavigationMenuSeparator(\n  props: ComponentProps<typeof KobalteNavigationMenu.Separator>\n) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteNavigationMenu.Separator\n      class={cn('-mx-1 my-1 h-px bg-border', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/** A non-interactive caption above a group of items. */\nexport function NavigationMenuGroupLabel(\n  props: ComponentProps<typeof KobalteNavigationMenu.GroupLabel>\n) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteNavigationMenu.GroupLabel\n      class={cn(\n        menuContentPadding,\n        'text-2xs font-semibold text-muted-foreground uppercase',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function NavigationMenuGroup(props: ComponentProps<typeof KobalteNavigationMenu.Group>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteNavigationMenu.Group class={cn('grid gap-0.5', local.class)} {...rest} />\n}\n"],"mappings":"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"}
+{"version":3,"file":"navigation-menu.js","names":["splitProps","ComponentProps","JSX","KobalteNavigationMenu","ChevronDown","cn","menuContentPadding","menuItem","overlayMotion","overlaySurface","NavigationMenuProps","Root","label","NavigationMenu","props","local","rest","_$createComponent","_$mergeProps","class","aria-label","children","_$memo","NavigationMenuViewport","NavigationMenuMenu","Menu","NavigationMenuTrigger","Trigger","NavigationMenuContent","Content","Portal","Viewport","NavigationMenuItemProps","Item","description","icon","Element","NavigationMenuItem","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","NavigationMenuSeparator","Separator","NavigationMenuGroupLabel","GroupLabel","NavigationMenuGroup","Group","_$createComponent","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/navigation-menu/navigation-menu.tsx"],"sourcesContent":["import { splitProps, type ComponentProps, type JSX } from 'solid-js'\nimport * as KobalteNavigationMenu from '@kobalte/core/navigation-menu'\nimport { ChevronDown } from 'lucide-solid'\nimport { cn } from '#lib/utils'\nimport { menuContentPadding, menuItem, overlayMotion, overlaySurface } from '#lib/overlay'\n\n/**\n * NavigationMenu.\n *\n * A site-style menu bar: top-level triggers that open panels of links. It is the\n * header pattern — a documentation site, a marketing page, an application with\n * several top-level destinations — and it is deliberately *not* a `Menubar`.\n * `Menubar` is a row of application menus (File, Edit, View) whose items are\n * commands; this is a row of destinations whose panels are links. The two have\n * different roles, different keyboard models, and different semantics.\n *\n * ## Composition\n *\n * Kobalte's primitive has an unusual shape, and getting it wrong is why this took\n * three attempts to port. The structure is:\n *\n * ```tsx\n * <NavigationMenu>\n *   <NavigationMenuMenu>\n *     <NavigationMenuTrigger>Destinations</NavigationMenuTrigger>\n *     <NavigationMenuContent>\n *       <NavigationMenuItem href=\"/x\">X</NavigationMenuItem>\n *     </NavigationMenuContent>\n *   </NavigationMenuMenu>\n *   <NavigationMenuViewport />\n * </NavigationMenu>\n * ```\n *\n * Three facts that are not obvious from the prop types:\n *\n * - `Menu` renders **nothing**. It is a context provider — one per top-level\n *   entry, naming it so the bar's arrow keys can move between entries. A menu\n *   without one cannot be reached by keyboard.\n * - `Trigger` renders `<li role=\"presentation\"><button>`. It is already the list\n *   item, so wrapping it in your own `<li>` produces a `<ul>` inside a `<ul>`.\n * - `Content` must be a direct child of `Menu`, and the `Viewport` is a **sibling\n *   of the menus** — not inside them. All the panels share one viewport, which is\n *   what lets the bar animate between them instead of each panel popping in place.\n * - The viewport is an empty surface. Each `Content` reaches it through Kobalte's\n *   `Portal`, which mounts the panel inside the viewport while keeping it in its\n *   own `Menu`'s context. A `Content` rendered anywhere else — the viewport's own\n *   children included — has no `Menu` above it, and Kobalte throws\n *   `useMenuRootContext must be used within a MenuRoot` the moment a panel opens.\n *\n * The wrapper enforces the last two by rendering the `Viewport` itself and by\n * portalling every `NavigationMenuContent`, so a caller cannot forget either and\n * get a menu whose panels never appear.\n */\n\nexport type NavigationMenuProps = ComponentProps<typeof KobalteNavigationMenu.Root> & {\n  /** The accessible name for the navigation landmark. */\n  label?: string\n}\n\nexport function NavigationMenu(props: NavigationMenuProps) {\n  const [local, rest] = splitProps(props, ['label', 'class', 'children'])\n\n  return (\n    <KobalteNavigationMenu.Root\n      class={cn(\n        'relative flex max-w-max flex-1 items-center justify-center',\n        '[&>nav>ul]:flex [&>nav>ul]:items-center [&>nav>ul]:gap-1',\n        local.class\n      )}\n      aria-label={local.label ?? 'Main'}\n      {...rest}\n    >\n      {local.children}\n      {/*\n        The shared panel surface. Rendered here rather than left to the caller:\n        every panel animates through this one element, and a menu bar without it\n        opens panels that never paint.\n      */}\n      <NavigationMenuViewport />\n    </KobalteNavigationMenu.Root>\n  )\n}\n\n/**\n * One top-level entry. Renders nothing itself — see the note above — and exists\n * so a caller cannot build a bar whose entries the keyboard cannot reach.\n */\nexport function NavigationMenuMenu(props: ComponentProps<typeof KobalteNavigationMenu.Menu>) {\n  return <KobalteNavigationMenu.Menu {...props} />\n}\n\nexport function NavigationMenuTrigger(props: ComponentProps<typeof KobalteNavigationMenu.Trigger>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteNavigationMenu.Trigger\n      class={cn(\n        'inline-flex items-center gap-1 rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground',\n        'transition-colors ease-out outline-none select-none',\n        'hover:bg-muted hover:text-foreground',\n        'data-[expanded]:bg-muted data-[expanded]:text-foreground',\n        'data-[highlighted]:bg-muted data-[highlighted]:text-foreground',\n        'focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <ChevronDown\n        aria-hidden=\"true\"\n        class=\"size-3.5 transition-transform duration-200 ease-out [[data-expanded]_&]:rotate-180\"\n      />\n    </KobalteNavigationMenu.Trigger>\n  )\n}\n\nexport function NavigationMenuContent(props: ComponentProps<typeof KobalteNavigationMenu.Content>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteNavigationMenu.Portal>\n      <KobalteNavigationMenu.Content\n        class={cn(\n          // Absolute so the viewport sizes to the active panel's measured box and\n          // animates between panels, rather than stacking them.\n          'absolute top-0 left-0 grid w-max gap-1 p-2 outline-none',\n          // The motion is the panel's, not the viewport's. Kobalte keeps an\n          // outgoing panel mounted until the viewport's own animation ends; a\n          // viewport that carries an entrance animation never fires that again\n          // after it opens, so the previous panel would stay painted under the\n          // next one.\n          overlayMotion,\n          // A two-column panel is the shape most menu bars want, and it is opt-in\n          // through this hook rather than a prop because the column count is a\n          // layout decision the caller's content makes.\n          'data-[wide]:grid-cols-2',\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </KobalteNavigationMenu.Content>\n    </KobalteNavigationMenu.Portal>\n  )\n}\n\n/**\n * The shared panel surface. One per menu bar, and the wrapper supplies it — but\n * exported so a caller with an unusual layout can place it themselves.\n *\n * It renders no children: the panels arrive through each `NavigationMenuContent`'s\n * portal. Kobalte positions it under the bar and publishes the active panel's size\n * as `--kb-navigation-menu-viewport-*`, which the surface animates between.\n * `box-content` keeps the border outside that measured size so a panel is never\n * clipped by its own frame.\n */\nexport function NavigationMenuViewport(\n  props: ComponentProps<typeof KobalteNavigationMenu.Viewport>\n) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteNavigationMenu.Viewport\n      data-slot=\"navigation-menu-viewport\"\n      class={cn(\n        overlaySurface,\n        'isolate z-(--z-menu) mt-1.5 box-content list-none overflow-hidden',\n        'h-(--kb-navigation-menu-viewport-height) w-(--kb-navigation-menu-viewport-width)',\n        'origin-(--kb-menu-content-transform-origin) transition-[width,height] duration-200 ease-out',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * A link inside a panel. `href` is the point of the component, so it is a link\n * rather than a button — and the accessible name comes from its text, which is\n * why there is no `aria-label` here.\n */\nexport type NavigationMenuItemProps = ComponentProps<typeof KobalteNavigationMenu.Item> & {\n  /** A one-line description, shown under the label. */\n  description?: string\n  /** A leading icon. */\n  icon?: JSX.Element\n}\n\nexport function NavigationMenuItem(props: NavigationMenuItemProps) {\n  const [local, rest] = splitProps(props, ['class', 'children', 'description', 'icon'])\n\n  return (\n    <KobalteNavigationMenu.Item\n      class={cn(\n        menuItem,\n        'grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5',\n        local.description && 'grid-rows-[auto_auto] py-2',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.icon}\n      <span class=\"font-medium\">{local.children}</span>\n      {local.description && (\n        <span class=\"col-start-2 text-xs text-muted-foreground\">{local.description}</span>\n      )}\n    </KobalteNavigationMenu.Item>\n  )\n}\n\nexport function NavigationMenuSeparator(\n  props: ComponentProps<typeof KobalteNavigationMenu.Separator>\n) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteNavigationMenu.Separator\n      class={cn('-mx-1 my-1 h-px bg-border', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/** A non-interactive caption above a group of items. */\nexport function NavigationMenuGroupLabel(\n  props: ComponentProps<typeof KobalteNavigationMenu.GroupLabel>\n) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <KobalteNavigationMenu.GroupLabel\n      class={cn(\n        menuContentPadding,\n        'text-2xs font-semibold text-muted-foreground uppercase',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function NavigationMenuGroup(props: ComponentProps<typeof KobalteNavigationMenu.Group>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteNavigationMenu.Group class={cn('grid gap-0.5', local.class)} {...rest} />\n}\n"],"mappings":"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"}

package/dist/components/ui/toast/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,YAAY,EAA4B,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAE9F,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInD;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,CAAA;AAgB3E,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,iFAAiF;IACjF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAoDD;;;GAGG;AACH,eAAO,MAAM,KAAK;kBACF,YAAY,GAAG,MAAM;mBAKpB,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,MAAM;iBAGjE,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,MAAM;mBAG7D,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,MAAM;gBAGlE,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,MAAM;IAG3E;;;;OAIG;YACK,CAAC,WACE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC,YAC9B;QACR,OAAO,EAAE,MAAM,CAAA;QACf,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAA;QACvC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAC,CAAA;KAC7C,GACA,OAAO,CAAC,CAAC,CAAC;;;CAgCd,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,MAAM,CAAC,GAAG;IACtE,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAA;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AASD,iFAAiF;AACjF,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eA4B1C;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,YAAY,EAA4B,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAE9F,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInD;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,CAAA;AAgB3E,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACpB,iFAAiF;IACjF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAoDD;;;GAGG;AACH,eAAO,MAAM,KAAK;kBACF,YAAY,GAAG,MAAM;mBAKpB,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,MAAM;iBAGjE,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,MAAM;mBAG7D,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,MAAM;gBAGlE,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,MAAM;IAG3E;;;;OAIG;YACK,CAAC,WACE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC,YAC9B;QACR,OAAO,EAAE,MAAM,CAAA;QACf,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAA;QACvC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,MAAM,CAAC,CAAA;KAC7C,GACA,OAAO,CAAC,CAAC,CAAC;;;CAgCd,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,MAAM,CAAC,GAAG;IACtE,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAA;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAqBD,iFAAiF;AACjF,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eA+B1C;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/ui/toast/toast.js

@@ -151,11 +151,22 @@ var toast = {
 	dismiss: toaster.dismiss,
 	clear: toaster.clear
 };
+/**
+* The corner is set on the region, not the list. The region is the `fixed`
+* element: an inset on the list inside it positions nothing, and the region falls
+* back to wherever it happens to sit in the document flow.
+*/
 var toasterPosition = {
-	"top-left": "top-0 left-0 items-start",
-	"top-right": "top-0 right-0 items-end",
-	"bottom-left": "bottom-0 left-0 items-start",
-	"bottom-right": "bottom-0 right-0 items-end"
+	"top-left": "top-0 left-0",
+	"top-right": "top-0 right-0",
+	"bottom-left": "bottom-0 left-0",
+	"bottom-right": "bottom-0 right-0"
+};
+var toasterAlignment = {
+	"top-left": "items-start",
+	"top-right": "items-end",
+	"bottom-left": "items-start",
+	"bottom-right": "items-end"
 };
 /** Mount once, near the root. Renders the stack and owns its timing defaults. */
 function Toaster(props) {
@@ -173,10 +184,12 @@ function Toaster(props) {
 		swipeDirection: "right",
 		pauseOnInteraction: true,
 		pauseOnPageIdle: true,
-		"class": "pointer-events-none fixed z-(--z-toast) flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm"
+		get ["class"]() {
+			return cn("pointer-events-none fixed z-(--z-toast) flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm", toasterPosition[local.position ?? "bottom-right"]);
+		}
 	}, rest, { get children() {
 		return createComponent(Toast.List, { get ["class"]() {
-			return cn("flex flex-col gap-2", toasterPosition[local.position ?? "bottom-right"], local.class);
+			return cn("flex flex-col gap-2", toasterAlignment[local.position ?? "bottom-right"], local.class);
 		} });
 	} }));
 }

package/dist/components/ui/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":["Toast","KobalteToast","ToastComponentProps","toaster","X","ComponentProps","JSX","Show","splitProps","cn","ToastTone","toastTones","Record","default","success","warning","destructive","info","ToastOptions","title","description","tone","action","Element","persistent","duration","region","ToastCard","props","_$createComponent","toastId","priority","class","style","children","_tmpl$","_el$2","_tmpl$3","_$insert","Title","when","Description","_el$3","_tmpl$2","CloseButton","toast","show","options","_$mergeProps","Omit","error","promise","Promise","T","messages","pending","data","resolved","state","dismiss","clear","ToasterProps","Region","position","toasterPosition","Toaster","local","rest","regionId","limit","swipeDirection","pauseOnInteraction","pauseOnPageIdle","List","_$createComponent","KobalteToast","_$mergeProps"],"sources":["../../../../src/components/ui/toast/toast.tsx"],"sourcesContent":["import { Toast as KobalteToast, type ToastComponentProps, toaster } from '@kobalte/core/toast'\nimport { X } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Toast.\n *\n * A short, self-dismissing message about something that already happened.\n *\n * The rules that make toasts helpful rather than hostile are built into this\n * API rather than left to callers:\n *\n *   - A toast never carries the only route to an action. Anything important\n *     enough to need doing belongs in the interface, not in a message that\n *     disappears. `action` exists, but it is a convenience, not a flow.\n *   - Errors from user-initiated work get `priority=\"high\"` so a screen reader\n *     interrupts to announce them; background progress uses the default low\n *     priority so it is not read over whatever the user is doing.\n *   - A toast with a way to undo is preferred to a confirmation dialog for a\n *     reversible action. Undo after the fact costs the user nothing; a modal\n *     before it costs everyone a click.\n *\n * `Toaster` is mounted once, near the root of the app.\n */\n\ntype ToastTone = 'default' | 'success' | 'warning' | 'destructive' | 'info'\n\n/**\n * The tone dot's colour. A custom property rather than five colour utilities\n * because the value is applied inline (the tone is data, not markup) and a\n * Tailwind colour class cannot be built from a runtime value without becoming\n * invisible to the linter.\n */\nconst toastTones: Record<ToastTone, string> = {\n  default: 'var(--foreground)',\n  success: 'var(--success)',\n  warning: 'var(--warning)',\n  destructive: 'var(--destructive)',\n  info: 'var(--info)',\n}\n\nexport type ToastOptions = {\n  title: string\n  description?: string\n  tone?: ToastTone\n  /** A control rendered inside the toast, usually an Undo. */\n  action?: JSX.Element\n  /** Keep the toast until it is dismissed. Use for a failure the user must see. */\n  persistent?: boolean\n  /** Milliseconds before auto-dismiss. Overrides the region's setting. */\n  duration?: number\n  /** Which Toaster region to render into. */\n  region?: string\n}\n\nfunction ToastCard(props: ToastComponentProps & ToastOptions) {\n  const tone = () => props.tone ?? 'default'\n\n  return (\n    <KobalteToast\n      toastId={props.toastId}\n      /**\n       * A user-initiated outcome is announced; a background one waits its turn.\n       * A failure the user caused is worth interrupting for; a sync finishing\n       * quietly is not.\n       */\n      priority={tone() === 'destructive' ? 'high' : 'low'}\n      duration={props.duration}\n      persistent={props.persistent}\n      class={cn(\n        'pointer-events-auto flex w-full items-start gap-3 rounded-xl border border-border bg-popover p-3 shadow-lg',\n        'data-[opened]:animate-in data-[opened]:slide-in-from-right-full data-[opened]:fade-in-0',\n        'data-[closed]:animate-out data-[closed]:slide-out-to-right-full data-[closed]:fade-out-0',\n        'data-[swipe=move]:translate-x-(--kb-toast-swipe-move-x) data-[swipe=move]:transition-none',\n        'data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-transform',\n        'data-[swipe=end]:animate-out data-[swipe=end]:slide-out-to-right-full'\n      )}\n      style={{ '--toast-tone': toastTones[tone()] }}\n    >\n      <span\n        aria-hidden=\"true\"\n        class=\"mt-1.5 size-1.5 shrink-0 rounded-full\"\n        style={{ 'background-color': 'var(--toast-tone)' }}\n      />\n      <div class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <KobalteToast.Title class=\"text-sm font-medium\">{props.title}</KobalteToast.Title>\n        <Show when={props.description}>\n          <KobalteToast.Description class=\"text-sm text-muted-foreground\">\n            {props.description}\n          </KobalteToast.Description>\n        </Show>\n        <Show when={props.action}>\n          <div class=\"mt-1.5 flex items-center gap-2\">{props.action}</div>\n        </Show>\n      </div>\n      <KobalteToast.CloseButton\n        aria-label=\"Dismiss notification\"\n        class=\"text-muted-foreground shrink-0 rounded-sm p-0.5 transition-colors ease-out outline-none hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n      >\n        <X class=\"size-3.5\" />\n      </KobalteToast.CloseButton>\n    </KobalteToast>\n  )\n}\n\n/**\n * The toast API. `show` is the general form; the tone helpers are shorthand for\n * the four cases that come up constantly.\n */\nexport const toast = {\n  show(options: ToastOptions): number {\n    return toaster.show((props) => <ToastCard {...props} {...options} />, {\n      region: options.region,\n    })\n  },\n  success(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {\n    return toast.show({ ...options, title, tone: 'success' })\n  },\n  error(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {\n    return toast.show({ ...options, title, tone: 'destructive', persistent: true })\n  },\n  warning(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {\n    return toast.show({ ...options, title, tone: 'warning' })\n  },\n  info(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {\n    return toast.show({ ...options, title, tone: 'info' })\n  },\n  /**\n   * A toast that resolves with a promise: pending, then success or failure.\n   * The right shape for an operation with a visible duration, because the user\n   * gets one message instead of three.\n   */\n  promise<T>(\n    promise: Promise<T> | (() => Promise<T>),\n    messages: {\n      pending: string\n      success: string | ((data: T) => string)\n      error: string | ((error: unknown) => string)\n    }\n  ): Promise<T> {\n    const resolved = typeof promise === 'function' ? promise() : promise\n    toaster.promise(resolved, (props) => {\n      const tone: ToastTone =\n        props.state === 'fulfilled'\n          ? 'success'\n          : props.state === 'rejected'\n            ? 'destructive'\n            : 'default'\n      const title =\n        props.state === 'pending'\n          ? messages.pending\n          : props.state === 'fulfilled'\n            ? typeof messages.success === 'function'\n              ? messages.success(props.data as T)\n              : messages.success\n            : typeof messages.error === 'function'\n              ? messages.error(props.error)\n              : messages.error\n      return (\n        <ToastCard\n          toastId={props.toastId}\n          title={title}\n          tone={tone}\n          persistent={props.state === 'rejected'}\n        />\n      )\n    })\n    return resolved\n  },\n  dismiss: toaster.dismiss,\n  clear: toaster.clear,\n}\n\nexport type ToasterProps = ComponentProps<typeof KobalteToast.Region> & {\n  /** Where the stack sits. Defaults to the bottom-right, clear of the shell. */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  region?: string\n}\n\nconst toasterPosition = {\n  'top-left': 'top-0 left-0 items-start',\n  'top-right': 'top-0 right-0 items-end',\n  'bottom-left': 'bottom-0 left-0 items-start',\n  'bottom-right': 'bottom-0 right-0 items-end',\n}\n\n/** Mount once, near the root. Renders the stack and owns its timing defaults. */\nexport function Toaster(props: ToasterProps) {\n  const [local, rest] = splitProps(props, ['position', 'region', 'class'])\n\n  return (\n    <KobalteToast.Region\n      regionId={local.region}\n      duration={5000}\n      limit={3}\n      swipeDirection=\"right\"\n      pauseOnInteraction\n      pauseOnPageIdle\n      /**\n       * The toast region is a top layer: opening a dialog must not hide an\n       * in-flight notification, and clicking a toast must not dismiss the\n       * dialog behind it.\n       */\n      class=\"pointer-events-none fixed z-(--z-toast) flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm\"\n      {...rest}\n    >\n      <KobalteToast.List\n        class={cn(\n          'flex flex-col gap-2',\n          toasterPosition[local.position ?? 'bottom-right'],\n          local.class\n        )}\n      />\n    </KobalteToast.Region>\n  )\n}\n\nexport { toaster }\n"],"mappings":"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"}
+{"version":3,"file":"toast.js","names":["Toast","KobalteToast","ToastComponentProps","toaster","X","ComponentProps","JSX","Show","splitProps","cn","ToastTone","toastTones","Record","default","success","warning","destructive","info","ToastOptions","title","description","tone","action","Element","persistent","duration","region","ToastCard","props","_$createComponent","toastId","priority","class","style","children","_tmpl$","_el$2","_tmpl$3","_$insert","Title","when","Description","_el$3","_tmpl$2","CloseButton","toast","show","options","_$mergeProps","Omit","error","promise","Promise","T","messages","pending","data","resolved","state","dismiss","clear","ToasterProps","Region","position","toasterPosition","toasterAlignment","Toaster","local","rest","regionId","limit","swipeDirection","pauseOnInteraction","pauseOnPageIdle","List","_$createComponent","KobalteToast","_$mergeProps"],"sources":["../../../../src/components/ui/toast/toast.tsx"],"sourcesContent":["import { Toast as KobalteToast, type ToastComponentProps, toaster } from '@kobalte/core/toast'\nimport { X } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Toast.\n *\n * A short, self-dismissing message about something that already happened.\n *\n * The rules that make toasts helpful rather than hostile are built into this\n * API rather than left to callers:\n *\n *   - A toast never carries the only route to an action. Anything important\n *     enough to need doing belongs in the interface, not in a message that\n *     disappears. `action` exists, but it is a convenience, not a flow.\n *   - Errors from user-initiated work get `priority=\"high\"` so a screen reader\n *     interrupts to announce them; background progress uses the default low\n *     priority so it is not read over whatever the user is doing.\n *   - A toast with a way to undo is preferred to a confirmation dialog for a\n *     reversible action. Undo after the fact costs the user nothing; a modal\n *     before it costs everyone a click.\n *\n * `Toaster` is mounted once, near the root of the app.\n */\n\ntype ToastTone = 'default' | 'success' | 'warning' | 'destructive' | 'info'\n\n/**\n * The tone dot's colour. A custom property rather than five colour utilities\n * because the value is applied inline (the tone is data, not markup) and a\n * Tailwind colour class cannot be built from a runtime value without becoming\n * invisible to the linter.\n */\nconst toastTones: Record<ToastTone, string> = {\n  default: 'var(--foreground)',\n  success: 'var(--success)',\n  warning: 'var(--warning)',\n  destructive: 'var(--destructive)',\n  info: 'var(--info)',\n}\n\nexport type ToastOptions = {\n  title: string\n  description?: string\n  tone?: ToastTone\n  /** A control rendered inside the toast, usually an Undo. */\n  action?: JSX.Element\n  /** Keep the toast until it is dismissed. Use for a failure the user must see. */\n  persistent?: boolean\n  /** Milliseconds before auto-dismiss. Overrides the region's setting. */\n  duration?: number\n  /** Which Toaster region to render into. */\n  region?: string\n}\n\nfunction ToastCard(props: ToastComponentProps & ToastOptions) {\n  const tone = () => props.tone ?? 'default'\n\n  return (\n    <KobalteToast\n      toastId={props.toastId}\n      /**\n       * A user-initiated outcome is announced; a background one waits its turn.\n       * A failure the user caused is worth interrupting for; a sync finishing\n       * quietly is not.\n       */\n      priority={tone() === 'destructive' ? 'high' : 'low'}\n      duration={props.duration}\n      persistent={props.persistent}\n      class={cn(\n        'pointer-events-auto flex w-full items-start gap-3 rounded-xl border border-border bg-popover p-3 shadow-lg',\n        'data-[opened]:animate-in data-[opened]:slide-in-from-right-full data-[opened]:fade-in-0',\n        'data-[closed]:animate-out data-[closed]:slide-out-to-right-full data-[closed]:fade-out-0',\n        'data-[swipe=move]:translate-x-(--kb-toast-swipe-move-x) data-[swipe=move]:transition-none',\n        'data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-transform',\n        'data-[swipe=end]:animate-out data-[swipe=end]:slide-out-to-right-full'\n      )}\n      style={{ '--toast-tone': toastTones[tone()] }}\n    >\n      <span\n        aria-hidden=\"true\"\n        class=\"mt-1.5 size-1.5 shrink-0 rounded-full\"\n        style={{ 'background-color': 'var(--toast-tone)' }}\n      />\n      <div class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <KobalteToast.Title class=\"text-sm font-medium\">{props.title}</KobalteToast.Title>\n        <Show when={props.description}>\n          <KobalteToast.Description class=\"text-sm text-muted-foreground\">\n            {props.description}\n          </KobalteToast.Description>\n        </Show>\n        <Show when={props.action}>\n          <div class=\"mt-1.5 flex items-center gap-2\">{props.action}</div>\n        </Show>\n      </div>\n      <KobalteToast.CloseButton\n        aria-label=\"Dismiss notification\"\n        class=\"text-muted-foreground shrink-0 rounded-sm p-0.5 transition-colors ease-out outline-none hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle\"\n      >\n        <X class=\"size-3.5\" />\n      </KobalteToast.CloseButton>\n    </KobalteToast>\n  )\n}\n\n/**\n * The toast API. `show` is the general form; the tone helpers are shorthand for\n * the four cases that come up constantly.\n */\nexport const toast = {\n  show(options: ToastOptions): number {\n    return toaster.show((props) => <ToastCard {...props} {...options} />, {\n      region: options.region,\n    })\n  },\n  success(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {\n    return toast.show({ ...options, title, tone: 'success' })\n  },\n  error(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {\n    return toast.show({ ...options, title, tone: 'destructive', persistent: true })\n  },\n  warning(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {\n    return toast.show({ ...options, title, tone: 'warning' })\n  },\n  info(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {\n    return toast.show({ ...options, title, tone: 'info' })\n  },\n  /**\n   * A toast that resolves with a promise: pending, then success or failure.\n   * The right shape for an operation with a visible duration, because the user\n   * gets one message instead of three.\n   */\n  promise<T>(\n    promise: Promise<T> | (() => Promise<T>),\n    messages: {\n      pending: string\n      success: string | ((data: T) => string)\n      error: string | ((error: unknown) => string)\n    }\n  ): Promise<T> {\n    const resolved = typeof promise === 'function' ? promise() : promise\n    toaster.promise(resolved, (props) => {\n      const tone: ToastTone =\n        props.state === 'fulfilled'\n          ? 'success'\n          : props.state === 'rejected'\n            ? 'destructive'\n            : 'default'\n      const title =\n        props.state === 'pending'\n          ? messages.pending\n          : props.state === 'fulfilled'\n            ? typeof messages.success === 'function'\n              ? messages.success(props.data as T)\n              : messages.success\n            : typeof messages.error === 'function'\n              ? messages.error(props.error)\n              : messages.error\n      return (\n        <ToastCard\n          toastId={props.toastId}\n          title={title}\n          tone={tone}\n          persistent={props.state === 'rejected'}\n        />\n      )\n    })\n    return resolved\n  },\n  dismiss: toaster.dismiss,\n  clear: toaster.clear,\n}\n\nexport type ToasterProps = ComponentProps<typeof KobalteToast.Region> & {\n  /** Where the stack sits. Defaults to the bottom-right, clear of the shell. */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n  region?: string\n}\n\n/**\n * The corner is set on the region, not the list. The region is the `fixed`\n * element: an inset on the list inside it positions nothing, and the region falls\n * back to wherever it happens to sit in the document flow.\n */\nconst toasterPosition = {\n  'top-left': 'top-0 left-0',\n  'top-right': 'top-0 right-0',\n  'bottom-left': 'bottom-0 left-0',\n  'bottom-right': 'bottom-0 right-0',\n}\n\nconst toasterAlignment = {\n  'top-left': 'items-start',\n  'top-right': 'items-end',\n  'bottom-left': 'items-start',\n  'bottom-right': 'items-end',\n}\n\n/** Mount once, near the root. Renders the stack and owns its timing defaults. */\nexport function Toaster(props: ToasterProps) {\n  const [local, rest] = splitProps(props, ['position', 'region', 'class'])\n\n  return (\n    <KobalteToast.Region\n      regionId={local.region}\n      duration={5000}\n      limit={3}\n      swipeDirection=\"right\"\n      pauseOnInteraction\n      pauseOnPageIdle\n      /**\n       * The toast region is a top layer: opening a dialog must not hide an\n       * in-flight notification, and clicking a toast must not dismiss the\n       * dialog behind it.\n       */\n      class={cn(\n        'pointer-events-none fixed z-(--z-toast) flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm',\n        toasterPosition[local.position ?? 'bottom-right']\n      )}\n      {...rest}\n    >\n      <KobalteToast.List\n        class={cn(\n          'flex flex-col gap-2',\n          toasterAlignment[local.position ?? 'bottom-right'],\n          local.class\n        )}\n      />\n    </KobalteToast.Region>\n  )\n}\n\nexport { toaster }\n"],"mappings":"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"}

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

@@ -131,6 +131,14 @@ export function ContextMenuRadioItem(props: ComponentProps<typeof KobalteContext
   )
 }
 
+/**
+ * The caption of a `ContextMenuGroup`, and that group's accessible name. It must be a
+ * child of the group it names: Kobalte reads the group from context, so a label
+ * placed directly in the content throws `useMenuGroupContext must be used within
+ * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+ * label and its items in a group anyway — the grouping is what a screen reader
+ * announces.
+ */
 export function ContextMenuLabel(props: ComponentProps<typeof KobalteContextMenu.GroupLabel>) {
   const [local, rest] = splitProps(props, ['class'])
   return <KobalteContextMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />

package/dist/r/src/components/ui/drawer/drawer.tsx

@@ -41,7 +41,14 @@ export function DrawerOverlay(props: ComponentProps<typeof DrawerPrimitive.Overl
   )
 }
 
-export type DrawerContentProps = ComponentProps<typeof DrawerPrimitive.Content> & {
+export type DrawerContentProps = Omit<ComponentProps<typeof DrawerPrimitive.Content>, 'side'> & {
+  /**
+   * Not accepted here. corvu reads the side from the root `Drawer`, which uses it
+   * for the drag axis and publishes it as `data-side`; a `side` on the content
+   * would type-check through the polymorphic props and be silently ignored,
+   * leaving the drawer on the bottom edge. Set `<Drawer side="right">` instead.
+   */
+  side?: never
   /**
    * Draw the grabber at the leading edge of the sheet.
    *

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

@@ -187,6 +187,14 @@ export function DropdownMenuRadioItem(props: ComponentProps<typeof KobalteDropdo
   )
 }
 
+/**
+ * The caption of a `DropdownMenuGroup`, and that group's accessible name. It must be a
+ * child of the group it names: Kobalte reads the group from context, so a label
+ * placed directly in the content throws `useMenuGroupContext must be used within
+ * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+ * label and its items in a group anyway — the grouping is what a screen reader
+ * announces.
+ */
 export function DropdownMenuLabel(props: ComponentProps<typeof KobalteDropdownMenu.GroupLabel>) {
   const [local, rest] = splitProps(props, ['class'])
   return <KobalteDropdownMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />

package/dist/r/src/components/ui/menubar/menubar.tsx

@@ -160,6 +160,14 @@ export function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.Rad
   )
 }
 
+/**
+ * The caption of a `MenubarGroup`, and that group's accessible name. It must be a
+ * child of the group it names: Kobalte reads the group from context, so a label
+ * placed directly in the content throws `useMenuGroupContext must be used within
+ * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+ * label and its items in a group anyway — the grouping is what a screen reader
+ * announces.
+ */
 export function MenubarLabel(props: ComponentProps<typeof KobalteMenubar.GroupLabel>) {
   const [local, rest] = splitProps(props, ['class'])
   return <KobalteMenubar.GroupLabel class={cn(menuLabel, local.class)} {...rest} />

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

@@ -41,9 +41,15 @@ import { menuContentPadding, menuItem, overlayMotion, overlaySurface } from '../
  * - `Content` must be a direct child of `Menu`, and the `Viewport` is a **sibling
  *   of the menus** — not inside them. All the panels share one viewport, which is
  *   what lets the bar animate between them instead of each panel popping in place.
+ * - The viewport is an empty surface. Each `Content` reaches it through Kobalte's
+ *   `Portal`, which mounts the panel inside the viewport while keeping it in its
+ *   own `Menu`'s context. A `Content` rendered anywhere else — the viewport's own
+ *   children included — has no `Menu` above it, and Kobalte throws
+ *   `useMenuRootContext must be used within a MenuRoot` the moment a panel opens.
  *
- * The wrapper enforces the last of those by rendering the `Viewport` itself, so a
- * caller cannot forget it and get a menu whose panels never appear.
+ * The wrapper enforces the last two by rendering the `Viewport` itself and by
+ * portalling every `NavigationMenuContent`, so a caller cannot forget either and
+ * get a menu whose panels never appear.
  */
 
 export type NavigationMenuProps = ComponentProps<typeof KobalteNavigationMenu.Root> & {
@@ -112,25 +118,41 @@ export function NavigationMenuContent(props: ComponentProps<typeof KobalteNaviga
   const [local, rest] = splitProps(props, ['class', 'children'])
 
   return (
-    <KobalteNavigationMenu.Content
-      class={cn(
-        'grid w-max gap-1 p-2',
-        // A two-column panel is the shape most menu bars want, and it is opt-in
-        // through this hook rather than a prop because the column count is a
-        // layout decision the caller's content makes.
-        'data-[wide]:grid-cols-2',
-        local.class
-      )}
-      {...rest}
-    >
-      {local.children}
-    </KobalteNavigationMenu.Content>
+    <KobalteNavigationMenu.Portal>
+      <KobalteNavigationMenu.Content
+        class={cn(
+          // Absolute so the viewport sizes to the active panel's measured box and
+          // animates between panels, rather than stacking them.
+          'absolute top-0 left-0 grid w-max gap-1 p-2 outline-none',
+          // The motion is the panel's, not the viewport's. Kobalte keeps an
+          // outgoing panel mounted until the viewport's own animation ends; a
+          // viewport that carries an entrance animation never fires that again
+          // after it opens, so the previous panel would stay painted under the
+          // next one.
+          overlayMotion,
+          // A two-column panel is the shape most menu bars want, and it is opt-in
+          // through this hook rather than a prop because the column count is a
+          // layout decision the caller's content makes.
+          'data-[wide]:grid-cols-2',
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </KobalteNavigationMenu.Content>
+    </KobalteNavigationMenu.Portal>
   )
 }
 
 /**
  * The shared panel surface. One per menu bar, and the wrapper supplies it — but
  * exported so a caller with an unusual layout can place it themselves.
+ *
+ * It renders no children: the panels arrive through each `NavigationMenuContent`'s
+ * portal. Kobalte positions it under the bar and publishes the active panel's size
+ * as `--kb-navigation-menu-viewport-*`, which the surface animates between.
+ * `box-content` keeps the border outside that measured size so a panel is never
+ * clipped by its own frame.
  */
 export function NavigationMenuViewport(
   props: ComponentProps<typeof KobalteNavigationMenu.Viewport>
@@ -139,24 +161,16 @@ export function NavigationMenuViewport(
 
   return (
     <KobalteNavigationMenu.Viewport
+      data-slot="navigation-menu-viewport"
       class={cn(
-        'absolute top-full left-0 isolate z-(--z-menu) mt-1.5 flex justify-center overflow-hidden',
+        overlaySurface,
+        'isolate z-(--z-menu) mt-1.5 box-content list-none overflow-hidden',
         'h-(--kb-navigation-menu-viewport-height) w-(--kb-navigation-menu-viewport-width)',
-        'origin-top transition-[width,height] duration-200 ease-out',
+        'origin-(--kb-menu-content-transform-origin) transition-[width,height] duration-200 ease-out',
         local.class
       )}
       {...rest}
-    >
-      <div
-        class={cn(
-          overlaySurface,
-          overlayMotion,
-          'w-full rounded-lg border border-border bg-popover p-1 shadow-lg'
-        )}
-      >
-        <KobalteNavigationMenu.Content />
-      </div>
-    </KobalteNavigationMenu.Viewport>
+    />
   )
 }
 

package/dist/r/src/components/ui/toast/toast.tsx

@@ -179,11 +179,23 @@ export type ToasterProps = ComponentProps<typeof KobalteToast.Region> & {
   region?: string
 }
 
+/**
+ * The corner is set on the region, not the list. The region is the `fixed`
+ * element: an inset on the list inside it positions nothing, and the region falls
+ * back to wherever it happens to sit in the document flow.
+ */
 const toasterPosition = {
-  'top-left': 'top-0 left-0 items-start',
-  'top-right': 'top-0 right-0 items-end',
-  'bottom-left': 'bottom-0 left-0 items-start',
-  'bottom-right': 'bottom-0 right-0 items-end',
+  'top-left': 'top-0 left-0',
+  'top-right': 'top-0 right-0',
+  'bottom-left': 'bottom-0 left-0',
+  'bottom-right': 'bottom-0 right-0',
+}
+
+const toasterAlignment = {
+  'top-left': 'items-start',
+  'top-right': 'items-end',
+  'bottom-left': 'items-start',
+  'bottom-right': 'items-end',
 }
 
 /** Mount once, near the root. Renders the stack and owns its timing defaults. */
@@ -203,13 +215,16 @@ export function Toaster(props: ToasterProps) {
        * in-flight notification, and clicking a toast must not dismiss the
        * dialog behind it.
        */
-      class="pointer-events-none fixed z-(--z-toast) flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm"
+      class={cn(
+        'pointer-events-none fixed z-(--z-toast) flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm',
+        toasterPosition[local.position ?? 'bottom-right']
+      )}
       {...rest}
     >
       <KobalteToast.List
         class={cn(
           'flex flex-col gap-2',
-          toasterPosition[local.position ?? 'bottom-right'],
+          toasterAlignment[local.position ?? 'bottom-right'],
           local.class
         )}
       />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.99.2",
+  "version": "0.99.3",
   "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/src/components/ui/context-menu/context-menu.tsx

@@ -131,6 +131,14 @@ export function ContextMenuRadioItem(props: ComponentProps<typeof KobalteContext
   )
 }
 
+/**
+ * The caption of a `ContextMenuGroup`, and that group's accessible name. It must be a
+ * child of the group it names: Kobalte reads the group from context, so a label
+ * placed directly in the content throws `useMenuGroupContext must be used within
+ * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+ * label and its items in a group anyway — the grouping is what a screen reader
+ * announces.
+ */
 export function ContextMenuLabel(props: ComponentProps<typeof KobalteContextMenu.GroupLabel>) {
   const [local, rest] = splitProps(props, ['class'])
   return <KobalteContextMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />

package/src/components/ui/drawer/drawer.tsx

@@ -41,7 +41,14 @@ export function DrawerOverlay(props: ComponentProps<typeof DrawerPrimitive.Overl
   )
 }
 
-export type DrawerContentProps = ComponentProps<typeof DrawerPrimitive.Content> & {
+export type DrawerContentProps = Omit<ComponentProps<typeof DrawerPrimitive.Content>, 'side'> & {
+  /**
+   * Not accepted here. corvu reads the side from the root `Drawer`, which uses it
+   * for the drag axis and publishes it as `data-side`; a `side` on the content
+   * would type-check through the polymorphic props and be silently ignored,
+   * leaving the drawer on the bottom edge. Set `<Drawer side="right">` instead.
+   */
+  side?: never
   /**
    * Draw the grabber at the leading edge of the sheet.
    *

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

@@ -187,6 +187,14 @@ export function DropdownMenuRadioItem(props: ComponentProps<typeof KobalteDropdo
   )
 }
 
+/**
+ * The caption of a `DropdownMenuGroup`, and that group's accessible name. It must be a
+ * child of the group it names: Kobalte reads the group from context, so a label
+ * placed directly in the content throws `useMenuGroupContext must be used within
+ * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+ * label and its items in a group anyway — the grouping is what a screen reader
+ * announces.
+ */
 export function DropdownMenuLabel(props: ComponentProps<typeof KobalteDropdownMenu.GroupLabel>) {
   const [local, rest] = splitProps(props, ['class'])
   return <KobalteDropdownMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />

package/src/components/ui/menubar/menubar.tsx

@@ -160,6 +160,14 @@ export function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.Rad
   )
 }
 
+/**
+ * The caption of a `MenubarGroup`, and that group's accessible name. It must be a
+ * child of the group it names: Kobalte reads the group from context, so a label
+ * placed directly in the content throws `useMenuGroupContext must be used within
+ * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+ * label and its items in a group anyway — the grouping is what a screen reader
+ * announces.
+ */
 export function MenubarLabel(props: ComponentProps<typeof KobalteMenubar.GroupLabel>) {
   const [local, rest] = splitProps(props, ['class'])
   return <KobalteMenubar.GroupLabel class={cn(menuLabel, local.class)} {...rest} />

package/src/components/ui/navigation-menu/navigation-menu.tsx

@@ -41,9 +41,15 @@ import { menuContentPadding, menuItem, overlayMotion, overlaySurface } from '#li
  * - `Content` must be a direct child of `Menu`, and the `Viewport` is a **sibling
  *   of the menus** — not inside them. All the panels share one viewport, which is
  *   what lets the bar animate between them instead of each panel popping in place.
+ * - The viewport is an empty surface. Each `Content` reaches it through Kobalte's
+ *   `Portal`, which mounts the panel inside the viewport while keeping it in its
+ *   own `Menu`'s context. A `Content` rendered anywhere else — the viewport's own
+ *   children included — has no `Menu` above it, and Kobalte throws
+ *   `useMenuRootContext must be used within a MenuRoot` the moment a panel opens.
  *
- * The wrapper enforces the last of those by rendering the `Viewport` itself, so a
- * caller cannot forget it and get a menu whose panels never appear.
+ * The wrapper enforces the last two by rendering the `Viewport` itself and by
+ * portalling every `NavigationMenuContent`, so a caller cannot forget either and
+ * get a menu whose panels never appear.
  */
 
 export type NavigationMenuProps = ComponentProps<typeof KobalteNavigationMenu.Root> & {
@@ -112,25 +118,41 @@ export function NavigationMenuContent(props: ComponentProps<typeof KobalteNaviga
   const [local, rest] = splitProps(props, ['class', 'children'])
 
   return (
-    <KobalteNavigationMenu.Content
-      class={cn(
-        'grid w-max gap-1 p-2',
-        // A two-column panel is the shape most menu bars want, and it is opt-in
-        // through this hook rather than a prop because the column count is a
-        // layout decision the caller's content makes.
-        'data-[wide]:grid-cols-2',
-        local.class
-      )}
-      {...rest}
-    >
-      {local.children}
-    </KobalteNavigationMenu.Content>
+    <KobalteNavigationMenu.Portal>
+      <KobalteNavigationMenu.Content
+        class={cn(
+          // Absolute so the viewport sizes to the active panel's measured box and
+          // animates between panels, rather than stacking them.
+          'absolute top-0 left-0 grid w-max gap-1 p-2 outline-none',
+          // The motion is the panel's, not the viewport's. Kobalte keeps an
+          // outgoing panel mounted until the viewport's own animation ends; a
+          // viewport that carries an entrance animation never fires that again
+          // after it opens, so the previous panel would stay painted under the
+          // next one.
+          overlayMotion,
+          // A two-column panel is the shape most menu bars want, and it is opt-in
+          // through this hook rather than a prop because the column count is a
+          // layout decision the caller's content makes.
+          'data-[wide]:grid-cols-2',
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </KobalteNavigationMenu.Content>
+    </KobalteNavigationMenu.Portal>
   )
 }
 
 /**
  * The shared panel surface. One per menu bar, and the wrapper supplies it — but
  * exported so a caller with an unusual layout can place it themselves.
+ *
+ * It renders no children: the panels arrive through each `NavigationMenuContent`'s
+ * portal. Kobalte positions it under the bar and publishes the active panel's size
+ * as `--kb-navigation-menu-viewport-*`, which the surface animates between.
+ * `box-content` keeps the border outside that measured size so a panel is never
+ * clipped by its own frame.
  */
 export function NavigationMenuViewport(
   props: ComponentProps<typeof KobalteNavigationMenu.Viewport>
@@ -139,24 +161,16 @@ export function NavigationMenuViewport(
 
   return (
     <KobalteNavigationMenu.Viewport
+      data-slot="navigation-menu-viewport"
       class={cn(
-        'absolute top-full left-0 isolate z-(--z-menu) mt-1.5 flex justify-center overflow-hidden',
+        overlaySurface,
+        'isolate z-(--z-menu) mt-1.5 box-content list-none overflow-hidden',
         'h-(--kb-navigation-menu-viewport-height) w-(--kb-navigation-menu-viewport-width)',
-        'origin-top transition-[width,height] duration-200 ease-out',
+        'origin-(--kb-menu-content-transform-origin) transition-[width,height] duration-200 ease-out',
         local.class
       )}
       {...rest}
-    >
-      <div
-        class={cn(
-          overlaySurface,
-          overlayMotion,
-          'w-full rounded-lg border border-border bg-popover p-1 shadow-lg'
-        )}
-      >
-        <KobalteNavigationMenu.Content />
-      </div>
-    </KobalteNavigationMenu.Viewport>
+    />
   )
 }
 

package/src/components/ui/toast/toast.tsx

@@ -179,11 +179,23 @@ export type ToasterProps = ComponentProps<typeof KobalteToast.Region> & {
   region?: string
 }
 
+/**
+ * The corner is set on the region, not the list. The region is the `fixed`
+ * element: an inset on the list inside it positions nothing, and the region falls
+ * back to wherever it happens to sit in the document flow.
+ */
 const toasterPosition = {
-  'top-left': 'top-0 left-0 items-start',
-  'top-right': 'top-0 right-0 items-end',
-  'bottom-left': 'bottom-0 left-0 items-start',
-  'bottom-right': 'bottom-0 right-0 items-end',
+  'top-left': 'top-0 left-0',
+  'top-right': 'top-0 right-0',
+  'bottom-left': 'bottom-0 left-0',
+  'bottom-right': 'bottom-0 right-0',
+}
+
+const toasterAlignment = {
+  'top-left': 'items-start',
+  'top-right': 'items-end',
+  'bottom-left': 'items-start',
+  'bottom-right': 'items-end',
 }
 
 /** Mount once, near the root. Renders the stack and owns its timing defaults. */
@@ -203,13 +215,16 @@ export function Toaster(props: ToasterProps) {
        * in-flight notification, and clicking a toast must not dismiss the
        * dialog behind it.
        */
-      class="pointer-events-none fixed z-(--z-toast) flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm"
+      class={cn(
+        'pointer-events-none fixed z-(--z-toast) flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm',
+        toasterPosition[local.position ?? 'bottom-right']
+      )}
       {...rest}
     >
       <KobalteToast.List
         class={cn(
           'flex flex-col gap-2',
-          toasterPosition[local.position ?? 'bottom-right'],
+          toasterAlignment[local.position ?? 'bottom-right'],
           local.class
         )}
       />