Collapsible

Liquid Glass Collapsible contains three real Proto UI prototypes: Root, Trigger and Content. Each consumes its matching Base Collapsible hook. Root remains the sole expansion owner; this family changes presentation only. This is a draft, independently maintained design projection.

Use the preview toolbar’s real family Select to choose WC, React, Vue or Vue 2. The page header preference remains available and synchronizes the selected runtime.

The demo uses the library prototypes in all four Web adapters. The first disclosure starts closed and detaches its content view. The second starts open and retains a hidden view after closing. The third is disabled while open. The fourth stays closed after a request until you activate Accept. That acceptance button is a separate application action, never a second interaction owner inside Trigger.

• Root: open?, defaultOpen?, disabled?; exposes open, request methods openCollapsible, close, toggle, and openChange with { open, reason }.
• Trigger: disabled?; inherits expanded, effective disabled, hover, press, focused and focus-visible states, button accessibility, natural Tab order, Enter/Space activation and guarded focusSelf.
• Content: keepMounted?; inherits derived open/hidden, role-neutral content and L1 view presence. Closing does not dispose the logical instance. Detached native child/view state is not promised.

Supply exactly one Trigger and one Content in the Root’s own anatomy domain. Nested and adjacent disclosures retain independent ownership. Controlled requests never change canonical expansion until the owner supplies a new open; ignored requests stay ignored. Disabled suppresses requests without closing already open content. There is no heading prerequisite, Accordion selection, arrow-key navigation, region landmark, automatic focus movement or Overlay.

The primitives use bounded width, shrinkable layout, wrapping long words, scalable padding and no fixed content height. Focus and disabled appearance consume Base states. Keep enough surrounding room for the focus ring and, in Neobrutalist, its hard shadow and translated pointer envelope. The demo includes a long label and unbroken content word; browser acceptance checks 320px width, 200% root text size and both light and dark themes. Source/simulated-DOM passes do not establish these paint or native-input results.

Trigger now declares the shared explicit liquid-glass material intent and uses its existing Base pressed state to select mutually exclusive rest/pressed deformation. The rounded geometry and opaque fallback fill/foreground come from the final style. Root and long-form Content remain material-neutral. The current Web hosts without the shared visual capability keep the complete opaque fallback and report material-host-unavailable; a recorded intent is not rendered glass. The self-implemented optical host, source/preferences/geometry handling and GPUI fidelity remain unfinished shared work. No component-private material flag or native blur substitutes for explicit glass, and this preview does not establish Apple-native material parity.

This package remains private, unpublished workspace source. Import its source prototypes into a workspace and use the desired adapter. Internal facade generation requires explicit workspace source mode; the public installed-consumer CLI refuses this entry. No registry publication is implied.

import {
  collapsibleRoot,
  collapsibleTrigger,
  collapsibleContent,
} from '@proto.ui/prototypes-liquid-glass/collapsible';

Keep the same three-part composition when adapting the exported prototypes. The Base protocol describes the shared request and lifecycle guarantees.

Four-adapter synthetic-DOM and compiler mappings are separate from registered browser journeys, screenshots, native GPUI execution and independent stable admission. Unexecuted host evidence remains an acceptance gap.

• Implementation source
• Apple material design reference
• Executable evidence map