@skyhook-io/k8s-ui 1.14.6 → 1.14.8

package/src/components/ui/CardSection.tsx

@@ -1,4 +1,4 @@
-import { Fragment, type ComponentType, type ReactNode } from 'react'
+import { Fragment, type ComponentType, type ReactNode } from "react";
 
 // =============================================================================
 // CARD SECTION PRIMITIVES — the shared "Sectioned + icons" vocabulary used by
@@ -12,106 +12,150 @@ import { Fragment, type ComponentType, type ReactNode } from 'react'
 
 // Section role → eyebrow + icon hue. Body text always uses the secondary token
 // (the contrast floor), regardless of tone.
-export type CardSectionTone = 'neutral' | 'warn' | 'fix'
+export type CardSectionTone = "neutral" | "warn" | "fix";
 
 const SECTION_TONE_CLASS: Record<CardSectionTone, string> = {
   // Eyebrow grey — the default, for neutral sections (Why it matters, Raw error,
   // Affected resources, Context, Subject).
-  neutral: 'text-theme-text-tertiary',
+  neutral: "text-theme-text-tertiary",
   // What's wrong — amber, the diagnosis beat.
-  warn: 'text-amber-700 dark:text-amber-300',
+  warn: "text-amber-700 dark:text-amber-300",
   // Next step / How to fix — emerald, the action beat.
-  fix: 'text-emerald-700 dark:text-emerald-400',
-}
+  fix: "text-emerald-700 dark:text-emerald-400",
+};
 
 // The single eyebrow style: 11px / 600 / uppercase, with an icon in a fixed
 // gutter so every section's body aligns under the same left edge.
 export function CardSection({
   icon: Icon,
   label,
-  tone = 'neutral',
+  tone = "neutral",
   labelExtra,
   children,
 }: {
-  icon: ComponentType<{ className?: string }>
-  label: string
-  tone?: CardSectionTone
+  icon: ComponentType<{ className?: string }>;
+  label: string;
+  tone?: CardSectionTone;
   /** Optional trailing eyebrow text (e.g. "· retried 5×"), rendered muted. */
-  labelExtra?: ReactNode
-  children: ReactNode
+  labelExtra?: ReactNode;
+  children: ReactNode;
 }) {
-  const toneClass = SECTION_TONE_CLASS[tone]
+  const toneClass = SECTION_TONE_CLASS[tone];
   return (
     <section className="flex items-start gap-2.5">
       {/* Icon sits in a fixed gutter, anchored to the eyebrow line (top-aligned
           with a nudge to its optical center) — sections like Affected resources
           can be dozens of rows tall, and a section-centered glyph would float
           detached mid-list. */}
-      <Icon className={`mt-[-1px] h-[18px] w-[18px] shrink-0 ${toneClass}`} aria-hidden />
+      <Icon
+        className={`mt-[-1px] h-[18px] w-[18px] shrink-0 ${toneClass}`}
+        aria-hidden
+      />
       <div className="flex min-w-0 flex-1 flex-col gap-1">
-        <h4 className={`text-[11px] font-semibold uppercase tracking-[0.06em] ${toneClass}`}>
+        <h4
+          className={`text-[11px] font-semibold uppercase tracking-[0.06em] ${toneClass}`}
+        >
           {label}
-          {labelExtra ? <span className="font-medium normal-case tracking-normal text-theme-text-tertiary"> {labelExtra}</span> : null}
+          {labelExtra ? (
+            <span className="font-medium normal-case tracking-normal text-theme-text-tertiary">
+              {" "}
+              {labelExtra}
+            </span>
+          ) : null}
         </h4>
         {children}
       </div>
     </section>
-  )
+  );
 }
 
 // Body paragraph at the contrast floor — 14px, secondary token, never lighter.
