@adea-ai/ui 0.82.1 → 0.83.0

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

@@ -25,13 +25,17 @@ import { cn } from '../../../lib/utils'
  * Kobalte supplies the full menu contract — arrow keys, typeahead, the roving
  * highlight, Escape to close and return focus — which is exactly what a
  * hand-rolled `div` with click handlers gets wrong.
+ * Menus are nonmodal by default so their generated focus guards do not become
+ * invalid direct children of the ARIA menu. Set `modal` explicitly when the
+ * surrounding interaction needs modal containment.
  *
  * The `destructive` variant marks the row with a status-coloured edge and
  * highlighted tint while keeping its label on the body foreground. Pairing it
  * with an AlertDialog is the caller's job.
  */
 export function DropdownMenu(props: ComponentProps<typeof KobalteDropdownMenu>) {
-  return <KobalteDropdownMenu {...props} />
+  const [local, rest] = splitProps(props, ['modal'])
+  return <KobalteDropdownMenu modal={local.modal ?? false} {...rest} />
 }
 
 export function DropdownMenuTrigger(props: ComponentProps<typeof KobalteDropdownMenu.Trigger>) {

package/dist/r/src/components/ui/status-chip/status-chip.tsx

@@ -59,6 +59,8 @@ export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' |
 export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
   tone?: StatusTone
   label: string
+  /** Visually hide the text while preserving it for assistive technology. */
+  compact?: boolean
   /** Why the status is what it is. Shown in a tooltip; omit for a self-evident label. */
   detail?: string
   /** A trailing slot: a timestamp, a retry affordance, a count. */
@@ -66,7 +68,14 @@ export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
 }
 
 export function StatusChip(props: StatusChipProps) {
-  const [local, rest] = splitProps(props, ['tone', 'label', 'detail', 'trailing', 'class'])
+  const [local, rest] = splitProps(props, [
+    'tone',
+    'label',
+    'compact',
+    'detail',
+    'trailing',
+    'class',
+  ])
 
   const chip = (
     <span
@@ -78,7 +87,7 @@ export function StatusChip(props: StatusChipProps) {
       {...rest}
     >
       <span class={statusDotVariants({ tone: local.tone })} aria-hidden="true" />
-      {local.label}
+      <span class={cn(local.compact && 'sr-only')}>{local.label}</span>
       {local.trailing}
     </span>
   )

package/dist/r/src/lib/overlay.ts

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

package/dist/r/virtual-window.json

@@ -0,0 +1,22 @@
+{
+  "name": "virtual-window",
+  "type": "registry:ui",
+  "title": "Virtual Window",
+  "description": "Geometry wrappers for a virtual list; scrolling and range ownership stay with the caller.",
+  "dependencies": [],
+  "registryDependencies": [
+    "lib"
+  ],
+  "files": [
+    {
+      "path": "src/components/layout/virtual-window/index.ts",
+      "type": "registry:ui",
+      "target": "components/layout/virtual-window/index.ts"
+    },
+    {
+      "path": "src/components/layout/virtual-window/virtual-window.tsx",
+      "type": "registry:ui",
+      "target": "components/layout/virtual-window/virtual-window.tsx"
+    }
+  ]
+}

package/package.json

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

package/registry.json

@@ -442,10 +442,12 @@
       "title": "Command",
       "description": "",
       "dependencies": [
+        "@kobalte/core@^0.13.14",
         "cmdk-solid@^1.2.0",
         "lucide-solid@^1.48.0"
       ],
       "registryDependencies": [
+        "@adea-ai/ui/dialog",
         "lib"
       ],
       "files": [
@@ -1455,6 +1457,28 @@
         }
       ]
     },
+    {
+      "name": "orbit-layout",
+      "type": "registry:ui",
+      "title": "Orbit Layout",
+      "description": "Geometry-only wrappers for arranging content around a circle.",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/layout/orbit-layout/index.ts",
+          "type": "registry:ui",
+          "target": "components/layout/orbit-layout/index.ts"
+        },
+        {
+          "path": "src/components/layout/orbit-layout/orbit-layout.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/orbit-layout/orbit-layout.tsx"
+        }
+      ]
+    },
     {
       "name": "page",
       "type": "registry:ui",
@@ -1638,6 +1662,28 @@
         }
       ]
     },
