@adea-ai/ui 0.114.0 → 0.115.1

package/src/components/layout/contextual-sidebar/contextual-sidebar.tsx

@@ -27,6 +27,13 @@ export type ContextualSidebarProps = {
   label: string
   /** Visible navigation title and mobile dialog title. */
   title: string
+  /**
+   * Where the title row shows. `always` (default) draws it on desktop and in
+   * the mobile sheet; `mobile` keeps the desktop title for assistive
+   * technology only and drops the desktop row, for hosts whose top bar
+   * already names the context. A `header` slot keeps the row visible.
+   */
+  titleVisibility?: 'always' | 'mobile'
   /** Host-controlled expanded state for the desktop panel and mobile dialog. */
   open: boolean
   onOpenChange(open: boolean): void
@@ -157,6 +164,9 @@ export function ContextualSidebar(props: ContextualSidebarProps) {
       >
         <Show when={!mobile && props.open}>
           <PixelResizeHandle
+            // The ruler spans the sidebar as a pointer-events-none overlay; lift
+            // it above the neighbouring pane so the edge stays grabbable.
+            class="z-(--z-docked)"
             side="left"
             value={props.width}
             minimum={props.minimum}
@@ -169,10 +179,19 @@ export function ContextualSidebar(props: ContextualSidebarProps) {
           />
         </Show>
         <Show when={!mobile || mobileMount()?.connected}>
-          <SidebarNavHeader class={cn(mobile && 'pe-12', props.headerClass)}>
-            <SidebarNavTitle as={props.headingAs ?? 'h2'}>{props.title}</SidebarNavTitle>
-            {props.header?.(context)}
-          </SidebarNavHeader>
+          <Show
+            when={mobile || props.titleVisibility !== 'mobile' || props.header}
+            fallback={
+              <SidebarNavTitle as={props.headingAs ?? 'h2'} class="sr-only">
+                {props.title}
+              </SidebarNavTitle>
+            }
+          >
+            <SidebarNavHeader class={cn(mobile && 'pe-12', props.headerClass)}>
+              <SidebarNavTitle as={props.headingAs ?? 'h2'}>{props.title}</SidebarNavTitle>
+              {props.header?.(context)}
+            </SidebarNavHeader>
+          </Show>
           <SidebarNavContent class={props.contentClass}>{props.content(context)}</SidebarNavContent>
           {props.footer ? (
             <SidebarNavFooter class={props.footerClass}>{props.footer(context)}</SidebarNavFooter>

package/src/components/layout/sidebar-nav/sidebar-nav.tsx

@@ -88,7 +88,12 @@ export function SidebarNavContent(props: ComponentProps<'div'>) {
   return (
     <div
       data-slot="sidebar-nav-content"
-      class={cn('flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2', local.class)}
+      class={cn(
+        /* A stable gutter keeps rows from shifting sideways when the list
+           grows past the fold and the scrollbar appears. */
+        'flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2 [scrollbar-gutter:stable]',
+        local.class
+      )}
       {...rest}
     />
   )
@@ -140,6 +145,12 @@ export type SidebarNavSectionProps = ComponentProps<'div'> & {
   count?: number
   /** A control at the trailing edge of the heading row. */
   action?: JSX.Element
+  /**
+   * When the trailing action shows. `hover` (default) reveals it on hover or
+   * focus; `always` keeps it visible, for a section whose primary action is
+   * creating its first item.
+   */
+  actionVisibility?: 'hover' | 'always'
   /** Semantic heading element for a host's section hierarchy. */
   headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 }
@@ -156,6 +167,7 @@ export function SidebarNavSection(props: SidebarNavSectionProps) {
     'triggerProps',
     'count',
     'action',
+    'actionVisibility',
     'headingAs',
     'children',
   ])
@@ -229,6 +241,11 @@ export function SidebarNavSection(props: SidebarNavSectionProps) {
               }}
               class={cn(
                 'flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-2xs font-medium tracking-wide uppercase outline-none transition-colors ease-out hover:text-sidebar-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle [@media(any-pointer:coarse)]:min-h-11',
+                /* WCAG 2.5.8: the row's vertical padding sits on the header, so
+                   the bare label would be a ~16px target. Stretch the button
+                   across that padding; the row's height does not change. A
+                   coarse pointer already gets min-h-11 on an unpadded row. */
+                '-my-1.5 py-1.5 [@media(any-pointer:coarse)]:my-0 [@media(any-pointer:coarse)]:py-0',
                 local.active ? 'text-foreground' : 'text-sidebar-muted-foreground'
               )}
             >
@@ -237,7 +254,13 @@ export function SidebarNavSection(props: SidebarNavSectionProps) {
           </Show>
         </Polymorphic>
         <Show when={local.action}>
-          <span class="shrink-0 opacity-0 transition-opacity ease-out group-hover/section-header:opacity-100 focus-within:opacity-100 [@media(any-pointer:coarse)]:opacity-100">
+          <span
+            data-slot="sidebar-nav-section-action"
+            class={cn('shrink-0', {
+              'opacity-0 transition-opacity ease-out group-hover/section-header:opacity-100 focus-within:opacity-100 [@media(any-pointer:coarse)]:opacity-100':
+                local.actionVisibility !== 'always',
+            })}
+          >
             {local.action}
           </span>
         </Show>

package/src/components/layout/top-bar/top-bar.tsx

@@ -42,11 +42,15 @@ export function TopBar(props: TopBarProps) {
     <header
       data-slot="top-bar"
       class={cn(
-        '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)]',
+        '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 md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]',
         local.glass && 'glass-panel',
         local.draggable && 'window-drag',
-        local.macosInset && 'window-inset-macos',
-        local.windowsInset && 'window-inset-windows',
+        /* Each edge gets exactly one inline-padding utility. A window inset
+           and px-3 would share a layer and tie-break by build order, and a
+           build that put px-3 last hid the leading controls under the
+           traffic lights. */
+        local.macosInset ? 'window-inset-macos' : 'ps-3',
+        local.windowsInset ? 'window-inset-windows' : 'pe-3',
         local.class
       )}
       {...rest}
@@ -99,7 +103,9 @@ export function TopBarTitle(
     <div
       data-slot="top-bar-title"
       class={cn(
-        'truncate text-sm font-medium',
+        /* The title slot sits in the drag region; a link, button or field
+           placed in it (a breadcrumb, a view's search) must stay pressable. */
+        'truncate text-sm font-medium [&_:is(a,button,input)]:window-no-drag',
         local.align === 'center' && 'text-center',
         local.class
       )}
@@ -114,7 +120,10 @@ export function TopBarBreadcrumb(props: ComponentProps<'div'>) {
   return (
     <div
       data-slot="top-bar-breadcrumb"
-      class={cn('flex min-w-0 items-center gap-1.5 text-sm', local.class)}
+      class={cn(
+        'flex min-w-0 items-center gap-1.5 text-sm [&_:is(a,button,input)]:window-no-drag',
+        local.class
+      )}
       {...rest}
     />
   )

package/src/components/ui/input/input-control.tsx

@@ -9,17 +9,28 @@ import { cn } from '#lib/utils'
  * when a consumer needs only the control; `Input` adds native datalist
  * suggestions for forms that need them.
  */
-export type InputControlProps = ComponentProps<'input'>
+export type InputControlProps = Omit<ComponentProps<'input'>, 'size'> & {
+  /**
+   * The control rung, matching `SelectTrigger`: `sm` for a dense toolbar or
+   * pane filter beside `icon-sm` actions, `md` (the default) everywhere else.
+   */
+  size?: 'sm' | 'md' | 'lg'
+}
 
 export function InputControl(props: InputControlProps) {
-  const [local, rest] = splitProps(props, ['class', 'type'])
+  const [local, rest] = splitProps(props, ['class', 'type', 'size'])
 
   return (
     <input
       data-slot="input"
       type={local.type ?? 'text'}
       class={cn(
-        'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',
+        'w-full min-w-0 rounded-md border border-input bg-transparent py-1',
+        {
+          'h-control-sm px-control-sm text-xs': local.size === 'sm',
+          'h-control-md px-control-md text-sm': local.size === 'md' || local.size === undefined,
+          'h-control-lg px-control-lg text-sm': local.size === 'lg',
+        },
         'transition-[color,box-shadow,border-color] ease-out outline-none',
         'placeholder:text-muted-foreground',
         'selection:bg-primary selection:text-primary-foreground',

package/src/components/ui/input/input.tsx

@@ -1,7 +1,6 @@
-import type { ComponentProps } from 'solid-js'
 import { createUniqueId, For, Show, splitProps } from 'solid-js'
 import { useFormFieldControl } from '#lib/form-field'
-import { InputControl } from './input-control'
+import { InputControl, type InputControlProps } from './input-control'
 
 /**
  * Input.
@@ -12,10 +11,11 @@ import { InputControl } from './input-control'
  * them separate is what lets an input sit inside a custom control without
  * inheriting a form's ARIA graph.
  *
- * Height comes from `h-control-md`; an input cannot be given a new height
- * without a new token, which is what keeps it aligned with Button and Select.
+ * Height comes from the control tokens (`size`, `md` by default); an input
+ * cannot be given a height off that ladder, which is what keeps it aligned
+ * with Button and Select.
  */
-export type InputProps = ComponentProps<'input'> & {
+export type InputProps = InputControlProps & {
   /** Native text suggestions; custom values remain valid and submit unchanged. */
   suggestions?: readonly string[]
 }

package/src/components/ui/modal-dialog/modal-dialog.tsx

@@ -42,7 +42,8 @@ import {
  *
  * Use `Dialog` directly when you need its composition; use this when you want a
  * dialog that is correct by default. `size="settings"` supplies a wide, bounded
- * shell for a shared settings layout; ordinary dialogs keep their compact default.
+ * shell for a shared settings layout, titled by a banded header like a sheet's;
+ * ordinary dialogs keep their compact default.
  */
 export type ModalDialogProps = Omit<
   ComponentProps<typeof DialogContent>,
@@ -154,6 +155,7 @@ export function ModalDialog(props: ModalDialogProps) {
           onCloseAutoFocus={focusRestoration.onCloseAutoFocus}
         >
           <DialogHeader
+            band={local.size === 'settings'}
             class={
               local.size === 'settings'
                 ? 'shrink-0 gap-1 border-b border-border px-5 pt-4 pb-3 pe-14'

package/src/components/ui/resizable/resizable.tsx

@@ -94,12 +94,13 @@ export function ResizableHandle(props: ResizableHandleProps) {
       class={cn(
         'group/resize bg-border relative flex w-px shrink-0 items-center justify-center',
         /* Widen the hit target without moving the visual line: the divider is
-           a hairline, but a hairline is far too small to grab. */
-        'after:absolute after:inset-y-0 after:-inset-x-1 after:w-3',
+           a hairline, but a hairline is far too small to grab. 24px on the
+           drag axis meets WCAG 2.5.8's minimum target. */
+        'after:absolute after:inset-y-0 after:-inset-x-3 after:w-6',
         'transition-colors ease-out hover:bg-primary',
         'focus-visible:bg-primary focus-visible:outline-none',
         'data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full',
-        'data-[orientation=vertical]:after:inset-x-0 data-[orientation=vertical]:after:-inset-y-1 data-[orientation=vertical]:after:h-3 data-[orientation=vertical]:after:w-full',
+        'data-[orientation=vertical]:after:inset-x-0 data-[orientation=vertical]:after:-inset-y-3 data-[orientation=vertical]:after:h-6 data-[orientation=vertical]:after:w-full',
         local.class
       )}
       {...rest}

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

@@ -13,7 +13,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'
  * with no text (unreadable to anyone who cannot see it) and a bare word with no
  * explanation ("Needs configuration" — of what?).
  *
- * The tones are deliberately not a rainbow. Six cover what a status can actually
+ * The tones are deliberately not a rainbow. Seven cover what a status can actually
  * mean:
  *
  * - `neutral` — fine, and there is nothing to say about it.
@@ -21,6 +21,8 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'
  * - `warning` — degraded, or needs a decision from the user.
  * - `danger` — blocked, failed, unrecoverable without intervention.
  * - `info` — in flight or scheduled; work is happening, nothing is wrong.
+ * - `pending` — running now with no result yet (a check, a build). The ring
+ *   turns, so it reads as live rather than as a settled state.
  * - `unknown` — the honest absence of information.
  *
  * `unknown` is not the same as `neutral`, and collapsing them is the mistake
@@ -39,6 +41,7 @@ export const statusDotVariants = cva('size-2 shrink-0 rounded-full', {
       warning: 'bg-warning',
       danger: 'bg-destructive',
       info: 'bg-info',
+      pending: 'border-2 border-info border-r-transparent motion-safe:animate-spin',
       unknown: 'border border-muted-foreground bg-transparent',
     },
   },
@@ -51,10 +54,18 @@ const labelTone: Record<StatusTone, string> = {
   warning: 'text-foreground',
   danger: 'text-foreground',
   info: 'text-foreground',
+  pending: 'text-foreground',
   unknown: 'text-muted-foreground',
 }
 
-export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'unknown'
+export type StatusTone =
+  | 'neutral'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'info'
+  | 'pending'
+  | 'unknown'
 
 export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
   tone?: StatusTone

package/src/styles/base.css

@@ -96,7 +96,8 @@
 }
 
 /* Emitted only when ListRowControl is used. A described row changes its own
-   height and stacks trailing actions when its available width gets tight. */
+   height and stacks trailing actions when its available width gets tight,
+   unless the row opts out with `stackTrailing={false}`. */
 @utility list-row-description {
   &[data-description] {
     align-items: flex-start;
@@ -111,23 +112,23 @@
   }
 
   @container list-row (width < 28rem) {
-    &[data-description] [data-slot='list-row-content'] {
+    &[data-description]:not([data-stack-trailing='never']) [data-slot='list-row-content'] {
       align-items: stretch;
       flex-direction: column;
     }
 
-    &[data-description] [data-slot='list-row-label'],
-    &[data-description] [data-slot='list-row-trailing'] {
+    &[data-description]:not([data-stack-trailing='never']) [data-slot='list-row-label'],
+    &[data-description]:not([data-stack-trailing='never']) [data-slot='list-row-trailing'] {
       flex: none;
       width: 100%;
     }
 
-    &[data-description] [data-slot='list-row-trailing'] {
+    &[data-description]:not([data-stack-trailing='never']) [data-slot='list-row-trailing'] {
       flex-wrap: wrap;
       justify-content: flex-end;
     }
 
-    &[data-description] [data-slot='list-row-trailing'] button {
+    &[data-description]:not([data-stack-trailing='never']) [data-slot='list-row-trailing'] button {
       max-width: 100%;
       white-space: normal;
     }