@kitn.ai/ui 0.17.0 → 0.18.0

package/src/elements/status.tsx

@@ -0,0 +1,42 @@
+import { defineWebComponent } from './define';
+import { Status, type StatusKind } from '../ui/status';
+
+interface Props extends Record<string, unknown> {
+  /** Presence/notification state → color. `new` (default) maps to the blue hue. */
+  status?: StatusKind;
+  /** Animated ping ring (off by default; respects prefers-reduced-motion). */
+  pulse?: boolean;
+  /** Accessible name. Without it the dot is decorative. */
+  label?: string;
+  /** `sm` (default) or `md`. */
+  size?: 'sm' | 'md';
+}
+
+/**
+ * `<kai-status>` — a small presence / new dot.
+ *
+ * ```html
+ * <kai-status status="online" label="Online"></kai-status>
+ * <kai-status status="new" pulse></kai-status>
+ * ```
+ * Recolor via `::part(dot)`.
+ */
+defineWebComponent<Props>('kai-status', {
+  status: 'new',
+  pulse: false,
+  label: undefined,
+  size: 'sm',
+}, (props, { flag }) => (
+  <>
+    {/* Base sets `:host{display:block}`; a presence dot sits inline beside an
+        avatar/label, so inline-flex like kai-button. */}
+    <style>{':host{display:inline-flex}'}</style>
+    <Status
+      status={(props.status as StatusKind) ?? 'new'}
+      size={(props.size as 'sm' | 'md') ?? 'sm'}
+      pulse={flag('pulse')}
+      label={props.label as string | undefined}
+      part="dot"
+    />
+  </>
+));

package/src/elements/switch.tsx

@@ -1,13 +1,23 @@
+import { createEffect, createSignal, untrack } from 'solid-js';
 import { defineWebComponent } from './define';
 import { Switch } from '../ui/switch';
 
 interface Props extends Record<string, unknown> {
-  /** Initial checked state. Bare attribute (`<kai-switch checked>`) turns it on. */
+  /** Controlled checked state — settable and reflected to the `checked`
+   *  attribute. `el.checked = true` (or `<kai-switch checked>`) drives it; the
+   *  toggle UI updates it and fires `kai-change`. Read `el.checked` for live state. */
   checked?: boolean;
+  /** Initial checked state on mount (uncontrolled seed). Bare attribute
+   *  (`<kai-switch default-checked>`) turns it on. */
+  defaultChecked?: boolean;
   /** Disable interaction. */
   disabled?: boolean;
   /** Accessible label. */
   label?: string;
+  /** Form-control name (paired with `value`). */
+  name?: string;
+  /** Submitted value when checked (paired with `name`). Defaults to `'on'`. */
+  value?: string;
 }
 
 /** Events fired by `<kai-switch>`. */
