Accordion Item

shadow

wje-accordion-item je samotná interaktívna položka vnútri wje-accordion. Práve tu sa rieši klik na hlavičku, prepínanie stavov, ARIA väzby medzi headline a obsahom, fallback toggle ikona aj eventy pri otvorení a zatvorení.

Základné použitie v kontexte skupiny

Ukážka nižšie používa jednu položku vo vnútri wje-accordion, aby bolo jasné, kam patria sloty headline, description a content. Headline môže okrem textu obsahovať aj ďalšie pomocné alebo akčné komponenty.

Tlačidlo v slote content je pri zbalení inertné a po rozbalení sa automaticky aktivuje.

Na čo sa oplatí myslieť

• Slot headline tvorí klikateľnú hlavičku. Komponent jej po vyrenderovaní nastaví role="button", tabindex="0", aria-controls a aria-expanded.
• Slot description je doplnkový text v hlavičke a content drží rozbaľovaný panel.
• Slot toggle je voliteľný. Ak ho nevyplníte, komponent zobrazí fallback wje-icon s chevrónom.
• Eventy wje-accordion-item:open a wje-accordion-item:close bubblujú na nadradený wje-accordion.
• Programové otvorenie a zatvorenie riešia verejné metódy expand() a collapse().
• Farebné varianty nastavujete cez atribút color; detailný vizuál sa ladí cez shadow parts a CSS custom properties.

Prístupnosť

• Headline je ovládateľný klávesami Enter a Space.
• Obsah panelu má role="region" a je previazaný s headline cez aria-labelledby.
• Zbalený obsah je inertný, takže ho nie je možné zamerať ani ovládať; pri rozbalení ho komponent automaticky aktivuje.
• Ak do headline vkladáte viac interaktívnych prvkov, otestujte, či sa ich ovládanie „nebije“ s klikom na celú hlavičku.

Odporúčané postupy

• Slot headline používajte na jasný názov sekcie, nie na priveľmi dlhý odsek textu.
• Slot description držte stručný; detailné vysvetlenie presuňte skôr do content.
• Ak potrebujete vlastný toggle vzhľad, vyplňte slot toggle, ale zachovajte používateľovi zrozumiteľnú affordance, že ide o rozbaľovací prvok.
• Pri programovom otváraní a zatváraní myslite na konzistenciu so stavom nadradeného wje-accordion.
• Na obsah slotu content nenastavujte podľa open/close eventov vlastné hidden ani inert. Komponent riadi jeho dostupnosť aj animáciu automaticky.
• Vonkajšie odsadenie obsahu nastavíte shorthand tokenom --wje-accordion-content-margin; predvolená hodnota používa globálny token --wje-spacing-small pre pravú, spodnú a ľavú stranu a bez neho zachová fallback 0.75rem.

wje-accordion-item {
  --wje-accordion-content-margin: 0 var(--wje-spacing-medium) var(--wje-spacing-medium);
}

Atribúty a vlastnosti

color

Popis	Určuje významový farebný variant obalu accordion položky.
Atribút	color
Typ	string
Predvolené	-

Udalosti

Názov	Popis
wje-accordion-item:open	Vyvolá sa pri rozbalení accordion položky.
wje-accordion-item:close	Vyvolá sa pri zbalení accordion položky.

Metódy

collapse

Popis	Zbalí aktuálnu accordion položku a aktualizuje jej ARIA expanded stav.
Signatúra	() => void

expand

Popis	Rozbalí aktuálnu accordion položku a aktualizuje jej ARIA expanded stav.
Signatúra	() => void

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
headline	Štýluje klikateľnú oblasť hlavičky.
description	Štýluje oblasť doplnkového popisu.
toggle	Štýluje toggle slot a oblasť markera.
content	Štýluje rozbaľovaný obsahový panel.

CSS vlastné premenné

Názov	Popis
--wje-accordion-background	Vlastná CSS premenná, ktorá riadi farbu pozadia zbalenej accordion položky.
--wje-accordion-border	Vlastná CSS premenná, ktorá riadi farbu okraja zbalenej accordion položky.
--wje-accordion-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov accordion položky.
--wje-accordion-background-hover	Vlastná CSS premenná, ktorá riadi farbu pozadia položky pri hover stave.
--wje-accordion-border-hover	Vlastná CSS premenná, ktorá riadi farbu okraja položky pri hover stave.
--wje-accordion-background-expanded	Vlastná CSS premenná, ktorá riadi farbu pozadia rozbalenej accordion položky.
--wje-accordion-border-expanded	Vlastná CSS premenná, ktorá riadi farbu okraja rozbalenej accordion položky.
--wje-accordion-headline-color	Vlastná CSS premenná, ktorá riadi farbu textu hlavičky.
--wje-accordion-content-color	Vlastná CSS premenná, ktorá riadi farbu textu rozbaľovaného obsahu.
--wje-accordion-content-margin	Vlastná CSS premenná, ktorá riadi accordion content margin.
--wje-accordion-marker-rotate	Vlastná CSS premenná, ktorá riadi rotáciu toggle markera.

Sloty

Názov	Popis
headline	Slot pre hlavný klikateľný obsah hlavičky.
description	Slot pre doplnkový popisný text.
toggle	Slot pre obsah prepínača.
content	Slot pre hlavný alebo rozbaľovaný obsah tela komponentu.