@adea-ai/ui 0.82.1 → 0.82.2

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

@@ -1 +1 @@
-{"version":3,"file":"command.js","names":["CommandDialog","CmdkDialog","CommandEmpty","CmdkEmpty","CommandGroup","CmdkGroup","CommandInput","CmdkInput","CommandItem","CmdkItem","CommandList","CmdkList","CommandLoading","CmdkLoading","CommandRoot","CmdkRoot","CommandSeparator","CmdkSeparator","useCommandState","Search","ComponentProps","createEffect","createSignal","splitProps","menuItem","cn","commandItem","replace","Command","props","local","rest","_$createComponent","_$mergeProps","class","contentClassName","_el$","_tmpl$","_$insert","wrapper","setWrapper","HTMLDivElement","resultCount","state","filtered","count","root","selector","querySelector","setAttribute","_el$2","_tmpl$2","_$use","role","CommandShortcut","children","_el$3","_tmpl$3","_$effect","_$className","_$createComponent","CmdkRoot","_$mergeProps","CommandDialog","CmdkDialog","CommandInput","CmdkInput","CommandList","CmdkList","CommandEmpty","CmdkEmpty","CommandGroup","CmdkGroup","CommandItem","CmdkItem","CommandSeparator","CmdkSeparator","CommandLoading","CmdkLoading","_$className"],"sources":["../../../../src/components/ui/command/command.tsx"],"sourcesContent":["import {\n  CommandDialog as CmdkDialog,\n  CommandEmpty as CmdkEmpty,\n  CommandGroup as CmdkGroup,\n  CommandInput as CmdkInput,\n  CommandItem as CmdkItem,\n  CommandList as CmdkList,\n  CommandLoading as CmdkLoading,\n  CommandRoot as CmdkRoot,\n  CommandSeparator as CmdkSeparator,\n  useCommandState,\n} from 'cmdk-solid'\nimport { Search } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { createEffect, createSignal, splitProps } from 'solid-js'\nimport { menuItem } from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n// cmdk emits data-disabled=\"false\" on enabled items; Kobalte omits it.\n// Presence selectors would dim and disable every command in an app palette.\nconst commandItem = menuItem\n  .replace('data-[disabled]:pointer-events-none', '')\n  .replace('data-[disabled]:opacity-50', '')\n\n/**\n * Command.\n *\n * The command palette: a filtered list of everything the user can do, ranked\n * by fuzzy match. It is the one place in an app where a keyboard-first surface\n * is the *primary* one, so it carries rules the rest of the system does not:\n *\n *   - Every item must be reachable by typing its name. If a user has to\n *     remember which group it lives in, the palette has failed at its job.\n *   - Groups exist for reading, not for navigation. The ranking crosses them.\n *   - The empty state is not an apology — it should offer the closest thing\n *     the app could guess, or say plainly that nothing matched.\n *\n * cmdk-solid supplies the filter, the scoring, the `aria-activedescendant`\n * wiring and the arrow-key navigation.\n */\nexport function Command(props: ComponentProps<typeof CmdkRoot>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <CmdkRoot\n      class={cn(\n        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-xl',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function CommandDialog(props: ComponentProps<typeof CmdkDialog>) {\n  // cmdk's Dialog splits `contentClassName` onto the role=\"dialog\" content\n  // element and routes every other prop (including `class`) to the inner\n  // Command. The surface must live on the content: a `class` here styles the\n  // Command (fixed, so visible) while the dialog element itself renders as an\n  // unstyled zero-height wrapper at the end of body — invisible to role\n  // queries and axe.\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <CmdkDialog\n      contentClassName={cn(\n        'bg-popover text-popover-foreground fixed top-1/3 left-1/2 z-(--z-dialog) w-full max-w-lg -translate-x-1/2 -translate-y-1/2',\n        'overflow-hidden rounded-xl border border-border shadow-xl',\n        'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n        'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function CommandInput(props: ComponentProps<typeof CmdkInput>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      class=\"flex h-11 items-center gap-2 border-b border-border px-3\"\n    >\n      <Search class=\"size-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n      <CmdkInput\n        class={cn(\n          'h-full w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          local.class\n        )}\n        {...rest}\n      />\n    </div>\n  )\n}\n\n/**\n * The scrolling list.\n *\n * Two DOM corrections, and both are deliberate. cmdk builds a `role=\"listbox\"`\n * whose children include two elements ARIA does not allow there:\n *\n *   - a bare `<div cmdk-list-sizer>` with no role, wrapped around every group;\n *   - a `<div cmdk-separator role=\"separator\">`, and `separator` is a menu and\n *     toolbar role — inside a listbox the only owned elements may be `option`\n *     and `group`.\n *\n * Both are pure presentation: the sizer is layout, and the separator is a\n * hairline between groups that the groups already structure. `role=\"presentation\"`\n * is their accurate role rather than a workaround — each is flattened out of the\n * accessibility tree, and the options inside are reached exactly as before.\n *\n * Written onto the mounted nodes rather than through props, because cmdk owns\n * this markup and does not forward a `ref`; in an effect rather than `onMount`,\n * because cmdk renders the sizer with the first item, after the list itself.\n */\nexport function CommandList(props: ComponentProps<typeof CmdkList>) {\n  const [local, rest] = splitProps(props, ['class'])\n  const [wrapper, setWrapper] = createSignal<HTMLDivElement>()\n  const resultCount = useCommandState((state) => state.filtered.count)\n\n  createEffect(() => {\n    const root = wrapper()\n    if (!root) return\n    for (const selector of ['[cmdk-list-sizer]', '[cmdk-separator]']) {\n      root.querySelector(selector)?.setAttribute('role', 'presentation')\n    }\n\n    /*\n     * A `listbox` must own at least one `option`, so a listbox with nothing in it\n     * is invalid ARIA — which is what a search with no matches produces. When\n     * there are no results the list is inert, so it becomes presentational and\n     * the empty message carries the information instead. It keeps its `id`, so\n     * the input's `aria-controls` still resolves.\n     */\n    root\n      .querySelector('[cmdk-list]')\n      ?.setAttribute('role', resultCount() > 0 ? 'listbox' : 'presentation')\n  })\n\n  return (\n    <div ref={setWrapper} class=\"contents\">\n      <CmdkList\n        class={cn('max-h-80 scroll-py-1 overflow-y-auto overflow-x-hidden p-1', local.class)}\n        {...rest}\n      />\n    </div>\n  )\n}\n\nexport function CommandEmpty(props: ComponentProps<typeof CmdkEmpty>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <CmdkEmpty\n      /*\n       * A status rather than plain text: when the list is presentational, this is\n       * the only thing that tells a screen reader the search matched nothing.\n       */\n      role=\"status\"\n      class={cn('text-muted-foreground py-8 text-center text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function CommandGroup(props: ComponentProps<typeof CmdkGroup>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <CmdkGroup\n      class={cn(\n        'text-foreground overflow-hidden p-1',\n        '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-2xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:tracking-wide [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function CommandItem(props: ComponentProps<typeof CmdkItem>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <CmdkItem\n      class={cn(\n        commandItem,\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n        'text-popover-foreground data-[selected=true]:bg-surface-hover data-[selected=true]:text-popover-foreground',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function CommandSeparator(props: ComponentProps<typeof CmdkSeparator>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <CmdkSeparator class={cn('bg-border -mx-1 my-1 h-px', local.class)} {...rest} />\n}\n\nexport function CommandLoading(props: ComponentProps<typeof CmdkLoading>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <CmdkLoading\n      class={cn('text-muted-foreground py-6 text-center text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * The keyboard hint a palette item usually carries.\n * Muted canvas text can fail contrast on a raised or selected command row;\n * hierarchy comes from its size and monospace face, with the row's readable ink.\n */\nexport function CommandShortcut(props: {\n  class?: string\n  children?: ComponentProps<'span'>['children']\n}) {\n  return (\n    <span\n      class={cn('text-popover-foreground ms-auto font-mono text-2xs tracking-widest', props.class)}\n    >\n      {props.children}\n    </span>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"command.js","names":["CommandDialog","CmdkDialog","CommandEmpty","CmdkEmpty","CommandGroup","CmdkGroup","CommandInput","CmdkInput","CommandItem","CmdkItem","CommandList","CmdkList","CommandLoading","CmdkLoading","CommandRoot","CmdkRoot","CommandSeparator","CmdkSeparator","useCommandState","Dialog","KobalteDialog","Search","ComponentProps","createEffect","createSignal","splitProps","createDialogFocusRestoration","menuItem","cn","commandItem","replace","Command","props","local","rest","_$createComponent","_$mergeProps","class","CommandDialogProps","Pick","Content","dialogProps","commandProps","isOpen","setIsOpen","open","defaultOpen","undefined","focus","onCloseAutoFocus","onOpenAutoFocus","onOpenChange","children","Portal","mount","container","Overlay","overlayClassName","aria-label","label","contentClassName","_el$","_tmpl$","_$insert","wrapper","setWrapper","HTMLDivElement","resultCount","state","filtered","count","root","selector","querySelector","setAttribute","_el$2","_tmpl$2","_$use","role","CommandShortcut","_el$3","_tmpl$3","_$effect","_$className","_$createComponent","CmdkRoot","_$mergeProps","KobalteDialog","CommandInput","CmdkInput","CommandList","CmdkList","CommandEmpty","CmdkEmpty","CommandGroup","CmdkGroup","CommandItem","CmdkItem","CommandSeparator","CmdkSeparator","CommandLoading","CmdkLoading","_$className"],"sources":["../../../../src/components/ui/command/command.tsx"],"sourcesContent":["import {\n  CommandDialog as CmdkDialog,\n  CommandEmpty as CmdkEmpty,\n  CommandGroup as CmdkGroup,\n  CommandInput as CmdkInput,\n  CommandItem as CmdkItem,\n  CommandList as CmdkList,\n  CommandLoading as CmdkLoading,\n  CommandRoot as CmdkRoot,\n  CommandSeparator as CmdkSeparator,\n  useCommandState,\n} from 'cmdk-solid'\nimport { Dialog as KobalteDialog } from '@kobalte/core/dialog'\nimport { Search } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { createEffect, createSignal, splitProps } from 'solid-js'\nimport { createDialogFocusRestoration } from '../dialog/dialog'\nimport { menuItem } from '#lib/overlay'\nimport { cn } from '#lib/utils'\n\n// cmdk emits data-disabled=\"false\" on enabled items, unlike the presence-only\n// attributes Kobalte menu rows use. Apply those shared disabled styles only when\n// cmdk's value is true.\nconst commandItem = menuItem\n  .replace('data-[disabled]:pointer-events-none', '')\n  .replace('data-[disabled]:text-muted-foreground', '')\n\n/**\n * Command.\n *\n * The command palette: a filtered list of everything the user can do, ranked\n * by fuzzy match. It is the one place in an app where a keyboard-first surface\n * is the *primary* one, so it carries rules the rest of the system does not:\n *\n *   - Every item must be reachable by typing its name. If a user has to\n *     remember which group it lives in, the palette has failed at its job.\n *   - Groups exist for reading, not for navigation. The ranking crosses them.\n *   - The empty state is not an apology — it should offer the closest thing\n *     the app could guess, or say plainly that nothing matched.\n *\n * cmdk-solid supplies the filter, the scoring, the `aria-activedescendant`\n * wiring and the arrow-key navigation.\n */\nexport function Command(props: ComponentProps<typeof CmdkRoot>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <CmdkRoot\n      class={cn(\n        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-xl',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\ntype CommandDialogProps = ComponentProps<typeof CmdkDialog> &\n  Pick<ComponentProps<typeof KobalteDialog.Content>, 'onCloseAutoFocus' | 'onOpenAutoFocus'>\n\nexport function CommandDialog(props: CommandDialogProps) {\n  // cmdk-solid's Dialog does not forward Content autofocus props: unknown\n  // props fall through to its Command root. Compose Kobalte's dialog surface\n  // here so Escape and other close paths can restore focus to the real opener.\n  // Preserve the shared wrapper's `class` contract on the dialog surface;\n  // `contentClassName` adds to it, while the nested Command keeps its own API.\n  const [local, dialogProps, commandProps] = splitProps(\n    props,\n    [\n      'class',\n      'contentClassName',\n      'overlayClassName',\n      'container',\n      'onCloseAutoFocus',\n      'onOpenAutoFocus',\n    ],\n    [\n      'open',\n      'defaultOpen',\n      'onOpenChange',\n      'id',\n      'modal',\n      'preventScroll',\n      'forceMount',\n      'translations',\n    ]\n  )\n  const [isOpen, setIsOpen] = createSignal(dialogProps.open ?? dialogProps.defaultOpen ?? false)\n\n  createEffect(() => {\n    if (dialogProps.open !== undefined) setIsOpen(dialogProps.open)\n  })\n\n  const focus = createDialogFocusRestoration({\n    open: isOpen,\n    onCloseAutoFocus: local.onCloseAutoFocus,\n    onOpenAutoFocus: local.onOpenAutoFocus,\n  })\n\n  return (\n    <KobalteDialog\n      {...dialogProps}\n      onOpenChange={(open) => {\n        setIsOpen(open)\n        dialogProps.onOpenChange?.(open)\n      }}\n    >\n      <KobalteDialog.Portal mount={local.container}>\n        <KobalteDialog.Overlay cmdk-overlay=\"\" class={local.overlayClassName} />\n        <KobalteDialog.Content\n          aria-label={commandProps.label}\n          cmdk-dialog=\"\"\n          class={cn(\n            'bg-popover text-popover-foreground fixed top-1/3 left-1/2 z-(--z-dialog) w-full max-w-lg -translate-x-1/2 -translate-y-1/2',\n            'overflow-hidden rounded-xl border border-border shadow-xl',\n            'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n            'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            local.class,\n            local.contentClassName\n          )}\n          onOpenAutoFocus={focus.onOpenAutoFocus}\n          onCloseAutoFocus={focus.onCloseAutoFocus}\n        >\n          <Command {...commandProps} />\n        </KobalteDialog.Content>\n      </KobalteDialog.Portal>\n    </KobalteDialog>\n  )\n}\n\nexport function CommandInput(props: ComponentProps<typeof CmdkInput>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      class=\"flex h-11 items-center gap-2 border-b border-border px-3\"\n    >\n      <Search class=\"size-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n      <CmdkInput\n        class={cn(\n          'h-full w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          local.class\n        )}\n        {...rest}\n      />\n    </div>\n  )\n}\n\n/**\n * The scrolling list.\n *\n * Two DOM corrections, and both are deliberate. cmdk builds a `role=\"listbox\"`\n * whose children include two elements ARIA does not allow there:\n *\n *   - a bare `<div cmdk-list-sizer>` with no role, wrapped around every group;\n *   - a `<div cmdk-separator role=\"separator\">`, and `separator` is a menu and\n *     toolbar role — inside a listbox the only owned elements may be `option`\n *     and `group`.\n *\n * Both are pure presentation: the sizer is layout, and the separator is a\n * hairline between groups that the groups already structure. `role=\"presentation\"`\n * is their accurate role rather than a workaround — each is flattened out of the\n * accessibility tree, and the options inside are reached exactly as before.\n *\n * Written onto the mounted nodes rather than through props, because cmdk owns\n * this markup and does not forward a `ref`; in an effect rather than `onMount`,\n * because cmdk renders the sizer with the first item, after the list itself.\n */\nexport function CommandList(props: ComponentProps<typeof CmdkList>) {\n  const [local, rest] = splitProps(props, ['class'])\n  const [wrapper, setWrapper] = createSignal<HTMLDivElement>()\n  const resultCount = useCommandState((state) => state.filtered.count)\n\n  createEffect(() => {\n    const root = wrapper()\n    if (!root) return\n    for (const selector of ['[cmdk-list-sizer]', '[cmdk-separator]']) {\n      root.querySelector(selector)?.setAttribute('role', 'presentation')\n    }\n\n    /*\n     * A `listbox` must own at least one `option`, so a listbox with nothing in it\n     * is invalid ARIA — which is what a search with no matches produces. When\n     * there are no results the list is inert, so it becomes presentational and\n     * the empty message carries the information instead. It keeps its `id`, so\n     * the input's `aria-controls` still resolves.\n     */\n    root\n      .querySelector('[cmdk-list]')\n      ?.setAttribute('role', resultCount() > 0 ? 'listbox' : 'presentation')\n  })\n\n  return (\n    <div ref={setWrapper} class=\"contents\">\n      <CmdkList\n        class={cn('max-h-80 scroll-py-1 overflow-y-auto overflow-x-hidden p-1', local.class)}\n        {...rest}\n      />\n    </div>\n  )\n}\n\nexport function CommandEmpty(props: ComponentProps<typeof CmdkEmpty>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <CmdkEmpty\n      /*\n       * A status rather than plain text: when the list is presentational, this is\n       * the only thing that tells a screen reader the search matched nothing.\n       */\n      role=\"status\"\n      class={cn('text-muted-foreground py-8 text-center text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function CommandGroup(props: ComponentProps<typeof CmdkGroup>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <CmdkGroup\n      class={cn(\n        'text-foreground overflow-hidden p-1',\n        '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-2xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:tracking-wide [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function CommandItem(props: ComponentProps<typeof CmdkItem>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <CmdkItem\n      class={cn(\n        commandItem,\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:text-muted-foreground',\n        'group/command-item text-popover-foreground data-[selected=true]:bg-card data-[selected=true]:text-popover-foreground',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function CommandSeparator(props: ComponentProps<typeof CmdkSeparator>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <CmdkSeparator class={cn('bg-border -mx-1 my-1 h-px', local.class)} {...rest} />\n}\n\nexport function CommandLoading(props: ComponentProps<typeof CmdkLoading>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <CmdkLoading\n      class={cn('text-muted-foreground py-6 text-center text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/** The keyboard hint a palette item usually carries. */\nexport function CommandShortcut(props: {\n  class?: string\n  children?: ComponentProps<'span'>['children']\n}) {\n  return (\n    <span\n      class={cn(\n        'text-muted-foreground ms-auto font-mono text-2xs tracking-widest group-data-[selected=true]/command-item:text-foreground',\n        props.class\n      )}\n    >\n      {props.children}\n    </span>\n  )\n}\n"],"mappings":"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"}

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

@@ -11,6 +11,9 @@ import type { ComponentProps } from 'solid-js';
  * Kobalte supplies the full menu contract — arrow keys, typeahead, the roving
  * highlight, Escape to close and return focus — which is exactly what a
  * hand-rolled `div` with click handlers gets wrong.
+ * Menus are nonmodal by default so their generated focus guards do not become
+ * invalid direct children of the ARIA menu. Set `modal` explicitly when the
+ * surrounding interaction needs modal containment.
  *
  * The `destructive` variant marks the row with a status-coloured edge and
  * highlighted tint while keeping its label on the body foreground. Pairing it

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;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,kCAE7E;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;CAClB,kCAuBF;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,kCASjE;AAED,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,YAAY,CAAC,kCAY/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,kCAWhG;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;CAClB,kCAuBF;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,kCASjE;AAED,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,cAAc,CAAC,OAAO,mBAAmB,CAAC,YAAY,CAAC,kCAY/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,kCAWhG;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"}

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

@@ -18,13 +18,19 @@ var _tmpl$2 = /*#__PURE__*/ template(`<span data-slot=dropdown-menu-shortcut>`);
 * Kobalte supplies the full menu contract — arrow keys, typeahead, the roving
 * highlight, Escape to close and return focus — which is exactly what a
 * hand-rolled `div` with click handlers gets wrong.
+* Menus are nonmodal by default so their generated focus guards do not become
+* invalid direct children of the ARIA menu. Set `modal` explicitly when the
+* surrounding interaction needs modal containment.
 *
 * The `destructive` variant marks the row with a status-coloured edge and
 * highlighted tint while keeping its label on the body foreground. Pairing it
 * with an AlertDialog is the caller's job.
 */
 function DropdownMenu$1(props) {
-	return createComponent(DropdownMenu, props);
+	const [local, rest] = splitProps(props, ["modal"]);
+	return createComponent(DropdownMenu, mergeProps({ get modal() {
+		return local.modal ?? false;
+	} }, rest));
 }
 function DropdownMenuTrigger(props) {
 	return createComponent(DropdownMenu.Trigger, props);

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","_$createComponent","DropdownMenuTrigger","Trigger","DropdownMenuPortal","Portal","DropdownMenuContentProps","Content","hideArrow","portalMount","HTMLElement","DropdownMenuContent","local","rest","mount","children","_$mergeProps","class","_$memo","Arrow","DropdownMenuItem","Item","variant","shortcut","_el$","_tmpl$","_$insert","DropdownMenuShortcut","_el$2","_tmpl$2","_$spread","DropdownMenuCheckboxItem","CheckboxItem","ItemIndicator","DropdownMenuRadioGroup","RadioGroup","DropdownMenuRadioItem","RadioItem","DropdownMenuLabel","GroupLabel","DropdownMenuGroup","Group","DropdownMenuSeparator","Separator","DropdownMenuSub","Sub","DropdownMenuSubTrigger","SubTrigger","DropdownMenuSubContent","SubContent","DropdownMenu","_$createComponent","KobalteDropdownMenu","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { DropdownMenu as KobalteDropdownMenu } from '@kobalte/core/dropdown-menu'\nimport { Check, ChevronRight, Circle } from 'lucide-solid'\nimport type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport {\n  menuContentPadding,\n  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 *\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  return <KobalteDropdownMenu {...props} />\n}\n\nexport function DropdownMenuTrigger(props: ComponentProps<typeof KobalteDropdownMenu.Trigger>) {\n  return <KobalteDropdownMenu.Trigger {...props} />\n}\n\nexport function DropdownMenuPortal(props: ComponentProps<typeof KobalteDropdownMenu.Portal>) {\n  return <KobalteDropdownMenu.Portal {...props} />\n}\n\nexport type DropdownMenuContentProps = ComponentProps<typeof KobalteDropdownMenu.Content> & {\n  hideArrow?: boolean\n  /** Mount under an owner element such as a modal, keeping the menu in its accessible subtree. */\n  portalMount?: HTMLElement\n}\n\nexport function DropdownMenuContent(props: DropdownMenuContentProps) {\n  const [local, rest] = splitProps(props, ['class', 'hideArrow', 'children', 'portalMount'])\n\n  return (\n    <KobalteDropdownMenu.Portal mount={local.portalMount}>\n      <KobalteDropdownMenu.Content\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      >\n        {!local.hideArrow && <KobalteDropdownMenu.Arrow aria-hidden=\"true\" class={popoverArrow} />}\n        {local.children}\n      </KobalteDropdownMenu.Content>\n    </KobalteDropdownMenu.Portal>\n  )\n}\n\nexport function DropdownMenuItem(\n  props: ComponentProps<typeof KobalteDropdownMenu.Item> & {\n    /** Colour the row as a destructive action. Confirm it separately. */\n    variant?: 'default' | 'destructive'\n    /** Draw a shortcut hint at the trailing edge of the row. */\n    shortcut?: string\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'variant', 'shortcut', 'children'])\n\n  return (\n    <KobalteDropdownMenu.Item\n      class={cn(\n        menuItem,\n        {\n          [destructiveMenuItem]: local.variant === 'destructive',\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      {local.shortcut ? (\n        <span class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\">\n          {local.shortcut}\n        </span>\n      ) : null}\n    </KobalteDropdownMenu.Item>\n  )\n}\n\n/**\n * The chord drawn at a row's trailing edge.\n *\n * A component as well as the `shortcut` prop on an item, because a caller composing\n * a row by hand needs the same treatment — and because the alternative is every\n * caller inventing the same mono-and-dimmed span.\n */\nexport function DropdownMenuShortcut(props: ComponentProps<'span'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      class={cn('text-muted-foreground ms-auto font-mono text-2xs tracking-widest', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function DropdownMenuCheckboxItem(\n  props: ComponentProps<typeof KobalteDropdownMenu.CheckboxItem>\n) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteDropdownMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteDropdownMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Check class=\"size-4\" />\n      </KobalteDropdownMenu.ItemIndicator>\n    </KobalteDropdownMenu.CheckboxItem>\n  )\n}\n\nexport function DropdownMenuRadioGroup(\n  props: ComponentProps<typeof KobalteDropdownMenu.RadioGroup>\n) {\n  return <KobalteDropdownMenu.RadioGroup {...props} />\n}\n\nexport function DropdownMenuRadioItem(props: ComponentProps<typeof KobalteDropdownMenu.RadioItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteDropdownMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteDropdownMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Circle class=\"size-2 fill-current\" />\n      </KobalteDropdownMenu.ItemIndicator>\n    </KobalteDropdownMenu.RadioItem>\n  )\n}\n\nexport function DropdownMenuLabel(props: ComponentProps<typeof KobalteDropdownMenu.GroupLabel>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDropdownMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function DropdownMenuGroup(props: ComponentProps<typeof KobalteDropdownMenu.Group>) {\n  return <KobalteDropdownMenu.Group {...props} />\n}\n\nexport function DropdownMenuSeparator(props: ComponentProps<typeof KobalteDropdownMenu.Separator>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDropdownMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function DropdownMenuSub(props: ComponentProps<typeof KobalteDropdownMenu.Sub>) {\n  return <KobalteDropdownMenu.Sub {...props} />\n}\n\nexport function DropdownMenuSubTrigger(\n  props: ComponentProps<typeof KobalteDropdownMenu.SubTrigger>\n) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteDropdownMenu.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n      {local.children}\n      <ChevronRight class=\"ms-auto size-4\" />\n    </KobalteDropdownMenu.SubTrigger>\n  )\n}\n\nexport function DropdownMenuSubContent(\n  props: ComponentProps<typeof KobalteDropdownMenu.SubContent>\n) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteDropdownMenu.Portal>\n      <KobalteDropdownMenu.SubContent\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      />\n    </KobalteDropdownMenu.Portal>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.js","names":["DropdownMenu","KobalteDropdownMenu","Check","ChevronRight","Circle","ComponentProps","splitProps","menuContentPadding","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","_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) {\n  const [local, rest] = splitProps(props, ['class', 'variant', 'shortcut', 'children'])\n\n  return (\n    <KobalteDropdownMenu.Item\n      class={cn(\n        menuItem,\n        {\n          [destructiveMenuItem]: local.variant === 'destructive',\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      {local.shortcut ? (\n        <span class=\"text-muted-foreground ms-auto font-mono text-2xs tracking-widest\">\n          {local.shortcut}\n        </span>\n      ) : null}\n    </KobalteDropdownMenu.Item>\n  )\n}\n\n/**\n * The chord drawn at a row's trailing edge.\n *\n * A component as well as the `shortcut` prop on an item, because a caller composing\n * a row by hand needs the same treatment — and because the alternative is every\n * caller inventing the same mono-and-dimmed span.\n */\nexport function DropdownMenuShortcut(props: ComponentProps<'span'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      class={cn('text-muted-foreground ms-auto font-mono text-2xs tracking-widest', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport function DropdownMenuCheckboxItem(\n  props: ComponentProps<typeof KobalteDropdownMenu.CheckboxItem>\n) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteDropdownMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteDropdownMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Check class=\"size-4\" />\n      </KobalteDropdownMenu.ItemIndicator>\n    </KobalteDropdownMenu.CheckboxItem>\n  )\n}\n\nexport function DropdownMenuRadioGroup(\n  props: ComponentProps<typeof KobalteDropdownMenu.RadioGroup>\n) {\n  return <KobalteDropdownMenu.RadioGroup {...props} />\n}\n\nexport function DropdownMenuRadioItem(props: ComponentProps<typeof KobalteDropdownMenu.RadioItem>) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteDropdownMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>\n      {local.children}\n      <KobalteDropdownMenu.ItemIndicator class=\"absolute end-2 flex size-4 items-center justify-center\">\n        <Circle class=\"size-2 fill-current\" />\n      </KobalteDropdownMenu.ItemIndicator>\n    </KobalteDropdownMenu.RadioItem>\n  )\n}\n\nexport function DropdownMenuLabel(props: ComponentProps<typeof KobalteDropdownMenu.GroupLabel>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDropdownMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />\n}\n\nexport function DropdownMenuGroup(props: ComponentProps<typeof KobalteDropdownMenu.Group>) {\n  return <KobalteDropdownMenu.Group {...props} />\n}\n\nexport function DropdownMenuSeparator(props: ComponentProps<typeof KobalteDropdownMenu.Separator>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <KobalteDropdownMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />\n}\n\nexport function DropdownMenuSub(props: ComponentProps<typeof KobalteDropdownMenu.Sub>) {\n  return <KobalteDropdownMenu.Sub {...props} />\n}\n\nexport function DropdownMenuSubTrigger(\n  props: ComponentProps<typeof KobalteDropdownMenu.SubTrigger>\n) {\n  const [local, rest] = splitProps(props, ['class', 'children'])\n\n  return (\n    <KobalteDropdownMenu.SubTrigger class={cn(menuItem, local.class)} {...rest}>\n      {local.children}\n      <ChevronRight class=\"ms-auto size-4\" />\n    </KobalteDropdownMenu.SubTrigger>\n  )\n}\n\nexport function DropdownMenuSubContent(\n  props: ComponentProps<typeof KobalteDropdownMenu.SubContent>\n) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <KobalteDropdownMenu.Portal>\n      <KobalteDropdownMenu.SubContent\n        class={cn(\n          overlaySurface,\n          overlayMotion,\n          'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',\n          menuContentPadding,\n          local.class\n        )}\n        {...rest}\n      />\n    </KobalteDropdownMenu.Portal>\n  )\n}\n"],"mappings":"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"}

package/dist/components/ui/status-chip/status-chip.d.ts

@@ -34,6 +34,8 @@ export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' |
 export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
     tone?: StatusTone;
     label: string;
+    /** Visually hide the text while preserving it for assistive technology. */
+    compact?: boolean;
     /** Why the status is what it is. Shown in a tooltip; omit for a self-evident label. */
     detail?: string;
     /** A trailing slot: a timestamp, a retry affordance, a count. */

package/dist/components/ui/status-chip/status-chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-chip.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/status-chip/status-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAK1E;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB;;8EAY5B,CAAA;AAWF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAA;AAE1F,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,uFAAuF;IACvF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iEAAiE;IACjE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAgChD;AAED,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC,CAAA;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,eAeA"}
+{"version":3,"file":"status-chip.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/status-chip/status-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAA;AAK1E;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB;;8EAY5B,CAAA;AAWF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAA;AAE1F,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uFAAuF;IACvF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iEAAiE;IACjE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAuChD;AAED,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC,CAAA;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,eAeA"}

package/dist/components/ui/status-chip/status-chip.js

@@ -4,7 +4,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
 import { className, createComponent, effect, insert, mergeProps, spread, template } from "solid-js/web";
 import { Show, splitProps } from "solid-js";
 //#region src/components/ui/status-chip/status-chip.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span><span aria-hidden=true>`);
+var _tmpl$ = /*#__PURE__*/ template(`<span><span aria-hidden=true></span><span>`);
 var _tmpl$2 = /*#__PURE__*/ template(`<dl>`);
 var _tmpl$3 = /*#__PURE__*/ template(`<dt class=text-muted-foreground>`);
 var _tmpl$4 = /*#__PURE__*/ template(`<div class="flex items-baseline justify-between gap-4"><dd>`);
@@ -59,18 +59,27 @@ function StatusChip(props) {
 	const [local, rest] = splitProps(props, [
 		"tone",
 		"label",
+		"compact",
 		"detail",
 		"trailing",
 		"class"
 	]);
 	const chip = (() => {
-		var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
 		spread(_el$, mergeProps({ get ["class"]() {
 			return cn("inline-flex w-fit items-center gap-1.5 text-xs font-medium whitespace-nowrap", labelTone[local.tone ?? "neutral"], local.class);
 		} }, rest), false, true);
-		insert(_el$, () => local.label, null);
+		insert(_el$3, () => local.label);
 		insert(_el$, () => local.trailing, null);
-		effect(() => className(_el$2, statusDotVariants({ tone: local.tone })));
+		effect((_p$) => {
+			var _v$ = statusDotVariants({ tone: local.tone }), _v$2 = cn(local.compact && "sr-only");
+			_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+			_v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
 		return _el$;
 	})();
 	return createComponent(Show, {
@@ -107,20 +116,20 @@ function StatusChip(props) {
 */
 function StatusList(props) {
 	return (() => {
-		var _el$3 = _tmpl$2();
-		insert(_el$3, () => props.entries.map((entry) => (() => {
-			var _el$4 = _tmpl$4(), _el$6 = _el$4.firstChild;
-			insert(_el$4, createComponent(Show, {
+		var _el$4 = _tmpl$2();
+		insert(_el$4, () => props.entries.map((entry) => (() => {
+			var _el$5 = _tmpl$4(), _el$7 = _el$5.firstChild;
+			insert(_el$5, createComponent(Show, {
 				get when() {
 					return !props.compact;
 				},
 				get children() {
-					var _el$5 = _tmpl$3();
-					insert(_el$5, () => entry.name);
-					return _el$5;
+					var _el$6 = _tmpl$3();
+					insert(_el$6, () => entry.name);
+					return _el$6;
 				}
-			}), _el$6);
-			insert(_el$6, createComponent(StatusChip, {
+			}), _el$7);
+			insert(_el$7, createComponent(StatusChip, {
 				get tone() {
 					return entry.tone;
 				},
@@ -131,11 +140,11 @@ function StatusList(props) {
 					return entry.detail;
 				}
 			}));
-			effect(() => className(_el$6, cn(!props.compact && "shrink-0")));
-			return _el$4;
+			effect(() => className(_el$7, cn(!props.compact && "shrink-0")));
+			return _el$5;
 		})()));
-		effect(() => className(_el$3, cn("grid gap-2 text-sm", props.class)));
-		return _el$3;
+		effect(() => className(_el$4, cn("grid gap-2 text-sm", props.class)));
+		return _el$4;
 	})();
 }
 //#endregion

package/dist/components/ui/status-chip/status-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-chip.js","names":["Show","splitProps","ComponentProps","JSX","cva","cn","Tooltip","TooltipContent","TooltipTrigger","statusDotVariants","variants","tone","neutral","success","warning","danger","info","unknown","defaultVariants","labelTone","Record","StatusTone","StatusChipProps","Omit","label","detail","trailing","Element","StatusChip","props","local","rest","chip","_el$","_tmpl$","_el$2","firstChild","_$spread","_$mergeProps","class","_$insert","_$effect","_$className","_$createComponent","when","fallback","children","as","hideArrow","StatusEntry","Readonly","id","name","StatusList","entries","compact","_el$3","_tmpl$2","map","entry","_el$4","_tmpl$4","_el$6","_el$5","_tmpl$3","_$mergeProps","_$className","_$createComponent"],"sources":["../../../../src/components/ui/status-chip/status-chip.tsx"],"sourcesContent":["import { Show, splitProps, type ComponentProps, type JSX } from 'solid-js'\nimport { cva } from '#lib/variants'\nimport { cn } from '#lib/utils'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'\n\n/**\n * StatusChip.\n *\n * A state, said in one word, with the reason available on hover. It exists\n * because a status readout has three parts that are always the same three parts —\n * a tone, a label, and the detail that justifies the label — and rendering them\n * ad hoc produces the two failures this component is here to prevent: a colour\n * with no text (unreadable to anyone who cannot see it) and a bare word with no\n * explanation (\"Needs configuration\" — of what?).\n *\n * The tones are deliberately not a rainbow. Six cover what a status can actually\n * mean:\n *\n * - `neutral` — fine, and there is nothing to say about it.\n * - `success` — a check passed, a capability is ready, a job finished.\n * - `warning` — degraded, or needs a decision from the user.\n * - `danger` — blocked, failed, unrecoverable without intervention.\n * - `info` — in flight or scheduled; work is happening, nothing is wrong.\n * - `unknown` — the honest absence of information.\n *\n * `unknown` is not the same as `neutral`, and collapsing them is the mistake\n * worth avoiding: \"this is idle\" and \"we have not been told yet\" are different\n * facts, and a product that shows the second as the first is lying quietly. The\n * ring is hollow so it also reads as different in greyscale.\n *\n * The dot is `aria-hidden` and the label carries the meaning, so a tone is never\n * the only signal.\n */\nexport const statusDotVariants = cva('size-2 shrink-0 rounded-full', {\n  variants: {\n    tone: {\n      neutral: 'bg-muted-foreground',\n      success: 'bg-success',\n      warning: 'bg-warning',\n      danger: 'bg-destructive',\n      info: 'bg-info',\n      unknown: 'border border-muted-foreground bg-transparent',\n    },\n  },\n  defaultVariants: { tone: 'neutral' },\n})\n\nconst labelTone: Record<StatusTone, string> = {\n  neutral: 'text-foreground',\n  success: 'text-foreground',\n  warning: 'text-foreground',\n  danger: 'text-foreground',\n  info: 'text-foreground',\n  unknown: 'text-muted-foreground',\n}\n\nexport type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'unknown'\n\nexport type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {\n  tone?: StatusTone\n  label: string\n  /** Why the status is what it is. Shown in a tooltip; omit for a self-evident label. */\n  detail?: string\n  /** A trailing slot: a timestamp, a retry affordance, a count. */\n  trailing?: JSX.Element\n}\n\nexport function StatusChip(props: StatusChipProps) {\n  const [local, rest] = splitProps(props, ['tone', 'label', 'detail', 'trailing', 'class'])\n\n  const chip = (\n    <span\n      class={cn(\n        'inline-flex w-fit items-center gap-1.5 text-xs font-medium whitespace-nowrap',\n        labelTone[local.tone ?? 'neutral'],\n        local.class\n      )}\n      {...rest}\n    >\n      <span class={statusDotVariants({ tone: local.tone })} aria-hidden=\"true\" />\n      {local.label}\n      {local.trailing}\n    </span>\n  )\n\n  return (\n    <Show when={local.detail} fallback={chip}>\n      {(detail) => (\n        <Tooltip>\n          <TooltipTrigger as=\"span\" class=\"inline-flex\">\n            {chip}\n          </TooltipTrigger>\n          <TooltipContent data-slot=\"tooltip-content\" hideArrow>\n            {detail()}\n          </TooltipContent>\n        </Tooltip>\n      )}\n    </Show>\n  )\n}\n\nexport type StatusEntry = Readonly<{\n  /** A stable key for the row. */\n  id: string\n  /** What is being reported — \"Configuration\", \"Runtime\", \"Sync\". */\n  name: string\n  tone: StatusTone\n  label: string\n  detail?: string\n}>\n\n/**\n * StatusList.\n *\n * The several-facts-about-one-thing shape: an agent with a configuration state, a\n * runtime state and an activity state; a service with a build, a deploy and a\n * health check. It is a definition list rather than a table because there is no\n * column to sort or compare — the rows are facets of a single subject, and a\n * screen reader should hear them as such.\n *\n * Fixed width on the name column is what makes a column of these scannable; the\n * rows line up without a table's semantics.\n */\nexport function StatusList(props: {\n  entries: readonly StatusEntry[]\n  class?: string\n  /** Hide the name column and show only the chips — for a compact badge strip. */\n  compact?: boolean\n}) {\n  return (\n    <dl class={cn('grid gap-2 text-sm', props.class)}>\n      {props.entries.map((entry) => (\n        <div class=\"flex items-baseline justify-between gap-4\">\n          <Show when={!props.compact}>\n            <dt class=\"text-muted-foreground\">{entry.name}</dt>\n          </Show>\n          <dd class={cn(!props.compact && 'shrink-0')}>\n            <StatusChip tone={entry.tone} label={entry.label} detail={entry.detail} />\n          </dd>\n        </div>\n      ))}\n    </dl>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAaS,oBAAoBL,IAAI,gCAAgC;CACnEM,UAAU,EACRC,MAAM;EACJC,SAAS;EACTC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACNC,SAAS;CACX,EACF;CACAC,iBAAiB,EAAEP,MAAM,UAAU;AACrC,CAAC;AAED,IAAMQ,YAAwC;CAC5CP,SAAS;CACTC,SAAS;CACTC,SAAS;CACTC,QAAQ;CACRC,MAAM;CACNC,SAAS;AACX;AAaA,SAAgBW,WAAWC,OAAwB;CACjD,MAAM,CAACC,OAAOC,QAAQ9B,WAAW4B,OAAO;EAAC;EAAQ;EAAS;EAAU;EAAY;CAAO,CAAC;CAExF,MAAMG,cAAI;EAAA,IAAAC,OAAAC,OAAA,GAAAC,QAAAF,KAAAG;EAAAC,OAAAJ,MAAAK,WAAA,EAAA,KAAA,WAAA;GAAA,OAECjC,GACL,gFACAc,UAAUW,MAAMnB,QAAQ,YACxBmB,MAAMS,KACR;EAAC,EAAA,GACGR,IAAI,GAAA,OAAA,IAAA;EAAAS,OAAAP,YAGPH,MAAMN,OAAK,IAAA;EAAAgB,OAAAP,YACXH,MAAMJ,UAAQ,IAAA;EAAAe,aAAAC,UAAAP,OAFF1B,kBAAkB,EAAEE,MAAMmB,MAAMnB,KAAK,CAAC,CAAC,CAAA;EAAA,OAAAsB;CAAA,EAAA,CAAA;CAMxD,OAAAU,gBACG3C,MAAI;EAAA,IAAC4C,OAAI;GAAA,OAAEd,MAAML;EAAM;EAAEoB,UAAUb;EAAIc,WACpCrB,WAAMkB,gBACLrC,SAAO,EAAA,IAAAwC,WAAA;GAAA,OAAA,CAAAH,gBACLnC,gBAAc;IAACuC,IAAE;IAAA,SAAA;IAAAD,UACfd;GAAI,CAAA,GAAAW,gBAENpC,gBAAc;IAAA,aAAA;IAA6ByC,WAAS;IAAA,IAAAF,WAAA;KAAA,OAClDrB,OAAO;IAAC;GAAA,CAAA,CAAA;EAAA,EAAA,CAAA;CAGd,CAAA;AAGP;;;;;;;;;;;;;AAwBA,SAAgB4B,WAAWxB,OAKxB;CACD,cAAA;EAAA,IAAA2B,QAAAC,QAAA;EAAAjB,OAAAgB,aAEK3B,MAAMyB,QAAQI,KAAKC,iBAAK;GAAA,IAAAC,QAAAC,QAAA,GAAAC,QAAAF,MAAAxB;GAAAI,OAAAoB,OAAAjB,gBAEpB3C,MAAI;IAAA,IAAC4C,OAAI;KAAA,OAAE,CAACf,MAAM0B;IAAO;IAAA,IAAAT,WAAA;KAAA,IAAAiB,QAAAC,QAAA;KAAAxB,OAAAuB,aACWJ,MAAMP,IAAI;KAAA,OAAAW;IAAA;GAAA,CAAA,GAAAD,KAAA;GAAAtB,OAAAsB,OAAAnB,gBAG5Cf,YAAU;IAAA,IAACjB,OAAI;KAAA,OAAEgD,MAAMhD;IAAI;IAAA,IAAEa,QAAK;KAAA,OAAEmC,MAAMnC;IAAK;IAAA,IAAEC,SAAM;KAAA,OAAEkC,MAAMlC;IAAM;GAAA,CAAA,CAAA;GAAAgB,aAAAC,UAAAoB,OAD7DzD,GAAG,CAACwB,MAAM0B,WAAW,UAAU,CAAC,CAAA;GAAA,OAAAK;EAAA,EAAA,CAAA,CAI9C,CAAC;EAAAnB,aAAAC,UAAAc,OAVOnD,GAAG,sBAAsBwB,MAAMU,KAAK,CAAC,CAAA;EAAA,OAAAiB;CAAA,EAAA,CAAA;AAapD"}
+{"version":3,"file":"status-chip.js","names":["Show","splitProps","ComponentProps","JSX","cva","cn","Tooltip","TooltipContent","TooltipTrigger","statusDotVariants","variants","tone","neutral","success","warning","danger","info","unknown","defaultVariants","labelTone","Record","StatusTone","StatusChipProps","Omit","label","compact","detail","trailing","Element","StatusChip","props","local","rest","chip","_el$","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_$spread","_$mergeProps","class","_$insert","_$effect","_p$","_v$","_v$2","e","_$className","t","undefined","_$createComponent","when","fallback","children","as","hideArrow","StatusEntry","Readonly","id","name","StatusList","entries","_el$4","_tmpl$2","map","entry","_el$5","_tmpl$4","_el$7","_el$6","_tmpl$3","_$mergeProps","_$className","_$createComponent"],"sources":["../../../../src/components/ui/status-chip/status-chip.tsx"],"sourcesContent":["import { Show, splitProps, type ComponentProps, type JSX } from 'solid-js'\nimport { cva } from '#lib/variants'\nimport { cn } from '#lib/utils'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'\n\n/**\n * StatusChip.\n *\n * A state, said in one word, with the reason available on hover. It exists\n * because a status readout has three parts that are always the same three parts —\n * a tone, a label, and the detail that justifies the label — and rendering them\n * ad hoc produces the two failures this component is here to prevent: a colour\n * with no text (unreadable to anyone who cannot see it) and a bare word with no\n * explanation (\"Needs configuration\" — of what?).\n *\n * The tones are deliberately not a rainbow. Six cover what a status can actually\n * mean:\n *\n * - `neutral` — fine, and there is nothing to say about it.\n * - `success` — a check passed, a capability is ready, a job finished.\n * - `warning` — degraded, or needs a decision from the user.\n * - `danger` — blocked, failed, unrecoverable without intervention.\n * - `info` — in flight or scheduled; work is happening, nothing is wrong.\n * - `unknown` — the honest absence of information.\n *\n * `unknown` is not the same as `neutral`, and collapsing them is the mistake\n * worth avoiding: \"this is idle\" and \"we have not been told yet\" are different\n * facts, and a product that shows the second as the first is lying quietly. The\n * ring is hollow so it also reads as different in greyscale.\n *\n * The dot is `aria-hidden` and the label carries the meaning, so a tone is never\n * the only signal.\n */\nexport const statusDotVariants = cva('size-2 shrink-0 rounded-full', {\n  variants: {\n    tone: {\n      neutral: 'bg-muted-foreground',\n      success: 'bg-success',\n      warning: 'bg-warning',\n      danger: 'bg-destructive',\n      info: 'bg-info',\n      unknown: 'border border-muted-foreground bg-transparent',\n    },\n  },\n  defaultVariants: { tone: 'neutral' },\n})\n\nconst labelTone: Record<StatusTone, string> = {\n  neutral: 'text-foreground',\n  success: 'text-foreground',\n  warning: 'text-foreground',\n  danger: 'text-foreground',\n  info: 'text-foreground',\n  unknown: 'text-muted-foreground',\n}\n\nexport type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'unknown'\n\nexport type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {\n  tone?: StatusTone\n  label: string\n  /** Visually hide the text while preserving it for assistive technology. */\n  compact?: boolean\n  /** Why the status is what it is. Shown in a tooltip; omit for a self-evident label. */\n  detail?: string\n  /** A trailing slot: a timestamp, a retry affordance, a count. */\n  trailing?: JSX.Element\n}\n\nexport function StatusChip(props: StatusChipProps) {\n  const [local, rest] = splitProps(props, [\n    'tone',\n    'label',\n    'compact',\n    'detail',\n    'trailing',\n    'class',\n  ])\n\n  const chip = (\n    <span\n      class={cn(\n        'inline-flex w-fit items-center gap-1.5 text-xs font-medium whitespace-nowrap',\n        labelTone[local.tone ?? 'neutral'],\n        local.class\n      )}\n      {...rest}\n    >\n      <span class={statusDotVariants({ tone: local.tone })} aria-hidden=\"true\" />\n      <span class={cn(local.compact && 'sr-only')}>{local.label}</span>\n      {local.trailing}\n    </span>\n  )\n\n  return (\n    <Show when={local.detail} fallback={chip}>\n      {(detail) => (\n        <Tooltip>\n          <TooltipTrigger as=\"span\" class=\"inline-flex\">\n            {chip}\n          </TooltipTrigger>\n          <TooltipContent data-slot=\"tooltip-content\" hideArrow>\n            {detail()}\n          </TooltipContent>\n        </Tooltip>\n      )}\n    </Show>\n  )\n}\n\nexport type StatusEntry = Readonly<{\n  /** A stable key for the row. */\n  id: string\n  /** What is being reported — \"Configuration\", \"Runtime\", \"Sync\". */\n  name: string\n  tone: StatusTone\n  label: string\n  detail?: string\n}>\n\n/**\n * StatusList.\n *\n * The several-facts-about-one-thing shape: an agent with a configuration state, a\n * runtime state and an activity state; a service with a build, a deploy and a\n * health check. It is a definition list rather than a table because there is no\n * column to sort or compare — the rows are facets of a single subject, and a\n * screen reader should hear them as such.\n *\n * Fixed width on the name column is what makes a column of these scannable; the\n * rows line up without a table's semantics.\n */\nexport function StatusList(props: {\n  entries: readonly StatusEntry[]\n  class?: string\n  /** Hide the name column and show only the chips — for a compact badge strip. */\n  compact?: boolean\n}) {\n  return (\n    <dl class={cn('grid gap-2 text-sm', props.class)}>\n      {props.entries.map((entry) => (\n        <div class=\"flex items-baseline justify-between gap-4\">\n          <Show when={!props.compact}>\n            <dt class=\"text-muted-foreground\">{entry.name}</dt>\n          </Show>\n          <dd class={cn(!props.compact && 'shrink-0')}>\n            <StatusChip tone={entry.tone} label={entry.label} detail={entry.detail} />\n          </dd>\n        </div>\n      ))}\n    </dl>\n  )\n}\n"],"mappings":"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"}

package/dist/index.js

@@ -17,9 +17,9 @@ import { Checkbox, CheckboxDescription, CheckboxLabel } from "./components/ui/ch
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/ui/collapsible/collapsible.js";
 import { Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger } from "./components/ui/combobox/combobox.js";
 import { CodeBlock, InlineCode, TALL_CODE_BLOCK_PX } from "./components/ui/code-block/code-block.js";
+import { Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/ui/dialog/dialog.js";
 import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut } from "./components/ui/command/command.js";
 import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./components/ui/context-menu/context-menu.js";
-import { Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/ui/dialog/dialog.js";
 import { DiffBlock, DiffSummary, diffLineVariants, diffStats, diffTargetPath, parseDiff } from "./components/ui/diff-block/diff-block.js";
 import { DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection } from "./components/ui/detail-panel/detail-panel.js";
 import { Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger } from "./components/ui/drawer/drawer.js";

package/dist/lib/overlay.js

@@ -43,7 +43,7 @@ var menuItem = [
 	"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none",
 	"transition-colors ease-out",
 	"data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground",
-	"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+	"data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground",
 	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
 	"[&_svg:not([class*=text-])]:text-muted-foreground"
 ].join(" ");

package/dist/lib/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":[],"sources":["../../src/lib/overlay.ts"],"sourcesContent":["/**\n * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,\n * tooltips and the command palette.\n *\n * These live here rather than in each component because the overlay family is\n * where consistency is most visible and least likely to survive duplication.\n * A dialog, a sheet and a dropdown that disagree about their border, radius,\n * motion or shadow read as three different apps — and an app that adopts this\n * library would inherit all three. Declaring the surface once is what makes\n * \"an overlay looks like this\" a fact rather than a convention.\n */\n\n/** The panel itself: fill, hairline edge, radius, elevation. */\nexport const overlaySurface =\n  'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'\n\n/** The span of the portal wrapper that centres a dialog-like overlay. */\nexport const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'\n\n/** The dimming layer behind a modal overlay. */\nexport const overlayScrim =\n  'fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs'\n\n/**\n * Entrance and exit motion, expressed as data-state classes.\n *\n * `data-expanded` / `data-closed` are Kobalte's; `data-side-*` come from its\n * popper positioning and let a menu slide in from the edge it is anchored to,\n * which is what makes a dropdown feel attached to its trigger rather than\n * dropped on the screen. Exit motion is shorter than entry, because a\n * dismissal should feel immediate while an arrival benefits from being seen.\n */\nexport const overlayMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n  'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n  'data-expanded:duration-200 data-closed:duration-150',\n].join(' ')\n\n/** Popover-style motion: no zoom, so a panel anchored to a control does not\n * appear to breathe away from it. */\nexport const popoverMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n  'data-expanded:duration-150 data-closed:duration-100',\n].join(' ')\n\n/** The popper arrow. Sized in the component; coloured here. */\nexport const popoverArrow = 'fill-popover stroke-border'\n\n/**\n * A menu row: the shared height, radius, hover fill and focus treatment for\n * every item inside a menu, listbox or command list.\n */\nexport const menuItem = [\n  'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',\n  'transition-colors ease-out',\n  'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',\n  'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n  '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n  '[&_svg:not([class*=text-])]:text-muted-foreground',\n].join(' ')\n\n/** A destructive action keeps readable text and marks its row with a status edge. */\nexport const destructiveMenuItem =\n  'border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle'\n\n/** The label above a group of menu rows. */\nexport const menuLabel =\n  'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'\n\n/** The rule between menu groups. */\nexport const menuSeparator = 'bg-border -mx-1 my-1 h-px'\n\n/** Padding shared by every menu-list surface. */\nexport const menuContentPadding = 'p-1'\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,iBACX;;AAGF,IAAa,oBAAoB;;AAGjC,IAAa,eACX;;;;;;;;;;AAWF,IAAa,gBAAgB;CAC3B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;AAIV,IAAa,gBAAgB,CAC3B,mGACA,qDACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,eAAe;;;;;AAM5B,IAAa,WAAW;CACtB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,sBACX;;AAGF,IAAa,YACX;;AAGF,IAAa,gBAAgB"}
+{"version":3,"file":"overlay.js","names":[],"sources":["../../src/lib/overlay.ts"],"sourcesContent":["/**\n * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,\n * tooltips and the command palette.\n *\n * These live here rather than in each component because the overlay family is\n * where consistency is most visible and least likely to survive duplication.\n * A dialog, a sheet and a dropdown that disagree about their border, radius,\n * motion or shadow read as three different apps — and an app that adopts this\n * library would inherit all three. Declaring the surface once is what makes\n * \"an overlay looks like this\" a fact rather than a convention.\n */\n\n/** The panel itself: fill, hairline edge, radius, elevation. */\nexport const overlaySurface =\n  'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'\n\n/** The span of the portal wrapper that centres a dialog-like overlay. */\nexport const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'\n\n/** The dimming layer behind a modal overlay. */\nexport const overlayScrim =\n  'fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs'\n\n/**\n * Entrance and exit motion, expressed as data-state classes.\n *\n * `data-expanded` / `data-closed` are Kobalte's; `data-side-*` come from its\n * popper positioning and let a menu slide in from the edge it is anchored to,\n * which is what makes a dropdown feel attached to its trigger rather than\n * dropped on the screen. Exit motion is shorter than entry, because a\n * dismissal should feel immediate while an arrival benefits from being seen.\n */\nexport const overlayMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n  'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n  'data-expanded:duration-200 data-closed:duration-150',\n].join(' ')\n\n/** Popover-style motion: no zoom, so a panel anchored to a control does not\n * appear to breathe away from it. */\nexport const popoverMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n  'data-expanded:duration-150 data-closed:duration-100',\n].join(' ')\n\n/** The popper arrow. Sized in the component; coloured here. */\nexport const popoverArrow = 'fill-popover stroke-border'\n\n/**\n * A menu row: the shared height, radius, hover fill and focus treatment for\n * every item inside a menu, listbox or command list.\n */\nexport const menuItem = [\n  'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',\n  'transition-colors ease-out',\n  'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',\n  'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n  '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n  '[&_svg:not([class*=text-])]:text-muted-foreground',\n].join(' ')\n\n/** A destructive action keeps readable text and marks its row with a status edge. */\nexport const destructiveMenuItem =\n  'border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle'\n\n/** The label above a group of menu rows. */\nexport const menuLabel =\n  'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'\n\n/** The rule between menu groups. */\nexport const menuSeparator = 'bg-border -mx-1 my-1 h-px'\n\n/** Padding shared by every menu-list surface. */\nexport const menuContentPadding = 'p-1'\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,iBACX;;AAGF,IAAa,oBAAoB;;AAGjC,IAAa,eACX;;;;;;;;;;AAWF,IAAa,gBAAgB;CAC3B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;AAIV,IAAa,gBAAgB,CAC3B,mGACA,qDACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,eAAe;;;;;AAM5B,IAAa,WAAW;CACtB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,sBACX;;AAGF,IAAa,YACX;;AAGF,IAAa,gBAAgB"}

package/dist/r/command.json

@@ -4,10 +4,12 @@
   "title": "Command",
   "description": "",
   "dependencies": [
+    "@kobalte/core@^0.13.14",
     "cmdk-solid@^1.2.0",
     "lucide-solid@^1.48.0"
   ],
   "registryDependencies": [
+    "@adea-ai/ui/dialog",
     "lib"
   ],
   "files": [

package/dist/r/registry.json

@@ -442,10 +442,12 @@
       "title": "Command",
       "description": "",
       "dependencies": [
+        "@kobalte/core@^0.13.14",
         "cmdk-solid@^1.2.0",
         "lucide-solid@^1.48.0"
       ],
       "registryDependencies": [
+        "@adea-ai/ui/dialog",
         "lib"
       ],
       "files": [

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

@@ -93,9 +93,7 @@ export function AccentChoices(props: AppearanceEditorProps) {
       disabled={props.saving}
       orientation="horizontal"
       aria-label="Accent"
-      /* Narrow hosts wrap the swatches into a three-column grid so the row
-         control stays beside its label; wide hosts keep one inline row. */
-      class="grid grid-cols-3 items-center gap-2 sm:flex sm:flex-wrap sm:justify-end"
+      class="flex flex-wrap items-center gap-2"
       onChange={(accent) =>
         props.onChange({
           accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,
@@ -104,11 +102,11 @@ export function AccentChoices(props: AppearanceEditorProps) {
     >
       <Radio.Item value="theme">
         <Radio.ItemInput />
-        <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
+        <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
           Theme default
         </Radio.ItemLabel>
       </Radio.Item>
-      <div class="col-span-3 grid grid-cols-3 gap-2 sm:col-span-1 sm:flex sm:gap-2">
+      <div class="flex max-w-full flex-wrap gap-2">
         <For each={props.accentOptions}>
           {(option) => (
             <Radio.Item

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

@@ -60,9 +60,15 @@ export function SettingsRow(props: {
 }) {
   return (
     <section
-      class={cn('flex flex-col gap-3 px-4 py-4', { 'sm:flex-row sm:items-center': !props.stacked })}
+      class={cn('flex gap-3 px-4 py-4', {
+        'flex-col': props.stacked,
+        'flex-wrap items-center': !props.stacked,
+      })}
     >
-      <div class="flex min-w-0 flex-1 items-center gap-3">
+      {/* Reserve readable copy before choosing a side-by-side control row.
+          Wrapping follows the actual host width and enlarged text, rather
+          than a viewport breakpoint that also matches a narrow popover. */}
+      <div class={cn('flex min-w-0 flex-1 items-center gap-3', { 'basis-48': !props.stacked })}>
         <span
           class="flex size-9 shrink-0 items-center justify-center rounded-lg border bg-foreground/5 text-muted-foreground [&_svg]:size-4"
           aria-hidden="true"
@@ -76,7 +82,7 @@ export function SettingsRow(props: {
           </Show>
         </div>
       </div>
-      <div class="min-w-0 shrink-0">{props.children}</div>
+      <div class="min-w-0 max-w-full shrink-0">{props.children}</div>
     </section>
   )
 }

package/dist/r/src/components/layout/side-rail/side-rail.tsx

@@ -329,9 +329,13 @@ export function SideRailItem<T extends ValidComponent = 'a'>(props: SideRailItem
 
 /** A non-navigating rail control: a collapse toggle, a "new" action. */
 export function SideRailButton(
-  props: Omit<ComponentProps<'button'>, 'type'> & { label: string; shortcut?: string }
+  props: Omit<ComponentProps<'button'>, 'type'> & {
+    label: string
+    shortcut?: string
+    active?: boolean
+  }
 ) {
-  const [local, rest] = splitProps(props, ['class', 'label', 'shortcut', 'children'])
+  const [local, rest] = splitProps(props, ['class', 'label', 'shortcut', 'children', 'active'])
   const [row, setRow] = createSignal<HTMLElement>()
   const [tip, setTip] = createSignal<{ top: number; left: number; height: number } | null>(null)
 
@@ -351,13 +355,14 @@ export function SideRailButton(
         type="button"
         ref={setRow}
         aria-label={local.label}
+        data-active={local.active ? 'true' : undefined}
         onPointerEnter={showTip}
         onPointerLeave={() => setTip(null)}
         onFocus={showTip}
         onBlur={() => setTip(null)}
         class={cn(
           sideRailItemClass,
-          sideRailItemStateClass.idle,
+          local.active ? sideRailItemStateClass.active : sideRailItemStateClass.idle,
           'disabled:pointer-events-none disabled:opacity-50',
           local.class
         )}