@@ -17,27 +27,92 @@ interface Events {
 }
 
 /**
- * `<kai-switch>` — a toggle switch. Self-manages its on/off state; set the initial
- * state with the `checked` attribute and read changes from `kai-change`.
+ * `<kai-switch>` — a toggle switch. Drive/read its state with the `checked`
+ * property (settable + reflected to the `checked` attribute, so `:host([checked])`
+ * and `el.checked` see live state); seed the initial state with `default-checked`
+ * and read changes from `kai-change`.
  *
  * ```html
- * <kai-switch checked label="Temporary chat"></kai-switch>
+ * <kai-switch default-checked label="Temporary chat"></kai-switch>
  * <script type="module">
  *   import '@kitn.ai/ui/elements';
- *   document.querySelector('kai-switch')
- *     .addEventListener('kai-change', (e) => console.log(e.detail.checked));
+ *   const sw = document.querySelector('kai-switch');
+ *   sw.addEventListener('kai-change', (e) => console.log(e.detail.checked));
+ *   sw.checked = false;   // drive it (no kai-change — the host already knows)
+ *   sw.toggle();          // flip it (fires kai-change)
  * </script>
  * ```
  */
 defineWebComponent<Props, Events>('kai-switch', {
   checked: undefined,
+  defaultChecked: undefined,
   disabled: undefined,
   label: undefined,
-}, (props, { dispatch, flag }) => (
-  <Switch
-    defaultChecked={flag('checked')}
-    disabled={flag('disabled')}
-    label={props.label as string | undefined}
-    onChange={(checked) => dispatch('kai-change', { checked })}
-  />
-));
+  name: undefined,
+  value: undefined,
+}, (props, ctx) => {
+  const { element, dispatch, flag, expose } = ctx;
+
+  // Lift the on/off state into the facade and drive the Switch CONTROLLED so the
+  // host can read it (`el.checked` / `:host([checked])`) and set it after mount.
+  // Seed from `defaultChecked` (or a bare `checked` attribute present on mount).
+  const [checked, setChecked] = createSignal(flag('defaultChecked') || flag('checked'));
+
+  // Coerce any value coming through the `checked` setter (a JS assignment, or the
+  // write-back from `attributeChangedCallback` when the attribute changes) to a
+  // boolean — falling back to attribute presence, matching `flag`'s semantics. An
+  // `undefined` write-back (which `toggleAttribute` triggers) thus resolves to the
+  // attribute we just wrote, so it equals the signal and the equality guard below
+  // absorbs it — no attr⇄prop feedback loop (the pattern hover-card uses for `open`).
+  const coerce = (v: unknown): boolean =>
+    v === true ? true
+      : v === false ? false
+        : element.hasAttribute('checked') && element.getAttribute('checked') !== 'false';
+
+  // Apply a new checked state and fire kai-change once (the toggle UI / `toggle()`
+  // path). No-op while disabled.
+  const apply = (next: boolean) => {
+    if (flag('disabled')) return;
+    if (untrack(checked) === next) return;
+    setChecked(next);
+    dispatch('kai-change', { checked: next });
+  };
+
+  // Override the `checked` property so reads return LIVE state (the signal) and
+  // host writes (`el.checked = …`) drive it WITHOUT firing kai-change — distinct
+  // from the user-toggle path. The equality guard kills the reflect write-back loop.
+  Object.defineProperty(element, 'checked', {
+    get: () => checked(),
+    set: (v: unknown) => { const next = coerce(v); if (untrack(checked) !== next) setChecked(next); },
+    configurable: true,
+    enumerable: true,
+  });
+
+  // Reflect internal checked → the `[checked]` host attribute (for `:host([checked])`).
+  // The equality guard against the live attribute keeps the write-back the toggle
+  // triggers (attributeChangedCallback → setter) from looping (mirrors
+  // wireDisclosure's reflect structure).
+  createEffect(() => {
+    const c = checked();
+    if (c !== element.hasAttribute('checked')) element.toggleAttribute('checked', c);
+  });
+
+  expose({
+    /** Flip the switch and fire `kai-change` (no-op while disabled). */
+    toggle: () => apply(!untrack(checked)),
+    /** Focus the inner `role="switch"` button (the host element can't reach it). */
+    focus: (options?: FocusOptions) =>
+      element.shadowRoot?.querySelector<HTMLButtonElement>('button[role="switch"]')?.focus(options),
+  });
+
+  return (
+    <Switch
+      checked={checked()}
+      disabled={flag('disabled')}
+      label={props.label as string | undefined}
+      name={props.name as string | undefined}
+      value={props.value as string | undefined}
+      onChange={(next) => apply(next)}
+    />
+  );
+});

package/src/elements/tabs.tsx

