@kitn.ai/ui 0.18.0 → 0.18.2

package/src/elements/define.tsx

@@ -137,13 +137,27 @@ export function defineWebComponent<P extends Record<string, unknown>, E = Record
     }
   }
 
+  // Props that NAME a reflected global IDL accessor (today: only `role`, from
+  // ARIAMixin's Element.prototype.role). Unlike RESERVED (which throws), these are
+  // allowed as plain styling props, but they must NEVER reach the host as an
+  // attribute: kai-message uses role='user'|'assistant' to pick its layout, and
+  // those are not valid ARIA roles, so a reflected role="user" / role="assistant"
+  // fails axe's aria-roles rule. The native IDL setter reflects to an attribute
+  // whenever the property is set BEFORE connectedCallback (e.g. in a framework
+  // `ref`: `el.role = 'user'`), which is the window before component-register
+  // installs its own (non-reflecting) per-instance accessor in initializeProps. We
+  // shadow the native accessor on the element prototype with a plain non-reflecting
+  // one, so setting the property only STORES the value (component-register still
+  // reads it back for styling) and never touches a host attribute.
+  const NON_REFLECTING = ['role'];
+
   // Every element gets a `theme` property/attribute: 'light' | 'dark' | 'auto'
   // (default 'auto' = follow the OS `prefers-color-scheme`). It drives a `.dark`
   // class on an inner wrapper, which the injected kit CSS already styles — so dark
   // mode works in standalone Shadow-DOM usage with no token duplication.
   const defaults = { theme: 'auto', ...propDefaults };
 
-  customElement(tag, defaults, (props: typeof defaults, options: { element: object }) => {
+  const Ctor = customElement(tag, defaults, (props: typeof defaults, options: { element: object }) => {
     const element = options.element as HTMLElement;
     let portalNode!: HTMLDivElement;
 
@@ -215,4 +229,29 @@ export function defineWebComponent<P extends Record<string, unknown>, E = Record
       </>
     );
   });
+
+  // Shadow any reflected native IDL accessor this element re-uses as a prop (see
+  // NON_REFLECTING) with a plain, non-reflecting store on the element prototype.
+  // This must live on the prototype (not the instance) so it is already in place
+  // when the value is set before connectedCallback, the window in which the native
+  // setter would otherwise reflect it to a host attribute. component-register reads
+  // the property back during initializeProps to seed the styling prop, and later
+  // shadows this with its own (also non-reflecting) per-instance accessor.
+  const proto = (Ctor as unknown as { prototype?: object } | undefined)?.prototype;
+  if (proto) {
+    for (const key of NON_REFLECTING) {
+      if (!(key in defaults)) continue;
+      const store = Symbol(`kai-prop:${key}`);
+      Object.defineProperty(proto, key, {
+        get(this: Record<symbol, unknown>) {
+          return this[store];
+        },
+        set(this: Record<symbol, unknown>, value: unknown) {
+          this[store] = value;
+        },
+        enumerable: true,
+        configurable: true,
+      });
+    }
+  }
 }

package/src/elements/search.tsx

