Accordion API

Full surface of @oge-ui/layout: the oge-accordion container, the declarative <oge-accordion-item> child with its four template slots, and the config provider.

Properties Methods Events Types

OgeAccordion

oge-accordion

Properties 23

Panels & expansion

Name	Type	Default	Description
`items`	`readonly OgeAccordionItemData[] \| undefined`	—	Data-driven panels rendered after the projected `<oge-accordion-item>` children.
`expandedKeys`	`readonly string[]`	`[]`	Keys of the expanded panels — two-way. The multi-expand counterpart of `selectedIndex`; only panels that declare a `key` can appear here.
`selectedIndex`	`number`	`-1`	Index of the expanded panel in single-expand mode — two-way. `-1` means none; in `multiple` mode it reports the first expanded panel.
`multiple`	`boolean`	`false`	Allows more than one panel to stay expanded.
`collapsible`	`boolean`	`false`	Allows collapsing the last expanded panel, leaving none open. While `false`, that header is `aria-disabled` per the APG — it stays focusable.
`disabled`	`boolean`	`false`	Disables the whole component.

Rendering & animation

Name	Type	Default	Description
`deferRendering`	`boolean`	`true`	Instantiate a panel's content only when it first expands.
`keepAlive`	`boolean`	`true`	Keep once-rendered panels mounted (hidden) so their state survives a collapse. Ignored while `deferRendering` is `false`.
`animation`	`boolean \| number`	`true`	Height animation: `true` uses the default duration, a number overrides it in milliseconds, `false` disables it. Always suppressed under `prefers-reduced-motion`.

Appearance

Name	Type	Default	Description
`togglePosition`	`'start' \| 'end'`	`'end'`	Side of the header the chevron sits on — logical, so RTL mirrors it.
`hideToggle`	`boolean`	`false`	Hides the chevron entirely. Overridable per panel via `<oge-accordion-item [hideToggle]>`.
`collapsedHeaderHeight`	`string \| undefined`	—	Minimum height of a collapsed header (any CSS length). `undefined` lets `size` and the padding tokens decide. Material’s `collapsedHeight`.
`expandedHeaderHeight`	`string \| undefined`	—	Minimum height of an expanded header; falls back to `collapsedHeaderHeight`. Material’s `expandedHeight`.
`displayMode`	`'default' \| 'flat'`	`'default'`	`flat` removes the gutters between panels and joins them into one stack.
`stylingMode`	`'outlined' \| 'filled' \| 'flat'`	`'outlined'`	Visual variant of the panels.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Density of the header rows.

Keyboard & accessibility

Name	Type	Default	Description
`keyboardNavigation`	`boolean`	`true`	Enables Up/Down/Home/End and Ctrl+PageUp/PageDown header navigation. The APG pattern itself requires only Enter/Space and Tab — this is the optional enhancement.
`typeAhead`	`boolean`	`true`	Enables printable-character type-ahead over the panel titles. Matching is accent- and locale-insensitive.
`selectOnFocus`	`boolean`	`false`	Expands a panel as soon as keyboard navigation moves focus onto it.
`headingLevel`	`number`	`3`	`aria-level` of the heading wrapping each header button.
`useRegionRole`	`boolean`	`true`	Gives each panel `role="region"` (APG-optional; adds one landmark per panel).
`ariaLabel`	`string \| undefined`	—	Aria label of the accordion container.
`messages`	`Partial<OgeAccordionMessages>`	`{}`	Per-instance overrides of the config `messages`.

Methods 8