@@ -0,0 +1,95 @@
+import { createSignal } from 'solid-js';
+import { defineWebComponent } from './define';
+import { Tabs, type KaiTabItem, type TabsVariant } from '../ui/tabs';
+
+interface Props extends Record<string, unknown> {
+  /** Tabs to render. Set as a JS property, not an HTML attribute. */
+  items?: KaiTabItem[];
+  /** Controlled selected id. Set as a JS property (or the `value` attribute);
+   *  drive it from your app in response to `kai-tab-change`. Omit for uncontrolled. */
+  value?: string;
+  /** Initial selected id when uncontrolled (use the `default-value` attribute in plain HTML). */
+  defaultValue?: string;
+  /** `segmented` (default, a pill group) or `underline` (an underlined row). */
+  variant?: TabsVariant;
+  /** Stretch the strip to full width, each tab sharing the space equally. */
+  block?: boolean;
+  /** Disable the whole strip. */
+  disabled?: boolean;
+}
+
+interface Events {
+  /** A tab was selected (click, Enter/Space, or arrow-key move). `value` is the item's id. */
+  'kai-tab-change': { value: string };
+}
+
+/**
+ * `<kai-tabs>`, an accessible tab strip. Selection only: it emits the chosen id;
+ * you render what each tab shows (this is not a content router).
+ *
+ * Set the `items` property in JavaScript (array, not attribute):
+ *
+ * ```html
+ * <kai-tabs default-value="chat"></kai-tabs>
+ * <script type="module">
+ *   import '@kitn.ai/ui/elements';
+ *   const tabs = document.querySelector('kai-tabs');
+ *   tabs.items = [
+ *     { id: 'chat', label: 'Chat', icon: 'message-circle' },
+ *     { id: 'cowork', label: 'Cowork' },
+ *     { id: 'code', label: 'Code', icon: 'code' },
+ *   ];
+ *   tabs.addEventListener('kai-tab-change', (e) => console.log(e.detail.value));
+ * </script>
+ * ```
+ *
+ * Each tab carries a stable `id`, so you can wire `aria-controls` on the tab and
+ * `aria-labelledby` on your own panel. Style the active tab via `::part(tab)[data-active]`.
+ */
+defineWebComponent<Props, Events>('kai-tabs', {
+  items: undefined,
+  value: undefined,
+  defaultValue: undefined,
+  variant: 'segmented',
+  block: undefined,
+  disabled: undefined,
+}, (props, { dispatch, flag, expose }) => {
+  // Controlled/uncontrolled selection: `value` (when set) wins; otherwise the
+  // element manages its own, seeded from `defaultValue`. `setValueTo` always
+  // writes the internal value (a no-op visually while controlled) and emits
+  // `kai-tab-change` so a controlling app can update its own state.
+  const [internal, setInternal] = createSignal(props.defaultValue as string | undefined);
+  const value = () => (props.value as string | undefined) ?? internal();
+  const setValueTo = (next: string) => {
+    setInternal(next);
+    dispatch('kai-tab-change', { value: next });
+  };
+
+  let listRef: HTMLDivElement | undefined;
+  expose({
+    /** Select a tab by id (fires `kai-tab-change`). Ignores unknown/disabled ids. */
+    select: (id: string) => {
+      const item = (props.items as KaiTabItem[] | undefined)?.find((it) => it.id === id);
+      if (!item || item.disabled || flag('disabled')) return;
+      setValueTo(id);
+    },
+    /** Focus the active tab (or the first focusable tab). */
+    focus: () => {
+      listRef
+        ?.querySelector<HTMLButtonElement>('[role="tab"][tabindex="0"]:not([disabled])')
+        ?.focus();
+    },
+  });
+
+  return (
+    <Tabs
+      items={props.items as KaiTabItem[] | undefined}
+      value={value()}
+      variant={(props.variant as TabsVariant) ?? 'segmented'}
+      block={flag('block')}
+      disabled={flag('disabled')}
+      onChange={setValueTo}
+      ref={(el) => (listRef = el)}
+    />
+  );
+});

package/src/elements/tasks.tsx

@@ -1,5 +1,5 @@
 import { defineWebComponent } from './define';
