# Disclosure Icon Button

## Essence

Locked disclosure-control subcomponent of `Collapsible Menu Item`.

`Disclosure Icon Button` renders the square icon affordance that expands or collapses child navigation items when a collapsible group label is itself clickable.

## Hook

Use when `Collapsible Menu Item` needs a separate icon control for disclosure because the label navigates to its own page.

## Internal Rules

- Used only inside `Collapsible Menu Item`.
- Represents disclosure state, not general icon-button actions.
- Collapsed state uses `CornerDownRight`.
- Expanded state uses `CornerLeftUp`.
- Hit area is square.
- Size aligns to `Collapsible Menu Item` height.
- Uses `--color-accent`.
- Uses focus behavior from the parent interactive button.
- Browser-native tooltip text is action-based:
  - collapsed: `Expand submenu`;
  - expanded: `Collapse submenu`.

## Use When

- A `Collapsible Menu Item` has `clickable=true`.
- The group label navigates and cannot also be the disclosure toggle.
- Child menu items need an independent expand/collapse control.

## Do Not Use When

- The control is not inside `Collapsible Menu Item`.
- The label itself is the disclosure trigger.
- A general icon button or toolbar action is needed.
- The icon is decorative.

## Edge Cases

- If the group is not clickable, use the normal `Collapsible Menu Item` summary disclosure instead.
- If a future menu needs another disclosure icon set, create a design decision before adding variants.
- If the control has no visible text label, it must keep a browser-native tooltip.
- Disabled state should make the control visibly unavailable and non-interactive.

## Accessibility Notes

- The parent interactive button owns `aria-label`, `aria-expanded`, and tooltip text.
- Tooltip text should describe the action, not the icon shape.
- Focus and focus-visible states must remain visible inside menu layouts.
- Do not use Disclosure Icon Button as a standalone semantic button.

## Related Components And Patterns

- `Collapsible Menu Item`: the only owner of Disclosure Icon Button usage.
- `Icon-only Tooltip Rule`: governs browser-native tooltip behavior for icon-only controls.
- `Menu`: can contain Collapsible Menu Item trees that indirectly use Disclosure Icon Button.
- Lucide `CornerDownRight` and `CornerLeftUp`: icon tokens used for collapsed and expanded states.

## Code Paths

- `packages/design-system/src/components/DisclosureIconButton.astro`
- `packages/design-system/src/components/CollapsibleMenuItem.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`