Disclosure

# Brok UI: Collapsible (`collapsible`)

An interactive section that expands and collapses its content.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add collapsible
```

## Usage

```blade
{{-- The canonical shape: a header row with a chevron toggle, the first item
     always visible, the rest folded away. The trigger's `indicator` gives the
     affordance; the label reads differently open and closed. --}}
<x-ui.collapsible class="w-full max-w-sm space-y-2">
    <div class="flex items-center justify-between gap-2 px-1">
        <p class="text-sm font-medium text-foreground">{{ __('Avery starred 3 repositories') }}</p>
        <x-ui.collapsible.trigger indicator="chevron" class="size-8 justify-center text-muted-foreground hover:bg-accent hover:text-accent-foreground">
            <span class="sr-only" x-text="open ? @js(__('Show fewer')) : @js(__('Show all'))"></span>
        </x-ui.collapsible.trigger>
    </div>
    <div class="rounded-md border border-border px-4 py-2 font-mono text-sm text-foreground">brokui/brok</div>
    <x-ui.collapsible.content>
        {{-- The content is a clip box; spacing between folded rows lives inside it. --}}
        <div class="space-y-2">
            <div class="rounded-md border border-border px-4 py-2 font-mono text-sm text-foreground">laravel/framework</div>
            <div class="rounded-md border border-border px-4 py-2 font-mono text-sm text-foreground">alpinejs/alpine</div>
        </div>
    </x-ui.collapsible.content>
</x-ui.collapsible>
```

## Props

- `open` (bool, default `false`) — Initial open state; modelable via x-model or wire:model.
- `indicator` (string, default `none`) — Declared by @props in the registry Blade source.
- `indicatorSide` (string, default `end`) — Declared by @props in the registry Blade source.

## Use when

- Use for secondary or optional content, especially when users usually inspect one short section at a time.
- Hiding a single block of secondary content behind a trigger, such as advanced options or extra details.
- Needing a modelable open state that can bind with x-model or wire:model.

## Avoid when

- Do not hide required workflow content or comparison-heavy information because disclosure controls reduce visibility and increase interaction cost.
- Grouping several sections that share single- or multiple-open behaviour; use accordion instead.
- Truncating a long block of the same content rather than hiding a distinct section; use show-more.

## Anti-patterns

- Hiding required workflow content
- Using accordions for cross-section comparison

## Rules

- Use the `<brok:collapsible>` tag (or `<x-ui.collapsible>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/collapsible
- Registry JSON (files, props, contract): https://brokui.dev/r/open/collapsible.json

@props([
    'indicator' => 'none',
    'indicatorSide' => 'end',
])

@php
    // Visual-only options; behaviour (toggle/open state) is unchanged.
    //   - indicator:     none | chevron | plus-minus
    //   - indicatorSide: end | start  (logical, mirrors under dir="rtl")
    $indicatorFirst = $indicatorSide === 'start';
@endphp

<button
    type="button"
    data-slot="collapsible-trigger"
    :aria-expanded="open"
    x-bind:aria-controls="$id('collapsible-content')"
    @click="toggle()"
    {{ $attributes->merge(['class' => 'inline-flex items-center justify-between gap-2 rounded-md text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring']) }}
>
    @if ($indicator === 'plus-minus')
        {{-- Plus that loses its vertical stroke when open, reading as a minus. --}}
        <svg
            aria-hidden="true"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            class="size-4 shrink-0 text-muted-foreground {{ $indicatorFirst ? 'order-first' : 'order-last' }}"
        >
            <path d="M5 12h14" />
            <path
                d="M12 5v14"
                class="origin-center transition-transform duration-200 motion-reduce:transition-none"
                :class="open && 'scale-y-0'"
            />
        </svg>
    @elseif ($indicator === 'chevron')
        {{-- end-side: down-chevron flips to point up when open.
             start-side: end-pointing chevron (logical; mirrors under RTL)
             that rotates a quarter-turn down when open. --}}
        <svg
            aria-hidden="true"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="size-4 shrink-0 text-muted-foreground transition-transform duration-200 motion-reduce:transition-none {{ $indicatorFirst ? 'order-first rtl:-scale-x-100' : 'order-last' }}"
            :class="open && '{{ $indicatorFirst ? 'rotate-90' : 'rotate-180' }}'"
        >
            @if ($indicatorFirst)
                <path d="m9 18 6-6-6-6" />
            @else
                <path d="m6 9 6 6 6-6" />
            @endif
        </svg>
    @endif

    {{ $slot }}
</button>

/**
 * Collapsible behavior (spec §19 behavior layer).
 *
 * Open state is held on the root component so a trigger and content pair stay
 * in sync. Each instance is independent, so multiple collapsibles on one page
 * do not interfere with one another.
 *
 * Self-registers on `alpine:init` so import order does not matter — import this
 * file once from your bundle (e.g. resources/js/ui/index.js).
 */
document.addEventListener('alpine:init', () => {
    window.Alpine.data('uiCollapsible', (config = {}) => ({
        open: config.open ?? false,

        toggle() {
            this.setOpen(!this.open);
        },

        /**
         * Set open state explicitly and notify listeners. Dispatches a
         * `collapsible-change` event ({ detail: { open } }) on the root so
         * controlled scenarios (an external label, count, or toolbar button)
         * can react without reaching into Alpine internals.
         */
        setOpen(value) {
            this.open = !!value;
            this.$dispatch('collapsible-change', { open: this.open });
        },
    }));
});