-import { TasksCard, type TasksCardData } from '../components/tasks-card';
+import { TasksCard, type TasksCardController, type TasksCardData } from '../components/tasks-card';
 import type { CardResolution } from '../primitives/card-contract';
 
 interface Props extends Record<string, unknown> {
@@ -14,6 +14,23 @@ interface Props extends Record<string, unknown> {
   /** Set when the user resolved this card; renders the read-only view. Property:
    *  `el.resolution = { kind:'submit', data:{ selected:[…] } }`. */
   resolution?: Record<string, unknown>;
+  /** Controlled selection (task ids; JS property). When set, it wins over local state. */
+  value?: string[];
+  /** Uncontrolled initial selection (task ids; JS property), overlaying per-task `checked`. */
+  defaultValue?: string[];
+  /** Freeze the whole list + Confirm. Attribute: `disabled`. */
+  disabled?: boolean;
+  /** Display-only: rows can't be toggled and show the default cursor (no pointer,
+   *  hover, or focus affordances). Keeps the look as-is. Attribute: `readonly`. */
+  readonly?: boolean;
+}
+
+/** Events fired by `<kai-tasks>`. (Resolution still flows up the bubbling `kai-card`
+ *  contract event — `kai-value-change` is the live selection signal, distinct from
+ *  the terminal submit.) */
+interface Events {
+  /** The selection changed on a toggle — the selected ids in input order. */
+  'kai-value-change': { value: string[] };
 }
 
 /**
@@ -22,25 +39,64 @@ interface Props extends Record<string, unknown> {
  * UI state; only the final confirm emits the Card contract's **`submit`** verb
  * up a bubbling **`kai-card`** CustomEvent (`{ kind:'submit', cardId,
  * data:{ selected } }`) with the checked ids in input order. Also emits `ready` on
- * mount and `error` for a malformed definition (inline error). v1 = select/approve
- * mode only. Routes through a `CardProvider` when present, else the bubbling
- * `kai-card` event. Isolated in Shadow DOM; theme-aware via the shared kit tokens.
+ * mount and `error` for a malformed definition (inline error). Routes through a
+ * `CardProvider` when present, else the bubbling `kai-card` event. Isolated in
+ * Shadow DOM; theme-aware via the shared kit tokens.
+ *
+ * Two looks, one selection model. Default `mode:'select'` = the approval list above.
+ * `mode:'progress'` = the onboarding-checklist look (e.g. "Get started 0 / 2"): a
+ * header `done / total` count + circular indicators + per-item title/description,
+ * and NO confirm button (checking a row IS the action, so the live
+ * `kai-value-change` is the signal). The `max` gate, `toggle`/`select` methods, and
+ * events all still apply.
  */
-defineWebComponent<Props>(
+defineWebComponent<Props, Events>(
   'kai-tasks',
   {
     data: undefined,
     cardId: undefined,
     heading: undefined,
     resolution: undefined,
+    value: undefined,
+    defaultValue: undefined,
+    disabled: false,
+    readonly: false,
+  },
+  (props, { element, dispatch, flag, expose }) => {
+    // Pattern C: the TasksCard component owns the selection set + confirm gating and
+    // hands up a controller; the facade captures it and exposes delegating methods.
+    let controller: TasksCardController | undefined;
+    expose({
+      /** Set the checked task ids (local-only, no emit), respecting disabled/max.
+       *  With no arg, select all toggleable rows. */
+      select: (taskIds?: string[]) => controller?.select(taskIds),
+      /** Toggle one task by id, honoring the max gate (no `checked` = flip). */
+      toggle: (taskId: string, checked?: boolean) => controller?.toggle(taskId, checked),
+      /** Confirm the current selection — emits the `submit` CardEvent + resolves
+       *  (only when the min/max gate passes). Named `send`, not `submit`. */
+      send: () => controller?.send(),
+      /** Focus the task group (select-all checkbox if shown, else the first row). */
+      focus: (options?: FocusOptions) => controller?.focus(options),
+      /** Trigger the dismiss path (emit `dismiss` + collapse to the re-openable stub). */
+      dismiss: () => controller?.dismiss(),
+      /** Re-open a dismissed card from its stub (emit `reopen`). */
+      reopen: () => controller?.reopen(),
+    });
+
+    return (
+      <TasksCard
+        data={props.data as TasksCardData | undefined}
+        cardId={props.cardId ?? (element.id || 'kai-tasks')}
+        heading={props.heading}
+        resolution={props.resolution as CardResolution | undefined}
+        value={props.value as string[] | undefined}
+        defaultValue={props.defaultValue as string[] | undefined}
+        disabled={flag('disabled')}
+        readonly={flag('readonly')}
+        onValueChange={(payload) => dispatch('kai-value-change', payload)}
+        controllerRef={(c) => (controller = c)}
+        hostElement={element}
+      />
+    );
   },
-  (props, { element }) => (
-    <TasksCard
-      data={props.data as TasksCardData | undefined}
-      cardId={props.cardId ?? (element.id || 'kai-tasks')}
-      heading={props.heading}
-      resolution={props.resolution as CardResolution | undefined}
-      hostElement={element}
-    />
-  ),
 );

package/src/elements/toast.tsx

@@ -1,5 +1,5 @@
 import { defineWebComponent } from './define';
-import { ToastRegion, type ToastDismissReason, type ToastPosition } from '../components/toast';
+import { ToastRegion, type ToastDismissReason, type ToastPosition, type ToastAppearance } from '../components/toast';
 import { toast as toastStore, type ToastItem } from '../primitives/toast-store';
 
 interface Props extends Record<string, unknown> {
@@ -13,6 +13,13 @@ interface Props extends Record<string, unknown> {
   /** Stacking: 'expanded' (default, full column) | 'collapsed' (Sonner-style
    *  pile that expands on hover/focus). Attribute: stack. */
   stack?: 'expanded' | 'collapsed';
+  /** Default appearance for this region's toasts: `'pill'` (default, compact) |
+   *  `'card'` (richer, with a description line). A per-toast `appearance` wins.
+   *  Attribute: `appearance`. */
+  appearance?: ToastAppearance;
+  /** Default high-contrast inverse treatment for this region's toasts. A per-toast
+   *  `inverse` wins. Off by default. Attribute: `inverse`. */
+  inverse?: boolean;
   /** Container element to anchor this region to (JS property). Set by the store
    *  for a scoped region; unset = the global viewport region. */
   target?: HTMLElement;
@@ -35,14 +42,20 @@ interface Events {
  *
  * Because it is a real `kai-*` element it carries its own shadow root + the
  * shared kit stylesheet, so it is viewport-positioned AND kit-styled.
+ *
+ * Stack-level defaults are also declarative: `<kai-toast-region appearance="card"
+ * inverse>` makes every toast that doesn't set its own `appearance`/`inverse`
+ * render as an inverted card. A per-toast value always wins.
  */
 defineWebComponent<Props, Events>('kai-toast-region', {
   toasts: [],
   position: 'top-center',
   max: 3,
   stack: 'expanded',
+  appearance: 'pill',
+  inverse: false,
   target: undefined,
-}, (props, { dispatch }) => {
+}, (props, { dispatch, flag }) => {
   // `max` may arrive as a string attribute (`<kai-toast-region max="2">`).
   const max = () => {
     const raw = props.max as unknown;
@@ -63,6 +76,8 @@ defineWebComponent<Props, Events>('kai-toast-region', {
       position={props.position}
       max={max()}
       stack={props.stack as 'expanded' | 'collapsed' | undefined}
+      appearance={props.appearance as ToastAppearance | undefined}
+      inverse={flag('inverse')}
       target={props.target as HTMLElement | undefined}
       onDismiss={(id, reason) => {
         remove(id);

package/src/elements/tool.tsx

@@ -1,23 +1,57 @@
 import { Show } from 'solid-js';
 import { defineWebComponent } from './define';
 import { Tool, type ToolPart } from '../components/tool';
+import { wireDisclosure } from './disclosure';
+import type { CollapsibleController } from '../ui/collapsible';
 
 interface Props extends Record<string, unknown> {
   /** The tool-call to display. Set as a JS property. */
   tool?: ToolPart;
-  /** Start expanded. */
+  /** Drive/observe open state (Shoelace-style: settable + reflected to the `open`
+   *  attribute; the element still self-manages on trigger click). Set
+   *  `el.open = true`, or `<kai-tool open>`; listen for `kai-open-change`. */
   open?: boolean;
+  /** Initial open state on mount (uncontrolled seed). */
+  defaultOpen?: boolean;
+  /** Gate the disclosure trigger — programmatic `show()/hide()/toggle()` still
+   *  work, but the trigger click no longer toggles. */
+  disabled?: boolean;
+}
+
+/** Events fired by `<kai-tool>`. */
+interface Events {
+  /** The panel expanded or collapsed (by trigger click or a method). */
+  'kai-open-change': { open: boolean };
 }
 
 /**
  * `<kai-tool>` — a collapsible tool-call panel (input/output inspection with a
- * state badge). Data via the `tool` property; `open` flag starts it expanded.
+ * state badge). Data via the `tool` property. Open state is the standard overlay
+ * surface: settable+reflecting `open`, `kai-open-change`, and
+ * `show()`/`hide()`/`toggle()` (gated by `disabled`); seed with `defaultOpen`.
  */
-defineWebComponent<Props>('kai-tool', {
+defineWebComponent<Props, Events>('kai-tool', {
   tool: undefined,
-  open: false,
-}, (props, { flag }) => (
-  <Show when={props.tool}>
-    <Tool toolPart={props.tool!} defaultOpen={flag('open')} />
-  </Show>
-));
+  open: undefined,
+  defaultOpen: undefined,
+  disabled: undefined,
+}, (props, ctx) => {
+  const { flag } = ctx;
+  let api: CollapsibleController | undefined;
+
+  // The standard disclosure surface: settable+reflecting `open`, kai-open-change,
+  // show/hide/toggle, disabled-gating. See ./disclosure. This is the SOLE emitter
+  // of kai-open-change — the Tool/Collapsible no longer wires its own.
+  wireDisclosure(ctx, () => api, () => props.open);
+
+  return (
+    <Show when={props.tool}>
+      <Tool
+        toolPart={props.tool!}
+        defaultOpen={flag('defaultOpen')}
+        disabled={flag('disabled')}
+        controllerRef={(a) => (api = a)}
+      />
+    </Show>
+  );
+});

package/src/elements/tooltip.tsx

@@ -0,0 +1,85 @@
+import { type Placement } from '@floating-ui/dom';
+import { Tooltip, type TooltipController } from '../ui/tooltip';
+import { defineWebComponent } from './define';
+import { wireDisclosure } from './disclosure';
+
+interface Props extends Record<string, unknown> {
+  /** The hint text shown on hover/focus of the slotted trigger. */
+  content?: string;
+  /** Delay (ms) before the tooltip appears on hover. Defaults to 600. Focus
+   *  shows it immediately regardless. */
+  openDelay?: number;
+  /** Delay (ms) before it hides after the pointer leaves. Defaults to 0 (hides
+   *  immediately). */
+  closeDelay?: number;
+  /** Preferred placement: `'top' | 'bottom' | 'left' | 'right'` (+ optional
+   *  `-start`/`-end`). Defaults to `'top'`; flips to stay in view. */
+  placement?: string;
+  /** Drive/observe open state (Shoelace-style: settable + reflected to the `open`
+   *  attribute, the element still self-manages on hover/focus). Set `el.open = true`,
+   *  or `<kai-tooltip open>`; listen for `kai-open-change`. */
+  open?: boolean;
+  /** Initial open state on mount (uncontrolled seed). */
+  defaultOpen?: boolean;
+  /** Turn the tooltip off while keeping the trigger mounted (hover/focus and
+   *  `show()` no longer open it). */
+  disabled?: boolean;
+}
+
+/** Events fired by `<kai-tooltip>`. */
+interface Events {
+  /** The tooltip opened or closed (by hover/focus, outside-click, or a method). */
+  'kai-open-change': { open: boolean };
+}
+
+/**
+ * `<kai-tooltip>` — wraps a trigger and shows a hint on hover/focus. Put the
+ * trigger as light-DOM content; set the text via `content`. Positions itself and
+ * dismisses on Escape/outside-click; the content is portaled inside the shadow
+ * root so it isn't clipped.
+ *
+ * ```html
+ * <kai-tooltip content="Voice input">
+ *   <kai-button variant="subtle" size="icon" icon="mic" label="Voice input"></kai-button>
+ * </kai-tooltip>
+ * ```
+ */
+defineWebComponent<Props, Events>('kai-tooltip', {
+  content: '',
+  openDelay: undefined,
+  closeDelay: undefined,
+  placement: undefined,
+  open: undefined,
+  defaultOpen: undefined,
+  disabled: undefined,
+}, (props, ctx) => {
+  const { flag } = ctx;
+  let api: TooltipController | undefined;
+
+  // The standard overlay surface: settable+reflecting `open`, kai-open-change,
+  // show/hide/toggle, disabled-gating. See ./disclosure.
+  wireDisclosure(ctx, () => api, () => props.open);
+
+  return (
+    <>
+      {/* The shared element base sets `:host{display:block}` (styles.css). A block
+          host wraps the inline-flex trigger in a line box, so the font-descender
+          strut makes the host taller than the control and pins the control to the
+          top, so it reads off-center beside non-tooltipped siblings in a
+          flex-items-center row. inline-flex (like kai-button) drops the line box so
+          the host hugs the trigger and their centers line up. */}
+      <style>{':host{display:inline-flex}'}</style>
+      <Tooltip
+        content={props.content ?? ''}
+        openDelay={props.openDelay != null ? Number(props.openDelay) : undefined}
+        closeDelay={props.closeDelay != null ? Number(props.closeDelay) : undefined}
+        placement={(props.placement as Placement | undefined) ?? undefined}
+        defaultOpen={flag('defaultOpen')}
+        disabled={flag('disabled')}
+        controllerRef={(a) => (api = a)}
+      >
+        <slot />
+      </Tooltip>
+    </>
+  );
+});