Props
| Prop | Type | Default | Notes |
|---|---|---|---|
expanded | boolean | false | |
disabled | boolean | false | |
without-shadow | boolean | false |
StellarUI
<stellar-expander>
expandable content container with a collapsed preview, optional shadow, and animated open or close transitions.
Properties
Preview
Release Notes
Expandable brief
Launch window confirmed for Tuesday at 09:30. The navigation refresh ships behind a docs-only flag first, then expands to the full shell once the keyboard shortcuts pass review. Open the expander to read the rollout notes and fallback plan.
expandedfalse
disabledfalse
without-shadowfalse
The preview uses explicit docs-only contrast tuning. The shipped component still only owns the collapsed height, shadow edge, trigger, and open or close animation.
Markup
<stellar-expander>
<p>Cats can jump up to five times their own height in a single leap, making them the acrobats of the animal kingdom.</p>
<p>A cat’s whiskers are roughly as wide as the cat’s body, helping them gauge whether they can fit through a tight space.</p>
</stellar-expander>API
Complete props, events, slots, and implementation notes for the shipped expander.
Events
| Event | Source | Notes |
|---|---|---|
before-open | stellar-expander | Cancelable event emitted right before a user-triggered expand. |
open | stellar-expander | Emitted after a user-triggered expand animation finishes. |
before-close | stellar-expander | Cancelable event emitted right before a user-triggered collapse. |
close | stellar-expander | Emitted after a user-triggered collapse animation finishes. |
input / change | stellar-expander | Emitted when the trigger toggles expanded, so docs and apps can round-trip the live state. |
Slots
| Slot | Notes |
|---|---|
| default | The content previewed when collapsed and fully revealed when expanded. |
expand-label | Optional trigger label shown while the expander is collapsed. |
collapse-label | Optional trigger label shown while the expander is expanded. |
Notes
- The public tag is `stellar-expander`, matching the shipped component boundary instead of a the shipped utility recipe.
- The collapsed and expanded trigger labels stay on the `expand-label` and `collapse-label` slots, so the component does not need fake string props just to cover slot fallback text.
- User-triggered toggles emit cancelable `before-open` and `before-close`, then `open` and `close` after the animation finishes. They also emit `input` and `change` so docs and apps can keep `expanded` round-tripped.
- `disabled` only blocks the local trigger. App code can still set `expanded` directly when a flow needs to open or close the content programmatically.
- The collapsed preview edge comes from `--preview-height`, and the optional bottom shadow can be removed with `without-shadow` when the surrounding surface already provides enough separation.