-export function CardBody({ children, className }: { children: ReactNode; className?: string }) {
-  return <p className={`text-sm leading-relaxed text-theme-text-secondary ${className ?? ''}`}>{children}</p>
+export function CardBody({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <p
+      className={`text-sm leading-relaxed text-theme-text-secondary ${className ?? ""}`}
+    >
+      {children}
+    </p>
+  );
 }
 
 // The dark terminal block for raw error output. Intentionally dark in BOTH
 // themes (it's a console surface, not chrome), so it draws from the dedicated
 // --terminal-* tokens rather than the theme surface tokens.
-export function TerminalBlock({ label, children }: { label?: ReactNode; children: ReactNode }) {
+export function TerminalBlockLabel({
+  children,
+  divider,
+}: {
+  children: ReactNode;
+  divider?: boolean;
+}) {
+  return (
+    <div
+      className={`${divider ? "border-t" : "border-b"} border-[var(--terminal-divider)] px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.06em] text-[var(--terminal-label)]`}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function TerminalBlock({
+  label,
+  children,
+  footer,
+}: {
+  label?: ReactNode;
+  children: ReactNode;
+  /** Rendered under the output, inside the same block: a folded tail, a divider. */
+  footer?: ReactNode;
+}) {
   return (
     <div className="overflow-hidden rounded-lg border border-[var(--terminal-border)] bg-[var(--terminal-bg)]">
-      {label ? (
-        <div className="border-b border-[var(--terminal-divider)] px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.06em] text-[var(--terminal-label)]">
-          {label}
-        </div>
-      ) : null}
+      {label ? <TerminalBlockLabel>{label}</TerminalBlockLabel> : null}
       <pre className="overflow-x-auto whitespace-pre-wrap break-words px-3 py-2.5 font-mono text-xs leading-relaxed text-[var(--terminal-text)]">
         {children}
       </pre>
+      {footer}
     </div>
-  )
+  );
 }
 
 // The neutral category chip — drops the per-category hue so severity is the only
 // status color. Self-contained (don't pair with badge-sm): 11px / 600, 2px×8px
 // padding, no border, neutral grey.
 export const NEUTRAL_CHIP_CLASS =
-  'inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-semibold leading-tight bg-theme-elevated text-theme-text-secondary'
+  "inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-semibold leading-tight bg-theme-elevated text-theme-text-secondary";
 
 // Mono kind chip — the grey tag for an all-caps resource Kind (the Issue row
 // header + the Subject footer row). Mono and tighter than NEUTRAL_CHIP_CLASS,
 // which carries the label/category chips.
 export const KIND_CHIP_CLASS =
-  'shrink-0 rounded bg-theme-elevated px-1.5 py-px font-mono text-[11px] uppercase text-theme-text-secondary'
+  "shrink-0 rounded bg-theme-elevated px-1.5 py-px font-mono text-[11px] uppercase text-theme-text-secondary";
 
 // Render a prose string, turning markdown `inline-code` spans into mono chips
 // via the shared .inline-code class. Plain-text passthrough when the string
 // carries no backticks, so it's a no-op for today's plain catalog copy and
 // lights up automatically once backtick markup is added.
 export function renderProse(text: string | undefined | null): ReactNode {
-  if (!text) return null
-  if (!text.includes('`')) return text
-  const parts = text.split(/(`[^`]+`)/g)
+  if (!text) return null;
+  if (!text.includes("`")) return text;
+  const parts = text.split(/(`[^`]+`)/g);
   return parts.map((part, i) => {
     // length > 2 excludes a bare "``" (which the split leaves in a plain part)
     // so it renders as literal text, not an empty chip.
-    if (part.length > 2 && part.startsWith('`') && part.endsWith('`')) {
+    if (part.length > 2 && part.startsWith("`") && part.endsWith("`")) {
       return (
         <code key={i} className="inline-code">
           {part.slice(1, -1)}
         </code>
-      )
+      );
     }
-    return <Fragment key={i}>{part}</Fragment>
-  })
+    return <Fragment key={i}>{part}</Fragment>;
+  });
 }

package/src/components/ui/Collapse.test.tsx

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { Collapse, CollapseChevron, disclosurePanelId } from './Collapse'
+import {
+  DURATION_DISCLOSURE,
+  TRANSITION_CHEVRON,
+  TRANSITION_DISCLOSURE,
+} from '../../utils/animation'
+
+// The primitive is the app-wide standard for expand/collapse; these pin the
+// contract other components rely on rather than the visuals.
+describe('Collapse', () => {
+  it('animates grid-template-rows with the shared disclosure timing', () => {
+    const html = renderToString(<Collapse open={false}>x</Collapse>)
+    expect(html).toContain('grid-template-rows:0fr')
+    expect(html).toContain(`duration-${DURATION_DISCLOSURE}`)
+    expect(TRANSITION_DISCLOSURE).toContain(`duration-${DURATION_DISCLOSURE}`)
+    expect(TRANSITION_DISCLOSURE).toContain('motion-reduce:transition-none')
+  })
+
+  it('keeps closed content mounted but inert, and clipped', () => {
+    const html = renderToString(<Collapse open={false}>hidden-content</Collapse>)
+    expect(html).toContain('hidden-content')
+    expect(html).toMatch(/inert=""|inert>/)
+    expect(html).toContain('overflow-hidden')
+    const opened = renderToString(<Collapse open>shown</Collapse>)
+    expect(opened).toContain('grid-template-rows:1fr')
+    expect(opened).not.toMatch(/inert=""|inert>/)
+  })
+
+  it('mountLazily renders nothing until first open', () => {
+    expect(renderToString(<Collapse open={false} mountLazily>lazy</Collapse>)).not.toContain('lazy')
+    expect(renderToString(<Collapse open mountLazily>lazy</Collapse>)).toContain('lazy')
+  })
+
+  it('unmountOnExit renders nothing when initially closed', () => {
+    // Initial-closed mount never had a transition to wait for.
+    expect(renderToString(<Collapse open={false} unmountOnExit>gone</Collapse>)).not.toContain('gone')
+    expect(renderToString(<Collapse open unmountOnExit>here</Collapse>)).toContain('here')
+  })
+
+  it('exposes the panel id for aria-controls', () => {
+    expect(renderToString(<Collapse open id="panel-1">x</Collapse>)).toContain('id="panel-1"')
+  })
+
+  it('disclosurePanelId never yields whitespace (aria-controls is a space-separated list)', () => {
+    expect(disclosurePanelId(':r1:', 'Access Control')).toBe(':r1:-Access%20Control')
+    expect(disclosurePanelId(':r1:', 7)).toBe(':r1:-7')
+    // Injective: keys that only differ by the separator stay distinct.
+    expect(disclosurePanelId('p', 'a b')).not.toBe(disclosurePanelId('p', 'a_b'))
+  })
+})
+
+describe('CollapseChevron', () => {
+  it('runs the same clock as the panel', () => {
+    expect(TRANSITION_CHEVRON).toContain(`duration-${DURATION_DISCLOSURE}`)
+    const html = renderToString(<CollapseChevron open />)
+    expect(html).toContain('rotate-90')
+    expect(html).toContain(`duration-${DURATION_DISCLOSURE}`)
+  })
+})

package/src/components/ui/Collapse.tsx

@@ -1,47 +1,93 @@
-import { useState, type ReactNode } from 'react'
+import { useEffect, useId, useState, type ReactNode, type TransitionEvent } from 'react'
 import { ChevronRight } from 'lucide-react'
 import { clsx } from 'clsx'
+import { DURATION_DISCLOSURE, TRANSITION_CHEVRON, TRANSITION_DISCLOSURE, prefersReducedMotion } from '../../utils/animation'
 
 // Animated show/hide using the grid-template-rows 0fr→1fr technique — the
-// app-wide standard for expand/collapse (drawers, checks, audit, resources
-// sidebar, port-forward). The inner overflow-hidden wrapper is load-bearing:
-// it clips the content while the grid row animates between 0 and its natural
-// height, so nothing spills before the row is fully open.
+// app-wide standard for expand/collapse (drawer sections, checks, audit,
+// resources sidebar, issue rows, and every disclosure in Radar Cloud). The
+// inner overflow-hidden wrapper is load-bearing: it clips the content while
+// the grid row animates between 0 and its natural height, so nothing spills
+// before the row is fully open.
 //
-// Content stays mounted while closed (clipped to zero height) — that's what
-// lets it animate. `inert` when closed keeps that clipped content out of the
-// tab order and the accessibility tree, so keyboard/screen-reader users don't
-// land on invisible rows (matching ChecksView's collapse).
+// Timing lives in utils/animation (DURATION_DISCLOSURE, one curve). The caret
+// (CollapseChevron) runs the same clock, so an interrupted toggle reverses
+// panel and caret together.
 //
-// `mountLazily` defers rendering the children until the first open, then keeps
-// them mounted so both the open and close animations still run. Use it when the
-// collapsed content is heavy and there are many instances (e.g. hundreds of
-// resource rows, each with a drift panel) — otherwise every collapsed instance
-// pays its render cost up front. Off by default so the common single-instance
-// case keeps the simplest behavior.
+// Mount policy — pick per site, it is not cosmetic:
+//   default        content stays mounted while closed, clipped to zero height
+//                  and `inert` so keyboard/screen-reader users can't land on
+//                  invisible rows. Right for static or cheap content.
+//   mountLazily    defers the first render until the first open, then keeps
+//                  it. For many instances with heavy collapsed content
+//                  (hundreds of rows each with a drift panel).
+//   unmountOnExit  unmounts the children once the close transition has
+//                  finished (transitionend on this wrapper, with a timer
+//                  fallback so disposal is guaranteed under reduced motion,
+//                  for empty content, or if the event never fires). For
+//                  subtrees that poll, subscribe, or should reset on close.
+//                  Note: work stops when the subtree unmounts, i.e. after the
+//                  exit; a query that must stop at logical close should also
+//                  take `enabled: open`.
 export function Collapse({
   open,
   children,
   className,
   mountLazily = false,
+  unmountOnExit = false,
+  id,
 }: {
   open: boolean
   children: ReactNode
   className?: string
   mountLazily?: boolean
+  unmountOnExit?: boolean
+  /** Panel id for the header's aria-controls (see useDisclosure). */
+  id?: string
 }) {
   // Latch: once opened, stay mounted. Conditional setState-in-render is the
   // supported pattern for deriving state from props without an extra commit.
   const [hasOpened, setHasOpened] = useState(open)
   if (mountLazily && open && !hasOpened) setHasOpened(true)
-  const render = !mountLazily || hasOpened
+
+  // unmountOnExit: keep rendering through the close transition, then stop.
+  // `exiting` must flip in the SAME render that sees `open` go false — doing
+  // it in an effect would commit one frame with the children already gone
+  // (render = open || exiting, both false) before the effect put them back.
+  // Same setState-in-render pattern as the latch above.
+  const [exiting, setExiting] = useState(false)
+  const [prevOpen, setPrevOpen] = useState(open)
+  if (open !== prevOpen) {
+    setPrevOpen(open)
+    // Reopen before disposal cancels the pending unmount; under reduced motion
+    // the stylesheet has zeroed the transition, so dispose at logical close.
+    setExiting(!open && unmountOnExit && !prefersReducedMotion())
+  }
+  // Guarantee disposal even if transitionend never arrives (empty content
+  // transitions instantly; a cancelled transition fires no end). Any change to
+  // `exiting` (reopen, transitionend) clears the pending timer via cleanup.
+  useEffect(() => {
+    if (!exiting) return
+    const t = window.setTimeout(() => setExiting(false), DURATION_DISCLOSURE + 50)
+    return () => window.clearTimeout(t)
+  }, [exiting])
+
+  const onTransitionEnd = (event: TransitionEvent<HTMLDivElement>) => {
+    if (!exiting) return
+    // Only this wrapper's own row transition — descendants' transitions
+    // bubble here too.
+    if (event.target !== event.currentTarget) return
+    if (event.propertyName !== 'grid-template-rows') return
+    setExiting(false)
+  }
+
+  const render = unmountOnExit ? open || exiting : !mountLazily || hasOpened
   return (
     <div
-      className={clsx(
-        'grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none',
-        className,
-      )}
+      id={id}
+      className={clsx('grid', TRANSITION_DISCLOSURE, className)}
       style={{ gridTemplateRows: open ? '1fr' : '0fr' }}
+      onTransitionEnd={onTransitionEnd}
     >
       {/* `relative` is load-bearing. Collapsed content is still laid out at full
           height and only clipped by `overflow-hidden` — but an absolutely-positioned
@@ -51,24 +97,64 @@ export function Collapse({
           and extends the enclosing scroll container's scrollable overflow: the drawer
           scrolls past its own content into blank space. Anchoring here puts those
           boxes back inside the clip, so a collapsed section contributes nothing. */}
-      <div className="relative overflow-hidden" inert={!open || undefined}>{render ? children : null}</div>
+      <div className="relative overflow-hidden" inert={!open || undefined}>
+        {render ? children : null}
+      </div>
     </div>
   )
 }
 
 // CollapseChevron is the disclosure caret that pairs with <Collapse>: a single
 // ChevronRight that rotates 90° when open, rather than swapping between two
-// icons. Matches the drawer Section / ExpandableSection affordance so every
-// collapsible surface animates the same way.
-export function CollapseChevron({ open, className }: { open: boolean; className?: string }) {
+// icons. Same duration and curve as the panel, so every collapsible surface
+// animates the same way and an interrupted toggle keeps caret and panel in
+// step. Menu triggers are a different thing — they keep ChevronDown/Up
+// flipping toward the menu.
+//
+// The caret is tertiary grey by default. Inside a tinted header (an amber
+// warning, a red error banner, a button whose hover recolors its text) pass
+// `inheritColor` so it takes currentColor from the header instead — a color
+// utility in `className` would race the default in the cascade.
+export function CollapseChevron({
+  open,
+  className,
+  inheritColor = false,
+}: {
+  open: boolean
+  className?: string
+  inheritColor?: boolean
+}) {
   return (
     <ChevronRight
       aria-hidden="true"
-      className={clsx(
-        'shrink-0 text-theme-text-tertiary transition-transform duration-200 motion-reduce:transition-none',
-        open && 'rotate-90',
-        className,
-      )}
+      className={clsx('shrink-0', !inheritColor && 'text-theme-text-tertiary', TRANSITION_CHEVRON, open && 'rotate-90', className)}
     />
   )
 }
+
+// useDisclosure wires the header ↔ panel relationship: the header gets
+// aria-expanded + aria-controls, the panel gets a stable id. Works with any
+// header markup (a plain button, or a compound row with its own actions), so
+// it does not force a <button> wrapper around things that already contain
+// buttons.
+//
+//   const d = useDisclosure(open)
+//   <button {...d.buttonProps} onClick={toggle}>…<CollapseChevron open={open} /></button>
+//   <Collapse open={open} id={d.panelId}>…</Collapse>
+// Rows mapped inline can't each call useDisclosure; they build ids from one
+// useId() prefix plus a row key. The key is display data (a category name, a
+// cluster id) and may contain whitespace, which would split `aria-controls`
+// into two references — so it is percent-encoded here (injective, so two
+// distinct keys can't land on one id).
+export function disclosurePanelId(base: string, key: string | number): string {
+  return `${base}-${encodeURIComponent(String(key))}`
+}
+
+export function useDisclosure(open: boolean, explicitId?: string) {
+  const generated = useId()
+  const panelId = explicitId ?? `disclosure-${generated}`
+  return {
+    panelId,
+    buttonProps: { 'aria-expanded': open, 'aria-controls': panelId } as const,
+  }
+}

package/src/components/ui/DialogPortal.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, type KeyboardEvent as ReactKeyboardEvent, type React
 import { createPortal } from 'react-dom'
 import { clsx } from 'clsx'
 import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
-import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+import { TRANSITION_BACKDROP, TRANSITION_PANEL, overlayExitMs, overlayTransitionStyle } from '../../utils/animation'
 
 interface DialogPortalProps {
   open: boolean
@@ -27,7 +27,10 @@ interface DialogPortalProps {
  */
 export function DialogPortal({ open, onClose, children, className, closable = true }: DialogPortalProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
-  const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
+  // The unmount window is the exit duration: shorter than the entrance, and
+  // exactly what the panel transition below runs — a mismatch here cut the
+  // close at two-thirds (200ms window under a 300ms panel).
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, overlayExitMs('dialog'))
 
   // Bubble phase lets nested editors and menus consume Escape before the dialog closes.
   const handleDialogKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {
@@ -81,6 +84,7 @@ export function DialogPortal({ open, onClose, children, className, closable = tr
           TRANSITION_BACKDROP,
           isOpen ? 'opacity-100' : 'opacity-0',
         )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
         onClick={closable ? onClose : undefined}
       />
       <div
@@ -95,6 +99,7 @@ export function DialogPortal({ open, onClose, children, className, closable = tr
           isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
           className,
         )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
       >
         {children}
       </div>

package/src/components/ui/Disclosure.test.tsx

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { Disclosure } from './Disclosure'
+
+describe('Disclosure', () => {
+  it('wires the header to the panel and keeps closed content mounted', () => {
+    const html = renderToString(<Disclosure summary="More">hidden-copy</Disclosure>)
+    expect(html).toContain('aria-expanded="false"')
+    const id = html.match(/aria-controls="([^"]+)"/)?.[1]
+    expect(id).toBeTruthy()
+    expect(html).toContain(`id="${id}"`)
+    expect(html).toContain('hidden-copy')
+    expect(html).toMatch(/inert=""|inert>/)
+  })
+
+  it('honours defaultOpen and a controlled open', () => {
+    expect(renderToString(<Disclosure summary="s" defaultOpen>x</Disclosure>)).toContain('aria-expanded="true"')
+    expect(renderToString(<Disclosure summary="s" open onOpenChange={() => {}}>x</Disclosure>)).toContain('aria-expanded="true"')
+    expect(renderToString(<Disclosure summary="s" open={false} defaultOpen>x</Disclosure>)).toContain('aria-expanded="false"')
+  })
+
+  it('caret follows the header color unless pinned', () => {
+    expect(renderToString(<Disclosure summary="s">x</Disclosure>)).not.toContain('text-theme-text-tertiary')
+    expect(renderToString(<Disclosure summary="s" inheritColor={false}>x</Disclosure>)).toContain('text-theme-text-tertiary')
+  })
+})

package/src/components/ui/Disclosure.tsx

@@ -0,0 +1,69 @@
+import { useState, type ReactNode } from 'react'
+import { clsx } from 'clsx'
+import { Collapse, CollapseChevron, useDisclosure } from './Collapse'
+
+// Disclosure — in-flow expand/collapse with the app-standard motion; the
+// replacement for native <details>/<summary> on primary paths. Native details
+// snaps open with no transition and its marker ignores the caret language;
+// this pairs a button header (aria-expanded / aria-controls via useDisclosure)
+// with CollapseChevron and an animated Collapse panel. Shared by Radar and
+// Radar Cloud so both open alike.
+//
+// Content stays mounted while closed (Collapse's default), exactly like native
+// details — server-rendered markup and in-page search still see the collapsed
+// copy. Sites whose panel polls or holds an editor should use
+// <Collapse unmountOnExit> directly instead.
+//
+// Uncontrolled by default (`defaultOpen`); pass `open` + `onOpenChange` to
+// control it from above (a form that keys other state on the disclosure).
+// The chevron takes currentColor from the header by default: a summary's
+// caret should read as part of its text, including on hover.
+export function Disclosure({
+  summary,
+  children,
+  className,
+  summaryClassName,
+  chevronClassName = 'h-3.5 w-3.5',
+  inheritColor = true,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+}: {
+  summary: ReactNode
+  children: ReactNode
+  /** Classes for the wrapper around header and panel. */
+  className?: string
+  /** Classes for the header button (layout, size and color of the summary). */
+  summaryClassName?: string
+  chevronClassName?: string
+  /** False pins the caret to the tertiary grey regardless of the header's color. */
+  inheritColor?: boolean
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen)
+  const open = controlledOpen ?? uncontrolledOpen
+  const disclosure = useDisclosure(open)
+  const toggle = () => {
+    const next = !open
+    if (controlledOpen === undefined) setUncontrolledOpen(next)
+    onOpenChange?.(next)
+  }
+  return (
+    <div className={className}>
+      <button
+        type="button"
+        {...disclosure.buttonProps}
+        onClick={toggle}
+        className={clsx('flex w-full cursor-pointer select-none items-center gap-1.5 text-left', summaryClassName)}
+      >
+        <CollapseChevron open={open} inheritColor={inheritColor} className={chevronClassName} />
+        {summary}
+      </button>
+      <Collapse open={open} id={disclosure.panelId}>
+        {children}
+      </Collapse>
+    </div>
+  )
+}

package/src/components/ui/ForceDeleteConfirmDialog.tsx

@@ -1,5 +1,6 @@
 import { useState, useMemo } from 'react'
-import { AlertTriangle, ChevronDown, ChevronRight, Loader2 } from 'lucide-react'
+import { AlertTriangle, Loader2 } from 'lucide-react'
+import { Collapse, CollapseChevron, useDisclosure } from './Collapse'
 import { ConfirmDialog } from './ConfirmDialog'
 import { pluralize } from '../../utils/pluralize'
 
@@ -97,6 +98,7 @@ const MAX_NAMES_PER_KIND = 8
 
 function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[] }) {
   const [expanded, setExpanded] = useState(false)
+  const { panelId, buttonProps } = useDisclosure(expanded)
 
   const grouped = useMemo(() => {
     const map = new Map<string, string[]>()
@@ -111,17 +113,18 @@ function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[]
   return (
     <div className="rounded border border-amber-500/30 bg-amber-500/5">
       <button
+        {...buttonProps}
         type="button"
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-2 w-full px-3 py-2 text-left text-xs font-medium text-amber-400 hover:bg-amber-500/10 transition-colors"
       >
-        {expanded ? <ChevronDown className="w-3.5 h-3.5 shrink-0" /> : <ChevronRight className="w-3.5 h-3.5 shrink-0" />}
+        <CollapseChevron open={expanded} inheritColor className="w-3.5 h-3.5" />
         <span>
           Will also delete {pluralize(dependents.length, 'dependent resource')}
         </span>
       </button>
 
-      {expanded && (
+      <Collapse open={expanded} id={panelId}>
         <div className="px-3 pb-2.5 space-y-1.5">
           {grouped.map(([kind, names]) => (
             <div key={kind} className="text-xs">
@@ -136,7 +139,7 @@ function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[]
             </div>
           ))}
         </div>
-      )}
+      </Collapse>
     </div>
   )
 }