+    {
+      "name": "virtual-window",
+      "type": "registry:ui",
+      "title": "Virtual Window",
+      "description": "Geometry wrappers for a virtual list; scrolling and range ownership stay with the caller.",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/layout/virtual-window/index.ts",
+          "type": "registry:ui",
+          "target": "components/layout/virtual-window/index.ts"
+        },
+        {
+          "path": "src/components/layout/virtual-window/virtual-window.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/virtual-window/virtual-window.tsx"
+        }
+      ]
+    },
     {
       "name": "account-menu",
       "type": "registry:ui",

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

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

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

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

package/src/components/layout/orbit-layout/index.ts

@@ -0,0 +1,8 @@
+/** Geometry-only wrappers for arranging content around a circle. */
+export {
+  OrbitItem,
+  OrbitLayout,
+  type OrbitItemProps,
+  type OrbitLayoutProps,
+  type OrbitRadius,
+} from './orbit-layout'

package/src/components/layout/orbit-layout/orbit-layout.tsx

@@ -0,0 +1,112 @@
+import type { ComponentProps } from 'solid-js'
+import { createContext, createMemo, splitProps, useContext, type Accessor } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/** A CSS length or expression used to place an item away from the orbit center. */
+export type OrbitRadius = number | string
+export type OrbitLayoutMode = 'radial' | 'flow'
+
+const DEFAULT_ORBIT_RADIUS = 'calc(50% - 2rem)'
+const OrbitRadiusContext = createContext<Accessor<string>>()
+const OrbitModeContext = createContext<Accessor<OrbitLayoutMode>>()
+
+function resolveRadius(radius: OrbitRadius | undefined): string {
+  if (typeof radius === 'number') return `${Number.isFinite(radius) ? Math.max(0, radius) : 0}px`
+  return radius?.trim() || DEFAULT_ORBIT_RADIUS
+}
+
+/**
+ * OrbitLayout.
+ *
+ * Provides a positioned canvas and a shared radius for its OrbitItems. It does
+ * not assign list semantics or alter DOM order: callers choose semantics, and
+ * keyboard and screen-reader order remain the source order of the children.
+ */
+export type OrbitLayoutProps = Omit<ComponentProps<'div'>, 'style'> & {
+  /** JSX style props are owned by this geometry primitive. */
+  style?: never
+  /** Responsive radius used by every OrbitItem unless that item overrides it. */
+  radius?: OrbitRadius
+  /** `flow` places items in source order; `radial` positions them around the host. */
+  mode?: OrbitLayoutMode
+}
+
+export function OrbitLayout(props: OrbitLayoutProps) {
+  const [local, rest] = splitProps(props, ['class', 'radius', 'mode', 'style', 'children'])
+  const radius = createMemo(() => resolveRadius(local.radius))
+  const mode = createMemo(() => local.mode ?? 'radial')
+
+  return (
+    <OrbitRadiusContext.Provider value={radius}>
+      <OrbitModeContext.Provider value={mode}>
+        <div
+          {...rest}
+          data-slot="orbit-layout"
+          class={cn(mode() === 'flow' ? 'grid gap-3' : 'relative size-full', local.class)}
+        >
+          {local.children}
+        </div>
+      </OrbitModeContext.Provider>
+    </OrbitRadiusContext.Provider>
+  )
+}
+
+/**
+ * OrbitItem.
+ *
+ * Positions one ordinary child around its OrbitLayout. This is geometry only:
+ * the wrapper has no role, tabindex, or interaction of its own.
+ */
+export type OrbitItemProps = Omit<ComponentProps<'div'>, 'style'> & {
+  /** JSX style props are owned by this geometry primitive. */
+  style?: never
+  /** Zero-based position in the rendered sequence. */
+  index: number
+  /** Number of items sharing this orbit. */
+  count: number
+  /** Per-item override for OrbitLayout's responsive radius. */
+  radius?: OrbitRadius
+}
+
+export function OrbitItem(props: OrbitItemProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'index',
+    'count',
+    'radius',
+    'style',
+    'children',
+  ])
+  const inheritedRadius = useContext(OrbitRadiusContext)
+  const inheritedMode = useContext(OrbitModeContext)
+  const mode = () => inheritedMode?.() ?? 'radial'
+  const radius = () =>
+    local.radius !== undefined
+      ? resolveRadius(local.radius)
+      : (inheritedRadius?.() ?? DEFAULT_ORBIT_RADIUS)
+  const angle = createMemo(() => {
+    const count = Number.isFinite(local.count) ? Math.max(1, Math.trunc(local.count)) : 1
+    const rawIndex = Number.isFinite(local.index) ? Math.trunc(local.index) : 0
+    const index = ((rawIndex % count) + count) % count
+    return `${(index / count) * Math.PI * 2}rad`
+  })
+  const positionStyle = () =>
+    mode() === 'flow'
+      ? undefined
+      : {
+          top: `calc(50% + sin(${angle()}) * ${radius()})`,
+          left: `calc(50% + cos(${angle()}) * ${radius()})`,
+          translate: '-50% -50%',
+        }
+
+  return (
+    <div
+      {...rest}
+      data-slot="orbit-item"
+      class={cn(mode() === 'flow' ? undefined : 'absolute', local.class)}
+      style={positionStyle()}
+    >
+      {local.children}
+    </div>
+  )
+}

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

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

