Chip API

Full surface of the stand-alone oge-chip, the oge-chip-list container with its [ogeChipTemplate] slot, and the config provider.

Properties Methods Events Types

OgeChip

oge-chip

Name	Type	Default	Description
`label`	`string`	`''`	Visible text and accessible name.
`icon`	`string \| undefined`	—	SVG path data (`d`, 24×24 viewBox) of a leading `aria-hidden` icon.
`avatar`	`OgeChipAvatar \| undefined`	—	A small leading avatar — the image, else the initials (from `initials` or `name`), else a person glyph. Always `aria-hidden`: the label is the name. Wins over `icon`.
`selectable`	`boolean`	`false`	Renders the chip as a toggle `<button aria-pressed>` with a check glyph for the pressed state.
`selected`	`boolean (model)`	`false`	Pressed state of a `selectable` chip — two-way `[(selected)]`.
`removable`	`boolean`	`false`	Adds a separate, real remove button named by the `remove` message (“Remove {label}”); Delete / Backspace on a selectable chip’s toggle remove too (`aria-keyshortcuts`). 24px target, 44px on coarse pointers.
`disabled`	`boolean`	`false`	Disables the toggle and the remove button.
`size`	`'sm' \| 'md' \| 'lg' \| undefined`	`config ?? 'md'`	Density preset — 24 / 28 / 34 px tall.
`stylingMode`	`'filled' \| 'outlined' \| undefined`	`config ?? 'filled'`	`filled` is the tinted surface, `outlined` a hairline frame on a transparent background.
`severity`	`'neutral' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| undefined`	—	Colour; `undefined` is the neutral chip.
`ariaLabel`	`string \| undefined`	—	Accessible name of the toggle when the label is not enough; also names the remove button. A static chip is plain text, so its name is always the label.

Name	Type	Description
`focus()`	`() => void`	Focuses the toggle button, else the remove button.

Name	Type	Description
`selectedChange`	`boolean`	The banana half of `[(selected)]`.
`removed`	`OgeChipRemovedEvent`	The remove button (or Delete / Backspace) was pressed — hide the chip. The chip moves no data.

Name	Type	Description
`OgeChipAvatar`	`{ src?: string; name?: string; initials?: string }`	Leading avatar data of a chip.
`OgeChipRemovedEvent`	`{ event?: Event }`	Payload of `removed`.
`OgeChipSeverity`	`'neutral' \| 'accent' \| 'success' \| 'warning' \| 'danger'`	Chip colour vocabulary.
`OgeChipSize`	`'sm' \| 'md' \| 'lg'`	Density presets.
`OgeChipStylingMode`	`'filled' \| 'outlined'`	Surface presets.

oge-chip-list

Name	Type	Default	Description
`items`	`readonly OgeChipItem[]`	`[]`	The chips, in order. `key` identifies a chip in every event; the list moves no data.
`selectionMode`	`'none' \| 'single' \| 'multiple'`	`'none'`	Selection turns the list into a WAI-ARIA APG listbox (options with `aria-selected`, `aria-multiselectable` for `multiple`). With `none`, removable chips form an APG layout grid and static chips a plain list (`ogeChipListRole`). A second press clears a `single` selection.
`selectedKeys`	`readonly OgeChipKey[] (model)`	`[]`	Keys of the selected chips — two-way.
`removable`	`boolean`	`false`	Default removability of every chip (`OgeChipItem.removable` overrides it). In a listbox the ✕ is an `aria-hidden` glyph and Delete / Backspace (`aria-keyshortcuts`) is the keyboard path; in a grid it is a real button in its own cell.
`disabled`	`boolean`	`false`	Disables every chip (`aria-disabled`): nothing toggles, nothing is removed.
`size`	`'sm' \| 'md' \| 'lg' \| undefined`	`config ?? 'md'`	Density preset — 24 / 28 / 34 px tall.
`stylingMode`	`'filled' \| 'outlined' \| undefined`	`config ?? 'filled'`	`filled` is the tinted surface, `outlined` a hairline frame on a transparent background.
`ariaLabel`	`string \| undefined`	—	Accessible name; a listbox or grid falls back to the `chipList` message, a static list stays unnamed.

Name	Type	Description
`focus(index?)`	`(index?: number) => void`	Focuses the chip at `index` (default: the roving tab stop). A static list ignores it.

Name	Type	Description
`selectedKeysChange`	`OgeChipKey[]`	The banana half of `[(selectedKeys)]`.
`selectionChanged`	`OgeChipSelectionChangedEvent`	A click, Space or Enter changed the selection: `selectedKeys`, `previousKeys`, the toggled `item` and `index`.
`itemClick`	`OgeChipItemClickEvent`	A chip was clicked or activated with Enter / Space.
`itemRemoving`	`OgeChipItemRemovingEvent`	Cancelable: a chip is about to be removed (✕ press, Delete or Backspace). Set `cancel` to keep it.
`itemRemoved`	`OgeChipItemRemovedEvent`	Drop the chip from `items` now. Focus then moves to the chip that took its place (Delete) or the previous one (Backspace); when the last chip goes, focus stays where the app puts it.

Name	Type	Description
`OgeChipItem`	`{ key; label; icon?; avatar?; disabled?; removable?; severity? }`	One chip. `disabled` chips are skipped by the arrows; `removable` overrides the list.
`OgeChipKey`	`string \| number`	Identity of a chip.
`OgeChipSelectionMode`	`'none' \| 'single' \| 'multiple'`	Selection vocabulary.
`OgeChipTemplate`	`directive [ogeChipTemplate]`	Replaces the label of every chip; the list keeps role, focus, check glyph and remove affordance. Context: `OgeChipTemplateContext`.
`OgeChipTemplateContext`	`{ $implicit: OgeChipItem; index; selected; removable; disabled }`	Context of `[ogeChipTemplate]`.
`OgeChipSelectionChangedEvent`	`{ selectedKeys; previousKeys; item; index; event? }`	Payload of `selectionChanged`.
`OgeChipItemClickEvent`	`{ item; index; event }`	Payload of `itemClick`.
`OgeChipItemRemovingEvent`	`{ item; index; event?; cancel: boolean }`	Payload of `itemRemoving`.
`OgeChipItemRemovedEvent`	`{ item; index; event? }`	Payload of `itemRemoved`.

Name	Type	Description
`messages`	`OgeChipMessages`	Every user-facing string: `remove` — the remove button’s name with a `{label}` placeholder (default `Remove {label}`) — and `chipList`, the list’s fallback name (default `Chips`). Translated in every `@oge-ui/locales` pack (`layout.chip`).
`size / stylingMode`	`—`	Defaults for the matching inputs of both components. Pass a function for a live config.

Name	Type	Description
`provideOgeChipConfig`	`(config: OgeChipConfigInput \| (() => OgeChipConfigInput)) => Provider`	Application- or component-scoped defaults; a function makes the config live.
`OGE_CHIP_CONFIG`	`InjectionToken<OgeChipConfig>`	The resolved config both components inject.
`OGE_DEFAULT_CHIP_CONFIG`	`OgeChipConfig`	The defaults (from `@oge-ui/behavior`).
`OGE_DEFAULT_CHIP_MESSAGES`	`OgeChipMessages`	The English catalog.
`OgeChipConfig`	`{ messages: OgeChipMessages; size?; stylingMode? }`	Resolved config shape.
`OgeChipConfigInput`	`Partial<OgeChipConfig> with partial messages`	What the provider accepts.
`OgeChipMessages`	`{ remove: string; chipList: string }`	The chip catalog.