Accordion Component

Expandable/collapsible content sections, built with Vue 3 and TypeScript. Supports three visual variants, single- or multi-expand behavior, optional leading icons, and keyboard navigation between headers.

Installation

npm install @phila/phila-ui-accordion
# or
yarn add @phila/phila-ui-accordion
# or
pnpm add @phila/phila-ui-accordion

Usage

<script setup lang="ts">
import { Accordion, AccordionItem } from "@phila/phila-ui-accordion";
</script>

<template>
  <Accordion variant="style-a">
    <AccordionItem id="item1" header="What is the Accordion component for?">
      Use it to organize large amounts of related content into sections that can be expanded on demand.
    </AccordionItem>
    <AccordionItem id="item2" header="When should I use single-expand mode?">
      Use single-expand when content is mutually exclusive, short, and uniform in structure.
    </AccordionItem>
  </Accordion>
</template>

Accordion Props

| Prop | Type | Default | Description | | ------------ | ------------------------------------- | ----------- | --------------------------------------- | | variant | "style-a" \| "style-b" \| "style-c" | "style-a" | Visual style | | multiple | boolean | true | Allow more than one item open at a time | | modelValue | string[] | [] | Open item ids; supports v-model | | className | string | - | Additional CSS classes |

Accordion Events

| Event | Payload | Description | | ------------------- | ---------- | ------------------------------------ | | update:modelValue | string[] | Emitted whenever the open ids change | | change | string[] | Emitted whenever the open ids change |

Accordion Exposed Methods

| Method | Description | | --------------- | ----------------- | | expandAll() | Opens every item | | collapseAll() | Closes every item |

Access via a template ref: <Accordion ref="accordionRef" /> then accordionRef.value.expandAll().

AccordionItem Props

| Prop | Type | Default | Description | | ----------- | --------------- | ------- | ------------------------------------------------------------ | | id | string | - | Required. Drives aria-controls and registration order | | header | string | - | Header text; use the #header slot instead for rich content | | icon | IconComponent | - | Optional leading icon shown before the header text | | className | string | - | Additional CSS classes |

Accessibility

• Each header is a native <button> wrapped in an <h6>, so it's reachable and operable via Tab + Enter/Space.
• aria-expanded and aria-controls are set on the header; the content panel has role="region" and aria-labelledby.
• Arrow Up/Down move focus between headers (with wraparound); Home/End jump to the first/last header.
• Collapsed content stays in the DOM (for smooth height animation) but is marked inert, so it's unreachable by keyboard or assistive tech until expanded.
• The height transition is skipped when the user has prefers-reduced-motion: reduce set.

Development

Install Dependencies

pnpm install

Run Demo

pnpm dev

Build Library

pnpm build

Type Check

pnpm type-check

License

MIT