package/src/components/layout/virtual-window/index.ts

@@ -0,0 +1,2 @@
+/** Geometry wrappers for a virtual list; scrolling and range ownership stay with the caller. */
+export { VirtualWindow, type VirtualWindowProps } from './virtual-window'

package/src/components/layout/virtual-window/virtual-window.tsx

@@ -0,0 +1,55 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * VirtualWindow.
+ *
+ * Supplies the two geometry wrappers a virtualized viewport needs: a full-height
+ * scroll space and a translated window containing the mounted rows. The caller
+ * owns the scroll region, its semantics, keyboard model, and range calculation;
+ * this component only keeps those rows at their measured position.
+ */
+export type VirtualWindowProps = Omit<ComponentProps<'div'>, 'children' | 'style'> & {
+  /** JSX style props are owned by this geometry primitive. */
+  style?: never
+  /** The full scrollable height, in pixels. */
+  totalSize: number
+  /** The mounted window's top offset from the start of the full list, in pixels. */
+  offset?: number
+  /** Optional layout classes for the translated row container. */
+  contentClass?: string
+  children?: JSX.Element
+}
+
+function finitePixels(value: number): string {
+  return `${Number.isFinite(value) ? value : 0}px`
+}
+
+export function VirtualWindow(props: VirtualWindowProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'children',
+    'totalSize',
+    'offset',
+    'contentClass',
+    'style',
+  ])
+
+  return (
+    <div
+      {...rest}
+      data-slot="virtual-window-space"
+      class={cn('relative', local.class)}
+      style={{ height: finitePixels(Math.max(0, local.totalSize)) }}
+    >
+      <div
+        data-slot="virtual-window-content"
+        class={local.contentClass}
+        style={{ transform: `translateY(${finitePixels(local.offset ?? 0)})` }}
+      >
+        {local.children}
+      </div>
+    </div>
+  )
+}

package/src/components/ui/command/command.tsx

@@ -10,17 +10,20 @@ import {
   CommandSeparator as CmdkSeparator,
   useCommandState,
 } from 'cmdk-solid'
+import { Dialog as KobalteDialog } from '@kobalte/core/dialog'
 import { Search } from 'lucide-solid'
 import type { ComponentProps } from 'solid-js'
 import { createEffect, createSignal, splitProps } from 'solid-js'
+import { createDialogFocusRestoration } from '../dialog/dialog'
 import { menuItem } from '#lib/overlay'
 import { cn } from '#lib/utils'
 
