Kappa / Collapsible

<script setup>
import { ref } from "vue";
import { Collapsible } from "@dicehub/kappa/components/collapsible";

const open = ref(true);
</script>

<template>
  <Collapsible.Root v-model:open="open">
    <Collapsible.Trigger>Solver diagnostics</Collapsible.Trigger>
    <Collapsible.Content>
      Iterations: 1,240 · Residual: 8.4e-6 · Courant max: 0.82
    </Collapsible.Content>
  </Collapsible.Root>
</template>

Installation

Collapsible is part of the main Kappa package and uses Ark UI for disclosure state, ARIA relationships, presence, and measurement.

Barrel

import {
  Collapsible,
  CollapsibleRoot,
  CollapsibleTrigger,
  CollapsibleContent,
  CollapsibleIndicator,
} from "@dicehub/kappa";

Granular

import {
  Collapsible,
  CollapsibleRoot,
  CollapsibleTrigger,
  CollapsibleContent,
  CollapsibleIndicator,
} from "@dicehub/kappa/components/collapsible";

Usage

Use one Collapsible for one optional section. The content stays mounted by default, so form values and local component state survive close and reopen cycles.

<script setup>
import { Collapsible } from "@dicehub/kappa/components/collapsible";
</script>

<template>
  <Collapsible.Root>
    <Collapsible.Trigger>What is Kappa?</Collapsible.Trigger>
    <Collapsible.Content>
      Kappa is dicehub's Vue component library.
    </Collapsible.Content>
  </Collapsible.Root>
</template>

Composition

Typical part hierarchy

Collapsible.Root
├── Collapsible.Trigger
│   └── Collapsible.Indicator
└── Collapsible.Content

Kappa follows Ark UI part names. Trigger supplies the default indicator, and Content supplies an inner spacing wrapper. Use named exports when a template or build rule prefers unaugmented components.

When Trigger uses asChild, the child owns all visible content; Kappa does not append its default indicator because Ark UI requires one merge target.

<script setup>
import {
  CollapsibleRoot,
  CollapsibleTrigger,
  CollapsibleContent,
  CollapsibleIndicator,
} from "@dicehub/kappa/components/collapsible";
</script>

<template>
  <CollapsibleRoot>
    <CollapsibleTrigger>
      Run details
      <template #indicator><CollapsibleIndicator /></template>
    </CollapsibleTrigger>
    <CollapsibleContent>24 partitions · 38 minute runtime</CollapsibleContent>
  </CollapsibleRoot>
</template>

Examples

Basic

<Collapsible.Root>
  <Collapsible.Trigger>What is Kappa?</Collapsible.Trigger>
  <Collapsible.Content>
    Kappa is dicehub's Vue component library.
  </Collapsible.Content>
</Collapsible.Root>

Multiple Items

Place independent Collapsible roots in a stack when more than one section can stay open.

<div class="collapsible-list">
  <Collapsible.Root>
    <Collapsible.Trigger>What is Kappa?</Collapsible.Trigger>
    <Collapsible.Content>
      Kappa is dicehub's Vue component library.
    </Collapsible.Content>
  </Collapsible.Root>
  <Collapsible.Root>
    <Collapsible.Trigger>How do I use it?</Collapsible.Trigger>
    <Collapsible.Content>
      Install the package and import the components that your project needs.
    </Collapsible.Content>
  </Collapsible.Root>
  <Collapsible.Root>
    <Collapsible.Trigger>Is it accessible?</Collapsible.Trigger>
    <Collapsible.Content>
      Yes. Ark UI supplies keyboard and screen reader behavior.
    </Collapsible.Content>
  </Collapsible.Root>
</div>

<style scoped>
.collapsible-list {
  display: grid;
  gap: 0.5rem;
}
</style>

Custom Trigger Example

Use asChild to merge trigger behavior into a Button or another single child.

<script setup>
import { ref } from "vue";
import { Button } from "@dicehub/kappa/components/button";
import { Collapsible } from "@dicehub/kappa/components/collapsible";

const open = ref(false);
</script>

<template>
  <Collapsible.Root v-model:open="open">
    <Collapsible.Trigger as-child>
      <Button variant="outline" size="sm">
        {{ open ? "Hide details" : "Show details" }}
      </Button>
    </Collapsible.Trigger>
    <Collapsible.Content>
      The Kappa Button keeps its styling while Collapsible supplies disclosure behavior.
    </Collapsible.Content>
  </Collapsible.Root>
</template>

Controlled

Use v-model:open when application state must observe or control disclosure.

<script setup>
import { ref } from "vue";
import { Collapsible } from "@dicehub/kappa/components/collapsible";

const open = ref(false);
</script>