Name	Type	Description
`expand(target)`	`(target: number \| string) => Promise<boolean>`	Runs the expand pipeline for the panel at an index or with a key. Resolves `true` once it expanded, `false` if an unknown target, `itemExpanding` or the `expandGuard` vetoed it.
`collapse(target)`	`(target: number \| string) => Promise<boolean>`	Runs the collapse pipeline; resolves whether the panel actually collapsed.
`toggle(target)`	`(target: number \| string) => Promise<boolean>`	Expands the panel if collapsed, collapses it otherwise.
`expandAll()`	`() => void`	Expands every enabled panel. Requires `multiple` — otherwise it warns in dev mode and does nothing.
`collapseAll()`	`() => void`	Collapses every panel. In single-expand mode the last panel stays open unless `collapsible` is set.
`expandInvalid()`	`() => void`	Expands every panel flagged `invalid` — call it after a failed form submit so the user sees each section needing attention.
`isExpanded(target)`	`(target: number \| string) => boolean`	Whether the panel at an index or with a key is currently expanded.
`focus(target?)`	`(target?: number \| string) => void`	Focuses a panel's header button, or the first enabled one.

Events 11

Name	Type	Description
`itemExpanding`	`OgeAccordionExpandingEvent`	Cancelable pre-event of a panel expanding — set `cancel = true` to block it. Runs before the panel’s `expandGuard`.
`itemExpanded`	`OgeAccordionExpandedEvent`	Emitted after a panel expanded.
`itemCollapsing`	`OgeAccordionCollapsingEvent`	Cancelable pre-event of a panel collapsing — set `cancel = true` to block it.
`itemCollapsed`	`OgeAccordionCollapsedEvent`	Emitted after a panel collapsed.
`afterExpand`	`OgeAccordionExpandedEvent`	Emitted once the expand animation finished — the point at which the panel has its final height. Fires immediately when the animation is off or suppressed by `prefers-reduced-motion`.
`afterCollapse`	`OgeAccordionCollapsedEvent`	Emitted once the collapse animation finished.
`itemClick`	`OgeAccordionItemClickEvent`	Emitted when a header button is activated, before the expand pipeline runs. Fires for disabled panels too.
`itemContentLoaded`	`OgeAccordionContentLoadedEvent`	Emitted after a panel's `contentLoader` resolved.
`itemContentFailed`	`OgeAccordionContentFailedEvent`	Emitted after a panel's `contentLoader` rejected.
`expandedKeysChange`	`readonly string[]`	Two-way model output of `expandedKeys`.
`selectedIndexChange`	`number`	Two-way model output of `selectedIndex`.

Types 7

Types

Name	Type	Description
`OgeAccordionItemData`	`interface`	Data-driven counterpart of a declarative panel: `key`, `title`, `description`, `icon`, `badge`, `hint`, `disabled`, `visible`, `expanded`, `invalid`, `expandGuard`, `contentLoader`.
`OgeAccordionExpandGuard`	`() => boolean \| Promise<boolean>`	Veto for a pending expand or collapse. `false` blocks it; throwing or rejecting is also a veto. While a promise is pending the panel shows a spinner and ignores further toggles (single-flight).
`OgeAccordionContentLoader`	`() => Promise<unknown>`	Loads a panel's content the first time it expands. The resolved value reaches the content template as `data`.
`OgeAccordionTogglePosition`	`'start' \| 'end'`	Chevron side inside the header button.
`OgeAccordionDisplayMode`	`'default' \| 'flat'`	Gutters between panels, or one joined stack.
`OgeAccordionStylingMode`	`'outlined' \| 'filled' \| 'flat'`	Visual variant of the panels.
`OgeAccordionSize`	`'sm' \| 'md' \| 'lg'`	Density of the header rows.

OgeAccordionItem

oge-accordion-item

Properties 15