-// cmdk emits data-disabled="false" on enabled items; Kobalte omits it.
-// Presence selectors would dim and disable every command in an app palette.
+// cmdk emits data-disabled="false" on enabled items, unlike the presence-only
+// attributes Kobalte menu rows use. Apply those shared disabled styles only when
+// cmdk's value is true.
 const commandItem = menuItem
   .replace('data-[disabled]:pointer-events-none', '')
-  .replace('data-[disabled]:opacity-50', '')
+  .replace('data-[disabled]:text-muted-foreground', '')
 
 /**
  * Command.
@@ -52,26 +55,76 @@ export function Command(props: ComponentProps<typeof CmdkRoot>) {
   )
 }
 
-export function CommandDialog(props: ComponentProps<typeof CmdkDialog>) {
-  // cmdk's Dialog splits `contentClassName` onto the role="dialog" content
-  // element and routes every other prop (including `class`) to the inner
-  // Command. The surface must live on the content: a `class` here styles the
-  // Command (fixed, so visible) while the dialog element itself renders as an
-  // unstyled zero-height wrapper at the end of body — invisible to role
-  // queries and axe.
-  const [local, rest] = splitProps(props, ['class'])
+type CommandDialogProps = ComponentProps<typeof CmdkDialog> &
+  Pick<ComponentProps<typeof KobalteDialog.Content>, 'onCloseAutoFocus' | 'onOpenAutoFocus'>
+
+export function CommandDialog(props: CommandDialogProps) {
+  // cmdk-solid's Dialog does not forward Content autofocus props: unknown
+  // props fall through to its Command root. Compose Kobalte's dialog surface
+  // here so Escape and other close paths can restore focus to the real opener.
+  // Preserve the shared wrapper's `class` contract on the dialog surface;
+  // `contentClassName` adds to it, while the nested Command keeps its own API.
+  const [local, dialogProps, commandProps] = splitProps(
+    props,
+    [
+      'class',
+      'contentClassName',
+      'overlayClassName',
+      'container',
+      'onCloseAutoFocus',
+      'onOpenAutoFocus',
+    ],
+    [
+      'open',
+      'defaultOpen',
+      'onOpenChange',
+      'id',
+      'modal',
+      'preventScroll',
+      'forceMount',
+      'translations',
+    ]
+  )
+  const [isOpen, setIsOpen] = createSignal(dialogProps.open ?? dialogProps.defaultOpen ?? false)
+
+  createEffect(() => {
+    if (dialogProps.open !== undefined) setIsOpen(dialogProps.open)
+  })
+
+  const focus = createDialogFocusRestoration({
+    open: isOpen,
+    onCloseAutoFocus: local.onCloseAutoFocus,
+    onOpenAutoFocus: local.onOpenAutoFocus,
+  })
 
   return (
-    <CmdkDialog
-      contentClassName={cn(
-        'bg-popover text-popover-foreground fixed top-1/3 left-1/2 z-(--z-dialog) w-full max-w-lg -translate-x-1/2 -translate-y-1/2',
-        'overflow-hidden rounded-xl border border-border shadow-xl',
-        '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',
-        local.class
-      )}
-      {...rest}
-    />
+    <KobalteDialog
+      {...dialogProps}
+      onOpenChange={(open) => {
+        setIsOpen(open)
+        dialogProps.onOpenChange?.(open)
+      }}
+    >
+      <KobalteDialog.Portal mount={local.container}>
+        <KobalteDialog.Overlay cmdk-overlay="" class={local.overlayClassName} />
+        <KobalteDialog.Content
+          aria-label={commandProps.label}
+          cmdk-dialog=""
+          class={cn(
+            'bg-popover text-popover-foreground fixed top-1/3 left-1/2 z-(--z-dialog) w-full max-w-lg -translate-x-1/2 -translate-y-1/2',
+            'overflow-hidden rounded-xl border border-border shadow-xl',
+            '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',
+            local.class,
+            local.contentClassName
+          )}
+          onOpenAutoFocus={focus.onOpenAutoFocus}
+          onCloseAutoFocus={focus.onCloseAutoFocus}
+        >
+          <Command {...commandProps} />
+        </KobalteDialog.Content>
+      </KobalteDialog.Portal>
+    </KobalteDialog>
   )
 }
 
@@ -188,8 +241,8 @@ export function CommandItem(props: ComponentProps<typeof CmdkItem>) {
     <CmdkItem
       class={cn(
         commandItem,
-        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
-        'text-popover-foreground data-[selected=true]:bg-surface-hover data-[selected=true]:text-popover-foreground',
+        'data-[disabled=true]:pointer-events-none data-[disabled=true]:text-muted-foreground',
+        'group/command-item text-popover-foreground data-[selected=true]:bg-card data-[selected=true]:text-popover-foreground',
         local.class
       )}
       {...rest}
@@ -212,18 +265,17 @@ export function CommandLoading(props: ComponentProps<typeof CmdkLoading>) {
   )
 }
 
-/**
- * The keyboard hint a palette item usually carries.
- * Muted canvas text can fail contrast on a raised or selected command row;
- * hierarchy comes from its size and monospace face, with the row's readable ink.
- */
+/** The keyboard hint a palette item usually carries. */
 export function CommandShortcut(props: {
   class?: string
   children?: ComponentProps<'span'>['children']
 }) {
   return (
     <span
-      class={cn('text-popover-foreground ms-auto font-mono text-2xs tracking-widest', props.class)}
+      class={cn(
+        'text-muted-foreground ms-auto font-mono text-2xs tracking-widest group-data-[selected=true]/command-item:text-foreground',
+        props.class
+      )}
     >
       {props.children}
     </span>

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

@@ -25,13 +25,17 @@ import { cn } from '#lib/utils'
  * Kobalte supplies the full menu contract — arrow keys, typeahead, the roving
  * highlight, Escape to close and return focus — which is exactly what a
  * hand-rolled `div` with click handlers gets wrong.
+ * Menus are nonmodal by default so their generated focus guards do not become
+ * invalid direct children of the ARIA menu. Set `modal` explicitly when the
+ * surrounding interaction needs modal containment.
  *
  * The `destructive` variant marks the row with a status-coloured edge and
  * highlighted tint while keeping its label on the body foreground. Pairing it
  * with an AlertDialog is the caller's job.
  */
 export function DropdownMenu(props: ComponentProps<typeof KobalteDropdownMenu>) {
-  return <KobalteDropdownMenu {...props} />
+  const [local, rest] = splitProps(props, ['modal'])
+  return <KobalteDropdownMenu modal={local.modal ?? false} {...rest} />
 }
 
 export function DropdownMenuTrigger(props: ComponentProps<typeof KobalteDropdownMenu.Trigger>) {

package/src/components/ui/status-chip/status-chip.tsx

@@ -59,6 +59,8 @@ export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' |
 export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
   tone?: StatusTone
   label: string
+  /** Visually hide the text while preserving it for assistive technology. */
+  compact?: boolean
   /** Why the status is what it is. Shown in a tooltip; omit for a self-evident label. */
   detail?: string
   /** A trailing slot: a timestamp, a retry affordance, a count. */
@@ -66,7 +68,14 @@ export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
 }
 
 export function StatusChip(props: StatusChipProps) {
-  const [local, rest] = splitProps(props, ['tone', 'label', 'detail', 'trailing', 'class'])
+  const [local, rest] = splitProps(props, [
+    'tone',
+    'label',
+    'compact',
+    'detail',
+    'trailing',
+    'class',
+  ])
 
   const chip = (
     <span
@@ -78,7 +87,7 @@ export function StatusChip(props: StatusChipProps) {
       {...rest}
     >
       <span class={statusDotVariants({ tone: local.tone })} aria-hidden="true" />
-      {local.label}
+      <span class={cn(local.compact && 'sr-only')}>{local.label}</span>
       {local.trailing}
     </span>
   )

package/src/index.ts

@@ -79,6 +79,8 @@ export * from './components/motion'
 
 /* --- Layout -------------------------------------------------------------- */
 export * from './components/layout/split-layout'
+export * from './components/layout/orbit-layout'
+export * from './components/layout/virtual-window'
 export * from './components/layout/app-shell'
 export * from './components/layout/page'
 export * from './components/layout/panel'