<template>
  <Collapsible.Root v-model:open="open">
    <Collapsible.Trigger>Boundary summary</Collapsible.Trigger>
    <Collapsible.Content>Seven boundary patches cover every mesh face.</Collapsible.Content>
  </Collapsible.Root>
  <output>Panel state: {{ open ? "open" : "closed" }}</output>
</template>

Partial Collapse

Set collapsedHeight or collapsedWidth to leave a measured preview visible while the disclosure is closed.

<Collapsible.Root :collapsed-height="44">
  <Collapsible.Trigger>Solver log</Collapsible.Trigger>
  <Collapsible.Content>
    <p>Time = 2.35</p>
    <p>smoothSolver: Initial residual = 2.1e-05</p>
    <p>GAMG: Initial residual = 8.4e-06</p>
  </Collapsible.Content>
</Collapsible.Root>

Lazy Mount

Add lazyMount and unmountOnExit for expensive charts, editors, or observers that should exist only while open.

<Collapsible.Root lazy-mount unmount-on-exit>
  <Collapsible.Trigger>Residual plot</Collapsible.Trigger>
  <Collapsible.Content>
    <ExpensiveResidualPlot />
  </Collapsible.Content>
</Collapsible.Root>

Disabled

<Collapsible.Root disabled>
  <Collapsible.Trigger>Transient controls</Collapsible.Trigger>
  <Collapsible.Content>
    Controls become available after initialization.
  </Collapsible.Content>
</Collapsible.Root>

Right-to-left

Logical spacing and the closed indicator follow the inherited text direction.

<Collapsible.Root dir="rtl" default-open>
  <Collapsible.Trigger>نتائج المحاكاة</Collapsible.Trigger>
  <Collapsible.Content>
    اكتملت المحاكاة والنتائج جاهزة للمراجعة.
  </Collapsible.Content>
</Collapsible.Root>

Accessibility

The trigger is a native button with managed aria-expanded and aria-controls.
Enter and Space toggle the focused trigger. Tab follows normal document order.
The indicator is decorative; the trigger label must describe the hidden content.
Disabled state prevents changes and remains visually distinct in both themes.
Expansion and indicator motion honor prefers-reduced-motion.
Partial collapse must not hide information that users need to understand the trigger.

Kappa preserves Ark UI behavior. See theofficial Ark UI Collapsible documentationfor the primitive contract.

API Reference

Collapsible.Root

Forwards remaining attributes and listeners to Ark UI's root element.

Prop	Type	Default	Description
`open`	`boolean`	`-`	Controlled open state; supports v-model:open.
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled use.
`disabled`	`boolean`	`false`	Prevents the trigger from changing state.
`collapsedHeight`	`number \| string`	`-`	Content height that remains visible while closed.
`collapsedWidth`	`number \| string`	`-`	Content width that remains visible while closed.
`lazyMount`	`boolean`	`false`	Defers content mounting until the first open state.
`unmountOnExit`	`boolean`	`false`	Removes content after the close transition.
`id`	`string`	`generated`	Stable identifier for the state machine.
`ids`	`CollapsibleRootProps['ids']`	`generated`	Overrides generated root, trigger, and content IDs.
`asChild`	`boolean`	`false`	Merges root behavior into one child element.

Parts

Part	Element	Description
`Collapsible.Trigger`	`button`	Toggles content and manages aria-expanded and aria-controls. asChild omits the default indicator.
`Collapsible.Content`	`div`	Animated content region; wraps slotted content in a spacing body.
`Collapsible.Indicator`	`div`	Decorative state indicator with a replaceable default chevron.
`Collapsible.Context`	`slot`	Exposes the reactive Ark UI state to a scoped slot.
`Collapsible.RootProvider`	`div`	Accepts a state machine created by useCollapsible.

Events

Event	Payload	Description
`update:open`	`boolean`	Emitted when the controlled open state changes.
`openChange`	`{ open: boolean }`	Ark UI detail emitted after an open-state change.
`exitComplete`	`void`	Emitted after the close transition completes.

Exports

Export	Description
`Collapsible`	Compound API exposing Root, RootProvider, Trigger, Content, Indicator, and Context.
`CollapsibleRoot`	Unaugmented state root component.
`CollapsibleRootProvider`	Root backed by an external useCollapsible state machine.
`CollapsibleTrigger`	Keyboard-operable disclosure trigger.
`CollapsibleContent`	Animated disclosure content.
`CollapsibleIndicator`	Decorative open-state indicator.
`CollapsibleContext`	Scoped-slot state access.
`useCollapsible`	Creates a Collapsible state machine for RootProvider.
`useCollapsibleContext`	Reads Collapsible state inside the compound component.
`collapsibleAnatomy`	Ark UI part anatomy metadata.
`CollapsibleRootProps`	Public root props.
`CollapsibleEmits`	Root event contract.
`CollapsibleOpenChangeDetails`	Payload for openChange.