Name	Type	Default	Description
`title`	`string`	`''`	Header title; alternative to an inline `[ogeAccordionHeaderTemplate]`.
`text`	`string \| undefined`	—	Plain-text panel body, rendered when there is no projected content or content template. The reference `html` item field has no counterpart on purpose.
`description`	`string \| undefined`	—	Secondary line rendered under the title.
`key`	`string \| undefined`	—	Stable identity used by `expandedKeys` and DOM ids.
`icon`	`string \| undefined`	—	SVG path data (`d`) rendered as a 24×24 aria-hidden icon before the title.
`badge`	`string \| number \| undefined`	—	Badge rendered after the title.
`hint`	`string \| undefined`	—	Tooltip — rendered as the native `title` attribute.
`disabled`	`boolean`	`false`	Disabled panels cannot expand and are skipped by keyboard navigation.
`visible`	`boolean`	`true`	`false` removes the panel entirely.
`expanded`	`boolean`	`false`	Expanded state of this panel — two-way. Set it to expand on first render, bind it to follow the state, or write to it to drive the panel from outside. Writes still run the pipeline, so a veto reverts the binding.
`hideToggle`	`boolean \| undefined`	—	Overrides the accordion's `hideToggle` for this panel.
`togglePosition`	`'start' \| 'end' \| undefined`	—	Overrides the accordion's `togglePosition` for this panel.
`invalid`	`boolean`	`false`	Flags the section as failing validation — renders the danger rail and feeds `expandInvalid()`.
`expandGuard`	`OgeAccordionExpandGuard \| undefined`	—	Veto hook run before this panel expands or collapses; may be async (single-flight).
`contentLoader`	`OgeAccordionContentLoader \| undefined`	—	Loads this panel's content on first expand, with a skeleton while pending and a retry button on failure.

Methods 3

Name	Type	Description
`open()`	`() => void`	Expands this panel. Like a user gesture it runs the accordion’s pipeline, so `itemExpanding` and `expandGuard` can still veto it.
`close()`	`() => void`	Collapses this panel, subject to `collapsible` and the guards.
`toggle()`	`() => void`	Expands the panel if collapsed, collapses it otherwise.

Types 5

Template slots

Name	Type	Description
`[ogeAccordionHeaderTemplate]`	`{ $implicit, index, expanded, title, description }`	Replaces the built-in title/description/icon layout inside the header button. Component-level instances apply to `items` panels only (queried with `descendants: false`). Must not contain focusable controls.
`[ogeAccordionContentTemplate]`	`{ $implicit, index, data }`	Panel body; marks the content lazy. `data` carries the panel's `contentLoader` result.
`[ogeAccordionToggleIconTemplate]`	`{ $implicit: boolean, index }`	Replaces the chevron. Accordion-level chrome — a component-level instance applies to declarative children too.
`[ogeAccordionHeaderActionsTemplate]`	`{ $implicit, index, expanded }`	Per-panel actions rendered beside the toggle button, never inside it — real focusable controls without a `nested-interactive` violation.
`[ogeAccordionActionRow]`	`directive`	Marks a row of buttons at the end of a panel body as its action bar (divider above, actions at the inline end) — the references' action-row slot. Inside the panel, so only reachable while expanded.

Accordion configuration

Properties 6

OgeAccordionMessages

Name	Type	Default	Description
`invalidSection`	`string`	`'section has errors'`	Announced after the title of a panel flagged `invalid`.
`pending`	`string`	`'working'`	Announced while an `expandGuard` promise is in flight.
`loadingContent`	`string`	`'Loading…'`	Shown while a panel's `contentLoader` is running.
`contentLoadFailed`	`string`	`'Could not load this section.'`	Shown when a panel's `contentLoader` rejected.
`retry`	`string`	`'Retry'`	Label of the retry button on a failed content load.
`noData`	`string`	`'No sections to display'`	Shown in place of the panels when there are no visible items.

Types 5

Behavioural defaults

Name	Type	Description
`hideToggle`	`boolean \| undefined`	Default for the `hideToggle` input.
`collapsedHeaderHeight`	`string \| undefined`	Default for the `collapsedHeaderHeight` input.
`expandedHeaderHeight`	`string \| undefined`	Default for the `expandedHeaderHeight` input. Together with the two above this is the `MAT_EXPANSION_PANEL_DEFAULT_OPTIONS` equivalent.

Name	Type	Description
`provideOgeAccordionConfig(config)`	`(config: OgeAccordionConfigInput) => Provider`	Application- or component-scoped defaults; shallow-merges `messages` over the built-ins.
`OGE_ACCORDION_CONFIG`	`InjectionToken<OgeAccordionConfig>`	The token itself, with a factory default — inject it to read the effective config.