/*
 * TreeView — functional-only skeleton of styling hooks
 * ====================================================
 *
 * This file is deliberately EMPTY of cosmetics. It exists as a documented
 * skeleton: every class the component produces and every state/ARIA selector it
 * toggles is listed below as a (mostly empty) rule block, so a design system can
 * see exactly which hooks exist and drop its own values in. There is no
 * indentation, no list-marker handling, no expand/collapse glyphs, no selection
 * highlight, no colours or fonts here — the component falls back entirely to the
 * browser's default rendering of nested lists.
 *
 * Why empty is enough:
 *  - Collapsed groups are hidden by JS setting the native `hidden` attribute;
 *    the UA stylesheet's `[hidden] { display: none }` does the hiding.
 *  - The keyboard focus indicator is the browser's default focus ring on the
 *    focusable treeitem.
 *  - Expansion and selection are ARIA state on the treeitem, applied by JS;
 *    none of it depends on CSS.
 * So removing the cosmetic CSS cannot break functionality.
 *
 * IMPORTANT — do not reintroduce these:
 *  - Never set `display` on `.treeview__group`. Collapsed groups are hidden via
 *    the native `hidden` attribute; a `display` rule here would override
 *    `[hidden]` and break hiding. `[hidden] { display: none }` from the UA
 *    stylesheet must always win.
 *  - Never remove the focus indicator (e.g. `outline: 0` / `outline: none` on
 *    the treeitem or its `:focus-visible`). The focusable element is the
 *    `.treeview__item`, not the label; the browser default provides its focus
 *    ring and suppressing it would make keyboard use inaccessible.
 */

/* ---------------------------------------------------------------------------
 * Element hooks — one placeholder per class the component emits.
 * ------------------------------------------------------------------------- */

.treeview {
}

.treeview__group {
}

.treeview__item {
}

.treeview__label {
}

/* ---------------------------------------------------------------------------
 * State / ARIA hooks — these mirror the attributes the JS toggles, so styling
 * always matches what assistive tech announces.
 * ------------------------------------------------------------------------- */

/* Expanded parent node. */
.treeview__item[aria-expanded='true'] {
}

/* Collapsed parent node. */
.treeview__item[aria-expanded='false'] {
}

/* Selected node. */
.treeview__item[aria-selected='true'] {
}

/* Unselected node. */
.treeview__item[aria-selected='false'] {
}

/* Keyboard focus lands on the treeitem, not the label. Leave empty so the
   browser default focus ring stands; never suppress it. */
.treeview__item:focus-visible {
}

/* Collapsed child group. Hidden by the native `hidden` attribute — never add a
   `display` here (see header note). */
.treeview__group[hidden] {
}