diff --git a/adev/src/content/examples/aria/tree/src/tree-single-select/app/app.ts b/adev/src/content/examples/aria/tree/src/tree-single-select/app/app.ts
new file mode 100644
index 00000000000..183576f2c24
--- /dev/null
+++ b/adev/src/content/examples/aria/tree/src/tree-single-select/app/app.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.html',
+ styleUrl: './app.css',
+})
+export class App {}
diff --git a/adev/src/content/guide/aria/accordion.md b/adev/src/content/guide/aria/accordion.md
index b2fa21c8bac..42dd071fdc5 100644
--- a/adev/src/content/guide/aria/accordion.md
+++ b/adev/src/content/guide/aria/accordion.md
@@ -1,22 +1,246 @@
-
+## Overview
+
+An accordion organizes related content into expandable and collapsible sections, reducing page scrolling and helping users focus on relevant information. Each section has a trigger button and a content panel. Clicking a trigger toggles the visibility of its associated panel.
+
+
+
+
+
+
+
-
+
-
+This mode works well for FAQs or situations where you want users to focus on one answer at a time.
-### Example with TailwindCSS
+### Multiple expansion mode
-
+Set `[multiExpandable]="true"` to allow multiple panels to be open simultaneously. Users can expand as many panels as needed without closing others.
+
+
+
+
+
+
+This mode is useful for form sections or when users need to compare content across multiple panels.
+
+NOTE: The `multiExpandable` input defaults to `true`. Set it to `false` explicitly if you want single expansion behavior.
+
+### Disabled accordion items
+
+Disable specific triggers using the `disabled` input. Control how disabled items behave during keyboard navigation using the `softDisabled` input on the accordion group.
+
+
+
+
+
+
+When `[softDisabled]="true"` (the default), disabled items can receive focus but cannot be activated. When `[softDisabled]="false"`, disabled items are skipped entirely during keyboard navigation.
+
+### Lazy content rendering
+
+Use the `ngAccordionContent` directive on an `ng-template` to defer rendering content until the panel first expands. This improves performance for accordions with heavy content like images, charts, or complex components.
+
+```angular-html
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+By default, content remains in the DOM after the panel collapses. Set `[preserveContent]="false"` to remove the content from the DOM when the panel closes.
+
+## Showcase
+
+TBD
+
+## APIs
+
+### AccordionGroup
+
+The container directive that manages keyboard navigation and expansion behavior for a group of accordion items.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ----------------- | --------- | ------- | ------------------------------------------------------------------------- |
+| `disabled` | `boolean` | `false` | Disables all triggers in the group |
+| `multiExpandable` | `boolean` | `true` | Whether multiple panels can be expanded simultaneously |
+| `softDisabled` | `boolean` | `true` | When `true`, disabled items are focusable. When `false`, they are skipped |
+| `wrap` | `boolean` | `false` | Whether keyboard navigation wraps from last to first item and vice versa |
+
+#### Methods
+
+| Method | Parameters | Description |
+| ------------- | ---------- | ---------------------------------------------------------------- |
+| `expandAll` | none | Expands all panels (only works when `multiExpandable` is `true`) |
+| `collapseAll` | none | Collapses all panels |
+
+### AccordionTrigger
+
+The directive applied to the button element that toggles panel visibility.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------- | --------- | ------- | -------------------------------------------------------------- |
+| `id` | `string` | auto | Unique identifier for the trigger |
+| `panelId` | `string` | — | **Required.** Must match the `panelId` of the associated panel |
+| `disabled` | `boolean` | `false` | Disables this trigger |
+| `expanded` | `boolean` | `false` | Whether the panel is expanded (supports two-way binding) |
+
+#### Signals
+
+| Property | Type | Description |
+| -------- | ----------------- | --------------------------------------- |
+| `active` | `Signal` | Whether the trigger currently has focus |
+
+#### Methods
+
+| Method | Parameters | Description |
+| ---------- | ---------- | --------------------------------- |
+| `expand` | none | Expands the associated panel |
+| `collapse` | none | Collapses the associated panel |
+| `toggle` | none | Toggles the panel expansion state |
+
+### AccordionPanel
+
+The directive applied to the element containing the collapsible content.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ----------------- | --------- | ------- | ---------------------------------------------------------------- |
+| `id` | `string` | auto | Unique identifier for the panel |
+| `panelId` | `string` | — | **Required.** Must match the `panelId` of the associated trigger |
+| `preserveContent` | `boolean` | `true` | Whether to keep content in DOM after panel collapses |
+
+#### Signals
+
+| Property | Type | Description |
+| --------- | ----------------- | --------------------------------------- |
+| `visible` | `Signal` | Whether the panel is currently expanded |
+
+#### Methods
+
+| Method | Parameters | Description |
+| ---------- | ---------- | --------------------------- |
+| `expand` | none | Expands this panel |
+| `collapse` | none | Collapses this panel |
+| `toggle` | none | Toggles the expansion state |
+
+### AccordionContent
+
+The structural directive applied to an `ng-template` inside an accordion panel to enable lazy rendering.
+
+This directive has no inputs, outputs, or methods. Apply it to an `ng-template` element:
+
+```angular-html
+
+
+
+
+
+```
+
+## Styling
+
+Angular automatically applies attributes to accordion elements that you can use in your CSS selectors.
+
+The accordion group receives the `ng-accordion-group` attribute:
+
+```css
+[ng-accordion-group] {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+```
+
+Triggers receive the `ng-accordion-trigger` attribute and a `data-active` attribute when focused:
+
+```css
+[ng-accordion-trigger] {
+ cursor: pointer;
+ background: transparent;
+ border: none;
+ padding: 1rem;
+ width: 100%;
+ text-align: left;
+ font-weight: 500;
+}
+
+[ng-accordion-trigger][data-active] {
+ background: var(--focus-background);
+ outline: 2px solid var(--focus-color);
+}
+
+[ng-accordion-trigger][aria-expanded="true"] {
+ font-weight: 600;
+}
+```
+
+Panels receive the `ng-accordion-panel` attribute and an `inert` attribute when collapsed:
+
+```css
+[ng-accordion-panel]:not([inert]) {
+ padding: 1rem;
+ border-top: 1px solid var(--border-color);
+}
+```
+
+TIP: Use the `:not([inert])` selector to style expanded panels, as Angular automatically adds the `inert` attribute to collapsed panels to hide them from assistive technologies.
diff --git a/adev/src/content/guide/aria/grid.md b/adev/src/content/guide/aria/grid.md
index 8f597b050cd..b21baaf9bdd 100644
--- a/adev/src/content/guide/aria/grid.md
+++ b/adev/src/content/guide/aria/grid.md
@@ -1,22 +1,219 @@
-
+## Overview
+
+A grid enables users to navigate two-dimensional data or interactive elements using directional arrow keys, Home, End, and Page Up/Down. Grids work for data tables, calendars, spreadsheets, and layout patterns that group related interactive elements.
+
+
+
+
+
+
+
-
+
-
+Apply the `ngGrid` directive to the table element, `ngGridRow` to each row, and `ngGridCell` to each cell.
-### Example with TailwindCSS
+### Calendar grid
-
+Calendars are a common use case for grids. This example shows a month view where users navigate dates using arrow keys.
+
+
+
+
+
+
+Users can activate a date by pressing Enter or Space when focused on a cell.
+
+### Layout grid
+
+Use a layout grid to group interactive elements and reduce tab stops. This example shows a grid of pill buttons.
+
+
+
+
+
+
+Instead of tabbing through each button, users navigate with arrow keys and only one button receives tab focus.
+
+### Selection and focus modes
+
+Enable selection with `[enableSelection]="true"` and configure how focus and selection interact.
+
+```angular-html
+
+
+
Cell 1
+
Cell 2
+
+
+```
+
+**Selection modes:**
+
+- `follow`: Focused cell is automatically selected
+- `explicit`: Users select cells with Space or click
+
+**Focus modes:**
+
+- `roving`: Focus moves to cells using `tabindex` (better for simple grids)
+- `activedescendant`: Focus stays on grid container, `aria-activedescendant` indicates active cell (better for virtual scrolling)
+
+## Showcase
+
+TBD
+
+## APIs
+
+### Grid
+
+The container directive that provides keyboard navigation and focus management for rows and cells.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------------------- | ------------------------------------ | ---------- | ------------------------------------------------------------- |
+| `enableSelection` | `boolean` | `false` | Whether selection is enabled for the grid |
+| `disabled` | `boolean` | `false` | Disables the entire grid |
+| `softDisabled` | `boolean` | `true` | When `true`, disabled cells are focusable but not interactive |
+| `focusMode` | `'roving' \| 'activedescendant'` | `'roving'` | Focus strategy used by the grid |
+| `rowWrap` | `'continuous' \| 'loop' \| 'nowrap'` | `'loop'` | Navigation wrapping behavior along rows |
+| `colWrap` | `'continuous' \| 'loop' \| 'nowrap'` | `'loop'` | Navigation wrapping behavior along columns |
+| `multi` | `boolean` | `false` | Whether multiple cells can be selected |
+| `selectionMode` | `'follow' \| 'explicit'` | `'follow'` | Whether selection follows focus or requires explicit action |
+| `enableRangeSelection` | `boolean` | `false` | Enable range selections with modifier keys or dragging |
+
+### GridRow
+
+Represents a row within a grid and serves as a container for grid cells.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------- | -------- | ------- | ------------------------------------- |
+| `rowIndex` | `number` | auto | The index of this row within the grid |
+
+### GridCell
+
+Represents an individual cell within a grid row.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ------------- | ---------------------------- | -------------- | ------------------------------------------------------- |
+| `id` | `string` | auto | Unique identifier for the cell |
+| `role` | `string` | `'gridcell'` | Cell role: `gridcell`, `columnheader`, or `rowheader` |
+| `disabled` | `boolean` | `false` | Disables this cell |
+| `selected` | `boolean` | `false` | Whether the cell is selected (supports two-way binding) |
+| `selectable` | `boolean` | `true` | Whether the cell can be selected |
+| `rowSpan` | `number` | — | Number of rows the cell spans |
+| `colSpan` | `number` | — | Number of columns the cell spans |
+| `rowIndex` | `number` | — | Row index of the cell |
+| `colIndex` | `number` | — | Column index of the cell |
+| `orientation` | `'vertical' \| 'horizontal'` | `'horizontal'` | Orientation for widgets within the cell |
+| `wrap` | `boolean` | `true` | Whether widget navigation wraps within the cell |
+
+#### Signals
+
+| Property | Type | Description |
+| -------- | ----------------- | ------------------------------------ |
+| `active` | `Signal` | Whether the cell currently has focus |
+
+## Styling
+
+Angular automatically applies attributes to grid elements that you can use in your CSS selectors.
+
+The grid receives the `ng-grid` attribute:
+
+```css
+[ng-grid] {
+ border-collapse: collapse;
+ width: 100%;
+}
+```
+
+Rows receive the `ng-grid-row` attribute:
+
+```css
+[ng-grid-row] {
+ border-bottom: 1px solid #ddd;
+}
+```
+
+Cells receive the `ng-grid-cell` attribute and a `data-active` attribute when focused:
+
+```css
+[ng-grid-cell] {
+ padding: 0.75rem;
+ border: 1px solid #ddd;
+}
+
+[ng-grid-cell][data-active] {
+ outline: 2px solid var(--focus-color);
+ outline-offset: -2px;
+}
+
+[ng-grid-cell][aria-selected="true"] {
+ background: var(--selected-background);
+}
+```
+
+Style column and row headers based on their role:
+
+```css
+[ng-grid-cell][role="columnheader"],
+[ng-grid-cell][role="rowheader"] {
+ font-weight: 600;
+ background: var(--header-background);
+}
+```
+
+TIP: Use the `[data-active]` selector to style focused cells, as Angular automatically adds this attribute when a cell has focus.
diff --git a/adev/src/content/guide/aria/menu.md b/adev/src/content/guide/aria/menu.md
index 8cc500b036b..5532aff5a29 100644
--- a/adev/src/content/guide/aria/menu.md
+++ b/adev/src/content/guide/aria/menu.md
@@ -1,22 +1,249 @@
-
-
-
-
-
+## Overview
-
+
+
+
+
-### Example with TailwindCSS
+## Usage
-
+Menus work well for presenting lists of actions or commands that users can choose from.
+
+**Use menus when:**
+
+- Building application command menus (File, Edit, View)
+- Creating context menus (right-click actions)
+- Showing dropdown action lists
+- Implementing toolbar dropdowns
+- Organizing settings or options
+
+**Avoid menus when:**
+
+- Building site navigation (use navigation landmarks instead)
+- Creating form selects (use the [Select](guide/aria/select) component)
+- Switching between content panels (use [Tabs](guide/aria/tabs))
+- Showing collapsible content (use [Accordion](guide/aria/accordion))
+
+## Features
+
+- **Keyboard navigation** - Arrow keys, Home/End, and character search for efficient navigation
+- **Submenus** - Nested menu support with automatic positioning
+- **Menu types** - Standalone menus, triggered menus, and menubars
+- **Checkboxes and radios** - Toggle and selection menu items
+- **Disabled items** - Soft or hard disabled states with focus management
+- **Auto-close behavior** - Configurable close on selection
+- **RTL support** - Right-to-left language navigation
+
+## Examples
+
+### Menu with trigger
+
+Create a dropdown menu by pairing a trigger button with a menu. The trigger opens and closes the menu.
+
+
+
+
+
+
+The menu automatically closes when a user selects an item or presses Escape.
+
+### Menubar
+
+A menubar provides persistent access to multiple menus, commonly used in application toolbars.
+
+
+
+
+
+
+Users navigate between top-level menus with arrow keys and open menus with Enter or by hovering.
+
+### Context menu
+
+Context menus appear at the cursor position when users right-click an element.
+
+
+
+
+
+
+Position the menu using the `contextmenu` event coordinates.
+
+### Standalone menu
+
+A standalone menu doesn't require a trigger and remains visible in the interface.
+
+
+
+
+
+
+Standalone menus work well for always-visible action lists or navigation.
+
+### Disabled menu items
+
+Disable specific menu items using the `disabled` input. Control focus behavior with `softDisabled`.
+
+
+
+
+
+
+When `[softDisabled]="true"`, disabled items can receive focus but cannot be activated. When `[softDisabled]="false"`, disabled items are skipped during keyboard navigation.
+
+## Showcase
+
+TBD
+
+## APIs
+
+### Menu
+
+The container directive for menu items.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| -------------- | --------- | ------- | ------------------------------------------------------------- |
+| `disabled` | `boolean` | `false` | Disables all items in the menu |
+| `wrap` | `boolean` | `true` | Whether keyboard navigation wraps at edges |
+| `softDisabled` | `boolean` | `true` | When `true`, disabled items are focusable but not interactive |
+
+#### Methods
+
+| Method | Parameters | Description |
+| ---------------- | ---------- | ---------------------------------- |
+| `close` | none | Closes the menu |
+| `focusFirstItem` | none | Moves focus to the first menu item |
+
+### MenuBar
+
+A horizontal container for multiple menus.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| -------------- | --------- | ------- | ------------------------------------------------------------- |
+| `disabled` | `boolean` | `false` | Disables the entire menubar |
+| `wrap` | `boolean` | `true` | Whether keyboard navigation wraps at edges |
+| `softDisabled` | `boolean` | `true` | When `true`, disabled items are focusable but not interactive |
+
+### MenuItem
+
+An individual item within a menu.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ------------ | --------- | ------- | ---------------------------------------------------- |
+| `value` | `any` | — | **Required.** Value for this item |
+| `disabled` | `boolean` | `false` | Disables this menu item |
+| `submenu` | `Menu` | — | Reference to a submenu |
+| `searchTerm` | `string` | `''` | Search term for typeahead (supports two-way binding) |
+
+#### Signals
+
+| Property | Type | Description |
+| ---------- | ----------------- | ------------------------------------------ |
+| `active` | `Signal` | Whether the item currently has focus |
+| `expanded` | `Signal` | Whether the submenu is expanded |
+| `hasPopup` | `Signal` | Whether the item has an associated submenu |
+
+NOTE: MenuItem does not expose public methods. Use the `submenu` input to associate submenus with menu items.
+
+### MenuTrigger
+
+A button or element that opens a menu.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| -------------- | --------- | ------- | ------------------------------------------ |
+| `menu` | `Menu` | — | **Required.** The menu to trigger |
+| `disabled` | `boolean` | `false` | Disables the trigger |
+| `softDisabled` | `boolean` | `true` | When `true`, disabled trigger is focusable |
+
+#### Signals
+
+| Property | Type | Description |
+| ---------- | ----------------- | ------------------------------------------ |
+| `expanded` | `Signal` | Whether the menu is currently open |
+| `hasPopup` | `Signal` | Whether the trigger has an associated menu |
+
+#### Methods
+
+| Method | Parameters | Description |
+| -------- | ---------- | ---------------------------- |
+| `open` | none | Opens the menu |
+| `close` | none | Closes the menu |
+| `toggle` | none | Toggles the menu open/closed |
+
+## Styling
+
+Angular automatically applies attributes to menu elements that you can use in your CSS selectors.
+
+The menu container receives the `ng-menu` attribute:
+
+```css
+[ng-menu] {
+ background: white;
+ border: 1px solid #ccc;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ padding: 0.5rem 0;
+ min-width: 200px;
+}
+```
+
+Menu items receive the `ng-menu-item` attribute and a `data-active` attribute when focused:
+
+```css
+[ng-menu-item] {
+ padding: 0.5rem 1rem;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+[ng-menu-item][data-active] {
+ background: var(--hover-background);
+}
+
+[ng-menu-item][aria-disabled="true"] {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+```
+
+Style menu items with submenus using the `aria-haspopup` attribute:
+
+```css
+[ng-menu-item][aria-haspopup="menu"]::after {
+ content: '▶';
+ margin-left: auto;
+}
+```
+
+Menubars receive the `ng-menu-bar` attribute:
+
+```css
+[ng-menu-bar] {
+ display: flex;
+ gap: 0.5rem;
+ background: var(--toolbar-background);
+ padding: 0.5rem;
+}
+```
+
+TIP: Use `[data-active]` to style focused menu items and `[aria-expanded="true"]` to style open menu triggers.
diff --git a/adev/src/content/guide/aria/tabs.md b/adev/src/content/guide/aria/tabs.md
index 1919556952a..9722815cfa9 100644
--- a/adev/src/content/guide/aria/tabs.md
+++ b/adev/src/content/guide/aria/tabs.md
@@ -1,22 +1,252 @@
-
+## Overview
+
+Tabs display layered content sections where only one panel is visible at a time. Users switch between panels by clicking tab buttons or using arrow keys to navigate the tab list.
+
+
+
+
+
+
+
-
+
-
+Set `[selectionMode]="'follow'"` on the tab list to enable this behavior.
-### Example with TailwindCSS
+### Manual activation
-
+With manual activation, arrow keys move focus between tabs without changing the selected tab. Users press Space or Enter to activate the focused tab.
+
+
+
+
+
+
+Use `[selectionMode]="'explicit'"` for heavy content panels to avoid unnecessary rendering.
+
+### Vertical tabs
+
+Arrange tabs vertically for interfaces like settings panels or navigation sidebars.
+
+
+
+
+
+
+Set `[orientation]="'vertical'"` on the tab list. Navigation changes to Up/Down arrow keys.
+
+### Lazy content rendering
+
+Use the `ngTabContent` directive on an `ng-template` to defer rendering tab panels until they're first shown.
+
+```angular-html
+
+
+
Tab 1
+
Tab 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+By default, content remains in the DOM after the panel is hidden. Set `[preserveContent]="false"` to remove content when the panel is deactivated.
+
+### Disabled tabs
+
+Disable specific tabs to prevent user interaction. Control whether disabled tabs can receive keyboard focus.
+
+
+
+
+
+
+When `[softDisabled]="true"` on the tab list, disabled tabs can receive focus but cannot be activated. When `[softDisabled]="false"`, disabled tabs are skipped during keyboard navigation.
+
+## Showcase
+
+TBD
+
+## APIs
+
+### Tabs
+
+The container directive that coordinates tab lists and panels.
+
+This directive has no inputs or outputs. It serves as the root container for `ngTabList`, `ngTab`, and `ngTabPanel` directives.
+
+### TabList
+
+The container for tab buttons that manages selection and keyboard navigation.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| --------------- | ---------------------------- | -------------- | ------------------------------------------------------------------ |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Tab list layout direction |
+| `wrap` | `boolean` | `false` | Whether keyboard navigation wraps from last to first tab |
+| `softDisabled` | `boolean` | `true` | When `true`, disabled tabs are focusable but not activatable |
+| `selectionMode` | `'follow' \| 'explicit'` | `'follow'` | Whether tabs activate on focus or require explicit activation |
+| `selectedTab` | `any` | — | The value of the currently selected tab (supports two-way binding) |
+
+### Tab
+
+An individual tab button.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------- | --------- | ------- | --------------------------------------- |
+| `value` | `any` | — | **Required.** Unique value for this tab |
+| `disabled` | `boolean` | `false` | Disables this tab |
+
+#### Signals
+
+| Property | Type | Description |
+| ---------- | ----------------- | ------------------------------------- |
+| `selected` | `Signal` | Whether the tab is currently selected |
+| `active` | `Signal` | Whether the tab currently has focus |
+
+### TabPanel
+
+The content panel associated with a tab.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ----------------- | --------- | ------- | ---------------------------------------------------------- |
+| `value` | `any` | — | **Required.** Must match the `value` of the associated tab |
+| `preserveContent` | `boolean` | `true` | Whether to keep panel content in DOM after deactivation |
+
+#### Signals
+
+| Property | Type | Description |
+| --------- | ----------------- | -------------------------------------- |
+| `visible` | `Signal` | Whether the panel is currently visible |
+
+### TabContent
+
+A structural directive for lazy rendering tab panel content.
+
+This directive has no inputs, outputs, or methods. Apply it to an `ng-template` element inside a tab panel:
+
+```angular-html
+
+
+
+
+
+```
+
+## Styling
+
+Angular automatically applies attributes to tab elements that you can use in your CSS selectors.
+
+The tab list receives the `ng-tab-list` attribute:
+
+```css
+[ng-tab-list] {
+ display: flex;
+ gap: 0.5rem;
+ border-bottom: 2px solid #ddd;
+}
+
+[ng-tab-list][aria-orientation="vertical"] {
+ flex-direction: column;
+ border-bottom: none;
+ border-right: 2px solid #ddd;
+}
+```
+
+Tabs receive the `ng-tab` attribute with `data-active` when focused and `aria-selected` when selected:
+
+```css
+[ng-tab] {
+ padding: 0.75rem 1.5rem;
+ cursor: pointer;
+ border: 1px solid transparent;
+ background: transparent;
+}
+
+[ng-tab][data-active] {
+ outline: 2px solid var(--focus-color);
+}
+
+[ng-tab][aria-selected="true"] {
+ border-color: var(--primary-color);
+ border-bottom-color: white;
+ background: white;
+ font-weight: 600;
+}
+```
+
+Tab panels receive the `ng-tab-panel` attribute:
+
+```css
+[ng-tab-panel] {
+ padding: 1.5rem;
+}
+
+[ng-tab-panel][hidden] {
+ display: none;
+}
+```
+
+TIP: Use `[data-active]` to style the focused tab and `[aria-selected="true"]` to style the selected tab. These are often the same tab but can differ in manual activation mode.
diff --git a/adev/src/content/guide/aria/tree.md b/adev/src/content/guide/aria/tree.md
index ca5d76542c2..60253d4cd57 100644
--- a/adev/src/content/guide/aria/tree.md
+++ b/adev/src/content/guide/aria/tree.md
@@ -1,22 +1,241 @@
-
-
-
-
-
+## Overview
-
+
+
+
+
-### Example with TailwindCSS
+## Usage
-
+Trees work well for displaying hierarchical data where users need to navigate through nested structures.
+
+**Use trees when:**
+
+- Building file system navigation
+- Showing folder and document hierarchies
+- Creating nested menu structures
+- Displaying organization charts
+- Browsing hierarchical data
+- Implementing site navigation with nested sections
+
+**Avoid trees when:**
+
+- Displaying flat lists (use [Listbox](guide/aria/listbox) instead)
+- Showing data tables (use [Grid](guide/aria/grid) instead)
+- Creating simple dropdowns (use [Select](guide/aria/select) instead)
+- Building breadcrumb navigation (use breadcrumb patterns)
+
+## Features
+
+- **Hierarchical navigation** - Nested tree structure with expand and collapse functionality
+- **Selection modes** - Single or multi-selection with explicit or follow-focus behavior
+- **Selection follows focus** - Optional automatic selection when focus changes
+- **Keyboard navigation** - Arrow keys, Home, End, and type-ahead search
+- **Expand/collapse** - Right/Left arrows or Enter to toggle parent nodes
+- **Disabled items** - Disable specific nodes with focus management
+- **Focus modes** - Roving tabindex or activedescendant focus strategies
+- **RTL support** - Right-to-left language navigation
+
+## Examples
+
+### Navigation tree
+
+Use a tree for navigation where clicking items triggers actions rather than selecting them.
+
+
+
+
+
+
+Set `[nav]="true"` to enable navigation mode. This uses `aria-current` to indicate the current page instead of selection.
+
+### Single selection
+
+Enable single selection for scenarios where users choose one item from the tree.
+
+
+
+
+
+
+Leave `[multi]="false"` (the default) for single selection. Users press Space to select the focused item.
+
+### Multi-selection
+
+Allow users to select multiple items from the tree.
+
+
+
+
+
+
+Set `[multi]="true"` on the tree. Users select items individually with Space or select ranges with Shift+Arrow keys.
+
+### Selection follows focus
+
+When selection follows focus, the focused item is automatically selected. This simplifies interaction for navigation scenarios.
+
+
+
+
+
+
+Set `[selectionMode]="'follow'"` on the tree. Selection automatically updates as users navigate with arrow keys.
+
+### Disabled tree items
+
+Disable specific tree nodes to prevent interaction. Control whether disabled items can receive focus.
+
+
+
+
+
+
+When `[softDisabled]="true"` on the tree, disabled items can receive focus but cannot be activated or selected. When `[softDisabled]="false"`, disabled items are skipped during keyboard navigation.
+
+## Showcase
+
+TBD
+
+## APIs
+
+### Tree
+
+The container directive that manages hierarchical navigation and selection.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| --------------- | -------------------------------- | ------------ | ------------------------------------------------------------- |
+| `disabled` | `boolean` | `false` | Disables the entire tree |
+| `softDisabled` | `boolean` | `true` | When `true`, disabled items are focusable but not interactive |
+| `multi` | `boolean` | `false` | Whether multiple items can be selected |
+| `selectionMode` | `'explicit' \| 'follow'` | `'explicit'` | Whether selection requires explicit action or follows focus |
+| `nav` | `boolean` | `false` | Whether the tree is in navigation mode (uses `aria-current`) |
+| `wrap` | `boolean` | `true` | Whether keyboard navigation wraps from last to first item |
+| `focusMode` | `'roving' \| 'activedescendant'` | `'roving'` | Focus strategy used by the tree |
+| `values` | `any[]` | `[]` | Selected item values (supports two-way binding) |
+
+#### Methods
+
+| Method | Parameters | Description |
+| ---------------- | ---------- | --------------------------------------------- |
+| `expandAll` | none | Expands all tree nodes |
+| `collapseAll` | none | Collapses all tree nodes |
+| `selectAll` | none | Selects all items (only in multi-select mode) |
+| `clearSelection` | none | Clears all selection |
+
+### TreeItem
+
+An individual node in the tree that can contain child nodes.
+
+#### Inputs
+
+| Property | Type | Default | Description |
+| ---------- | --------- | ------- | ------------------------------------------------------- |
+| `value` | `any` | — | **Required.** Unique value for this tree item |
+| `disabled` | `boolean` | `false` | Disables this item |
+| `expanded` | `boolean` | `false` | Whether the node is expanded (supports two-way binding) |
+
+#### Signals
+
+| Property | Type | Description |
+| ------------- | ----------------- | ------------------------------------ |
+| `selected` | `Signal` | Whether the item is selected |
+| `active` | `Signal` | Whether the item currently has focus |
+| `hasChildren` | `Signal` | Whether the item has child nodes |
+
+#### Methods
+
+| Method | Parameters | Description |
+| ---------- | ---------- | --------------------------- |
+| `expand` | none | Expands this node |
+| `collapse` | none | Collapses this node |
+| `toggle` | none | Toggles the expansion state |
+
+### TreeGroup
+
+A container for child tree items.
+
+This directive has no inputs, outputs, or methods. It serves as a container to organize child `ngTreeItem` elements:
+
+```angular-html
+
+ Parent Item
+
+
Child 1
+
Child 2
+
+
+```
+
+## Styling
+
+Angular automatically applies attributes to tree elements that you can use in your CSS selectors.
+
+The tree receives the `ng-tree` attribute:
+
+```css
+[ng-tree] {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+```
+
+Tree items receive the `ng-tree-item` attribute with `data-active` when focused and `aria-selected` when selected:
+
+```css
+[ng-tree-item] {
+ padding: 0.5rem;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+[ng-tree-item][data-active] {
+ outline: 2px solid var(--focus-color);
+}
+
+[ng-tree-item][aria-selected="true"] {
+ background: var(--selected-background);
+ font-weight: 600;
+}
+```
+
+Tree groups receive the `ng-tree-group` attribute for indenting child items:
+
+```css
+[ng-tree-group] {
+ padding-left: 1.5rem;
+ list-style: none;
+}
+```
+
+Style expandable items using the `aria-expanded` attribute:
+
+```css
+/* Expand/collapse indicator */
+[ng-tree-item][aria-expanded]::before {
+ content: '▶';
+ transition: transform 0.2s;
+}
+
+[ng-tree-item][aria-expanded="true"]::before {
+ transform: rotate(90deg);
+}
+```
+
+TIP: Use `[aria-expanded]` to determine if an item is expandable and style its expand/collapse indicator accordingly.
+