@adea-ai/ui 0.98.0 → 0.99.1

package/dist/components/layout/side-rail/side-rail.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-rail.js","names":["Polymorphic","PolymorphicProps","ComponentProps","JSX","ValidComponent","Show","createMemo","createSignal","splitProps","Portal","cn","SideRailContext","createSideRailValue","SideRailProps","T","class","collapsed","SideRail","props","local","rest","value","_$createComponent","Provider","children","_$mergeProps","as","aria-label","data-collapsed","SideRailHeader","_el$","_tmpl$","_$spread","SideRailContent","_el$2","_tmpl$2","SideRailFooter","_el$3","_tmpl$3","SideRailSection","label","_el$4","_tmpl$5","_$insert","when","_el$5","_tmpl$4","sideRailItemClass","join","sideRailItemStateClass","active","idle","SideRailItemProps","badge","Element","trailing","shortcut","keyshortcuts","SideRailItem","row","setRow","HTMLElement","tip","setTip","top","left","height","closest","getAttribute","showTip","element","rect","getBoundingClientRect","right","hideTip","ref","aria-current","undefined","aria-keyshortcuts","data-active","onPointerEnter","onPointerLeave","onFocus","onBlur","Record","_el$6","_tmpl$6","_el$7","firstChild","_el$8","_tmpl$7","_el$9","_tmpl$8","_$memo","_el$0","_tmpl$9","_el$1","_tmpl$0","position","_el$10","_tmpl$10","_el$11","_el$12","_tmpl$1","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_v$5","e","_$className","t","_$setStyleProperty","a","o","i","SideRailButton","Omit","_el$13","_tmpl$11","_el$14","_el$15","nextSibling","addEventListener","_$use","_el$16","_el$17","_tmpl$12","_el$18","_v$6","_v$7","_v$8","_$createComponent","_$mergeProps","_$memo","_$className","_$setStyleProperty"],"sources":["../../../../src/components/layout/side-rail/side-rail.tsx"],"sourcesContent":["import { Polymorphic, type PolymorphicProps } from '@kobalte/core/polymorphic'\nimport type { ComponentProps, JSX, ValidComponent } from 'solid-js'\nimport { Show, createMemo, createSignal, splitProps } from 'solid-js'\nimport { Portal } from 'solid-js/web'\nimport { cn } from '#lib/utils'\nimport { SideRailContext, createSideRailValue } from './side-rail-context'\n\n/**\n * SideRail.\n *\n * The narrow, persistent column of top-level destinations at the window's leading\n * edge: the app mark, the primary sections, and a footer for account and settings.\n * It is the one piece of chrome that is always on screen, which is why it is a\n * component rather than something each view arranges.\n *\n * Two forms, one component. Collapsed it is an icon column; expanded it carries\n * labels. Both widths come from `--rail-width` (56px) and `--rail-width-expanded`\n * (236px), so an app cannot pick its own and end up a few pixels out of step with\n * the app beside it.\n *\n * The rail does not own its collapsed state; the app does. That state has to\n * survive a reload and usually lives with the rest of the window preferences, and\n * a rail that kept it privately could not be restored.\n */\nexport type SideRailProps<T extends ValidComponent = 'nav'> = PolymorphicProps<\n  T,\n  {\n    class?: string\n    collapsed?: boolean\n    'aria-label'?: string\n  }\n>\n\nexport function SideRail<T extends ValidComponent = 'nav'>(props: SideRailProps<T>) {\n  const [local, rest] = splitProps(props as SideRailProps, [\n    'class',\n    'collapsed',\n    'aria-label',\n    'children',\n  ])\n\n  const collapsed = () => local.collapsed ?? false\n  const value = createSideRailValue(\n    collapsed,\n    createMemo(() => (collapsed() ? 'var(--rail-width)' : 'var(--rail-width-expanded)'))\n  )\n\n  return (\n    <SideRailContext.Provider value={value}>\n      <Polymorphic\n        as=\"nav\"\n        aria-label={local['aria-label'] ?? 'Primary'}\n        /* Rendered in both states, with a real value, so the descendant selectors\n           below can key on true *and* false — an absent attribute would leave the\n           expanded form matching neither. */\n        data-collapsed={collapsed() ? 'true' : 'false'}\n        class={cn(\n          'group/rail bg-sidebar text-sidebar-foreground flex h-full shrink-0 flex-col border-e border-sidebar-border',\n          'transition-[width] duration-150 ease-out',\n          { 'w-rail': collapsed(), 'w-rail-expanded': !collapsed() },\n          local.class\n        )}\n        {...(rest as ComponentProps<'nav'>)}\n      >\n        {local.children}\n      </Polymorphic>\n    </SideRailContext.Provider>\n  )\n}\n\n/** The header slot: the app mark, and the product name when there is room. */\nexport function SideRailHeader(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"side-rail-header\"\n      class={cn(\n        'h-topbar flex shrink-0 items-center gap-2.5 px-3 group-data-[collapsed=true]/rail:justify-center group-data-[collapsed=true]/rail:px-0',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** The scrolling middle. Keeps the header and the footer pinned. */\nexport function SideRailContent(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"side-rail-content\"\n      class={cn(\n        'flex min-h-0 flex-1 flex-col gap-0.5 overflow-x-hidden overflow-y-auto px-2 py-2',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** The pinned footer: account, settings, help. */\nexport function SideRailFooter(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"side-rail-footer\"\n      class={cn(\n        'flex shrink-0 flex-col gap-0.5 border-t border-sidebar-border px-2 py-2',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** A titled group of rail destinations. The title hides when collapsed. */\nexport function SideRailSection(props: ComponentProps<'div'> & { label?: string }) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'children'])\n\n  return (\n    <div data-slot=\"side-rail-section\" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>\n      <Show when={local.label}>\n        <div class=\"text-sidebar-muted-foreground px-2 pt-2 pb-1 text-2xs font-medium tracking-wide uppercase group-data-[collapsed=true]/rail:hidden\">\n          {local.label}\n        </div>\n      </Show>\n      {local.children}\n    </div>\n  )\n}\n\n/**\n * The classes a rail row uses. Exported so a caller's own element — a router link,\n * a custom button — can match the rail exactly instead of approximating it.\n */\nexport const sideRailItemClass = [\n  'group/rail-item flex h-rail-item min-w-0 w-full items-center gap-2.5 rounded-md px-3 text-sm font-medium',\n  'group-data-[collapsed=true]/rail:justify-center group-data-[collapsed=true]/rail:px-0',\n  'transition-[color,background-color,transform] ease-out outline-none select-none',\n  'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n  /*\n   * The donor's row scales up slightly under the pointer and down under a press.\n   * It is a CSS transform rather than a motion-library gesture because the two are\n   * the same thing here and the transform costs nothing at runtime: no wrapper\n   * element, no listener, and it works on whatever element a caller renders the row\n   * as — an anchor, a button, a router's own link.\n   *\n   * The collapsed rail opts out: a 1.02 scale on a 56px column pushes the row past\n   * the rail's own edge, which reads as a glitch rather than as feedback.\n   */\n  'hover:scale-[1.02] active:scale-[0.97] group-data-[collapsed=true]/rail:hover:scale-100 group-data-[collapsed=true]/rail:active:scale-[0.98]',\n  '[&_svg]:size-5 [&_svg]:shrink-0',\n].join(' ')\n\n/*\n * The rail's states are accent-driven: the icon carries `--primary` on hover and\n * on the active destination, and both states draw the accent's own tint rather\n * than a neutral fill, so the rail reads as the app's accent chroma instead of a\n * grey column. The active label stays on `sidebar-foreground` because the accent\n * presets guarantee their 3:1 interaction minimum against the surface, not the\n * 4.5:1 small text owes; the icon is a graphic and rides the accent.\n */\nexport const sideRailItemStateClass = {\n  active: 'bg-primary-subtle text-sidebar-foreground [&_svg]:text-primary',\n  idle: 'text-sidebar-muted-foreground hover:bg-primary-subtle/60 hover:text-primary',\n}\n\n/**\n * A rail destination.\n *\n * ## The tooltip is the rail's hover affordance, not a generic bubble\n *\n * Collapsed, the row has no text, so the label has to come from somewhere. This\n * ports the donor's treatment rather than using a standard tooltip, because the\n * details are what make it read as part of the rail:\n *\n *   - It is **flush with the row**: positioned at the row's own top and given the\n *     row's own height, so it continues the row outward instead of floating near\n *     it. A centred bubble with an arrow reads as a separate object.\n *   - It **repeats the icon**, which anchors it to the row it belongs to.\n *   - It carries the **keyboard chord**, which is the one piece of information a\n *     collapsed rail otherwise cannot show.\n *   - It opens on **hover and on focus**, so a keyboard user gets the same label a\n *     pointer user does.\n *   - It is `pointer-events-none` and `aria-hidden`: the row already carries the\n *     name (as a visually hidden span when collapsed), so this is decoration and\n *     must never be the accessible name.\n *\n * ## The chord on the row\n *\n * Expanded, the row shows its chord on hover and on focus — and the chord is\n * declared once to assistive technology through `aria-keyshortcuts` rather than\n * being read out as glyphs. The visible badge is `aria-hidden` for that reason.\n */\nexport type SideRailItemProps<T extends ValidComponent = 'a'> = PolymorphicProps<\n  T,\n  {\n    class?: string\n    /** Marks the item as the current destination. */\n    active?: boolean\n    /**\n     * The item's accessible name. Required, and always in the accessibility tree:\n     * collapsed it moves into the tooltip and a visually hidden span rather than\n     * being deleted.\n     */\n    label: string\n    /** A count or a dot, rendered over the icon's corner. */\n    badge?: JSX.Element\n    /** An indicator pinned to the trailing edge in the expanded form. */\n    trailing?: JSX.Element\n    /** The chord as it should be drawn, e.g. `⌘1`. Shown on hover and focus. */\n    shortcut?: string\n    /**\n     * The same chord in the ARIA grammar, e.g. `Meta+1`. Declared to assistive\n     * technology instead of the display glyphs, which are not a keyboard shortcut\n     * a screen reader can parse. Supply it whenever `shortcut` is drawn.\n     */\n    keyshortcuts?: string\n  }\n>\n\nexport function SideRailItem<T extends ValidComponent = 'a'>(props: SideRailItemProps<T>) {\n  const [local, rest] = splitProps(props as SideRailItemProps, [\n    'as',\n    'class',\n    'active',\n    'label',\n    'badge',\n    'trailing',\n    'shortcut',\n    'keyshortcuts',\n    'children',\n  ])\n\n  const [row, setRow] = createSignal<HTMLElement>()\n  const [tip, setTip] = createSignal<{ top: number; left: number; height: number } | null>(null)\n\n  const collapsed = () =>\n    row()?.closest('[data-collapsed]')?.getAttribute('data-collapsed') === 'true'\n\n  const showTip = () => {\n    const element = row()\n    if (!element || !collapsed()) return\n    const rect = element.getBoundingClientRect()\n    setTip({ top: rect.top, left: rect.right + 8, height: rect.height })\n  }\n\n  const hideTip = () => setTip(null)\n\n  return (\n    <>\n      <Polymorphic\n        as={local.as ?? 'a'}\n        ref={setRow}\n        aria-current={local.active ? 'page' : undefined}\n        aria-keyshortcuts={local.keyshortcuts}\n        data-active={local.active ? '' : undefined}\n        class={cn(\n          sideRailItemClass,\n          local.active ? sideRailItemStateClass.active : sideRailItemStateClass.idle,\n          local.class\n        )}\n        onPointerEnter={showTip}\n        onPointerLeave={hideTip}\n        onFocus={showTip}\n        onBlur={hideTip}\n        {...(rest as Record<string, unknown>)}\n      >\n        <Show when={local.badge}>\n          <span class=\"relative flex size-5 shrink-0 items-center justify-center [&_svg]:size-5\">\n            {local.children}\n            <span class=\"absolute -top-1 -end-1 flex items-center justify-center\">\n              {local.badge}\n            </span>\n          </span>\n        </Show>\n        <Show when={!local.badge}>\n          <span class=\"flex size-5 shrink-0 items-center justify-center [&_svg]:size-5\">\n            {local.children}\n          </span>\n        </Show>\n\n        <span class=\"min-w-0 flex-1 truncate group-data-[collapsed=true]/rail:sr-only\">\n          {local.label}\n        </span>\n\n        <Show when={local.shortcut && local.trailing === undefined}>\n          <span\n            aria-hidden=\"true\"\n            class=\"text-sidebar-muted-foreground shrink-0 font-mono text-2xs leading-none opacity-0 transition-opacity group-hover/rail-item:opacity-100 group-focus-visible/rail-item:opacity-100 group-data-[collapsed=true]/rail:hidden\"\n          >\n            {local.shortcut}\n          </span>\n        </Show>\n\n        <Show when={local.trailing}>\n          <span class=\"ms-auto shrink-0\">{local.trailing}</span>\n        </Show>\n      </Polymorphic>\n\n      <Show when={tip()}>\n        {(position) => (\n          <Portal>\n            <div\n              aria-hidden=\"true\"\n              data-slot=\"side-rail-tip\"\n              class={cn(\n                'bg-card text-card-foreground border-border pointer-events-none fixed z-(--z-tooltip)',\n                'flex items-center gap-2.5 rounded-md border ps-3 pe-3 text-sm font-medium whitespace-nowrap shadow-lg'\n              )}\n              style={{\n                top: `${position().top}px`,\n                left: `${position().left}px`,\n                height: `${position().height}px`,\n              }}\n            >\n              <span\n                class={cn('flex size-5 shrink-0 items-center justify-center [&_svg]:size-5', {\n                  'text-primary': local.active,\n                })}\n              >\n                {local.children}\n              </span>\n              {local.label}\n              <Show when={local.shortcut}>\n                <span class=\"text-muted-foreground shrink-0 font-mono text-2xs leading-none\">\n                  {local.shortcut}\n                </span>\n              </Show>\n            </div>\n          </Portal>\n        )}\n      </Show>\n    </>\n  )\n}\n\n/** A non-navigating rail control: a collapse toggle, a \"new\" action. */\nexport function SideRailButton(\n  props: Omit<ComponentProps<'button'>, 'type'> & {\n    label: string\n    shortcut?: string\n    active?: boolean\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'shortcut', 'children', 'active'])\n  const [row, setRow] = createSignal<HTMLElement>()\n  const [tip, setTip] = createSignal<{ top: number; left: number; height: number } | null>(null)\n\n  const collapsed = () =>\n    row()?.closest('[data-collapsed]')?.getAttribute('data-collapsed') === 'true'\n\n  const showTip = () => {\n    const element = row()\n    if (!element || !collapsed()) return\n    const rect = element.getBoundingClientRect()\n    setTip({ top: rect.top, left: rect.right + 8, height: rect.height })\n  }\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        ref={setRow}\n        aria-label={local.label}\n        data-active={local.active ? 'true' : undefined}\n        onPointerEnter={showTip}\n        onPointerLeave={() => setTip(null)}\n        onFocus={showTip}\n        onBlur={() => setTip(null)}\n        class={cn(\n          sideRailItemClass,\n          local.active ? sideRailItemStateClass.active : sideRailItemStateClass.idle,\n          'disabled:pointer-events-none disabled:opacity-50',\n          local.class\n        )}\n        {...rest}\n      >\n        <span class=\"flex size-5 shrink-0 items-center justify-center [&_svg]:size-5\">\n          {local.children}\n        </span>\n        <span class=\"min-w-0 flex-1 truncate group-data-[collapsed=true]/rail:sr-only\">\n          {local.label}\n        </span>\n        <Show when={local.shortcut}>\n          <span\n            aria-hidden=\"true\"\n            class=\"text-sidebar-muted-foreground shrink-0 font-mono text-2xs leading-none opacity-0 transition-opacity group-hover/rail-item:opacity-100 group-focus-visible/rail-item:opacity-100 group-data-[collapsed=true]/rail:hidden\"\n          >\n            {local.shortcut}\n          </span>\n        </Show>\n      </button>\n\n      <Show when={tip()}>\n        {(position) => (\n          <Portal>\n            <div\n              aria-hidden=\"true\"\n              data-slot=\"side-rail-tip\"\n              class=\"bg-card text-card-foreground border-border pointer-events-none fixed z-(--z-tooltip) flex items-center gap-2.5 rounded-md border ps-3 pe-3 text-sm font-medium whitespace-nowrap shadow-lg\"\n              style={{\n                top: `${position().top}px`,\n                left: `${position().left}px`,\n                height: `${position().height}px`,\n              }}\n            >\n              <span class=\"flex size-5 shrink-0 items-center justify-center [&_svg]:size-5\">\n                {local.children}\n              </span>\n              {local.label}\n            </div>\n          </Portal>\n        )}\n      </Show>\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"side-rail.js","names":["Polymorphic","PolymorphicProps","ComponentProps","JSX","ValidComponent","Show","createMemo","createSignal","splitProps","Portal","tooltipTip","cn","SideRailContext","createSideRailValue","SideRailProps","T","class","collapsed","SideRail","props","local","rest","value","_$createComponent","Provider","children","_$mergeProps","as","aria-label","data-collapsed","SideRailHeader","_el$","_tmpl$","_$spread","SideRailContent","_el$2","_tmpl$2","SideRailFooter","_el$3","_tmpl$3","SideRailSection","label","_el$4","_tmpl$5","_$insert","when","_el$5","_tmpl$4","sideRailItemClass","join","sideRailItemStateClass","active","idle","SideRailItemProps","badge","Element","trailing","shortcut","keyshortcuts","SideRailItem","row","setRow","HTMLElement","tip","setTip","top","left","height","closest","getAttribute","showTip","element","rect","getBoundingClientRect","right","hideTip","ref","aria-current","undefined","aria-keyshortcuts","data-active","onPointerEnter","onPointerLeave","onFocus","onBlur","Record","_el$6","_tmpl$6","_el$7","firstChild","_el$8","_tmpl$7","_el$9","_tmpl$8","_$memo","_el$0","_tmpl$9","_el$1","_tmpl$0","position","_el$10","_tmpl$10","_el$11","_el$12","_tmpl$1","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_v$5","e","_$className","t","_$setStyleProperty","a","o","i","SideRailButton","Omit","_el$13","_tmpl$11","_el$14","_el$15","nextSibling","addEventListener","_$use","_el$16","_el$17","_tmpl$12","_el$18","_v$6","_v$7","_v$8","_v$9","_$createComponent","_$mergeProps","_$memo","_$className","_$setStyleProperty"],"sources":["../../../../src/components/layout/side-rail/side-rail.tsx"],"sourcesContent":["import { Polymorphic, type PolymorphicProps } from '@kobalte/core/polymorphic'\nimport type { ComponentProps, JSX, ValidComponent } from 'solid-js'\nimport { Show, createMemo, createSignal, splitProps } from 'solid-js'\nimport { Portal } from 'solid-js/web'\nimport { tooltipTip } from '#lib/overlay'\nimport { cn } from '#lib/utils'\nimport { SideRailContext, createSideRailValue } from './side-rail-context'\n\n/**\n * SideRail.\n *\n * The narrow, persistent column of top-level destinations at the window's leading\n * edge: the app mark, the primary sections, and a footer for account and settings.\n * It is the one piece of chrome that is always on screen, which is why it is a\n * component rather than something each view arranges.\n *\n * Two forms, one component. Collapsed it is an icon column; expanded it carries\n * labels. Both widths come from `--rail-width` (56px) and `--rail-width-expanded`\n * (236px), so an app cannot pick its own and end up a few pixels out of step with\n * the app beside it.\n *\n * The rail does not own its collapsed state; the app does. That state has to\n * survive a reload and usually lives with the rest of the window preferences, and\n * a rail that kept it privately could not be restored.\n */\nexport type SideRailProps<T extends ValidComponent = 'nav'> = PolymorphicProps<\n  T,\n  {\n    class?: string\n    collapsed?: boolean\n    'aria-label'?: string\n  }\n>\n\nexport function SideRail<T extends ValidComponent = 'nav'>(props: SideRailProps<T>) {\n  const [local, rest] = splitProps(props as SideRailProps, [\n    'class',\n    'collapsed',\n    'aria-label',\n    'children',\n  ])\n\n  const collapsed = () => local.collapsed ?? false\n  const value = createSideRailValue(\n    collapsed,\n    createMemo(() => (collapsed() ? 'var(--rail-width)' : 'var(--rail-width-expanded)'))\n  )\n\n  return (\n    <SideRailContext.Provider value={value}>\n      <Polymorphic\n        as=\"nav\"\n        aria-label={local['aria-label'] ?? 'Primary'}\n        /* Rendered in both states, with a real value, so the descendant selectors\n           below can key on true *and* false — an absent attribute would leave the\n           expanded form matching neither. */\n        data-collapsed={collapsed() ? 'true' : 'false'}\n        class={cn(\n          'group/rail bg-sidebar text-sidebar-foreground flex h-full shrink-0 flex-col border-e border-sidebar-border',\n          'transition-[width] duration-150 ease-out',\n          { 'w-rail': collapsed(), 'w-rail-expanded': !collapsed() },\n          local.class\n        )}\n        {...(rest as ComponentProps<'nav'>)}\n      >\n        {local.children}\n      </Polymorphic>\n    </SideRailContext.Provider>\n  )\n}\n\n/** The header slot: the app mark, and the product name when there is room. */\nexport function SideRailHeader(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"side-rail-header\"\n      class={cn(\n        'h-topbar flex shrink-0 items-center gap-2.5 px-3 group-data-[collapsed=true]/rail:justify-center group-data-[collapsed=true]/rail:px-0',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** The scrolling middle. Keeps the header and the footer pinned. */\nexport function SideRailContent(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"side-rail-content\"\n      class={cn(\n        'flex min-h-0 flex-1 flex-col gap-0.5 overflow-x-hidden overflow-y-auto px-2 py-2',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** The pinned footer: account, settings, help. */\nexport function SideRailFooter(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"side-rail-footer\"\n      class={cn(\n        'flex shrink-0 flex-col gap-0.5 border-t border-sidebar-border px-2 py-2',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** A titled group of rail destinations. The title hides when collapsed. */\nexport function SideRailSection(props: ComponentProps<'div'> & { label?: string }) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'children'])\n\n  return (\n    <div data-slot=\"side-rail-section\" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>\n      <Show when={local.label}>\n        <div class=\"text-sidebar-muted-foreground px-2 pt-2 pb-1 text-2xs font-medium tracking-wide uppercase group-data-[collapsed=true]/rail:hidden\">\n          {local.label}\n        </div>\n      </Show>\n      {local.children}\n    </div>\n  )\n}\n\n/**\n * The classes a rail row uses. Exported so a caller's own element — a router link,\n * a custom button — can match the rail exactly instead of approximating it.\n */\nexport const sideRailItemClass = [\n  'group/rail-item flex h-rail-item min-w-0 w-full items-center gap-2.5 rounded-md px-3 text-sm font-medium',\n  'group-data-[collapsed=true]/rail:justify-center group-data-[collapsed=true]/rail:px-0',\n  'transition-[color,background-color,transform] ease-out outline-none select-none',\n  'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n  /*\n   * The donor's row scales up slightly under the pointer and down under a press.\n   * It is a CSS transform rather than a motion-library gesture because the two are\n   * the same thing here and the transform costs nothing at runtime: no wrapper\n   * element, no listener, and it works on whatever element a caller renders the row\n   * as — an anchor, a button, a router's own link.\n   *\n   * The collapsed rail opts out: a 1.02 scale on a 56px column pushes the row past\n   * the rail's own edge, which reads as a glitch rather than as feedback.\n   */\n  'hover:scale-[1.02] active:scale-[0.97] group-data-[collapsed=true]/rail:hover:scale-100 group-data-[collapsed=true]/rail:active:scale-[0.98]',\n  '[&_svg]:size-5 [&_svg]:shrink-0',\n].join(' ')\n\n/*\n * The rail's states are accent-driven: the icon carries `--primary` on hover and\n * on the active destination, and both states draw the accent's own tint rather\n * than a neutral fill, so the rail reads as the app's accent chroma instead of a\n * grey column. The active label stays on `sidebar-foreground` because the accent\n * presets guarantee their 3:1 interaction minimum against the surface, not the\n * 4.5:1 small text owes; the icon is a graphic and rides the accent.\n */\nexport const sideRailItemStateClass = {\n  active: 'bg-primary-subtle text-sidebar-foreground [&_svg]:text-primary',\n  idle: 'text-sidebar-muted-foreground hover:bg-primary-subtle/60 hover:text-primary',\n}\n\n/**\n * A rail destination.\n *\n * ## The tooltip is the rail's hover affordance, not a generic bubble\n *\n * Collapsed, the row has no text, so the label has to come from somewhere. This\n * ports the donor's treatment rather than using a standard tooltip, because the\n * details are what make it read as part of the rail:\n *\n *   - It is **flush with the row**: positioned at the row's own top and given the\n *     row's own height, so it continues the row outward instead of floating near\n *     it. A centred bubble with an arrow reads as a separate object.\n *   - It **repeats the icon**, which anchors it to the row it belongs to.\n *   - It carries the **keyboard chord**, which is the one piece of information a\n *     collapsed rail otherwise cannot show.\n *   - It opens on **hover and on focus**, so a keyboard user gets the same label a\n *     pointer user does.\n *   - It is `pointer-events-none` and `aria-hidden`: the row already carries the\n *     name (as a visually hidden span when collapsed), so this is decoration and\n *     must never be the accessible name.\n *\n * ## The chord on the row\n *\n * Expanded, the row shows its chord on hover and on focus — and the chord is\n * declared once to assistive technology through `aria-keyshortcuts` rather than\n * being read out as glyphs. The visible badge is `aria-hidden` for that reason.\n */\nexport type SideRailItemProps<T extends ValidComponent = 'a'> = PolymorphicProps<\n  T,\n  {\n    class?: string\n    /** Marks the item as the current destination. */\n    active?: boolean\n    /**\n     * The item's accessible name. Required, and always in the accessibility tree:\n     * collapsed it moves into the tooltip and a visually hidden span rather than\n     * being deleted.\n     */\n    label: string\n    /** A count or a dot, rendered over the icon's corner. */\n    badge?: JSX.Element\n    /** An indicator pinned to the trailing edge in the expanded form. */\n    trailing?: JSX.Element\n    /** The chord as it should be drawn, e.g. `⌘1`. Shown on hover and focus. */\n    shortcut?: string\n    /**\n     * The same chord in the ARIA grammar, e.g. `Meta+1`. Declared to assistive\n     * technology instead of the display glyphs, which are not a keyboard shortcut\n     * a screen reader can parse. Supply it whenever `shortcut` is drawn.\n     */\n    keyshortcuts?: string\n  }\n>\n\nexport function SideRailItem<T extends ValidComponent = 'a'>(props: SideRailItemProps<T>) {\n  const [local, rest] = splitProps(props as SideRailItemProps, [\n    'as',\n    'class',\n    'active',\n    'label',\n    'badge',\n    'trailing',\n    'shortcut',\n    'keyshortcuts',\n    'children',\n  ])\n\n  const [row, setRow] = createSignal<HTMLElement>()\n  const [tip, setTip] = createSignal<{ top: number; left: number; height: number } | null>(null)\n\n  const collapsed = () =>\n    row()?.closest('[data-collapsed]')?.getAttribute('data-collapsed') === 'true'\n\n  const showTip = () => {\n    const element = row()\n    if (!element || !collapsed()) return\n    const rect = element.getBoundingClientRect()\n    setTip({ top: rect.top, left: rect.right + 8, height: rect.height })\n  }\n\n  const hideTip = () => setTip(null)\n\n  return (\n    <>\n      <Polymorphic\n        as={local.as ?? 'a'}\n        ref={setRow}\n        aria-current={local.active ? 'page' : undefined}\n        aria-keyshortcuts={local.keyshortcuts}\n        data-active={local.active ? '' : undefined}\n        class={cn(\n          sideRailItemClass,\n          local.active ? sideRailItemStateClass.active : sideRailItemStateClass.idle,\n          local.class\n        )}\n        onPointerEnter={showTip}\n        onPointerLeave={hideTip}\n        onFocus={showTip}\n        onBlur={hideTip}\n        {...(rest as Record<string, unknown>)}\n      >\n        <Show when={local.badge}>\n          <span class=\"relative flex size-5 shrink-0 items-center justify-center [&_svg]:size-5\">\n            {local.children}\n            <span class=\"absolute -top-1 -end-1 flex items-center justify-center\">\n              {local.badge}\n            </span>\n          </span>\n        </Show>\n        <Show when={!local.badge}>\n          <span class=\"flex size-5 shrink-0 items-center justify-center [&_svg]:size-5\">\n            {local.children}\n          </span>\n        </Show>\n\n        <span class=\"min-w-0 flex-1 truncate group-data-[collapsed=true]/rail:sr-only\">\n          {local.label}\n        </span>\n\n        <Show when={local.shortcut && local.trailing === undefined}>\n          <span\n            aria-hidden=\"true\"\n            class=\"text-sidebar-muted-foreground shrink-0 font-mono text-2xs leading-none opacity-0 transition-opacity group-hover/rail-item:opacity-100 group-focus-visible/rail-item:opacity-100 group-data-[collapsed=true]/rail:hidden\"\n          >\n            {local.shortcut}\n          </span>\n        </Show>\n\n        <Show when={local.trailing}>\n          <span class=\"ms-auto shrink-0\">{local.trailing}</span>\n        </Show>\n      </Polymorphic>\n\n      <Show when={tip()}>\n        {(position) => (\n          <Portal>\n            <div\n              aria-hidden=\"true\"\n              data-slot=\"side-rail-tip\"\n              class={cn(\n                tooltipTip,\n                'pointer-events-none fixed z-(--z-tooltip) flex items-center gap-2.5 ps-3 pe-3 whitespace-nowrap'\n              )}\n              style={{\n                top: `${position().top}px`,\n                left: `${position().left}px`,\n                height: `${position().height}px`,\n              }}\n            >\n              <span\n                class={cn('flex size-5 shrink-0 items-center justify-center [&_svg]:size-5', {\n                  'text-primary': local.active,\n                })}\n              >\n                {local.children}\n              </span>\n              {local.label}\n              <Show when={local.shortcut}>\n                <span class=\"text-muted-foreground shrink-0 font-mono text-2xs leading-none\">\n                  {local.shortcut}\n                </span>\n              </Show>\n            </div>\n          </Portal>\n        )}\n      </Show>\n    </>\n  )\n}\n\n/** A non-navigating rail control: a collapse toggle, a \"new\" action. */\nexport function SideRailButton(\n  props: Omit<ComponentProps<'button'>, 'type'> & {\n    label: string\n    shortcut?: string\n    active?: boolean\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'shortcut', 'children', 'active'])\n  const [row, setRow] = createSignal<HTMLElement>()\n  const [tip, setTip] = createSignal<{ top: number; left: number; height: number } | null>(null)\n\n  const collapsed = () =>\n    row()?.closest('[data-collapsed]')?.getAttribute('data-collapsed') === 'true'\n\n  const showTip = () => {\n    const element = row()\n    if (!element || !collapsed()) return\n    const rect = element.getBoundingClientRect()\n    setTip({ top: rect.top, left: rect.right + 8, height: rect.height })\n  }\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        ref={setRow}\n        aria-label={local.label}\n        data-active={local.active ? 'true' : undefined}\n        onPointerEnter={showTip}\n        onPointerLeave={() => setTip(null)}\n        onFocus={showTip}\n        onBlur={() => setTip(null)}\n        class={cn(\n          sideRailItemClass,\n          local.active ? sideRailItemStateClass.active : sideRailItemStateClass.idle,\n          'disabled:pointer-events-none disabled:opacity-50',\n          local.class\n        )}\n        {...rest}\n      >\n        <span class=\"flex size-5 shrink-0 items-center justify-center [&_svg]:size-5\">\n          {local.children}\n        </span>\n        <span class=\"min-w-0 flex-1 truncate group-data-[collapsed=true]/rail:sr-only\">\n          {local.label}\n        </span>\n        <Show when={local.shortcut}>\n          <span\n            aria-hidden=\"true\"\n            class=\"text-sidebar-muted-foreground shrink-0 font-mono text-2xs leading-none opacity-0 transition-opacity group-hover/rail-item:opacity-100 group-focus-visible/rail-item:opacity-100 group-data-[collapsed=true]/rail:hidden\"\n          >\n            {local.shortcut}\n          </span>\n        </Show>\n      </button>\n\n      <Show when={tip()}>\n        {(position) => (\n          <Portal>\n            <div\n              aria-hidden=\"true\"\n              data-slot=\"side-rail-tip\"\n              class={cn(\n                tooltipTip,\n                'pointer-events-none fixed z-(--z-tooltip) flex items-center gap-2.5 ps-3 pe-3 whitespace-nowrap'\n              )}\n              style={{\n                top: `${position().top}px`,\n                left: `${position().left}px`,\n                height: `${position().height}px`,\n              }}\n            >\n              <span class=\"flex size-5 shrink-0 items-center justify-center [&_svg]:size-5\">\n                {local.children}\n              </span>\n              {local.label}\n            </div>\n          </Portal>\n        )}\n      </Show>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgBkB,SAA2CC,OAAyB;CAClF,MAAM,CAACC,OAAOC,QAAQb,WAAWW,OAAwB;EACvD;EACA;EACA;EACA;CAAU,CACX;CAED,MAAMF,kBAAkBG,MAAMH,aAAa;CAC3C,MAAMK,QAAQT,oBACZI,WACAX,iBAAkBW,UAAU,IAAI,sBAAsB,4BAA6B,CACrF;CAEA,OAAAM,gBACGX,gBAAgBY,UAAQ;EAAQF;EAAK,IAAAG,WAAA;GAAA,OAAAF,gBACnCvB,aAAW0B,WAAA;IACVC,IAAE;IAAA,KAAA,gBAAA;KAAA,OACUP,MAAM,iBAAiB;IAAS;IAAA,KAAA,oBAAA;KAAA,OAI5BH,UAAU,IAAI,SAAS;IAAO;IAAA,KAAA,WAAA;KAAA,OACvCN,GACL,8GACA,4CACA;MAAE,UAAUM,UAAU;MAAG,mBAAmB,CAACA,UAAU;KAAE,GACzDG,MAAMJ,KACR;IAAC;GAAA,GACIK,MAA6B,EAAA,IAAAI,WAAA;IAAA,OAEjCL,MAAMK;GAAQ,EAAA,CAAA,CAAA;EAAA;CAAA,CAAA;AAIvB;;AAGA,SAAgBK,eAAeX,OAA8B;CAC3D,MAAM,CAACC,OAAOC,QAAQb,WAAWW,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAY,OAAAC,OAAA;EAAAC,OAAAF,MAAAL,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWf,GACL,0IACAS,MAAMJ,KACR;EAAC,EAAA,GACGK,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAU;CAAA,EAAA,CAAA;AAGd;;AAGA,SAAgBG,gBAAgBf,OAA8B;CAC5D,MAAM,CAACC,OAAOC,QAAQb,WAAWW,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAgB,QAAAC,QAAA;EAAAH,OAAAE,OAAAT,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWf,GACL,oFACAS,MAAMJ,KACR;EAAC,EAAA,GACGK,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAc;CAAA,EAAA,CAAA;AAGd;;AAGA,SAAgBE,eAAelB,OAA8B;CAC3D,MAAM,CAACC,OAAOC,QAAQb,WAAWW,OAAO,CAAC,OAAO,CAAC;CACjD,cAAA;EAAA,IAAAmB,QAAAC,QAAA;EAAAN,OAAAK,OAAAZ,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWf,GACL,2EACAS,MAAMJ,KACR;EAAC,EAAA,GACGK,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAiB;CAAA,EAAA,CAAA;AAGd;;AAGA,SAAgBE,gBAAgBrB,OAAmD;CACjF,MAAM,CAACC,OAAOC,QAAQb,WAAWW,OAAO;EAAC;EAAS;EAAS;CAAU,CAAC;CAEtE,cAAA;EAAA,IAAAuB,QAAAC,QAAA;EAAAV,OAAAS,OAAAhB,WAAA,EAAA,KAAA,WAAA;GAAA,OAC4Cf,GAAG,yBAAyBS,MAAMJ,KAAK;EAAC,EAAA,GAAMK,IAAI,GAAA,OAAA,IAAA;EAAAuB,OAAAF,OAAAnB,gBACzFlB,MAAI;GAAA,IAACwC,OAAI;IAAA,OAAEzB,MAAMqB;GAAK;GAAA,IAAAhB,WAAA;IAAA,IAAAqB,QAAAC,QAAA;IAAAH,OAAAE,aAElB1B,MAAMqB,KAAK;IAAA,OAAAK;GAAA;EAAA,CAAA,GAAA,IAAA;EAAAF,OAAAF,aAGftB,MAAMK,UAAQ,IAAA;EAAA,OAAAiB;CAAA,EAAA,CAAA;AAGrB;;;;;AAMA,IAAaM,oBAAoB;CAC/B;CACA;CACA;CACA;CAWA;CACA;AAAiC,CAClC,CAACC,KAAK,GAAG;AAUV,IAAaC,yBAAyB;CACpCC,QAAQ;CACRC,MAAM;AACR;AAwDA,SAAgBO,aAA6CxC,OAA6B;CACxF,MAAM,CAACC,OAAOC,QAAQb,WAAWW,OAA4B;EAC3D;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CAED,MAAM,CAACyC,KAAKC,UAAUtD,aAA0B;CAChD,MAAM,CAACwD,KAAKC,UAAUzD,aAAmE,IAAI;CAE7F,MAAMU,kBACJ2C,IAAI,CAAC,EAAEQ,QAAQ,kBAAkB,CAAC,EAAEC,aAAa,gBAAgB,MAAM;CAEzE,MAAMC,gBAAgB;EACpB,MAAMC,UAAUX,IAAI;EACpB,IAAI,CAACW,WAAW,CAACtD,UAAU,GAAG;EAC9B,MAAMuD,OAAOD,QAAQE,sBAAsB;EAC3CT,OAAO;GAAEC,KAAKO,KAAKP;GAAKC,MAAMM,KAAKE,QAAQ;GAAGP,QAAQK,KAAKL;EAAO,CAAC;CACrE;CAEA,MAAMQ,gBAAgBX,OAAO,IAAI;CAEjC,OAAA,CAAAzC,gBAEKvB,aAAW0B,WAAA;EAAA,IACVC,KAAE;GAAA,OAAEP,MAAMO,MAAM;EAAG;EAAAiD,KACdf;EAAM,KAAA,kBAAA;GAAA,OACGzC,MAAM+B,SAAS,SAAS2B,KAAAA;EAAS;EAAA,KAAA,uBAAA;GAAA,OAC5B1D,MAAMsC;EAAY;EAAA,KAAA,iBAAA;GAAA,OACxBtC,MAAM+B,SAAS,KAAK2B,KAAAA;EAAS;EAAA,KAAA,WAAA;GAAA,OACnCnE,GACLqC,mBACA5B,MAAM+B,SAASD,uBAAuBC,SAASD,uBAAuBE,MACtEhC,MAAMJ,KACR;EAAC;EACDiE,gBAAgBX;EAChBY,gBAAgBP;EAChBQ,SAASb;EACTc,QAAQT;CAAO,GACVtD,MAA+B,EAAA,IAAAI,WAAA;EAAA,OAAA;GAAAF,gBAEnClB,MAAI;IAAA,IAACwC,OAAI;KAAA,OAAEzB,MAAMkC;IAAK;IAAA,IAAA7B,WAAA;KAAA,IAAA6D,QAAAC,QAAA,GAAAC,QAAAF,MAAAG;KAAA7C,OAAA0C,aAElBlE,MAAMK,UAAQ+D,KAAA;KAAA5C,OAAA4C,aAEZpE,MAAMkC,KAAK;KAAA,OAAAgC;IAAA;GAAA,CAAA;GAAA/D,gBAIjBlB,MAAI;IAAA,IAACwC,OAAI;KAAA,OAAE,CAACzB,MAAMkC;IAAK;IAAA,IAAA7B,WAAA;KAAA,IAAAiE,QAAAC,QAAA;KAAA/C,OAAA8C,aAEnBtE,MAAMK,QAAQ;KAAA,OAAAiE;IAAA;GAAA,CAAA;UAAA;IAAA,IAAAE,QAAAC,QAAA;IAAAjD,OAAAgD,aAKhBxE,MAAMqB,KAAK;IAAA,OAAAmD;GAAA,EAAA,CAAA;GAAArE,gBAGblB,MAAI;IAAA,IAACwC,OAAI;KAAA,OAAEiD,WAAA,CAAA,CAAA1E,MAAMqC,QAAQ,CAAA,CAAA,KAAIrC,MAAMoC,aAAasB,KAAAA;IAAS;IAAA,IAAArD,WAAA;KAAA,IAAAsE,QAAAC,QAAA;KAAApD,OAAAmD,aAKrD3E,MAAMqC,QAAQ;KAAA,OAAAsC;IAAA;GAAA,CAAA;GAAAxE,gBAIlBlB,MAAI;IAAA,IAACwC,OAAI;KAAA,OAAEzB,MAAMoC;IAAQ;IAAA,IAAA/B,WAAA;KAAA,IAAAwE,QAAAC,QAAA;KAAAtD,OAAAqD,aACQ7E,MAAMoC,QAAQ;KAAA,OAAAyC;IAAA;GAAA,CAAA;EAAA;CAAA,EAAA,CAAA,CAAA,GAAA1E,gBAIjDlB,MAAI;EAAA,IAACwC,OAAI;GAAA,OAAEkB,IAAI;EAAC;EAAAtC,WACb0E,aAAQ5E,gBACPd,QAAM,EAAA,IAAAgB,WAAA;GAAA,IAAA2E,SAAAC,SAAA,GAAAC,SAAAF,OAAAX;GAAA7C,OAAA0D,cAmBAlF,MAAMK,QAAQ;GAAAmB,OAAAwD,cAEhBhF,MAAMqB,OAAK,IAAA;GAAAG,OAAAwD,QAAA7E,gBACXlB,MAAI;IAAA,IAACwC,OAAI;KAAA,OAAEzB,MAAMqC;IAAQ;IAAA,IAAAhC,WAAA;KAAA,IAAA8E,SAAAC,QAAA;KAAA5D,OAAA2D,cAErBnF,MAAMqC,QAAQ;KAAA,OAAA8C;IAAA;GAAA,CAAA,GAAA,IAAA;GAAAE,QAAAC,QAAA;IAAA,IAAAC,MApBZhG,GACLD,YACA,iGACF,GAACkG,OAEM,GAAGT,SAAS,CAAC,CAAClC,IAAG,KAAI4C,OACpB,GAAGV,SAAS,CAAC,CAACjC,KAAI,KAAI4C,OACpB,GAAGX,SAAS,CAAC,CAAChC,OAAM,KAAI4C,OAIzBpG,GAAG,mEAAmE,EAC3E,gBAAgBS,MAAM+B,OACxB,CAAC;IAACwD,QAAAD,IAAAM,KAAAC,UAAAb,QAAAM,IAAAM,IAAAL,GAAA;IAAAC,SAAAF,IAAAQ,KAAAC,iBAAAf,QAAA,OAAAM,IAAAQ,IAAAN,IAAA;IAAAC,SAAAH,IAAAU,KAAAD,iBAAAf,QAAA,QAAAM,IAAAU,IAAAP,IAAA;IAAAC,SAAAJ,IAAAW,KAAAF,iBAAAf,QAAA,UAAAM,IAAAW,IAAAP,IAAA;IAAAC,SAAAL,IAAAY,KAAAL,UAAAX,QAAAI,IAAAY,IAAAP,IAAA;IAAA,OAAAL;GAAA,GAAA;IAAAM,GAAAlC,KAAAA;IAAAoC,GAAApC,KAAAA;IAAAsC,GAAAtC,KAAAA;IAAAuC,GAAAvC,KAAAA;IAAAwC,GAAAxC,KAAAA;GAAA,CAAA;GAAA,OAAAsB;EAAA,EAAA,CAAA;CAYT,CAAA,CAAA;AAIT;;AAGA,SAAgBmB,eACdpG,OAKA;CACA,MAAM,CAACC,OAAOC,QAAQb,WAAWW,OAAO;EAAC;EAAS;EAAS;EAAY;EAAY;CAAQ,CAAC;CAC5F,MAAM,CAACyC,KAAKC,UAAUtD,aAA0B;CAChD,MAAM,CAACwD,KAAKC,UAAUzD,aAAmE,IAAI;CAE7F,MAAMU,kBACJ2C,IAAI,CAAC,EAAEQ,QAAQ,kBAAkB,CAAC,EAAEC,aAAa,gBAAgB,MAAM;CAEzE,MAAMC,gBAAgB;EACpB,MAAMC,UAAUX,IAAI;EACpB,IAAI,CAACW,WAAW,CAACtD,UAAU,GAAG;EAC9B,MAAMuD,OAAOD,QAAQE,sBAAsB;EAC3CT,OAAO;GAAEC,KAAKO,KAAKP;GAAKC,MAAMM,KAAKE,QAAQ;GAAGP,QAAQK,KAAKL;EAAO,CAAC;CACrE;CAEA,OAAA,QAAA;EAAA,IAAAsD,SAAAC,SAAA,GAAAC,SAAAF,OAAAhC,YAAAmC,SAAAD,OAAAE;EAAAJ,OAAAK,iBAAA,cAUoB9D,OAAO,IAAI,CAAC;EAAAyD,OAAAK,iBAAA,SADjBxD,OAAO;EAAAmD,OAAAK,iBAAA,sBADM9D,OAAO,IAAI,CAAC;EAAAyD,OAAAK,iBAAA,gBADlBxD,OAAO;EAAAyD,IAHlBlE,QAAM4D,MAAA;EAAAxF,OAAAwF,QAAA/F,WAAA;GAAA,KAAA,gBAAA;IAAA,OACCN,MAAMqB;GAAK;GAAA,KAAA,iBAAA;IAAA,OACVrB,MAAM+B,SAAS,SAAS2B,KAAAA;GAAS;GAAA,KAAA,WAAA;IAAA,OAKvCnE,GACLqC,mBACA5B,MAAM+B,SAASD,uBAAuBC,SAASD,uBAAuBE,MACtE,oDACAhC,MAAMJ,KACR;GAAC;EAAA,GACGK,IAAI,GAAA,OAAA,IAAA;EAAAuB,OAAA+E,cAGLvG,MAAMK,QAAQ;EAAAmB,OAAAgF,cAGdxG,MAAMqB,KAAK;EAAAG,OAAA6E,QAAAlG,gBAEblB,MAAI;GAAA,IAACwC,OAAI;IAAA,OAAEzB,MAAMqC;GAAQ;GAAA,IAAAhC,WAAA;IAAA,IAAAuG,SAAAhC,QAAA;IAAApD,OAAAoF,cAKrB5G,MAAMqC,QAAQ;IAAA,OAAAuE;GAAA;EAAA,CAAA,GAAA,IAAA;EAAA,OAAAP;CAAA,EAAA,CAAA,GAAAlG,gBAKpBlB,MAAI;EAAA,IAACwC,OAAI;GAAA,OAAEkB,IAAI;EAAC;EAAAtC,WACb0E,aAAQ5E,gBACPd,QAAM,EAAA,IAAAgB,WAAA;GAAA,IAAAwG,SAAAC,SAAA,GAAAC,SAAAF,OAAAxC;GAAA7C,OAAAuF,cAeA/G,MAAMK,QAAQ;GAAAmB,OAAAqF,cAEhB7G,MAAMqB,OAAK,IAAA;GAAAgE,QAAAC,QAAA;IAAA,IAAA0B,OAbLzH,GACLD,YACA,iGACF,GAAC2H,OAEM,GAAGlC,SAAS,CAAC,CAAClC,IAAG,KAAIqE,OACpB,GAAGnC,SAAS,CAAC,CAACjC,KAAI,KAAIqE,OACpB,GAAGpC,SAAS,CAAC,CAAChC,OAAM;IAAIiE,SAAA1B,IAAAM,KAAAC,UAAAgB,QAAAvB,IAAAM,IAAAoB,IAAA;IAAAC,SAAA3B,IAAAQ,KAAAC,iBAAAc,QAAA,OAAAvB,IAAAQ,IAAAmB,IAAA;IAAAC,SAAA5B,IAAAU,KAAAD,iBAAAc,QAAA,QAAAvB,IAAAU,IAAAkB,IAAA;IAAAC,SAAA7B,IAAAW,KAAAF,iBAAAc,QAAA,UAAAvB,IAAAW,IAAAkB,IAAA;IAAA,OAAA7B;GAAA,GAAA;IAAAM,GAAAlC,KAAAA;IAAAoC,GAAApC,KAAAA;IAAAsC,GAAAtC,KAAAA;IAAAuC,GAAAvC,KAAAA;GAAA,CAAA;GAAA,OAAAmD;EAAA,EAAA,CAAA;CASvC,CAAA,CAAA;AAIT"}

package/dist/components/layout/top-bar/top-bar.d.ts

@@ -40,6 +40,13 @@ export type TopBarSearchProps = ComponentProps<'button'> & {
     placeholder?: string;
     /** The shortcut chip drawn at the trailing edge, e.g. "⌘K". */
     shortcut?: string;
+    /**
+     * The parseable chord behind `shortcut`, e.g. `Meta+K`. The chip is
+     * `aria-hidden` — reading it out would pollute the button's accessible
+     * name — so this is what assistive technology announces instead. Supply it
+     * whenever `shortcut` is drawn.
+     */
+    keyshortcuts?: string;
 };
 /**
  * The search affordance in the middle track.

package/dist/components/layout/top-bar/top-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/top-bar/top-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACnD,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qDAAqD;IACrD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,kCAuBxC;AAYD,2EAA2E;AAC3E,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAAE,kCAqBvF;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7B,mEAAmE;IACnE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC3B,kCAcF;AAED,mFAAmF;AACnF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAS5D;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACzD,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kCA0BpD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,kCAqB7E"}
+{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/top-bar/top-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACnD,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qDAAqD;IACrD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,kCAuBxC;AAYD,2EAA2E;AAC3E,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CAAE,kCAqBvF;AAED,wBAAgB,WAAW,CACzB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7B,mEAAmE;IACnE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC3B,kCAcF;AAED,mFAAmF;AACnF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAS5D;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACzD,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kCA8BpD;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,kCAqB7E"}

package/dist/components/layout/top-bar/top-bar.js

@@ -7,7 +7,7 @@ var _tmpl$ = /*#__PURE__*/ template(`<header data-slot=top-bar>`);
 var _tmpl$2 = /*#__PURE__*/ template(`<div data-slot=top-bar-section>`);
 var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=top-bar-title>`);
 var _tmpl$4 = /*#__PURE__*/ template(`<div data-slot=top-bar-breadcrumb>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<kbd class="bg-muted ms-auto hidden h-5 shrink-0 items-center rounded-sm border border-border px-1.5 font-mono text-2xs sm:flex">`);
+var _tmpl$5 = /*#__PURE__*/ template(`<kbd aria-hidden=true class="bg-muted ms-auto hidden h-5 shrink-0 items-center rounded-sm border border-border px-1.5 font-mono text-2xs sm:flex">`);
 var _tmpl$6 = /*#__PURE__*/ template(`<button type=button data-slot=top-bar-search><span class="sr-only sm:not-sr-only sm:truncate">`);
 var _tmpl$7 = /*#__PURE__*/ template(`<button type=button data-slot=top-bar-pill><span>`);
 function TopBar(props) {
@@ -88,13 +88,19 @@ function TopBarSearch(props) {
 	const [local, rest] = splitProps(props, [
 		"class",
 		"placeholder",
-		"shortcut"
+		"shortcut",
+		"keyshortcuts"
 	]);
 	return (() => {
 		var _el$5 = _tmpl$6(), _el$6 = _el$5.firstChild;
-		spread(_el$5, mergeProps({ get ["class"]() {
-			return cn("text-muted-foreground flex h-control-md w-full min-w-(--control-height-md) items-center justify-center gap-2 rounded-md border border-input px-3 text-sm sm:justify-start", "transition-colors ease-out outline-none", "hover:bg-surface-hover hover:text-foreground", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "window-no-drag", local.class);
-		} }, rest), false, true);
+		spread(_el$5, mergeProps({
+			get ["class"]() {
+				return cn("text-muted-foreground flex h-control-md w-full min-w-(--control-height-md) items-center justify-center gap-2 rounded-md border border-input px-3 text-sm sm:justify-start", "transition-colors ease-out outline-none", "hover:bg-surface-hover hover:text-foreground", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", "window-no-drag", local.class);
+			},
+			get ["aria-keyshortcuts"]() {
+				return local.keyshortcuts;
+			}
+		}, rest), false, true);
 		insert(_el$5, createComponent(Search, {
 			"aria-hidden": "true",
 			"class": "size-4 shrink-0 sm:hidden"

package/dist/components/layout/top-bar/top-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.js","names":["ComponentProps","Show","splitProps","Search","cn","TopBarProps","draggable","macosInset","windowsInset","glass","TopBar","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","invokeFocusHandler","handler","event","Event","Array","isArray","callback","data","TopBarSection","align","_el$2","_tmpl$2","$$focusin","target","HTMLElement","scrollIntoView","block","inline","onFocusIn","TopBarTitle","_el$3","_tmpl$3","TopBarBreadcrumb","_el$4","_tmpl$4","TopBarSearchProps","placeholder","shortcut","TopBarSearch","_el$5","_tmpl$6","_el$6","firstChild","_$insert","_$createComponent","when","children","_el$7","_tmpl$5","TopBarPill","label","_el$8","_tmpl$7","_el$9","_$delegateEvents","_$mergeProps","_$createComponent","_$delegateEvents"],"sources":["../../../../src/components/layout/top-bar/top-bar.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { Search } from 'lucide-solid'\nimport { cn } from '#lib/utils'\n\n/**\n * TopBar.\n *\n * The window's title row and primary toolbar. Three tracks: a leading group, a\n * centred search, and a trailing group. On wide screens the search is a fixed\n * function of the window width and the side groups are equal remainders. On\n * narrow screens the middle track yields space to the controls, and each side\n * group scrolls when necessary so keyboard focus can reveal every action.\n *\n * On a frameless desktop window this row is also the drag region, so it carries\n * `window-drag` and the controls inside it opt back out. `macos-inset` and\n * `windows-inset` reserve the space the native window controls occupy, which is\n * why the row can look off-centre in a frameless window and be correct: it is\n * centred in the space the user can actually see.\n */\nexport type TopBarProps = ComponentProps<'header'> & {\n  /** Make the row draggable, for a frameless window. */\n  draggable?: boolean\n  /** Reserve space for the macOS traffic lights. */\n  macosInset?: boolean\n  /** Reserve space for the Windows caption buttons. */\n  windowsInset?: boolean\n  /** Blur the content scrolling under the bar. */\n  glass?: boolean\n}\n\nexport function TopBar(props: TopBarProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'draggable',\n    'macosInset',\n    'windowsInset',\n    'glass',\n  ])\n\n  return (\n    <header\n      data-slot=\"top-bar\"\n      class={cn(\n        'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-b border-border bg-card text-card-foreground px-3 md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]',\n        local.glass && 'glass-panel',\n        local.draggable && 'window-drag',\n        local.macosInset && 'window-inset-macos',\n        local.windowsInset && 'window-inset-windows',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nfunction invokeFocusHandler(handler: unknown, event: Event) {\n  if (Array.isArray(handler)) {\n    const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]\n    callback(data, event)\n  } else if (typeof handler === 'function') {\n    const callback = handler as (event: Event) => void\n    callback(event)\n  }\n}\n\n/** A scrollable side group; equal wide-screen tracks centre the search. */\nexport function TopBarSection(props: ComponentProps<'div'> & { align?: 'start' | 'end' }) {\n  const [local, rest] = splitProps(props, ['class', 'align', 'onFocusIn'])\n\n  return (\n    <div\n      data-slot=\"top-bar-section\"\n      class={cn(\n        'window-no-drag flex min-w-0 items-center gap-2 overflow-x-auto overflow-y-hidden',\n        local.align === 'end' && 'md:justify-end',\n        local.align !== 'end' && 'justify-start',\n        local.class\n      )}\n      onFocusIn={(event) => {\n        if (event.target instanceof HTMLElement) {\n          event.target.scrollIntoView({ block: 'nearest', inline: 'nearest' })\n        }\n        invokeFocusHandler(local.onFocusIn, event)\n      }}\n      {...rest}\n    />\n  )\n}\n\nexport function TopBarTitle(\n  props: ComponentProps<'div'> & {\n    /** Aligns text within this slot; it does not position the slot. */\n    align?: 'start' | 'center'\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'align'])\n  return (\n    <div\n      data-slot=\"top-bar-title\"\n      class={cn(\n        'truncate text-sm font-medium',\n        local.align === 'center' && 'text-center',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** A breadcrumb or path readout that yields to the actions when space runs out. */\nexport function TopBarBreadcrumb(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"top-bar-breadcrumb\"\n      class={cn('flex min-w-0 items-center gap-1.5 text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport type TopBarSearchProps = ComponentProps<'button'> & {\n  /** The hint shown inside the field, e.g. \"Search projects and files\". */\n  placeholder?: string\n  /** The shortcut chip drawn at the trailing edge, e.g. \"⌘K\". */\n  shortcut?: string\n}\n\n/**\n * The search affordance in the middle track.\n *\n * It is a button, not an input, and that is deliberate: clicking it opens the\n * command palette, which already owns the input, the ranking and the keyboard\n * handling. A second live input here would be a second source of truth for the\n * same query. It is styled to read as a field because that is what it behaves\n * like from the user's side.\n */\nexport function TopBarSearch(props: TopBarSearchProps) {\n  const [local, rest] = splitProps(props, ['class', 'placeholder', 'shortcut'])\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"top-bar-search\"\n      class={cn(\n        'text-muted-foreground flex h-control-md w-full min-w-(--control-height-md) items-center justify-center gap-2 rounded-md border border-input px-3 text-sm sm:justify-start',\n        'transition-colors ease-out outline-none',\n        'hover:bg-surface-hover hover:text-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'window-no-drag',\n        local.class\n      )}\n      {...rest}\n    >\n      <Search aria-hidden=\"true\" class=\"size-4 shrink-0 sm:hidden\" />\n      <span class=\"sr-only sm:not-sr-only sm:truncate\">{local.placeholder ?? 'Search'}</span>\n      <Show when={local.shortcut}>\n        <kbd class=\"bg-muted ms-auto hidden h-5 shrink-0 items-center rounded-sm border border-border px-1.5 font-mono text-2xs sm:flex\">\n          {local.shortcut}\n        </kbd>\n      </Show>\n    </button>\n  )\n}\n\n/**\n * A labelled top-bar control — the readouts KiroCrew puts in the trailing\n * group. Container queries on the group decide which of these survive a narrow\n * window; a caller marks the cheap-to-drop ones and the group handles the rest.\n */\nexport function TopBarPill(props: ComponentProps<'button'> & { label: string }) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'children'])\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"top-bar-pill\"\n      class={cn(\n        'text-muted-foreground inline-flex h-control-sm shrink-0 items-center gap-1.5 rounded-md border border-border px-2.5 text-xs font-medium',\n        'transition-colors ease-out outline-none',\n        'hover:border-input hover:text-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'window-no-drag [&_svg]:size-3.5 [&_svg]:shrink-0',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <span>{local.label}</span>\n    </button>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"top-bar.js","names":["ComponentProps","Show","splitProps","Search","cn","TopBarProps","draggable","macosInset","windowsInset","glass","TopBar","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","invokeFocusHandler","handler","event","Event","Array","isArray","callback","data","TopBarSection","align","_el$2","_tmpl$2","$$focusin","target","HTMLElement","scrollIntoView","block","inline","onFocusIn","TopBarTitle","_el$3","_tmpl$3","TopBarBreadcrumb","_el$4","_tmpl$4","TopBarSearchProps","placeholder","shortcut","keyshortcuts","TopBarSearch","_el$5","_tmpl$6","_el$6","firstChild","aria-keyshortcuts","_$insert","_$createComponent","when","children","_el$7","_tmpl$5","TopBarPill","label","_el$8","_tmpl$7","_el$9","_$delegateEvents","_$mergeProps","_$createComponent","_$delegateEvents"],"sources":["../../../../src/components/layout/top-bar/top-bar.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { Search } from 'lucide-solid'\nimport { cn } from '#lib/utils'\n\n/**\n * TopBar.\n *\n * The window's title row and primary toolbar. Three tracks: a leading group, a\n * centred search, and a trailing group. On wide screens the search is a fixed\n * function of the window width and the side groups are equal remainders. On\n * narrow screens the middle track yields space to the controls, and each side\n * group scrolls when necessary so keyboard focus can reveal every action.\n *\n * On a frameless desktop window this row is also the drag region, so it carries\n * `window-drag` and the controls inside it opt back out. `macos-inset` and\n * `windows-inset` reserve the space the native window controls occupy, which is\n * why the row can look off-centre in a frameless window and be correct: it is\n * centred in the space the user can actually see.\n */\nexport type TopBarProps = ComponentProps<'header'> & {\n  /** Make the row draggable, for a frameless window. */\n  draggable?: boolean\n  /** Reserve space for the macOS traffic lights. */\n  macosInset?: boolean\n  /** Reserve space for the Windows caption buttons. */\n  windowsInset?: boolean\n  /** Blur the content scrolling under the bar. */\n  glass?: boolean\n}\n\nexport function TopBar(props: TopBarProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'draggable',\n    'macosInset',\n    'windowsInset',\n    'glass',\n  ])\n\n  return (\n    <header\n      data-slot=\"top-bar\"\n      class={cn(\n        'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-b border-border bg-card text-card-foreground px-3 md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]',\n        local.glass && 'glass-panel',\n        local.draggable && 'window-drag',\n        local.macosInset && 'window-inset-macos',\n        local.windowsInset && 'window-inset-windows',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nfunction invokeFocusHandler(handler: unknown, event: Event) {\n  if (Array.isArray(handler)) {\n    const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]\n    callback(data, event)\n  } else if (typeof handler === 'function') {\n    const callback = handler as (event: Event) => void\n    callback(event)\n  }\n}\n\n/** A scrollable side group; equal wide-screen tracks centre the search. */\nexport function TopBarSection(props: ComponentProps<'div'> & { align?: 'start' | 'end' }) {\n  const [local, rest] = splitProps(props, ['class', 'align', 'onFocusIn'])\n\n  return (\n    <div\n      data-slot=\"top-bar-section\"\n      class={cn(\n        'window-no-drag flex min-w-0 items-center gap-2 overflow-x-auto overflow-y-hidden',\n        local.align === 'end' && 'md:justify-end',\n        local.align !== 'end' && 'justify-start',\n        local.class\n      )}\n      onFocusIn={(event) => {\n        if (event.target instanceof HTMLElement) {\n          event.target.scrollIntoView({ block: 'nearest', inline: 'nearest' })\n        }\n        invokeFocusHandler(local.onFocusIn, event)\n      }}\n      {...rest}\n    />\n  )\n}\n\nexport function TopBarTitle(\n  props: ComponentProps<'div'> & {\n    /** Aligns text within this slot; it does not position the slot. */\n    align?: 'start' | 'center'\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'align'])\n  return (\n    <div\n      data-slot=\"top-bar-title\"\n      class={cn(\n        'truncate text-sm font-medium',\n        local.align === 'center' && 'text-center',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/** A breadcrumb or path readout that yields to the actions when space runs out. */\nexport function TopBarBreadcrumb(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"top-bar-breadcrumb\"\n      class={cn('flex min-w-0 items-center gap-1.5 text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport type TopBarSearchProps = ComponentProps<'button'> & {\n  /** The hint shown inside the field, e.g. \"Search projects and files\". */\n  placeholder?: string\n  /** The shortcut chip drawn at the trailing edge, e.g. \"⌘K\". */\n  shortcut?: string\n  /**\n   * The parseable chord behind `shortcut`, e.g. `Meta+K`. The chip is\n   * `aria-hidden` — reading it out would pollute the button's accessible\n   * name — so this is what assistive technology announces instead. Supply it\n   * whenever `shortcut` is drawn.\n   */\n  keyshortcuts?: string\n}\n\n/**\n * The search affordance in the middle track.\n *\n * It is a button, not an input, and that is deliberate: clicking it opens the\n * command palette, which already owns the input, the ranking and the keyboard\n * handling. A second live input here would be a second source of truth for the\n * same query. It is styled to read as a field because that is what it behaves\n * like from the user's side.\n */\nexport function TopBarSearch(props: TopBarSearchProps) {\n  const [local, rest] = splitProps(props, ['class', 'placeholder', 'shortcut', 'keyshortcuts'])\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"top-bar-search\"\n      class={cn(\n        'text-muted-foreground flex h-control-md w-full min-w-(--control-height-md) items-center justify-center gap-2 rounded-md border border-input px-3 text-sm sm:justify-start',\n        'transition-colors ease-out outline-none',\n        'hover:bg-surface-hover hover:text-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'window-no-drag',\n        local.class\n      )}\n      aria-keyshortcuts={local.keyshortcuts}\n      {...rest}\n    >\n      <Search aria-hidden=\"true\" class=\"size-4 shrink-0 sm:hidden\" />\n      <span class=\"sr-only sm:not-sr-only sm:truncate\">{local.placeholder ?? 'Search'}</span>\n      <Show when={local.shortcut}>\n        <kbd\n          aria-hidden=\"true\"\n          class=\"bg-muted ms-auto hidden h-5 shrink-0 items-center rounded-sm border border-border px-1.5 font-mono text-2xs sm:flex\"\n        >\n          {local.shortcut}\n        </kbd>\n      </Show>\n    </button>\n  )\n}\n\n/**\n * A labelled top-bar control — the readouts KiroCrew puts in the trailing\n * group. Container queries on the group decide which of these survive a narrow\n * window; a caller marks the cheap-to-drop ones and the group handles the rest.\n */\nexport function TopBarPill(props: ComponentProps<'button'> & { label: string }) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'children'])\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"top-bar-pill\"\n      class={cn(\n        'text-muted-foreground inline-flex h-control-sm shrink-0 items-center gap-1.5 rounded-md border border-border px-2.5 text-xs font-medium',\n        'transition-colors ease-out outline-none',\n        'hover:border-input hover:text-foreground',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        'window-no-drag [&_svg]:size-3.5 [&_svg]:shrink-0',\n        local.class\n      )}\n      {...rest}\n    >\n      {local.children}\n      <span>{local.label}</span>\n    </button>\n  )\n}\n"],"mappings":"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"}

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,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;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"}

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

@@ -111,7 +111,8 @@ function DropdownMenuCheckboxItem(props) {
 		return cn(menuItem, "pe-8", local.class);
 	} }, rest, { get children() {
 		return [memo(() => local.children), createComponent(DropdownMenu.ItemIndicator, {
-			"class": "absolute end-2 flex size-4 items-center justify-center",
+			"data-slot": "dropdown-menu-indicator",
+			"class": "absolute end-2 flex size-4 items-center justify-center text-primary",
 			get children() {
 				return createComponent(Check, { "class": "size-4" });
 			}
@@ -127,7 +128,8 @@ function DropdownMenuRadioItem(props) {
 		return cn(menuItem, "pe-8", local.class);
 	} }, rest, { get children() {
 		return [memo(() => local.children), createComponent(DropdownMenu.ItemIndicator, {
-			"class": "absolute end-2 flex size-4 items-center justify-center",
+			"data-slot": "dropdown-menu-indicator",
+			"class": "absolute end-2 flex size-4 items-center justify-center text-primary",
 			get children() {
 				return createComponent(Circle, { "class": "size-2 fill-current" });
 			}

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 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","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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/kbd/kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;GASG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAe/C;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,kCAUrD"}
+{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/kbd/kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C;;;;;;;;;GASG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,kCAa/C;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,kCAUrD"}

package/dist/components/ui/kbd/kbd.js

@@ -19,7 +19,7 @@ function Kbd(props) {
 	return (() => {
 		var _el$ = _tmpl$();
 		spread(_el$, mergeProps({ get ["class"]() {
-			return cn("bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-mono text-2xs font-medium select-none", "in-data-[slot=br-tooltip-content]:bg-background/20 in-data-[slot=br-tooltip-content]:text-scrim-foreground in-data-[slot=br-tooltip-content]:border-transparent", local.class);
+			return cn("bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-mono text-2xs font-medium select-none", local.class);
 		} }, rest), false, false);
 		return _el$;
 	})();

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

@@ -1 +1 @@
-{"version":3,"file":"kbd.js","names":["ComponentProps","splitProps","cn","Kbd","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","KbdGroup","_el$2","_tmpl$2","_$mergeProps"],"sources":["../../../../src/components/ui/kbd/kbd.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Kbd.\n *\n * A keyboard key, in the order the user presses them. The element is a real\n * `<kbd>` so the semantics survive copy-paste, and the mono face is what makes\n * a shortcut visually distinct from the sentence around it.\n *\n * `KbdGroup` exists because a shortcut is a sequence: typing `⌘` then `K`\n * needs a gap between them that is a layout concern, not punctuation.\n */\nexport function Kbd(props: ComponentProps<'kbd'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      class={cn(\n        'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-mono text-2xs font-medium select-none',\n        /* Inside a hover/selected row the key needs to recede with the row. */\n        'in-data-[slot=br-tooltip-content]:bg-background/20 in-data-[slot=br-tooltip-content]:text-scrim-foreground in-data-[slot=br-tooltip-content]:border-transparent',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function KbdGroup(props: ComponentProps<'span'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <span\n      data-slot=\"kbd-group\"\n      class={cn('inline-flex items-center gap-1', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAcA,SAAgBG,IAAIC,OAA8B;CAChD,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CAEjD,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GACL,gMAEA,mKACAG,MAAMM,KACR;EAAC,EAAA,GACGL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd;AAEA,SAAgBK,SAASR,OAA+B;CACtD,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CAEjD,cAAA;EAAA,IAAAS,QAAAC,QAAA;EAAAL,OAAAI,OAAAH,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GAAG,kCAAkCG,MAAMM,KAAK;EAAC,EAAA,GACpDL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAO;CAAA,EAAA,CAAA;AAGd"}
+{"version":3,"file":"kbd.js","names":["ComponentProps","splitProps","cn","Kbd","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","KbdGroup","_el$2","_tmpl$2","_$mergeProps"],"sources":["../../../../src/components/ui/kbd/kbd.tsx"],"sourcesContent":["import type { ComponentProps } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\n/**\n * Kbd.\n *\n * A keyboard key, in the order the user presses them. The element is a real\n * `<kbd>` so the semantics survive copy-paste, and the mono face is what makes\n * a shortcut visually distinct from the sentence around it.\n *\n * `KbdGroup` exists because a shortcut is a sequence: typing `⌘` then `K`\n * needs a gap between them that is a layout concern, not punctuation.\n */\nexport function Kbd(props: ComponentProps<'kbd'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      class={cn(\n        'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-mono text-2xs font-medium select-none',\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport function KbdGroup(props: ComponentProps<'span'>) {\n  const [local, rest] = splitProps(props, ['class'])\n\n  return (\n    <span\n      data-slot=\"kbd-group\"\n      class={cn('inline-flex items-center gap-1', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAcA,SAAgBG,IAAIC,OAA8B;CAChD,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CAEjD,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GACL,gMACAG,MAAMM,KACR;EAAC,EAAA,GACGL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAC;CAAA,EAAA,CAAA;AAGd;AAEA,SAAgBK,SAASR,OAA+B;CACtD,MAAM,CAACC,OAAOC,QAAQL,WAAWG,OAAO,CAAC,OAAO,CAAC;CAEjD,cAAA;EAAA,IAAAS,QAAAC,QAAA;EAAAL,OAAAI,OAAAH,WAAA,EAAA,KAAA,WAAA;GAAA,OAGWR,GAAG,kCAAkCG,MAAMM,KAAK;EAAC,EAAA,GACpDL,IAAI,GAAA,OAAA,KAAA;EAAA,OAAAO;CAAA,EAAA,CAAA;AAGd"}

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,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"}
+{"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,eAqChD;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

@@ -94,7 +94,6 @@ function StatusChip(props) {
 				children: chip
 			}), createComponent(TooltipContent, {
 				"data-slot": "tooltip-content",
-				hideArrow: true,
 				get children() {
 					return detail();
 				}

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","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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"}
+{"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","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\">{detail()}</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/components/ui/tooltip/tooltip.d.ts

@@ -10,9 +10,6 @@ export declare function TooltipProvider(props: TooltipProviderProps): import("so
 export type TooltipRootProps = ComponentProps<typeof KobalteTooltip>;
 export declare function Tooltip(props: TooltipRootProps): import("solid-js").JSX.Element;
 export declare function TooltipTrigger(props: ComponentProps<typeof KobalteTooltip.Trigger>): import("solid-js").JSX.Element;
-export type TooltipContentProps = ComponentProps<typeof KobalteTooltip.Content> & {
-    /** Hide the caret pointing at the trigger. */
-    hideArrow?: boolean;
-};
+export type TooltipContentProps = ComponentProps<typeof KobalteTooltip.Content>;
 export declare function TooltipContent(props: TooltipContentProps): import("solid-js").JSX.Element;
 //# sourceMappingURL=tooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAqB,MAAM,uBAAuB,CAAA;AACpF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAwI9C,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,kCAY1D;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAA;AAEpE,wBAAgB,OAAO,CAAC,KAAK,EAAE,gBAAgB,kCAgJ9C;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,kCA0ClF;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAAG;IAChF,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,kCAyCxD"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAqB,MAAM,uBAAuB,CAAA;AACpF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAyI9C,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,kCAY1D;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAA;AAEpE,wBAAgB,OAAO,CAAC,KAAK,EAAE,gBAAgB,kCAgJ9C;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,kCA0ClF;AAED,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,CAAA;AAE/E,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,kCA2CxD"}

package/dist/components/ui/tooltip/tooltip.js

@@ -1,4 +1,5 @@
 import { cn } from "../../../lib/utils.js";
+import { tooltipTip } from "../../../lib/overlay.js";
 import { createComponent, isServer, memo, mergeProps } from "solid-js/web";
 import { createContext, createEffect, createSignal, createUniqueId, onCleanup, splitProps, useContext } from "solid-js";
 import { Tooltip, useTooltipContext } from "@kobalte/core/tooltip";
@@ -255,7 +256,6 @@ function TooltipContent(props) {
 	const interaction = useContext(TooltipInteractionContext);
 	const [local, rest] = splitProps(props, [
 		"class",
-		"hideArrow",
 		"children",
 		"aria-hidden",
 		"onEscapeKeyDown",
@@ -265,7 +265,7 @@ function TooltipContent(props) {
 	return createComponent(Tooltip.Portal, { get children() {
 		return createComponent(Tooltip.Content, mergeProps({
 			get ["class"]() {
-				return cn("bg-scrim text-scrim-foreground z-(--z-tooltip) w-fit max-w-64 rounded-md px-2 py-1 text-xs", "origin-(--kb-tooltip-content-transform-origin) text-balance", "data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-expanded:duration-150 data-closed:duration-100", local.class);
+				return cn(tooltipTip, "z-(--z-tooltip) w-fit max-w-(--tooltip-max-width) px-2 py-1", "origin-(--kb-tooltip-content-transform-origin) text-balance", "data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-expanded:duration-150 data-closed:duration-100", local.class);
 			},
 			get ["aria-hidden"]() {
 				return memo(() => !!context.isOpen())() ? local["aria-hidden"] : true;
@@ -279,7 +279,7 @@ function TooltipContent(props) {
 				if (!event.defaultPrevented) interaction?.markCloseIntent();
 			}
 		}, rest, { get children() {
-			return [memo(() => local.children), memo(() => memo(() => !!!local.hideArrow)() && createComponent(Tooltip.Arrow, { "aria-hidden": "true" }))];
+			return local.children;
 		} }));
 	} });
 }