@@ -157,7 +157,7 @@ defineWebComponent<Props, Events>('kai-search', {
         </button>
       </Show>
       <Show when={!value() && props.shortcut}>
-        <Kbd keys={props.shortcut as string} size="sm" class="opacity-80" />
+        <Kbd keys={props.shortcut as string} size="sm" />
       </Show>
     </>
   );

package/src/ui/agent-card.tsx

@@ -115,27 +115,15 @@ export function AgentCard(props: AgentCardProps) {
   };
 
   return (
-    // role="button" rather than a real <button> so the trailing kebab <button>
-    // is a valid (non-nested) interactive element.
+    // A plain container (no interactive role): the agent name below is the real
+    // <button> activator, and the kebab is a separate sibling <button>, so neither
+    // interactive control is nested inside the other.
     <div
-      role="button"
-      tabindex="0"
-      onClick={activate}
-      onKeyDown={(e) => {
-        // Only activate from the card itself, never from the nested kebab.
-        if (e.currentTarget !== e.target) return;
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          activate();
-        }
-      }}
-      aria-current={local.active ? 'true' : undefined}
       data-active={local.active ? '' : undefined}
       data-needs-attention={local.needsAttention ? '' : undefined}
       class={cn(
-        'group flex w-full cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 text-left',
-        'outline-none transition-[background-color,border-color,box-shadow]',
-        'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
+        'group relative flex w-full cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 text-left',
+        'transition-[background-color,border-color,box-shadow]',
         local.active
           ? 'border-primary bg-accent'
           : 'border-border bg-surface hover:bg-accent',
@@ -174,9 +162,26 @@ export function AgentCard(props: AgentCardProps) {
         </Show>
       </span>
 
-      <span class="truncate text-sm font-medium leading-tight text-foreground min-w-0 flex-1">
-        {local.name}
-      </span>
+      {/* The agent name is the card's primary action: a real <button> whose inset
+          ::before overlay stretches the click target over the whole card, so a click
+          anywhere promotes the agent. Being a real button it is natively focusable and
+          activates on Enter / Space, so no manual key handling is needed. The overlay
+          also carries the card's focus ring (rounded to match), keeping the focused
+          card visually identical to before. */}
+      <button
+        type="button"
+        onClick={activate}
+        aria-current={local.active ? 'true' : undefined}
+        class={cn(
+          'min-w-0 flex-1 text-left outline-none',
+          "before:absolute before:inset-0 before:rounded-lg before:content-['']",
+          'focus-visible:before:ring-2 focus-visible:before:ring-inset focus-visible:before:ring-ring',
+        )}
+      >
+        <span class="block truncate text-sm font-medium leading-tight text-foreground">
+          {local.name}
+        </span>
+      </button>
 
       <span class="flex shrink-0 items-center gap-2">
         <Show when={local.needsAttention}>
@@ -192,12 +197,13 @@ export function AgentCard(props: AgentCardProps) {
             part="menu"
             aria-label="More"
             onClick={(e) => {
-              // Don't let the menu click also activate the card.
+              // The kebab sits above the name button's stretch overlay (relative z-10),
+              // so it opens its menu without activating the card; stop propagation too.
               e.stopPropagation();
               local.onMenu?.(e);
             }}
             class={cn(
-              'inline-flex size-7 shrink-0 items-center justify-center rounded-md',
+              'relative z-10 inline-flex size-7 shrink-0 items-center justify-center rounded-md',
               'text-muted-foreground outline-none transition-colors',
               'hover:bg-surface-sunken hover:text-foreground',
               'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',

package/src/ui/command.tsx

@@ -41,7 +41,11 @@ export function CommandList(props: CommandListProps): JSX.Element {
   const hasItems = () => props.groups.some((g) => g.items.length > 0);
 
   return (
-    <div role="listbox" aria-label={props.ariaLabel ?? 'Command palette'} id={props.id}>
+    <div
+      role={hasItems() ? 'listbox' : undefined}
+      aria-label={hasItems() ? (props.ariaLabel ?? 'Command palette') : undefined}
+      id={props.id}
+    >
       <Show
         when={hasItems()}
         fallback={

package/src/ui/pane-grid.tsx

@@ -108,6 +108,7 @@ export function PaneGrid(props: PaneGridProps) {
       // min-w-0 / min-h-0 let the grid shrink inside a flex/grid parent so its own
       // overflow:auto (not the parent) takes over once panes hit their minimums.
       class={cn('grid h-full w-full min-h-0 min-w-0 overflow-auto', props.class)}
+      tabindex={0}
       style={gridStyle()}
     >
       <For each={shown()}>{(pane) => pane}</For>

package/src/ui/pane-group.tsx

@@ -99,8 +99,10 @@ const TONE_TEXT: Record<PaneStatusTone, string> = {
  * renders `children` as the active pane's body and swaps it in response to
  * `onTabChange`. Selection-only — it never routes content itself.
  *
- * Accessibility: `role="tablist"` strip, `role="tab"` tabs with roving tabindex
- * and Arrow/Home/End navigation, the body as `role="tabpanel"`. Colors are all
+ * Accessibility: a `role="group"` ("Open panes") strip of real `<button>` tab
+ * activators (NOT `role="tab"`, so the strip can legally own the per-tab menu/close
+ * buttons) with roving tabindex + Arrow/Home/End navigation; the active activator is
+ * marked `aria-current="true"`, and the body is the `role="tabpanel"`. Colors are all
  * token-backed (surface / border / ring / tool-*), so it reads in light and dark.
  * The strip, each tab, and the body are exposed via `::part(tabs|tab|body)` for
  * the `kai-pane-group` facade. Give the group a bounded height for the body scroll.
@@ -166,57 +168,65 @@ export function PaneGroup(props: PaneGroupProps) {
     // The status word shows on the active tab, on hover, and always when the tab
     // needs attention or has errored.
     const alwaysWord = () => isActive() || !!tab().needsAttention || tone() === 'error';
+    // Outer wrapper is a plain div (no ARIA role) so the activator button and
+    // the menu/close buttons are siblings -- no nested-interactive violation.
     return (
       <div
-        ref={(el) => { tabEls[tab().id] = el; }}
-        part="tab"
-        role="tab"
-        tabindex={tab().id === rovingId() ? 0 : -1}
-        aria-selected={isActive() ? 'true' : 'false'}
-        data-active={isActive() ? '' : undefined}
-        data-needs-attention={tab().needsAttention ? '' : undefined}
-        onClick={() => select(tab().id)}
-        onKeyDown={(e) => onKeyDown(e, tab())}
         class={cn(
-          'group/tab relative flex shrink-0 cursor-pointer items-center gap-1.5 rounded-md py-1 pl-1.5 pr-1 text-xs',
-          'outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
+          'group/tab relative flex shrink-0 items-center rounded-md text-xs',
           isActive()
             ? 'bg-background text-foreground shadow-sm ring-1 ring-border'
             : 'text-muted-foreground hover:bg-hover hover:text-foreground',
           tab().needsAttention && !isActive() && 'ring-1 ring-tool-amber/50',
         )}
+        data-active={isActive() ? '' : undefined}
+        data-needs-attention={tab().needsAttention ? '' : undefined}
       >
-        {/* Numbered status badge: color = status, digit = the ⌥-jump number. */}
-        <span class="relative flex size-[18px] shrink-0" aria-hidden="true">
-          <Show when={tab().status?.pulse}>
-            <span class={cn('absolute inset-0 animate-ping rounded opacity-60 motion-reduce:hidden', TONE_BG[tone()])} />
-          </Show>
-          <span
-            class={cn(
-              'relative flex size-[18px] items-center justify-center rounded text-[11px] font-bold leading-none tabular-nums',
-              TONE_BG[tone()],
-              TONE_BADGE_FG[tone()],
-            )}
-          >
-            {num()}
+        {/* Button-group activator (NOT role="tab") so the strip can legally own the
+            sibling menu/close buttons. aria-current marks the active pane. */}
+        <button
+          ref={(el) => { tabEls[tab().id] = el; }}
+          type="button"
+          part="tab"
+          tabindex={tab().id === rovingId() ? 0 : -1}
+          aria-current={isActive() ? 'true' : undefined}
+          onClick={() => select(tab().id)}
+          onKeyDown={(e) => onKeyDown(e, tab())}
+          class="flex cursor-pointer items-center gap-1.5 py-1 pl-1.5 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+        >
+          {/* Numbered status badge: color = status, digit = the ⌥-jump number. */}
+          <span class="relative flex size-[18px] shrink-0" aria-hidden="true">
+            <Show when={tab().status?.pulse}>
+              <span class={cn('absolute inset-0 animate-ping rounded opacity-60 motion-reduce:hidden', TONE_BG[tone()])} />
+            </Show>
+            <span
+              class={cn(
+                'relative flex size-[18px] items-center justify-center rounded text-[11px] font-bold leading-none tabular-nums',
+                TONE_BG[tone()],
+                TONE_BADGE_FG[tone()],
+              )}
+            >
+              {num()}
+            </span>
           </span>
-        </span>
 
-        <span class="max-w-[8rem] truncate font-medium">{tab().name}</span>
+          <span class="max-w-[8rem] truncate font-medium">{tab().name}</span>
 
-        <Show when={tab().status?.label}>
-          <span
-            class={cn(
-              'truncate text-[10px] font-medium',
-              TONE_TEXT[tone()],
-              alwaysWord() ? 'inline' : 'hidden group-hover/tab:inline',
-            )}
-          >
-            {tab().status!.label}
-          </span>
-        </Show>
+          <Show when={tab().status?.label}>
+            <span
+              class={cn(
+                'truncate text-[10px] font-medium',
+                TONE_TEXT[tone()],
+                alwaysWord() ? 'inline' : 'hidden group-hover/tab:inline',
+              )}
+            >
+              {tab().status!.label}
+            </span>
+          </Show>
+        </button>
 
-        <span class="ml-0.5 flex shrink-0 items-center">
+        {/* menu/close are siblings to the activator, not descendants -- no nested-interactive. */}
+        <span class="ml-0.5 flex shrink-0 items-center pr-1">
           <Show when={props.onTabMenu}>
             <button
               type="button"
@@ -266,7 +276,8 @@ export function PaneGroup(props: PaneGroupProps) {
     >
       <div
         part="tabs"
-        role="tablist"
+        role="group"
+        aria-label="Open panes"
         class="flex shrink-0 items-center gap-1 overflow-x-auto border-b border-border px-1.5 py-1"
       >
         <For each={tabs()}>{(tab, i) => <TabItem tab={tab} index={i()} />}</For>

package/src/ui/pane.tsx

@@ -179,7 +179,7 @@ export function Pane(props: PaneProps) {
         </div>
       </div>
 
-      <div part="body" class="min-h-0 flex-1 overflow-y-auto">
+      <div part="body" class="min-h-0 flex-1 overflow-y-auto" tabindex={0}>
         {props.children}
       </div>
 

package/dist/elements/chunks/arrow-left-C-gwlUmx.js

@@ -1 +0,0 @@
-import{I as o}from"./Icon-DLLBeLG5.js";import{c as m,m as r}from"./define-rGsaWsLL.js";var e=[["path",{d:"m12 19-7-7 7-7",key:"1l729n"}],["path",{d:"M19 12H5",key:"x3x0zl"}]],t=a=>m(o,r(a,{name:"ArrowLeft",iconNode:e})),p=t;export{p as a};

package/dist/elements/chunks/check-hGUoVIKb.js

@@ -1 +0,0 @@
-import{I as m}from"./Icon-DLLBeLG5.js";import{c as o,m as r}from"./define-rGsaWsLL.js";var c=[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]],e=a=>o(m,r(a,{name:"Check",iconNode:c})),f=e;export{f as c};

package/dist/elements/chunks/chevron-down-DDoaSUtO.js

@@ -1 +0,0 @@
-import{I as r}from"./Icon-DLLBeLG5.js";import{c as a,m}from"./define-rGsaWsLL.js";var e=[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]],n=o=>a(r,m(o,{name:"ChevronDown",iconNode:e})),p=n;export{p as c};

package/dist/elements/chunks/chevron-right-CdGEUakB.js

@@ -1 +0,0 @@
-import{I as o}from"./Icon-DLLBeLG5.js";import{c as a,m as r}from"./define-rGsaWsLL.js";var t=[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]],e=m=>a(o,r(m,{name:"ChevronRight",iconNode:t})),h=e;export{h as c};

package/dist/elements/chunks/circle-BKAZdmzb.js

@@ -1 +0,0 @@
-import{I as c}from"./Icon-DLLBeLG5.js";import{c as m,m as o}from"./define-rGsaWsLL.js";var a=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}]],e=r=>m(c,o(r,{name:"Circle",iconNode:a})),i=e;export{i as c};

package/dist/elements/chunks/circle-check-CmYG-y3I.js

@@ -1 +0,0 @@
-import{I as c}from"./Icon-DLLBeLG5.js";import{c as r,m as a}from"./define-rGsaWsLL.js";var e=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"m9 12 2 2 4-4",key:"dzmm74"}]],o=m=>r(c,a(m,{name:"CircleCheck",iconNode:e})),i=o;export{i as c};