@kitn.ai/ui 0.26.0 → 0.27.0

package/src/components/reasoning.tsx

@@ -3,6 +3,7 @@ import { cn } from '../utils/cn';
 import { ChevronDown } from 'lucide-solid';
 import { Markdown } from './markdown';
 import { observeContentHeight } from '../primitives/use-resize-observer';
+import { TextShimmer } from './text-shimmer';
 
 interface ReasoningContextValue {
   isOpen: () => boolean;
@@ -18,6 +19,11 @@ interface ReasoningContextValue {
   /** The registered trigger. Deliberately a plain getter over a mutable
    *  variable, NOT a signal — registration must not re-run the content effect. */
   trigger: () => HTMLElement | undefined;
+  /** Whether the reasoning is currently streaming — read by `ReasoningTrigger`
+   *  to decide how its own label renders (shimmer while streaming, plain
+   *  neutral text once settled). Kit-decides-HOW: every consumer gets the same
+   *  "Thinking…" shimmer behavior for free, with no prop of their own. */
+  isStreaming: () => boolean;
 }
 
 /** Imperative open controller, handed to a parent (the kai-reasoning facade) via
@@ -49,10 +55,16 @@ export interface ReasoningProps {
   disabled?: boolean;
   /** Receive the open controller (open accessor + setOpen) once mounted. */
   controllerRef?: (api: ReasoningController) => void;
+  /** Keep auto-opening while streaming and auto-closing when it settles (the
+   *  pre-Task-19f `full` behavior). Default false: the panel starts per
+   *  `defaultOpen` and stays exactly where the user leaves it — streaming only
+   *  changes the trigger's label (shimmer), never the open state, matching the
+   *  "closed chip, expand on click" default (owner ruling, 2026-08-26). */
+  openOnStream?: boolean;
 }
 
 function Reasoning(props: ReasoningProps) {
-  const [local] = splitProps(props, ['children', 'class', 'open', 'defaultOpen', 'onOpenChange', 'isStreaming', 'disabled', 'controllerRef']);
+  const [local] = splitProps(props, ['children', 'class', 'open', 'defaultOpen', 'onOpenChange', 'isStreaming', 'disabled', 'controllerRef', 'openOnStream']);
   const [internalOpen, setInternalOpen] = createSignal(local.defaultOpen ?? false);
   const [wasAutoOpened, setWasAutoOpened] = createSignal(false);
 
@@ -72,6 +84,7 @@ function Reasoning(props: ReasoningProps) {
   };
 
   createEffect(() => {
+    if (!local.openOnStream) return;
     const streaming = local.isStreaming;
     if (streaming && !wasAutoOpened()) {
       if (!isControlled()) setInternalOpen(true);
@@ -104,6 +117,7 @@ function Reasoning(props: ReasoningProps) {
         contentId,
         registerTrigger: (el) => { triggerEl = el; },
         trigger: () => triggerEl,
+        isStreaming: () => !!local.isStreaming,
       }}
     >
       <div class={local.class}>{local.children}</div>
@@ -122,7 +136,7 @@ function ReasoningTrigger(props: ReasoningTriggerProps) {
   // to register as the panel's focus-return target, and a spread `ref` would
   // silently replace it. The consumer's ref is forwarded below instead.
   const [local, rest] = splitProps(props, ['children', 'class', 'ref']);
-  const { isOpen, onOpenChange, disabled, contentId, registerTrigger } = useReasoningContext();
+  const { isOpen, onOpenChange, disabled, contentId, registerTrigger, isStreaming } = useReasoningContext();
 
   return (
     // The same disclosure contract as CollapsibleTrigger: an explicit
@@ -149,7 +163,20 @@ function ReasoningTrigger(props: ReasoningTriggerProps) {
       onClick={() => { if (!disabled()) onOpenChange(!isOpen()); }}
       {...rest}
     >
-      <span class="text-primary">{local.children}</span>
+      {/* Content/chrome, not a control: was `text-primary`, the BRAND token, so
+          a consumer's branded --kai-color-primary bled onto the "Thinking"
+          label. `text-foreground` matches the sibling `<Tool>` disclosure
+          trigger's label (rendered via `Button variant="ghost"`, itself
+          `text-foreground`) — the established neutral for a disclosure
+          trigger's own label text in this codebase.
+          Kit-decides-HOW: while streaming, the label renders with the kit's
+          own `TextShimmer` (the common "Thinking…" shimmer, already used by
+          `Loader`'s `text-shimmer` variant) instead of static text; once
+          settled it's the plain neutral span above. Every consumer gets this
+          for free — no prop of their own. */}
+      <Show when={isStreaming()} fallback={<span class="text-foreground">{local.children}</span>}>
+        <TextShimmer class="font-medium">{local.children}</TextShimmer>
+      </Show>
       <div
         class={cn(
           'transform transition-transform',

package/src/components/response-compare.tsx

@@ -365,7 +365,7 @@ function CompareColumn(props: ColumnProps): JSX.Element {
   return (
     <div
       class={cn(
-        'flex min-w-0 flex-col gap-3 rounded-lg border border-input bg-background/40 p-3',
+        'flex min-w-0 flex-col gap-3 rounded-lg border border-border bg-background/40 p-3',
         props.hiddenClass?.(),
       )}
     >
@@ -432,7 +432,7 @@ function CollapsedWinner(props: {
 }): JSX.Element {
   return (
     <div
-      class="flex flex-col gap-2 rounded-lg border border-input bg-accent/40 p-3"
+      class="flex flex-col gap-2 rounded-lg border border-border bg-accent/40 p-3"
       role={props.optimistic ? 'status' : undefined}
     >
       <div class="flex items-center gap-2 text-sm font-medium text-accent-foreground">

package/src/components/scroll-button.tsx

@@ -1,22 +1,62 @@
+import { Show } from 'solid-js';
 import { cn } from '../utils/cn';
 import { Button } from '../ui/button';
 import { useChatContainer } from './chat-container';
-import { ChevronDown } from 'lucide-solid';
+import { ArrowDown } from 'lucide-solid';
+
+/** The accessible name used when the consumer does not supply one. */
+const DEFAULT_LABEL = 'Scroll to bottom';
 
 export interface ScrollButtonProps {
   class?: string;
   variant?: 'outline' | 'ghost' | 'default';
   size?: 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
+  /**
+   * The button's accessible name. Used whether or not the label is visible, so
+   * the announced text is always localisable. Defaults to `"Scroll to bottom"`.
+   */
+  label?: string;
+  /**
+   * Also render `label` visibly beside the icon. Defaults to `false` (icon
+   * only). When it is visible the text IS the accessible name, so nothing is
+   * announced twice.
+   */
+  showLabel?: boolean;
+}
+
+/**
+ * The floating chip surface.
+ *
+ * The shared `outline` button variant is `bg-muted/50` — half-transparent, so
+ * message text showed through a control that floats over scrolling content, and
+ * its edge measured 1.05:1 against the thread behind it (SC 1.4.11 wants 3:1).
+ * `bg-card` is the same opaque surface popovers, dropdowns and hover cards sit
+ * on; `border-input` is the kit's control edge and clears 3:1 in both themes;
+ * `kai-elevation` is the shared, themeable float shadow (`--kai-shadow-color`),
+ * which is what keeps an opaque button reading as ABOVE the content.
+ *
+ * `ghost` and `default` are explicit consumer choices about the fill, so they
+ * keep theirs; every variant gets the elevation and the rounded-square radius.
+ */
+function surfaceClasses(variant: ScrollButtonProps['variant']) {
+  return (variant ?? 'outline') === 'outline'
+    ? 'border border-input bg-card text-card-foreground kai-elevation'
+    : 'kai-elevation';
 }
 
 function ScrollButton(props: ScrollButtonProps) {
   const { isAtBottom, scrollToBottom } = useChatContainer();
+  const label = () => props.label ?? DEFAULT_LABEL;
+  const showLabel = () => props.showLabel === true;
 
   return (
     <Button
       variant={props.variant ?? 'outline'}
       size={props.size ?? 'sm'}
-      aria-label="Scroll to bottom"
+      // When the label is visible it IS the accessible name. An aria-label on
+      // top of it would override the visible text and leave the two able to
+      // disagree, so it is only set for the icon-only case.
+      aria-label={showLabel() ? undefined : label()}
       // At the bottom of the thread this button is fully transparent and
       // pointer-inert, but it stayed in the tab order — a keyboard user landed
       // on a control they could not see, with a focus ring painted on nothing.
@@ -25,7 +65,10 @@ function ScrollButton(props: ScrollButtonProps) {
       tabindex={isAtBottom() ? -1 : 0}
       aria-hidden={isAtBottom() ? 'true' : undefined}
       class={cn(
-        'h-10 w-10 rounded-full transition-all duration-150 ease-out',
+        'rounded-lg transition-all duration-150 ease-out',
+        surfaceClasses(props.variant),
+        // Square while icon-only; a pill-ish labelled button once the text is in.
+        showLabel() ? 'h-10 w-auto gap-1.5 px-3.5 text-sm' : 'h-10 w-10 px-0',
         !isAtBottom()
           ? 'translate-y-0 scale-100 opacity-100'
           : 'pointer-events-none translate-y-4 scale-95 opacity-0',
@@ -33,7 +76,16 @@ function ScrollButton(props: ScrollButtonProps) {
       )}
       onClick={() => scrollToBottom()}
     >
-      <ChevronDown class="h-5 w-5" />
+      {/* h-4, not the h-5 the chevron used. A ChevronDown only inks the lower
+          part of its 24px viewBox, so at a 20px box its visible mass is small;
+          ArrowDown inks the full height (stem + head), and at 20px inside a 40px
+          button it read as half the button wide and crowded the padding. 16px
+          balances the icon-only square and is the size lucide pairs with
+          text-sm, which is what the label renders at. */}
+      <ArrowDown class="h-4 w-4 shrink-0" aria-hidden="true" />
+      <Show when={showLabel()}>
+        <span>{label()}</span>
+      </Show>
     </Button>
   );
 }

package/src/components/source.tsx

@@ -152,7 +152,12 @@ function SourceContent(props: SourceContentProps) {
               width={16}
               height={16}
             />
-            <div class="text-primary truncate text-sm">
+            {/* Citation title/domain is CONTENT, not a control — was the BRAND
+                token. `text-foreground/80` matches how `SourceTrigger` above
+                already renders this same domain text (inherited from its `<a
+                class="... text-foreground/80 ...">`), so the hover-card header
+                and the trigger chip agree on the same domain's color. */}
+            <div class="text-foreground/80 truncate text-sm">
               {ctx.domain.replace('www.', '')}
             </div>
           </div>

package/src/components/tasks-card.tsx

@@ -14,6 +14,7 @@ import {
 } from 'solid-js';
 import { cn } from '../utils/cn';
 import { Button } from '../ui/button';
+import { Checkbox } from '../ui/checkbox';
 import { ProgressBar } from '../ui/progress-bar';
 import { Card } from './card';
 import { DismissedStub } from './dismissed-stub';
@@ -21,7 +22,7 @@ import type { CardEnvelope, CardEvent, CardHost, CardResolution } from '../primi
 import { useCardResolution } from './use-card-resolution';
 import { emitCardEvent } from '../primitives/card-routing';
 import { useCardHost } from '../primitives/card-host';
-import { Check, Circle, CircleCheck, X } from 'lucide-solid';
+import { Check, Circle, CircleCheck } from 'lucide-solid';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types (tasks.schema.json) — AUTHORED IN ../primitives/card-data-types.ts.
@@ -415,14 +416,23 @@ export function TasksCard(props: TasksCardProps): JSX.Element {
             progress() || res.isResolved() || readOnly() ? undefined : (
               <div class="flex w-full flex-wrap items-center justify-between gap-2">
                 <Show when={local.data?.dismissible === true}>
+                  {/* The contract `dismiss` verb — a footer ACTION (it emits
+                      `{kind:'dismiss'}` and collapses the card to a re-openable
+                      stub), not the chrome close in `Card`'s own `dismissible`
+                      prop, which the contract cards deliberately never set.
+                      Labelled rather than a bare ghost ✕: every other control in
+                      this row says what it does, and an unlabelled 28px glyph
+                      300px from the primary button reads as stray chrome. Same
+                      shape in all four cards — `form` already looked like this.
+                      `aria-label` is kept (redundant with the text) so the
+                      element tests that select on it keep working. */}
                   <Button
                     type="button"
                     variant="ghost"
-                    size="icon-sm"
                     aria-label="Dismiss"
                     onClick={onDismiss}
                   >
-                    <X size={16} aria-hidden="true" />
+                    Dismiss
                   </Button>
                 </Show>
                 <span id={countId} aria-live="polite" class="text-xs text-muted-foreground">
@@ -485,7 +495,7 @@ export function TasksCard(props: TasksCardProps): JSX.Element {
                 if (confirmEnabled()) onConfirm();
               }}
             >
-              <div class="divide-y divide-border overflow-hidden rounded-lg border border-input">
+              <div class="divide-y divide-border overflow-hidden rounded-lg border border-border">
                 <Show when={showMaster()}>
                   {(() => {
                     const indeterminate = () => masterState() === 'indeterminate';
@@ -501,17 +511,20 @@ export function TasksCard(props: TasksCardProps): JSX.Element {
                               : 'text-foreground hover:bg-muted/50',
                         )}
                       >
-                        <input
-                          type="checkbox"
-                          class="kai-checkbox"
+                        {/* SQUARE `Checkbox` (the `.kai-checkbox` look), and the checklist below draws a
+                            ROUND lucide Circle/CircleCheck instead. Deliberate, not drift: this
+                            is `select` mode — a pick-list whose rows are a pending selection that
+                            only commits when the confirm button fires, which is what a checkbox
+                            means everywhere else. `progress` mode has no confirm and toggling a
+                            row IS the action, so it uses the done/not-done affordance of a todo
+                            list. See the D-2 row in
+                            docs/superpowers/plans/2026-08-25-form-control-primitives.md; owner has
+                            not ruled, so do not converge these on your own. */}
+                        <Checkbox
                           checked={masterState() === 'checked'}
                           disabled={groupDisabled() || readOnly()}
+                          indeterminate={indeterminate()}
                           aria-checked={indeterminate() ? 'mixed' : masterState() === 'checked'}
-                          ref={(el) => {
-                            createEffect(() => {
-                              el.indeterminate = indeterminate();
-                            });
-                          }}
                           onChange={(e) => toggleAll(e.currentTarget.checked)}
                         />
                         <span>Select all</span>
@@ -541,9 +554,8 @@ export function TasksCard(props: TasksCardProps): JSX.Element {
                         )}
                         data-task-id={task.id}
                       >
-                        <input
-                          type="checkbox"
-                          class="kai-checkbox mt-0.5"
+                        <Checkbox
+                          class="mt-0.5"
                           checked={checked()}
                           disabled={blocked() || readOnly()}
                           aria-disabled={blocked() ? 'true' : undefined}
@@ -603,7 +615,10 @@ function ProgressChecklist(props: {
     <div class={cn('flex flex-col gap-3', props.groupClass)}>
       <Show when={props.heading}>
         <div class="flex items-center justify-between gap-3">
-          <span id={props.headingId} class="text-sm font-medium text-foreground">
+          <span
+            id={props.headingId}
+            class="text-title font-semibold tracking-tight text-foreground"
+          >
             {props.heading}
           </span>
           <span
@@ -646,8 +661,23 @@ function ProgressChecklist(props: {
                     // row doesn't leave a noisy persistent outline — and it makes a
                     // Tab-focused completed row's open description perceivable. Dropped
                     // entirely when readonly (the row isn't focusable then).
+                    //
+                    // TWO tab stops exist per row and the ring has to cover both.
+                    // `focus-visible:` matches only when the LABEL itself is focused,
+                    // which is completed rows only (the `tabindex` below). Every row's
+                    // other — and for an incomplete row, only — tab stop is the sr-only
+                    // checkbox inside, so without `has-[:focus-visible]:` tabbing to an
+                    // unchecked row put focus on an off-screen input with no indicator
+                    // anywhere on screen. Both halves stay on the focus-VISIBLE axis on
+                    // purpose: `focus-within:` would also fire for a mouse click (which
+                    // forwards focus from the label to the checkbox), which is exactly
+                    // the persistent-outline noise the paragraph above rejects. The
+                    // description reveal below uses `group-focus-within:` because a
+                    // hover-or-focus reveal wants the looser condition.
                     !props.readonly &&
                       'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
+                    !props.readonly &&
+                      'has-[:focus-visible]:outline-none has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-inset has-[:focus-visible]:ring-ring',
                     props.readonly
                       ? 'cursor-default'
                       : blocked()
@@ -680,6 +710,18 @@ function ProgressChecklist(props: {
                     )}
                     aria-hidden="true"
                   >
+                    {/* ROUND, where `select` mode uses the square `Checkbox`. Deliberate:
+                        this mode has no confirm button, so ticking a row IS the action and the
+                        row is done-or-not rather than selected-or-not — the todo-list
+                        affordance, which is how this mode has been described since it landed
+                        (see the `mode` argType in tasks-card.stories.tsx and the JSDoc on
+                        src/elements/tasks.tsx). D-2 in
+                        docs/superpowers/plans/2026-08-25-form-control-primitives.md tracks
+                        whether to keep the split; unruled, so leave both. NOTE the cost: the
+                        icon replaces the visible native control, which is why the real input
+                        above is `sr-only` and why the row's focus ring has to be driven by
+                        `has-[:focus-visible]:`. Converging on `Checkbox` would take that
+                        hazard away with it. */}
                     <Show
                       when={checked()}
                       fallback={<Circle size={18} />}

package/src/components/thread.tsx

@@ -34,6 +34,11 @@ export interface ThreadProps {
    *  the kit checks its own seven built-ins and leaves your own card type
    *  unvalidated. A schema here WINS over a built-in of the same name. */
   cardSchemas?: CardSchemaMap;
+  /** The custom-element host node to emit card events off when no `CardProvider`
+   *  is present, forwarded through `MessageBody` to `CardRenderer`. The
+   *  element facades pass their own host element so card events leave as the
+   *  bubbling `kai-card` CustomEvent. */
+  cardHostElement?: HTMLElement;
   /** Show a typing indicator on the pending assistant turn — use while awaiting
    *  the assistant's reply. */
   loading?: boolean;
@@ -146,6 +151,7 @@ export function Thread(props: ThreadProps) {
                         parts={m().parts}
                         cardTypes={props.cardTypes}
                         cardSchemas={props.cardSchemas}
+                        cardHostElement={props.cardHostElement}
                         isUser={m().role === 'user'}
                         markdown={m().role === 'assistant'}
                         actions={m().actions}
@@ -209,7 +215,10 @@ export function Thread(props: ThreadProps) {
           </ChatContainerContent>
           <Show when={showScrollButton()}>
             <div class="absolute bottom-4 left-1/2 flex w-full max-w-3xl -translate-x-1/2 justify-center px-5">
-              <ScrollButton class="shadow-sm" />
+              {/* The button now owns its elevation (kai-elevation); a `shadow-sm`
+                  here would set box-shadow a second time and the winner would
+                  be stylesheet order, not this call site. */}
+              <ScrollButton />
             </div>
           </Show>
         </ChatContainer>

package/src/components/toast.tsx

@@ -320,7 +320,7 @@ function anchorStyle(position: ToastPosition, r: TargetRect): Record<string, str
   }
 }
 
-/** The overlay layer both region roots sit on (F-20). One token, one default:
+/** The overlay layer both region roots sit on. One token, one default:
  *  your app chrome must stay below the toast layer; set `--kai-toast-z`
  *  (default 100) on the host to move the layer. */
 const TOAST_Z = 'var(--kai-toast-z, 100)';

package/src/components/tool-types.ts

@@ -25,6 +25,15 @@ export interface ToolPart {
   type: string;
   /** Semantic classification for rendering. Derive with classifyTool(type). */
   kind?: ToolKind;
+  /** The call's lifecycle. A provider stream (real or `createMockResponder`)
+   *  only ever ANNOUNCES a call: arguments stream in (`input-streaming`), then
+   *  the part parks at `input-available` — and stays there. The kit parses and
+   *  renders the call; EXECUTING it and answering is the host's side of the
+   *  seam: after the read settles, run the tool and patch the part forward with
+   *  `stream.upsertTool(id, { state: 'output-available', output })` (or
+   *  `upsertToolPart`), or `output-error` + `errorText` on failure. The one
+   *  exception is a call the provider ran itself (`raw` carries the result and
+   *  the wire sets `output` directly) — never re-execute those. */
   state: 'input-streaming' | 'input-available' | 'output-available' | 'output-error';
   /** Last VALID parsed snapshot, fingerprint-deduped. The primary channel: this is
    *  what the kit renders. */

package/src/elements/attachments.tsx

@@ -19,7 +19,9 @@ import {
 interface Props extends Record<string, unknown> {
   /** The attachments to render. Omit (or pass an empty array) for the empty
    *  state, which shows `emptyText` if set and nothing otherwise. Set as a JS
-   *  property (array). */
+   *  property (array). Each item's `url` must be a `data:` URI or an https
+   *  URL, never `URL.createObjectURL`: a `blob:` URL previews here but the
+   *  wire encoders (`toOpenAIMessages`/`toAnthropicMessages`) refuse it. */
   items?: AttachmentData[];
   /** Layout: `grid` = visual tiles, `inline` = icon + label chips, `list` = rows. */
   variant?: AttachmentVariant;

package/src/elements/chat-workspace.tsx

@@ -75,7 +75,7 @@ interface Events {
  * (480px). Read once at upgrade. Parts: `header` · `start` · `main` · `end` ·
  * `footer` (the asides also match `::part(aside)`).
  *
- * **BREAKING (the 0.24 re-cast, spec 2026-08-20):** this element was a chat
+ * **BREAKING (0.24):** this element was a chat
  * preset; it is now a layout shell, and everything chat-shaped is gone from its
  * surface. Where each removed prop went:
  *

package/src/elements/chat.tsx

@@ -14,8 +14,20 @@ import type { ModelOption } from '../types';
 
 type Props = Omit<ChatThreadProps,
   'class' | 'onValueChange' | 'onSubmit' | 'onAttachmentsChange' | 'onSuggestionClick' | 'onModelChange'
-  | 'onMessageAction' | 'onWebSearch' | 'onVoice' | 'controllerRef' | 'cardTypes' | 'cardSchemas' | 'messages'
-  | 'accept' | 'onAttachmentsRejected'> & Record<string, unknown> & {
+  | 'onMessageAction' | 'onWebSearch' | 'onVoice' | 'controllerRef' | 'cardTypes' | 'cardSchemas' | 'cardHostElement' | 'messages'
+  | 'accept' | 'onAttachmentsRejected'
+  // `headerEndContent`/`emptyContent` are JSX.Element escape hatches for a caller
+  // composing `ChatThread` directly as a Solid component (see their doc comments in
+  // chat-thread.tsx — the construct-engine's emitted App is the motivating case).
+  // `<kai-chat>` is the OPPOSITE shape: a custom element crossing the shadow-DOM
+  // boundary, where a `JSX.Element` value cannot exist for a consumer to construct
+  // (React/Vue/plain HTML have no such type) and the facade already has its own
+  // working mechanism for both regions — `slot="header-end"` and `slot="empty"`.
+  // Omitted here rather than left to flow through `Omit`'s default pass-through:
+  // without this, `gen-element-api.mjs` picked them up and put a JSX.Element type
+  // (which it stringifies as Solid's internal array-like union — meaningless to a
+  // web-component consumer) into `<kai-chat>`'s public prop surface and docs.
+  | 'headerEndContent' | 'emptyContent'> & Record<string, unknown> & {
     /** Which attachment media types the user may stage, in HTML `accept` syntax:
      *  `<kai-chat accept="image/*,application/pdf">`. A plain string, so unlike
      *  `messages` it DOES work as an attribute. Omitted means no filter.
@@ -97,8 +109,9 @@ defineWebComponent<Props, Events>('kai-chat', {
   suggestions: undefined, suggestionMode: 'submit', persistSuggestions: false, proseSize: 'sm',
   codeTheme: 'github-dark-dimmed', codeHighlight: true, chatTitle: undefined,
   models: undefined, currentModel: undefined, context: undefined, scrollButton: true,
-  webSearch: false, voice: false, triggers: undefined, kindIcons: undefined,
+  attach: true, webSearch: false, voice: false, triggers: undefined, kindIcons: undefined,
   actionsReveal: 'always', cardTypes: undefined, cardSchemas: undefined, accept: undefined,
+  reasoning: undefined, reasoningOpen: undefined,
 }, (props, { dispatch, flag, reflectFlag, element, expose }) => {
   // `messages` is an untyped boundary: a consumer can hand it anything at
   // runtime (a pre-0.20.0 `{ id, role, content }` array, in particular). Skip
@@ -164,12 +177,17 @@ defineWebComponent<Props, Events>('kai-chat', {
     codeTheme={props.codeTheme as string} codeHighlight={flag('codeHighlight')}
     chatTitle={props.chatTitle as string | undefined} models={props.models as ModelOption[] | undefined}
     currentModel={props.currentModel as string | undefined} context={props.context as ChatThreadContextUsage | undefined}
-    scrollButton={props.scrollButton !== false} webSearch={flag('webSearch')} voice={flag('voice')}
+    scrollButton={props.scrollButton !== false} attach={flag('attach')} webSearch={flag('webSearch')} voice={flag('voice')}
+    reasoning={props.reasoning as 'full' | 'compact' | 'off' | undefined}
+    reasoningOpen={flag('reasoningOpen')}
     triggers={props.triggers as TriggerDef[] | undefined}
     kindIcons={props.kindIcons as Record<string, string> | undefined}
     actionsReveal={props.actionsReveal as 'always' | 'hover'}
     cardTypes={cardComponentsFromTags(props.cardTypes as Record<string, string> | undefined, (props as { theme?: string }).theme)}
     cardSchemas={props.cardSchemas as Record<string, object> | undefined}
+    /* F-26: card parts emit off THIS element as the bubbling `kai-card` event,
+       so `listenForCardEvents(el)` / addEventListener('kai-card') work. */
+    cardHostElement={element}
     onValueChange={(value) => dispatch('kai-value-change', { value })}
     onSubmit={(detail) => dispatch('kai-submit', detail)}
     accept={props.accept as string | undefined}